All posts tagged widgetvar

  • April 2, 2014

    Get widgetVar by Id

    I have many cases in my apps where I needed to get the widgetVar object in Javascript by the component Id.
    I have made this helpful function in order to achieve that goal .

    function getWidgetVarById(id) {
    for (var propertyName in PrimeFaces.widgets) {
      if (PrimeFaces.widgets[propertyName].id === id) {
        return PrimeFaces.widgets[propertyName];
      }
    }
}

    Usage

    getWidgetVarById('form:dialogId');

    This will return the object, in the previous case a dialog widgetVar object is returned, to show it simply call show()  right away.

    getWidgetVarById('form:dialogId').show();

    – Conclusion

    All the widgetVars are stored in the PrimeFaces.widgets. namespace.
    Iterating over that namespace and comparing the given Id with the object’s is the way to find your widgetVar.

    Note: this equals to the expression  #{p:widgetVar(‘form:dialogId’)}  (Server-side evaluation)

     

    5 Comments / JSF, Primefaces /

  • April 1, 2014

    Intro To PrimeFaces widgetVar

    In these series of PrimeFaceswidgetVar , I will focus of the detailed use of the javascript API provided by PrimeFaces.

    Diving into the API needs too much debugging since most of it is not provided in the official documentation.

    The basics of debugging and knowing what to call and what this function would do is very simple and hard in the same time, since it would require some knowledge in Javascript and jQuery.

    In Google Chrome the console would provide a very helpful and powerful access to everything you need to know about this API, and without it I would tell, your application wouldn’t reach production level if you are building a real world website/application.

    Contents:

    1. What is a widgetVar ?
    2. What the objects are made of ?
    3. What to expect from this API ?
    4. How to debug ?

    PreRequests: a general understating of javascript and jQuery.

    Read more

    24 Comments / JSF, Primefaces /

  • September 24, 2013

    Primefaces: Close All Lightboxs

    I had a datatable which contains in each row a link to a different iFrame p:lighbox, and on the same page I had to repeat the same datatables with different objects modules and they also have iFrame p:lightbox.

    I came to a place where I had to close the p:lightbox from a backing bean according to some logic validation,
    and in the same time I can’t know the widgetvar of the current opened p:lightbox, so I had to write some generic function to close all the Lightboxes inside the page.

    First I had to know how primefaces generate the widget vars, after some search I found a function in primefaces which takes an ID of a component and generate a proper widgetvar for it.

    #{p:widgetVar('componentId')}

    Basically it does the following it gets the id of the component, for example formId:componentId and replaces the : with _ and append a widget_ to the beginning of the var so it becomes widget_formId_componentId.

    So I came with the following function of jQuery to close all my lightboxs in the page

    function closeLightBoxes() {	
	$('.ui-lightbox').each(function() {
		var widgetVar = 'widget_' + $(this).attr('id').replace(":", "_").replace('_panel','');		
		window[widgetVar].hide();
	});
}

    First I select each .ui-lightbox class, which is the div of the iFrame and then I do the simple formation of primefaces widgetvar generation, but primefaces adds _panel to the end of the ID of that div, so I had to remove it.

    Note: do not specify any widgetvar to your lightboxs, not even dynamic ones.

    No Comments / JSF, Primefaces /