MonkeyPatching: PrimeFaces widgets extend/override

Question

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

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 '16 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(...)* — Michele Mariotti, Apr 14 '16 at 00: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 '16 at 07:40
Does this answer your question? [How do I find and/or override JavaScript in Primefaces component based on widgetVar?](https://stackoverflow.com/questions/27551493/how-do-i-find-and-or-override-javascript-in-primefaces-component-based-on-widget) — Jasper de Vries, Feb 01 '23 at 14:15
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. — Michele Mariotti, Feb 01 '23 at 15:00

Michele Mariotti · Accepted Answer · 2016-04-19T14:33:41.430

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" />

        ...

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 '16 at 13:53

Rapster · Answer 2 · 2016-12-01T07:55:47.653

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 ;)

edited Dec 01 '16 at 07:55

answered Nov 30 '16 at 14:02

Rapster

484
1
5
23

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. – Michele Mariotti Nov 30 '16 at 15:02
Well, I was searching for a solution to my problem. Through https://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 '16 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. – Michele Mariotti Nov 30 '16 at 18:28

MonkeyPatching: PrimeFaces widgets extend/override

2 Answers2

Linked