Overview
ADF UIX is an XML-based alternative to JavaServer Pages and one of the plugable view-layer technologies you can use when building web applications with the Oracle ADF framework. It offers a declarative approach for describing web pages as a set of data-bound UI components and supports "skinnable" rendering of the same pages using rendering pages ADF UIX supports a variety of clients, including HTML-compliant browsers and mobile devices. ADF UIX includes a rich set of nearly 100 built-in user interface components — such as LOV, Table, hGrid, Color Picker, Calendar, and many others — that you can use and
customize.
Similar to the ADF Business Components technology we've explored for the model layer in sections above, ADF UIX is a proven view-layer technology that has been used for years inside Oracle by in the Oracle e-Business Suite teams to build web
applications with a sophisticated, interactive, and consistent user interface. Oracle's ADF UIX engineers and architects have participated in the Java Community Process expert group for the JavaServer Faces standard and heavily influenced its design based on their years of experience in having built and enhanced Oracle ADF UIX. It should come then as no surprise that the JavaServer Faces standard is architected very similarly to Oracle ADF UIX which predated it by many years.
Shared Controller, Model, and Framework Extension Layers NOTE:
While implementing a work-alike version of the ADF Toy Store user interface with ADF UIX, we we're able to show off all of the rich, built-in controls that ADF UIX provides. For a comprehensive example of some of these more
sophisticated components, see Building J2EE Applications with Oracle JHeadstart for ADF [46] which exercises a lot of the different ADF UIX components as part of the tutorial.
NOTE:
Oracle's JSF-compliant set of web components called "ADF Faces" that provide the same set of functionality as the ADF UIX components will be a part of the upcoming major 10.1.3 release of Oracle JDeveloper 10g. A migration tool to convert ADF UIX pages to JavaServer Faces JSP pages using the equivalent ADF Faces components is planned to be available in the future.
They use the same controller, model, and framework extension layers as the JSP-based view layer in the
ToyStoreViewcontroller project. There's only one key difference between the JSP-based implementation and the ADF UIX-based implementation: the web pages are *.uix files instead of *.jsp files. Since the ADF data binding metdata files — representing the binding container for each page — are an XML file whose name reflects the name of and directory containing the web page to which they correspond, another minor difference is simply in the names of the *UIModel.xml binding files.
Other than the differences in file name, the logical contents of the data binding metadata for JSP-based and UIX-based pages should be virtually identical.
Everything else about the demo is shared as you would hope.
Running the ADF UIX View Layer
The ADF UIX pages that comprise the UIX front-end for the demo are the *.uix files in the ToyStoreViewControllerUIX project. You'll find them in the WEB-INF/uix subdirectory under the Web Content folder in the Application Navigator. To run the ADF UIX version, simply run this project inside JDeveloper 10g. Your default browser will launch and browse the URL:
http://localhost:8988/ADFToyStoreUIX/index.jsp
which is registered as the default run target for that project. From that point, the demo looks and behaves like its JSP-based counterpart in the ToyStoreViewController project that we've studied up to this point in this paper.
Visual Page Editing for ADF UIX Pages
JDeveloper 10g features a WYSIWYG visual page designer for ADF UIX pages, which is what we used to create the set of UIX pages that comprise the demo. Since the ADF UIX pages are well-formed XML files whose valid contents are described by an XML Schema, the visual editor is able to give you more structured, visual feedback of which components make sense where in the page.
ADF UIX Supports ADF Data Binding
ADF UIX supports the same ADF databinding layer that we've used above in our JSP-based view layer. Just as in the JSP version of the view layer, we leverage the standard EL expression language to identify the ADF binding objects that handle the connection between the UI controls and the backend data. UIX pages that use the EL expression language for binding indicate this fact using the expressionLanguage="el" attribute in their root <page> element like this:
<page xmlns="http://xmlns.oracle.com/uix/controller"
xmlns:ui="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:html="http://www.w3.org/TR/REC-html40"
expressionLanguage="el">
:
<!-- page content here -->
</page>
This is the default approach that JDeveloper 10g release 10.1.2 uses when creating ADF UIX pages. In this section we highlight a few examples of the kinds of binding expressions you'll find the ADF Toy Store UIX pages.
Attribute Binding Example
The principal way that you "wire up" a UIX component to a backend data source is via the model attribute on the component. In this example, the EL expression refers to an attribute binding named Address in the current binding container for the page.
<messageTextInput model="${bindings.Address}"/>
Table/Range Binding Example
You'll see that the <table> components in use in our pages refer to an ADF table/range binding in their model attribute's EL expression in order to work with N rows of data at a time. The number of rows per page is controlled by the rangeSize property
of the ADF iterator binding with which the table/range binding is associated in the binding metadata.
<table model="${bindings.ProductsInCategory}">
You'll also see an inline EL-function in use for table column headers. This also makes reference to a table/range binding. The example below from the yourcartUIX.uix page, is from the column showing the quantity ordered.
<sortableHeader model="${ctrl:createSortableHeaderModel (bindings.ShoppingCart,'Quantity')}"/>
List Binding Example
An ADF list binding encapsulates two "dimensions" of back-end data binding:
1. The attribute representing the current, selected value in the list, and 2. The collection of valid choices the user can pick from.
In this example, we see that a <messageChoice> component — which displayes as a dropdown list with an associated prompt
— refers to the Cardtype list binding in its binding container with the EL expression ${bindings.Cardtype}. The
childData attribute of the control's <contents> contains a second EL expression that refers to the displayData collection that the list binding exposes. The contents element will "stamp out" a instance of its nested content for each "row" in the
childData collection. On each iteration, the EL Expression ${uix.current} refers to the current object in the collection. The net-effect in this example is that the list of valid choices is produced using data supplied by the list binding object.
<messageChoice model="${bindings.Cardtype}"
prompt="${uix.data.nls['placeorder.cardtype']}"
disabled="false">
<contents childData="${bindings.Cardtype.displayData}">
<option model="${uix.current}"/>
</contents>
</messageChoice>
Binding Context Example
Since errors are raised by the model in general, the model attribute EL expression for the general-purpose <messageBox>
component just needs to refer to the ADF binding context:
<messageBox model="${data}"/>
Tips for Building the UIX Pages
While building the UIX pages for the demo, we followed a number of tips should prove useful to highlight.
1. Think Ahead About Disabled Users
As explained in the Making ADF UIX Pages Accessible [47] chapter of the Oracle ADF UIX Developer's Guide [48] ADF UIX already dramatically simplifies building pages that are accessible to users with disabilities. In the Toy Store Demo, as we were building our UIX pages, we also added an <html:noscript> element to inform visually impaired users using screen reader utilities that their browser must support javascript. If you don't provide a "noscript" tag the browser will not display any message if Javascript is disabled on the client's browser. Note that we specify the html namespace prefix since <noscript> is not a tag in the UIX namespace.
TIP:
While ADF UIX saves you from having to code at the HTML level in most cases, it's handy to know that you may add any legal HTML tag to a UIX page by prefixing it by the html namespace. This HTML namespace gets defined for you at the top of the UIX page when you create the page.
2. Define a Data Provider for Translatable Strings
For localization and internationalization purposes, we can use *.properties-based resource strings in the same was as we did in the JSP version of the view layer. In each page that we created, we added a data provider to define where our string resources reside using a snippet of UIX tags like this:
:
<content>
<dataScope xmlns="http://xmlns.oracle.com/uix/ui">
<provider>
<data name="nls">
<bundle class="toystore.view.ToyStoreResources"/>
</data>
</provider>
:
By using Expression Language (EL) instead of hardcoded strings for strings properties such as in Page Titles, Button Text, Error strings, etc, your application will be multi-lingual enabled. For example:
:
<head title="${uix.data.nls['index.title']}"/>
:
For more detailed information on UIX's multilingual capabilities see the Developing Multilingual J2EE Web Applications using Oracle JDeveloper 10g [49] whitepaper on OTN.
3. Use the PageLayout Templatized Component
To take advantage of UIX's powerful "Look and Feel" functionality, we added a <pageLayout> element to each page to structure the UIX page into discrete and well defined rendering areas. The named children tags of the <pageLayout>
parent tag can contain distinct, logical bits of content which we can rearrange in a global, consistent way using UIX's
"Look and Feel" capabilities. We can change the Look and Feel, or "skin", of an application without changing the tags that define its page content. We explore the ADF Toy Store look and feel we developed for the demo in the The ToyStore ADF UIX Look and Feel section below.
To add a <pageLayout> to any blank UIX page, open the page in the Page Flow Diagram to edit, then with the design pane active, click on the center of the page and right-mouse click, and select "Insert inside form - form0", and choose pageLayout as illustrated in Figure 59.
NOTE:
The ADF UIX documentation usually specifies the EL expression convention for strings as follows:
${nls.title} While this convention is correct, it doesn't support string keys whose names themselves happen to have dots in them like "index.title". In order to specify a string key name that includes a dot in the name, we use the alternative EL syntax of: ${uix.data.nls['index.title']}
Figure 59: Inserting a PageLayout Component
4. Implement Conditional Rendering with EL Expressions
An example of where we needed to perform conditional rendering was for the Global Buttons. These buttons are in the top right side of the header area and include Cart, Login, Logout, Edit Account, and Help. Which of the buttons render depends on whether the user is logged in or not. We use an EL expression as the value of the globalButton
component's rendered property to specify when it should render. As shown in Figure 60, the "Edit Account" button has EL defining that the button will render only when the sessionScope variable named UserLoggedIn is not empty. The result is that it will render only once the user is logged in. We used this technique anywhere we needed conditional rendering in our pages.
TIP:
Using JDeveloper 10g's Structure Window, you can see all of the logical "named children" regions for the
<pageLayout> tag and you can use the right-mouse Insert inside... menu item to easily and accurately insert new content into the right named child area.
Figure 60: Render Edit Account Button Conditionally Using EL 5. Use the Data Control Palette to Drop DataBound Controls
Much of the data displayed in our ADF Toy Store UIX pages is in tabular format. Adding the tables was easy. As shown in Figure 61, we just set the Drag and Drop As poplist in the Data Control Palette to Read-Only Table, found the appropriate data collection, and dragged it onto the UIX page we were building.
Figure 61: Dropping Databound Components from Data Control Palette
Once created, we set the table properties to suit our needs for the page. For example, to avoid having the "Select"
column appear, we double clicked on it in the visual editor, and set the "Advanced Property" rendered to false. This will remove the selection column from our table.
Since we didn't need to offer table header column sorting for the demo's functionality, we clicked on each header and set its sortable property to no as shown in Figure 62.
NOTE: These changes can also be made using the normal Property Inspector without bringing up the modal properties dialog.
Figure 62: Disabling Sorting on a Table Column
In some cases we needed to make a value in each row be a link instead of just a normal text value. The ADF UIX editor allows us to right-mouse on a component and select a Convert... option as shown in Figure 63 to quickly change a display component into a link, for example. We used this feature in numerous places while building the pages.
Figure 63: Converting Component Types in UIX Visual Editor
To finish off the job, after converting the text control to a link, we set the text and the link destination properties. An example of showing this for a propduct name link is shown in Figure 64.
Figure 64: Setting Properties of Converted Link Component 6. Leverage MessageBox for Automatic Error Message Display
ADF UIX provides built in exception and error handling for message enabled components such as messageTextInput, messageChoice, etc..., when used in conjunction with the default messageBox component. Anywhere we anticipated the possibility that error messages might display, we've used this UIX messageBox.
<messageBox model="${data}"/>
Notice that like other UIX component we've discussed in the data binding section above, it only needs an EL reference to a single ADF binding layer object — in this case ${data} refers to the root ADF BindingContext —and the UIX component handles the rest.
Try submitting an invalid user ID or password when signing in, or invalid State / Country pairing when registering a new account or specifying the shipping address to see how the ADF model layer error messages are presented in the user interface.
The ToyStore ADF UIX Look and Feel
ADF UIX lets you change the appearance or look and feel of an application without having to rewrite the UIX code that implements the application's user interface. UIX provides two built in Looks and Feels (LAFs) — blaf and minimal — which can be extended for your custom applications. "BLAF" is an acroynm for the Browser Look and Feel [50] that Oracle e-Business suite follows. "Minimal" is a simpler alternative that provides a basic look that tries to minimize the number of downloaded images.
Running the ADF Toy Store demo's UIX view controller layer using the default blaf Look and Feel, it would look like what you see in Figure 65.
Figure 65: ADF Toy Store Using BLAF Look and Feel
Style sheets provide a centralized mechanism for defining and altering the appearance of pages separate from the content they contain. UIX Styles include an XML Style Sheet Language (XSS) — based on Cascading Style Sheets (CSS) — for defining environment-specific style sheets. In order to define a new ADF UIX look and feel for the ADF Toy Store demo — also known as a "skin" — we needed to create the following files:
toystorestyle.xss
An XML stylesheet file that contains styles needed for our ToyStore ADF Skin. This xss file extends the simple-desktop.xss file that is supplied with ADF UIX as a base for such customizations.
pageLayout.uit
This is the ToyStore ADF UIX pageLayout template that replaces the default renderer for the ADF UIX pageLayout component.
sidBar.uit
This is the ToyStore ADF UIX template that replaces the default renderer for the ADF UIX sideBar component.
toystore-laf.xml
This is the configuration file for the ToyStore ADF look and feel. In this file we define what ADF look and feel to extend, what renderer to replace, etc.
With these files in place, in order to get our application to use our new Toystore look and feel, we needed to edit the uix-config.xml file in the WEB-INF directory. The two key entries are:
1. Register the Toystore Look and Feel
<configurations xmlns="http://xmlns.oracle.com/uix/config">
:
<application-configuration>
<look-and-feels>
<look-and-feel-config>WEB-INF/toystore-laf.xml</look-and-feel-config>
</look-and-feels>
:
</application-configuration>
:
</configurations>
This will allow us to refer to the custom look and feel as "toystore".
2. Select the Toystore Look and Feel as Default
<configurations xmlns="http://xmlns.oracle.com/uix/config">
:
<default-configuration>
:
<look-and-feel>toystore</look-and-feel>
:
</default-configuration>
</configurations>
With the ADF Toy Store look and feel in place, the demo switches at runtime to look nearly exactly like the JSP version, as shown in Figure 66.
Figure 66: ADF Toy Store Look and Feel in Action
If you experiment by opening one of the ADF Toy Store demo's UIX pages in the ADF UIX visual editor, you'll experience first-hand how it gives true WYSISYG (what you see is what you get) feedback by showing you what the page will look like using the default look and feel we've selected.