• JSF 2.0 Templating


    In this small tutorial we’ll create a simple JSF template.


    • NetBeans
    • Glassfish (4.x)
    • JSF (2.x)
    • Maven (3.x)

    Table of contents:

    1. Creating and Configuring the Project
    2. Creating the Basic Template

    1- Creating and Configuring the Project

    Open NetBeans and select New Project  > Maven  >   Web Application

    new project > maven > web application

    Read more

  • JSF and Twitter Bootstrap Integration

    JSF and Bootstrap

    Bootstrap is a popular front-end framework for developing responsive websites, and as the mobile devices are taking a good share of the web browsing, it’s important to consider a mobile friendly website (mobile first).

    Starting from PrimeFaces 5.1, PrimeFaces will focus on improving the responsiveness of the components (e.g. p:panelGrid ) depending on the screen size will adjust, so this is a good time to consider adding responsive to your projects.

    In this tutorial you’ll need:

    • NetBeans
    • Maven (3.x)
    • JSF (2.x)
    • Bootstrap (3.x)
    • font-awesome (4.x)

    Table of contents:

    1. Include Bootstrap into a Template
    2. Implementing Dashboard Template
    3. Adding font-awesome

    You may skip the first step if you have already created the project

    Read more

  • What it feels like to be on stackoverflow



    My account on stackoverflow is almost 3 years old(by the time this post was written), this website has saved many hours for me, finding almost every solution to any obstacle I might run into.
    For almost four years (before I even had my account)  stackoverflow  was a site where I find it’s links on google’s top search results, never realised  that this site would become a kind of a “hobby” for me.

    4 Months ago (again by the time this post was written) I started to participate by answering some questions, It turned out this can become somehow an addiction !

    You check the website every one or two minutes, seeing if any of your favourite tags got a question you might find interesting to answer, Right away you take the question’s code, put it on your IDE see if something is missing like a “typo”, “attribute”, “hidden error”, test your answer (theory, knowledge.. whatever you like to call it) ….
    Then for a moment you know what’s missing, click on that lovely “Your Answer” box, pay attention to the formatting, then click “Post your answer” button.

    In four months I have collected 1500 points, some might consider it nothing, but as a hobby, I consider it fair enough.
    If you work 8 hours a day, it’s kinda hard to allocate some extra time for your hobbies in general, during the day you might find some break time to check the website, If it’s a “quicky” answer, you post it…

    After using the website for a “quit” a good time, you start to know what the rhythm would be, who will mark your answer as a right one, and who would take the answer and does NOT care to mark it or even giving a feedback.
    It hurts, when you know that your answer is helpful and correct and you get no feedback.

    I received a couple of emails during that little time, asking me if I can answer a particular questions, and to be honest it feels good.

    For me stackoverflow is a social media website with a taste for programmers, making some friends from all over the world, learning from big guys there, sloving issues (to relax),and last thing you feel always that you know nothing when you see the amount of questions on different programming topics there…

    And on long vacations, that website saved the boring that I might have…

    Big thanks I would like to give to the creators and the workers on that website for saving us (Developers) a good amount of time.

  • 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 .


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

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


  • Intro To PrimeFaces widgetVar


    In these series of PrimeFaces widgetVar , 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.


    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

  • Primefaces Hash Navigation Using jQuery BBQ


    With jQuery BBQ you can keep track of state, history and allow bookmarking (#hashtag) while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser’s back and next buttons, reload the page, it’s all there.

    Integrating jQuery BBQ with JSF/Primefaces is pretty much straight forward.

    Before make sure that you have these points:

    • Create your JSF Project
    • Download jQuery BBQ (here)
    • Include jQuery BBQ  into your resources js folder

    I’m going to use Primefaces extensions for the predefined layout’s  sake (You can have your own menu and centered content layout).

    Now the scenario is very simple, we have a master menu with links to our pages (outcome), we click a link the page doesn’t reload but reloads only the content of the centered container, and we have to make sure that this is bookmark-able and would work with the browser’s back and next buttons, and even if we reload the page .

    Read more

  • Create JSF 2.1, Primefaces 4.0, EJB, Restful Project, Using Maven, with JBoss AS 7, Postgres DB and Eclipse.


    In this step by step “tutorial”, I will try to demonstrate how to create a new JSF 2.1 Project and add Primefaces 4.0 to it, alongside with EJB, JPA, REST.

    I will use in this “tutorial”:


    and Ubuntu as OS.


    • Create Project Using Maven. (1)
    • Import and configure Eclipse Project. (2)
    • Add Primefaces.(3)

    Read more

  • Hibernate LazyInitializationException And p:selectCheckboxMenu


    I had a simple Entity with a @oneToMany relationship.

    Let’s call the Entity “Store” and the Entity of the relationship “Product”, obviously a Store has many Products.
    When it comes to use selectCheckboxMenu with the input (update) of products, a bug arise “org.hibernate.LazyInitializationException: could not initialize proxy – no Session”.
    For some reason using the primefaces selectCheckboxMenu (or h:selectmanycheckbox of the slandered JSF components) would end the Session of the current transaction.

    to solve this issue I had to supply the type of my collection to the component with attribute name=”collectionType”.

    it depends on your type of List if it’s a Set for example you can use java.util.HashSet instead of java.util.ArrayList.

  • Primefaces: AutoComplete suggestions panel position fix


    Somehow primefaces suggestions panel position detection is always top, and this sometimes causing an inability for the user to choose from the list, especially if it’s too long and not limited by results.

    primefaces wrong autocomplete panel position

    As you can see some of the suggestions are invisible.

    I managed to solve this issue by overriding the alignPanel “CSS” of the autocomplete widget.

    just put this in the document.ready and the magic happens!

    Or you can donwload the JS File and include it: autocomplete.panel.fix.js


  • 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.

    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

    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.