Wednesday, July 25, 2007

Save limited space; use MyFaces popup's

Sometimes I wonder how to put all these visual elements on an already overloaded page. Customers have their needs for functionality, but sometimes just don't know when to say STOP. We need this, we need that ............ I wondered if all this functionality has to be available at any time, and if so, if it should be visible.

What if I was able to 'partially hide' elements, and bring them into view only if a user really needs them ? I used one of the Myfaces components. In this case the popup.

A Popup will only "popup" at the location where it is defined. It works more or less in a "now you see it, now you don't" way. The functionality in this popup works the way it should. By using the popup, I was able to add functionality to my page, without overloading the page with visual components. Below you see the page. It has (somewhere) functionality to customize the page.

If the mouse is over the "Customize Your Application" text, the popup is shown.

And the look and feel changes to................

You can find the taglib for the popup here.

Here's the code snippet you can use to render the popup:

<t:popup title="customize"
id="popup" rendered="true" >
<af:outputLabel value="Customize Your Application"
<f:facet name="popup">
<af:panelBox text="customize">
<af:selectOneChoice label="Select Skin"

Details on how to use the Myfaces components can be found in one of my other posts.


Harvey Raja said...

11g components come with similar functionality, i.e. defining a popup and being able to hide/show dependant on a user event. What I find even "cooler" about the ADF 11g components is that they allow you utilize an ADF Page flow in a popup - this means you can seamlessly define pages, navigation cases, mbs for your popup. Thanks to the ADF team!

- Harvey

luc bors said...

Thats true; But for now 11g is only technical preview. And thats why I had to find an alternative solution.