5

I'm currently using (it's working fine)

PrimeFaces.widget.OverlayPanel.prototype._old_init = PrimeFaces.widget.OverlayPanel.prototype.init;
PrimeFaces.widget.OverlayPanel.prototype.init = function(cfg) 
{
    this._old_init(cfg);
    this.align();
}

but I'd like to use something more readable and 'jQuery-ish' like this completely invented unrealistic code:

PrimeFaces.widget.OverlayPanel.patch(
{
    init: function(cfg) 
    {
        super.init(cfg);
        this.align();
    },

    show: function()
    {
        console.log('blah blah blah');
        super.show();
    }
});

I tried PrimeFaces.widget.Xxx.extend({...}) but in this case I have no access to super methods.

Please, keep in mind that I'm totally dumb with Javascript

Thanks

5
  • What do you mean with: "all widgets of that kind"? All overlaypanels or all other types to? If it is the former, just include it in the template of your page
    – Kukeltje
    Apr 13, 2016 at 19:35
  • You are right, it's a nonsense - removed from question, It's sufficient to include the script after widget declaration and before instantiation by PrimeFaces.cw(...) Apr 14, 2016 at 0:22
  • Ok, clear. I tried the 'extend' too once, but did not succeed either. Often more beautiful code is better, but in this case, I'd not spend the time to look further, but use it the way it works (it is not that ugly ;-))
    – Kukeltje
    Apr 14, 2016 at 7:40
  • Definitely. But, you know, my question and my own answer are here since 2016. Your link's answer is from 2017. So, I think I'll stick to my own accepted answer. No resurrections. Feb 1 at 15:00

2 Answers 2

8

I've achieved it:

if(PrimeFaces.widget.OverlayPanel)
{
    PrimeFaces.widget.OverlayPanel = PrimeFaces.widget.OverlayPanel.extend(
    {
        init: function(cfg) 
        {
            this._super(cfg);
            this.align();
        },

        show: function()
        {
            console.log('blah blah blah');
            this._super();
        }
    });
};

this is stored inside

  • app
    • resources
      • js
        • pf-patches.js

and it's used in global template:

<!DOCTYPE html>
<html lang="#{userBean.locale.language}" xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:cc="http://xmlns.jcp.org/jsf/composite"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
    xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:o="http://omnifaces.org/ui" xmlns:of="http://omnifaces.org/functions"
    xmlns:s="http://shapeitalia.com/jsf2" xmlns:sc="http://xmlns.jcp.org/jsf/composite/shape"
    xmlns:e="http://java.sun.com/jsf/composite/cc" xmlns:et="http://shapeitalia.com/edea2"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<f:view locale="#{userBean.locale}" contentType="text/html">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
            <title><ui:insert name="title">#{navigatorBean.viewTitle}</ui:insert></title>
            <link rel="shortcut icon" type="image/x-icon" href="#{resource['favicon/favicon.ico']}" />
        </f:facet>

        <f:facet name="last">
==========> <h:outputScript name="js/pf-patches.js" /> <==========
            <h:outputScript library="omnifaces" name="fixviewstate.js" />
        </f:facet>
    </h:head>

    <h:body>
        <h:outputStylesheet name="theme/custom.css" />
        <h:outputStylesheet name="theme/other-icons.css" />

        ...
1
  • 1
    and where do you put this? (the this._super(cfg) did not work for me btw back then (1.5 years ago) if I remember correctly)... And I notice you only add functionality after the super calls... maybe that would have worked to back then, but I needed to change code in it... Great it works though and thanks for reporting back
    – Kukeltje
    Apr 19, 2016 at 13:53
2

I had the same problem, but you're solution was not 100% efficient to my problem (See here https://github.com/primefaces/primefaces/issues/1928)) since you're willing to call _super() from OverlayPanel, and I'm trying to avoid it (it does few things I did not want to). So what I did is this:

/* Quick fix so layout might be handled in dialog component PF #1928 */
if(PrimeFaces.widget.Layout) {
    PrimeFaces.widget.Layout.prototype.init = function(cfg) {
        // skip calling PrimeFaces.widget.Layout.init() on purpose
        PrimeFaces.widget.DeferredWidget.prototype.init.call(this, cfg);

        this.cfg = cfg;
        this.id = this.cfg.id;
        this.jqId = PrimeFaces.escapeClientId(this.id);

        if(this.cfg.full) {          //full
            var dialog = $(this.cfg.center.paneSelector).parents('.ui-dialog-content');
            if(dialog) {             // full + dialog
                this.jq = dialog;
            } else {
                this.jq = $('body');
            }
        } else if(this.cfg.parent) { //nested
            this.jq = $(PrimeFaces.escapeClientId(this.cfg.parent));
        } else {                     //element
            this.jq = $(this.jqId);
        }

        this.renderDeferred();
    }
}

That way init() is completely overrided. I hope it will help few folks out there in this atypical case ;)

3
  • 2
    As you can see in the question, the goal is, actually, to have access to super methods. However, using the code in my own answer without calling this._super(...), results in completely overrided. For these two reasons I don't see what's the added value of your answer. Nov 30, 2016 at 15:02
  • Well, I was searching for a solution to my problem. Through jsf.zeef.com/bauke.scholtz, I read "Extend/override PrimeFaces.widget in JS" which is quite exactly what I want to do. Your solution helped me to start, I just figured your problem was not entirely similar to mine. But still, was worth it to share the solution. For this, it's an added value, for people who want, as the topic said "extend/override PrimeFaces widgets". If you stil think, it's useless, I'll simply remove my post (as I'm not trying to answer directly to your problem, but add a value to it, to whom it may concern)
    – Rapster
    Nov 30, 2016 at 17:29
  • 2
    I still think that's exactly what I was trying to avoid, but it's still "legit" code, and I'm not the one who shall tell you to remove or leave it, you're free to do as you please. Nevertheless, I will not (and I can't) remove my downvote till you'll edit your answer with some, IMHO, valuable content. Sorry. Nov 30, 2016 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.