New ADF Faces 11g Features that will save the day (or at least a couple of hours)

We are developing an ADF application for a customer. It is a very large and complex application, offered in a hosted environment to over 110 customers and with more than a thousand users. The application will replace an existing Web PL/SQL based application. For the new application, a very rigorous process, workflow and interaction design has been created. The look and feel and the way of working has been laid down very specifically. The first impression of the application, the visual appeal and the ease of using it are to be main selling points and should make the application outshine the competition.

Development of the application has started last month, using JDeveloper/ADF 10g (10.1.3.3). We know that the application will not go live until deep into 2008. By that time, ADF 11g will have long hit the street. This allows for the following approach:

• we develop the main functionality of the application using the current 10.1.3.3 stack
• any feature – especially in the area of look & feel and interaction – that is close to impossible or even less than trivial in the 10g stack, and readily available in 11g, will be postponed
• we will do a brief proof of concept in the JDeveloper 11g Technology Preview 2 to make sure that in 11g we can indeed easily realize the required feature and we have to describe how we can introduce the feature into the application when we have migrated it to 11g

This way of working, which we have of course worked out together with the customer, will save us – the customer and our project team – a lot of work. The customer will have the application as he wants it – according to the interaction design. But we will approach this in a pragmatic way, saving us a lot of hassle with the current 10g stack’s limitations.

Some examples of features that are non-trivial (or worse) in 10g and easy stuff in 11g:

• Show Icon and Text on Buttons (standard feature in 11g, not supported in 10g)
  
• We need to implement a number of Popup menus. Standard in 11g:
  
• Hint Texts on items should be displayed in styled popups (balloon text). The default browser display of the HTML Title attribute – corresponding to the ADF Faces shortDesc attribute) is too plain. Fortunately, 11g offers a perfect system for displaying Instruction Text – integrated with an external help-topic system or with resource bundles
  
• Define a custom look and feel – including our own icons – for the (Process) Train (used for multi-step wizards for example)
• The end user should be able to determine the order of columns in a table. For 10g, we already had developed a solution (https://technology.amis.nl/blog/?p=1334 ); however, in 11g there is a built-in feature for tables to support client side column reordering through drag & drop of columns.
  
• The Dashboard or Launchpad of the application must show a series of Portlet like components that we must be able to expand or collapse (perhaps the 11g Accordion or the 10g/11g ShowDetail). And/or panelBox:
  
• At least one of these components must present a dynamic, data and user context driven chart. In 10g we considered integrating JFreeChart. However, in 11g, charts are core components in ADF Faces
  
• That same Dashboard has an area that slides in and out of the page on demand. There is always a small slice visible and when needed, the user can expand the area. 10g would probably require a custom JavaScript solution. In 11g, this functionality is covered by the Panel Splitter
• Run-time user customizations of the User Interface – such as column order, panelsplitter setting, accordion disclosure – should be persisted, at least within the session (so that when the user returns to the page, his customization is still in effect) and perhaps for certain changes across sessions. Fortunately the 11g ADF components have some built-in customization persistence and others can be added by the developer. ADF 11g has two persistence mechanisms: sessionScope and inter-sessionScope. The latter uses the MDS (Meta Data Store) to record the user specific application customizations in its own repository (file based or database based).
• The Global Menu has to be implemented as a Tab Bar. The Tabs should have their own color (or back-ground image) and an icon. The distance between the tabs should be customizable. Some tabs need to be positioned on the far right of the bar. In 10g, this seems downright impossible. In 11g, there may be some chance of achieving these requirements with the ADF Faces components.
  
• We need a way of clearly marking fields whose values failed validation; 11g provides it (see for example https://technology.amis.nl/blog/?p=2099 )
  
• Popup dialogs (for example a List of Values window or Confirmation Dialog) may not be a browser popup window (which runs into popup blockers for example, and is not really attractive) but instead should be ‘floating divs’ (same page popups). When the dialog is brought up, the ‘underlying’ page (really the same page) should be unavailable/visually set back.
  
• Rich HTML Text Editor (standard component in 11g, need integration of MyFaces Tomahwak, JavaScript Component or other component in 10g realm)

Note: we use the ADF Faces 11g Component Demo to quickly investigate the features available in 11g – not just their textual description but their actual live rendering and functioning. See: http://www.oracle.com/technology/products/adf/adffaces/11/doc/demo/adf_faces_rc_demo.html for information about this demo.

Another extremely useful aspect of the 11g Component Demo is its extensive demonstration of Skinning. For every component, the demo shows which Component Selectors are available for customizing the look and feel of the component.

Skinning has so far been a rather complex and somewhat unclear process. With this demo it seems to have become much clearer! (also see: http://www.oracle.com/technology/products/adf/adffaces/11/doc/skin-selectors.html ).

11g PanelAccordion: