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"
displayAtDistanceX="-220"
displayAtDistanceY="0"
closePopupOnExitingElement="false"
id="popup" rendered="true" >
<af:outputLabel value="Customize Your Application"
inlineStyle="font-size:x-small;"/>
<f:facet name="popup">
<af:panelHorizontal>
<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.

Comments

Anonymous 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

9:41 AM

Luc Bors said…

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

12:54 PM

ADF 11g popup and panelwindow: Open wikipedia in a modal popup.

This post was more or less inspired by the noteWindow example on Oracles tag demo site. When hovering the highlighted text in this example the user gets extra information about the subject. I wanted to give the end user the opportunity to get even more information, for instance by invoking a wikipedia page about the subject. The catch here is that I wanted this information to be shown in a modal popup, and one that is not prohibited by popup blockers. Luckily ADF 11g provides javascript popups that can also be made modal, so the user has to close the popup before returning to the application. This post describes how I used an in a to open the correct wikipedia in a modal popup. Step 1: Create the plain text that invokes the noteWindow. This is taken directly from the mentioned Oracle example. <p style="margin-left:30px;width:500px;margin-right:30px;line-height:16px"> Vultures are scavenging birds, feeding mostly on the carcasses of dead animals...

ADF 12.1.3 : Implementing Default Table Filter Values

In one of my projects I ran into a requirement where the end user needs to be presented with default values in the table filters. This sounds like it is a common requirement, which is easy to implement. However it proved to be not so common, as it is not in the documentation nor are there any Blogpost to be found that talk about this feature. In this blogpost I describe how to implement this. The Use Case Explained Users of the application would typically enter today's date in a table filter in order to get all data that is valid for today. They do this each and every time. In order to facilitate them I want to have the table filter pre-filled with today's date (at the moment of writing July 31st 2015). So whenever the page is displayed, it should display 'today' in the table filter and execute the query accordingly. The problem is to get the value in the filter without the user typing it. Lets first take a look at how the ADF Search and Filters are implemented by...

ADF 11g : Printing Directly From Your Application

Last week I was asked this question : "Can we print directly from within our ADF Application, without invoking the printer dialog ?" I wasn't sure but after some investigation the answer was clear. Yes you can ! Here is how... I decided to create a print start up form where I can select printers and print the document. Most of the functionality needed is provided by the Java Print Service API. Selecting available printers I start with a way to show all printers available to the session. For that I simply use the PrinterServiceLookup. PrintService[] printers = PrintServiceLookup.lookupPrintServices(null, null); The result I can now use to create an Array of SelectItems in order to make the list available in the application. 1: public SelectItem[] getAllPrinters() { 2: if (allPrinters == null) { 3: PrintService[] printers = 4: PrintServiceLookup.lookupPrintServices(null, null); 5: allPrinters = new SelectItem[printers.length]; 6: for (int i = 0; i ...

Luc Bors Weblog

Search This Blog