Oracle Fusion Applications are on the move. They were demonstrated at Oracle Open World 2009, they are current being tested with dozens if not hundreds of organizations and they have been promised for general availability later in 2010. Screenshots of selected modules are available on the internet, for example at: http://www.flickr.com/photos/oracleopenworld09/sets/72157622462805751/.
Fusion Applications are of interest to any ADF developer, as Oracle teams have worked hard – in close collaboration with the ADF development teams – to come up with UI patterns, ways of leading the end user through the application, presenting data and currently available actions in intuitive or at least consistent ways that would most likely work for most of our applications as well. And since we have the same technology stack at our disposal as the Fusion Apps teams have, we can see whether their best practices work for us too.
A recent addition to the catalog of ADF Faces components was the contextInfo component. It is quite heavily used in Fusion Apps for one such consistent pattern. The next screenshot illustrates this component:
The little orange markers in the upper lefthand corner of the Project Name fields – that is the manifestation of the contextInfo component. The popup you see for Stark Industries BI Rollout is the effect of activating the component. And it demonstrates its purposed rather nicely and effectively: whenever the user sees a contextInfo marker (the little oracle square) she knows that additional information associated with that field is available. The user can click on the marker and the context information is presented in whatever way the developer feels is most appropriate, though usually a popup will be used.
Note: contextInfo adds only very little functionality. All it does could just as well be done using a contextMenu (right mouse click) listener that brings up a popup. The relevance is in the visual mark the contextInfo component displays. Users may not realize that a right mouse button click will take them to context information. How should they know that? The contextInfo is a relatively unobtrusive yet effective way of communicating to the user that such information is available. Especially when you use the contextInfo component frequently and consistently throughout an application, users will quickly get used to it and find it very intuitive.
Implementing context info
All component that we can add the contextInfo component to (column, commandLink,inputComboboxListOfValues, inputText, outputFormatted, outputText, selectOneChoice), have a facet called context. This facet is presumably intended to be used only for the contextInfo component – though perhaps we can put other things in it as well.
We add the contextInfo component to the facet. We can set the shortDesc attribute to influence the text presented to the end user when hovering over the contextInfo marker. We can also specify the contextInfoListener attribute that references a server side bean method that is invoked when this contextInfo component is activated. The server side listener could prepare a popup to be displayed, but also do different things like navigating away from the page, displaying a region, open up online help etc.
The typical contextInfo implementation uses a popup and a showPopupBehavior child element inside the contextInfo component. We would have something like:
<af:inputText label="First Name"
value="#{item.firstName}" columns="15"
id="it7">
<f:facet name="context">
<af:contextInfo id="contextInfoFirstName">
<af:showPopupBehavior align="beforeStart"
popupId="::FirstNameContextPopup"
triggerType="contextInfo"/>
</af:contextInfo>
</f:facet>
</af:inputText>
When we run the page, it looks like this:
When the mouse hovers over the visual marker:
And when we click on it:
The component has both visible and rendered attributes that allow dynamic control over whether they are available to the end user.
The popup that is used here is defined as follows:
<af:popup id="FirstNameContextPopup" contentDelivery="lazyUncached">
<af:dialog id="d23" title="Context Information about First Name"
modal="false">
<af:outputText value="Some meaningful, context sensitive information about the First Name component and even better: the curr
id="ot61"/>
</af:dialog>
</af:popup>
To present information in the context popup that is really context sensitive, we need to have access to meaningful values associated with the component the context is presented for. In this case we would need to have the actual value of FirstName available inside the context popup.
One way of doing this is through the use of a helper bean that is accessed from the popup and that is loaded with the current values when the popup is fetched. In order to always make the current, including client side changes value available, we need to set the autoSubmit attribute to true for the first name component. The code required becomes something like:
<af:popup id="FirstNameContextPopup" contentDelivery="lazyUncached"
eventContext="launcher" launcherVar="source">
<af:setPropertyListener from="#{source.parent.value}"
to="#{bean.value}" type="popupFetch"/>
<af:dialog id="d23" title="Context Information about First Name #{bean.value}"
modal="false">
<af:outputText value="Some meaningful, context sensitive information about the First Name component and even better: the
id="ot61"/>
</af:dialog>
</af:popup>
...
<af:inputText label="First Name" autoSubmit="true"
value="#{item.firstName}" columns="15"
id="it7">
<f:facet name="context">
<af:contextInfo id="contextInfoFirstName">
<af:showPopupBehavior align="beforeStart"
popupId="::FirstNameContextPopup"
triggerType="contextInfo"/>
</af:contextInfo>
</f:facet>
</af:inputText>
We can influence the appearance of the context info visual marker through the Skin. The af|contextInfo skin selector is supported and has among other options an icon selector af|contextInfo::launch-icon that we can use for changing the icon used for indicating the availability of context information.
Resources
Documentation (Fusion Web Developer Guide): http://download.oracle.com/docs/cd/E15523_01/web.1111/b31973/af_dialog.htm#ADFUI11408.
Download JDeveloper 11g application: ADFContextInfo.zip.
