Anatomy of a PrimeFaces Component

Most of the PrimeFaces components have the same structure, markup and a script. Script is actually a javascript object that belongs to PrimeFaces.widget.* namespace. An example about how Dialog works;

JSF View Segment

<h:form id="form">
   <p:dialog id="dialog1" header="Basic Dialog" draggable="false" modal="false" widgetVar="dlg">
        Resistance to PrimeFaces is futile!
   </p:dialog>
</h:form>

Rendered HTML markup

<div id="form:dialog1" title="Basic Dialog">
    Resistance to PrimeFaces is futile!
</div>

Rendered Script

<script type="text/javascript">
   dlg = new PrimeFaces.widget.Dialog('form:dialog1', {draggable:false, modal:false});
</script>

Output

dlg is the widgetVar, it is the name of the client side variable that has various responsibilities like progressive enhancement of the markup, communication with the server side via ajax and more. For example it adds style on the fly to the dom instead of rendering them with the markup, this helps reducing page size and less cpu cycles. One of the goals of PrimeFaces is to keep things clean and be lightweight.

You can show and hide the dialog with dlg.show() or dlg.hide(), if you don’t define widgetVar it is autogenerated and is accessible via #{p:widgetVar(‘componentId’)} utility function, so same thing would be #{p:widgetVar(‘dialog1’)}.show().

6 Responses to Anatomy of a PrimeFaces Component

  1. Oleg says:

    I would like to supplement yet, that script is rendered after HTML markup. Early PrimeFaces rendered script before HTML markup with timeout, but now we don’t have flickers at all and the performance is very well.

    What would be nice yet – one article for how to extend PrimeFaces components, step by step. At first we extend PrimeFaces.widget.*, etc. Is there an interest in such know-how?

  2. Also to avoid UI flicker during progressive enhancement, we tend to hide the visibility of the markup and display it once script is done with it. Useful when we need to execute to script when document is ready.

  3. Oleg says:

    “hide the visibility of the markup and display it once script is done” is a very good technique Cagatay. You are on the right way🙂 I usally do similar thing – at first render markup with display: none and then apply jQuery(#…).show() at the right moment.

  4. Patrick says:

    javascript should be:

    var dlg = new PrimeFaces.widget.Dialog(‘form:dialog1’, {draggable:false, modal:false});

  5. It doesn’t really matter, usually that call is in a function so that variable should be global.

  6. Juan says:

    Hi.
    I’m from Ecuador.

    Congratulations for your work. I wonder how to integrate jQuery functionality in Primefaces. In particular I would like to hide and show the dock component using Jquery

%d bloggers like this: