• On June 29, 2017 by

    Export PrimeFaces Charts to PDF

    PrimeFaces Charts are based on JqPlot Charts which provides an easy way to export the canvas chart into an image.

    In this small tutorial we will export PrimeFaces provided charts to PDF using pdfmake.js.

    Contents

    1. Export Chart into an Image
    2. Including and setting up pdfmake.js
    3. Include Chart image in pdfmake document

    Read more

  • On June 24, 2014 by

    JSF 2.0 Templating

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

    Pre-Requests:

    • 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

  • On June 23, 2014 by

    JSF and Twitter Bootstrap Integration

    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

  • On April 2, 2014 by

    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.

  • On April 2, 2014 by

    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)

     

  • On April 1, 2014 by

    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

  • On December 24, 2013 by

    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

  • On December 2, 2013 by

    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”:

    used-toolkit

    and Ubuntu as OS.

    Contents:

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

    Read more

  • On October 21, 2013 by

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

    <p:selectCheckboxMenu > 	 	 
 <f:attribute name="collectionType" value="java.util.ArrayList" />	 	 
 <f:selectItems value="#{bean.getStoreProducts()}" 	 	 
 var="product" itemLabel="#{product.name}"	 	 
 itemValue="#{product}" />	 	 
</p:selectCheckboxMenu>

    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.

  • On September 26, 2013 by

    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.

    PrimeFaces.widget.AutoComplete.prototype.alignPanel = function() {
        var fixedPosition = this.panel.css('position') == 'fixed',
        win = $(window),
        positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null,
        panelWidth = null;

        if(this.cfg.multiple) {
            panelWidth = this.multiItemContainer.innerWidth() - (this.input.position().left - this.multiItemContainer.position().left);
        }
        else {
            panelWidth = this.input.innerWidth();
        }

        this.panel.css({
                        left:'',
                        top:'',
                        width: panelWidth
                })
                .position({
                    my: 'left top'
                    ,at: 'left bottom'
                    ,of: this.input
                    ,collision: 'none',
                    offset : positionOffset
                });
    }

    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

    primeright

← Older Entries