Tuesday, September 3, 2013

New features in BlockUI of PrimeFaces Extensions

PrimeFaces users were worried if we will keep the BlockUI component in the PrimeFaces Extensions. Yes, we will keep it. It was done compatible with the upcoming PrimeFaces 4.0 and got some updates / new features.

The main features:
  • Page blocking. The entire page can be blocked if you don't define the target attribute.
  • Non-centered message. A non-centered message is defined by the css and centerX / centerY attributes. Furthermore, you can use the cssOverlay attribute to style the overlay (half-transparent mask).
  • Auto-unblocking. The timeout attribute is helpful for auto-unblocking. It defines time in millis to wait before auto-unblocking.

All featutes are demonstrated in the following code snippet and the screenshot
<p:commandButton value="Block this page!" type="button"

<pe:blockUI widgetVar="blockUIWidget"
            css="{top: '10px', left: '', right: '10px', cursor: 'wait'}"
            cssOverlay="{backgroundColor: 'red'}"
    <h:panelGrid columns="2">
        <h:graphicImage library="images" name="ajax-loader1.gif"
                        style="margin-right: 12px; vertical-align: middle;"/>
        <h:outputText value="This is a non-centered message. Please wait..." style="white-space: nowrap;"/>

 Have fun!


  1. +1 Oleg! It's looking good! Can't wait for PrimeFaces 4.0 and PrimeFaces Extensions 1.0 to be released! Want it...NOW! :)

  2. wow, just re-read this blog post,

    > Auto-unblocking. The timeout attribute is helpful for auto-unblocking. It defines time in millis to wait before auto-unblocking.

    when would one ever want to use 'auto-unblocking' based on timeout attribute? the most common use case of 'unblocking' is after an AJAX response. http response time 'varies' always in real-time scenario.

    Please confirm. i am waiting to be corrected. :)

  3. Hi Howard. There is a simple use case. If a response never arrives the browser (error or whatever) or the request is a long-running request, you can set a timeout to terminate the current ajax request and unblock the blocked page part. Otherwise it stays blocked forever or for a long time.

  4. wow, very good point, Oleg! hmmm, terminate the current ajax request? honestly, I never knew an ajax request could be terminated. whenever an HTTP request is taking too long for me, or not responding, i usually click the Logout button in my app (which has immediate=true, I think), and the Logout button overrides the previous HTTP request, and enduser is logged out of the app, successfully.

  5. Hello, Oleg.
    Sorry if this is not right place for my question but this is most up to date place where sow your messages.
    Question is about DynaForm component. I want to put 2 primefaces p:selectOneMenu element on my dynamic form component. And when I change value in first one to update second one filling new values. This is a generic feature. It is possible to do and how if it is?
    Thanks in advance

  6. We already discussed this task this week. Please see this post in our forum http://forum.primefaces.org/viewtopic.php?f=14&t=33757 I hope it will help you.

  7. Oleg, we can't wait for the release! We hope to integrate your solution with our Online Payment Gateway system. Let's hope for the best.

    The TEam :)


Note: Only a member of this blog may post a comment.