BlockUI / BlockPanel summary

[mkienenb]

UP to this point, we have been using custom java code in each a4j:support's on[event] and oncomplete attribute to block events and visually indicate that events are blocked.

Code: Select all

     event="onclick" 
     onclick="process();" 
     oncomplete="processStop();"

So I'm interested in p:blockUI, pe:blockUI, and pe:blockPanel

However, after reading every reference that a search on BlockUI turned up, it's still not 100% clear what the differences are.

It appears that pe:blockUI also blocks keys but not every kind of ajax request, and also allows you to specify blocking only certain kinds of events, although it's unclear whether that means we're blocking everything only when certain events are initiated, or if once we start blocking (on any event), we are only stopping certain events during blocking.

p:blockUI appears to be a much more limited subset of pe:blockUI functionality.

Internally, p:blockUI was written from scratch while pe:blockUI uses JQuery blocking infrastructure.

pe:blockPanel appears to be a convenience component that blocks everything outside of a panel allowing modal panel behavior. Basically a replacement strategy for rich:modalPanel.

Do I have this right?

[tandraschko]

Absolutely right.

The only difference that i see, is that rich:modalPanel is more like an modal p:dialog.
BlockPanel will be renamed to spotlight later and is more like an inverse blockUI.

[mkienenb]

Can you explain the use of the BlockUI event attribute?

Does <pe:blockUI event="click"> mean that only click events are blocked? Or does it mean that everything is blocked once something is clicked?

The documentation isn't clear to me:

event - Name(s) of one or several accepted events. Several events should be defined as space or comma separated list.

[tandraschko]

it will only block for the "click" event. If you use

event="sort,filter"

then only sort and filter behaviors will block.

[Oleg]

Yes, Thomas described it right. "event" specifies events to be considered for blocking.

By the way, pe:blockPanel will be renamed to pe:spotlight - inspired by Spotlight in Ext JS 4.0.I will start to use this component too in order to end CDI conversion at right time point in wizard-like scenarios.

[mkienenb]

Code: Select all

event - Name(s) of one or several accepted events. Several events should be defined as space or comma separated list.

How does this sound as a documentation rewrite? I'm guessing on the default.

Code: Select all

event - Name(s) of one or more events which will be blocked.  Multiple events should be defined as a space- or comma-separated list. By default, all events are blocked

[Oleg]

events which will be blocked ...

sounds strange but I can consider this during BlockUI update. I plan to add new features to BlockUI in 0.7.0.