Subscribe

Technology

Community

Features

Up Front

Comment

Share

Share

Application Development

Design Responsively

Use the Oracle Alta UI design system to implement a mobile-first strategy for web applications.

By Frank Nimphius

March/April 2015

User interfaces (UIs) in smartphones and tablets are constrained by the device display size, lack of a physical keyboard, and use of finger gestures instead of mouse pointers. For these reasons, native mobile UIs are usually designed more simply and cleanly, and with more visuals, than equivalent desktop UIs. Mobile UIs tend to focus more on the display of information that is derived from data than on the data itself—the opposite of what most desktop UIs provide.

To reduce the development effort and shorten the time to market for mobile business applications, development teams often build web applications that can run in both desktop and mobile browsers. To ensure user acceptance of such applications, developers should consider implementing a UI design that is optimized for mobile—an approach known as a mobile-first strategy. Mobile-first does not mean mobile-only. Mobile-first designs are less cluttered than traditional desktop interfaces. Page navigation is mobile-friendly and avoids page scroll bars and horizontal scrolling. And a mobile-first design uses scripts and Cascading Style Sheets (CSS) to implement responsive layouts—which automatically adapt to the device on which they’re displayed.

With the release of Oracle JDeveloper 12.1.3, Oracle Alta UI is now available. Oracle Alta UI is a design system and set of guidelines that promote a mobile-first design for Oracle Application Development Framework (Oracle ADF) web applications. Oracle Alta UI helps you build simpler UIs that enable application users to scan information quickly and perform work actions more easily.

This column provides an overview of Oracle Alta UI for the Oracle ADF Faces feature of Oracle ADF and gives you hands-on experience with building Oracle Alta UI–designed UIs with Oracle ADF.


About Oracle Alta UI Design

Oracle ADF pages and views are rendered by Oracle ADF Faces, a JavaServer Faces (JSF) component framework that abstracts details of the UI rendering from the business application itself. Oracle ADF Faces components intelligently handle the layout geometry management and user interactions on desktop and mobile browsers. With Oracle Alta UI, Oracle ADF web applications have a new look and feel (see Figure 1) in addition to a rich set of mobile-optimized and redesigned Oracle ADF Faces components, CSS, scripts, and developer best practices for implementing a mobile-first design strategy.
o25adf-f1

Figure 1: Oracle Alta UI–designed dashboard

Oracle Alta UI is not an Oracle product but an innovative design developed by the Oracle user experience (UX) team, based on years of usability testing, insight, and research. The core design principle of Oracle Alta UI is to build a simpler, more visual, lighter, and highly responsive UI that renders quickly on mobile and desktop browsers. A new color scheme and a new set of icons make it easier for users to scan the application UI for important information. Views that are designed with Oracle Alta UI are less cluttered and use floating layouts with a fixed width—a UI concept common on mobile devices. Fonts, rows, and user-selectable areas are larger, for a better reading experience and improved access (see Figure 2).
o25adf-f2

Figure 2: Oracle Alta UI–designed list view with large rows and fonts

From an Oracle ADF application development perspective, adopting Oracle Alta UI is more than changing a skin. It requires developer awareness and action that’s unprecedented for Oracle ADF users. The reward is a first-class mobile-first web design.

The following hands-on instructions step you through building a simplified and cut-down version of the front page of the Oracle ADF Faces Work Better Application demo shown in Figure 1. A part of the demo content is precreated for you, enabling you to focus on the design.

To get started,download the sample application and unzip o25adf-2379332.zip to a local folder. Do not use spaces in the folder name. Ensure that you’re using the studio edition of Oracle JDeveloper 12c (12.1.3) or later, available as a free download on Oracle Technology Network.


Getting Ready

The WorkBetterSample hands-on workspace contains Model and ViewController projects. The workspace includes a JavaBeans data model, so no database connection is needed.

To set up the workspace,

  1. In Oracle JDeveloper, select File -> Open and navigate to the directory containing the unpacked zip file content.
  2. Open the oramag010215/WorkBetterSample folder, and select the WorkBetterSample.jws file.
  3. Click Open to load the workspace.

Next, start the Oracle WebLogic Server instance integrated with Oracle JDeveloper. To start Oracle WebLogic Server, select Run -> Start Server Instance.

If you are running the integrated Oracle WebLogic Server for the first time, a Create Default Domain dialog box will open. Create a password for the default Oracle WebLogic Server domain. To ensure that the integrated Oracle WebLogic Server listens for the localhost and the IP address of your computer, do not select an address from Listen Address.

Click OK to save the changes and to create and configure the default domain for Oracle ADF. Oracle WebLogic Server creates a default domain and then starts the server. Wait for the “IntegratedWebLogicServer started” message on the Running: IntegratedWebLogicServer panel before proceeding to the steps in the next section. (This can take two to three minutes.)


Using the Oracle Alta UI Skin

Although Oracle Alta UI is more than a skin, the skin is what you will start with:

  1. With the WorkBetterSample workspace open in Oracle JDeveloper, select File -> New -> From Gallery.
  2. In the New Gallery dialog box, select Web Tier -> JSF/Facelets -> ADF Skin.
  3. Click OK.
  4. Change the File Name field value to WorkBetterSample.css.
  5. Keep all the default values for the other fields, and click Next. Note that skyros-v1.desktop is the default skin that the skin you’re building will extend.
  6. Click Finish to open the WorkBetterSample.css file in the visual skin editor.
  7. Select the Source tab at the bottom of the visual skin editor, and delete the existing source code.
  8. In the Application Navigator, right-click the workbettercss.txt file in the ViewController -> Web Content -> txtfiles folder and choose Open.
  9. Place the cursor into the opened text file, and press Ctrl-A followed by Ctrl-C to copy the contents to the clipboard.
  10. Click the WorkBetterSample.css tab, and click in the editor.
  11. Press Ctrl-V to paste the contents of the clipboard into the skin CSS file.
  12. Save your work, and close the open tabs.
  13. Right-click the trinidad-skins.xml file, located in the Model -> Web Content -> WEB-INF folder, and choose Open.
  14. Replace 
    <extends>skyros-v1.desktop</extends>

    with 
    <extends>alta-v1.desktop</extends>

Save your work, and close all tabs.

What you just did: You worked through the ADF Skin dialog box and declaratively created a custom skin that extends the default Skyros skin. You then replaced the contents of the CSS file with predefined content from the Oracle Alta UI Faces demo. To ensure that the custom skin extends the Oracle Alta UI skin instead of the default Skyros skin, you replaced the skin “extends” reference with alta-v1.desktop. Now the application look and feel is set to Oracle Alta UI.


Creating an Oracle Alta UI Page

In contrast to previous Oracle ADF layout guidelines, Oracle Alta UI design promotes flow layouts with a flat hierarchy of nested layout components. In addition, the layout components are configured for layouts that have a defined fixed width but not a fixed height. At runtime, users scroll the page to see more information instead of using the component scroll bars.

  1. In Oracle JDeveloper, click the Web Content folder in the ViewController project.
  2. From the main Oracle JDeveloper menu, choose File -> New -> From New Gallery.
  3. In the New Gallery dialog box, choose Web Tier -> JSF/Facelets -> Page. Click OK.
  4. Change the File Name value to Index.jsf.
  5. Select Reference ADF Page Template.
  6. In the Templates field, select the Tablet First Template option and click OK.
  7. Wait for the live view of the Index.jsf page to render in the visual editor tab. Then select the Source tab at the bottom of the page to switch to the page source editor.

What you just did: The Tablet First template in Oracle JDeveloper helps you build a new Oracle ADF Faces page with a simple layout that follows Oracle Alta UI design principles. To better analyze the template, you changed from the visual page view to the source view.


Exploring the Tablet First Template

Page templates in Oracle ADF Faces are like black boxes, in that the template source is not physically added to the page but only referenced. To “unbox” the template and gain a better understanding of what it does, you can use Oracle JDeveloper to open the template source. So, for the Tablet First template,

  1. Open the Structure panel in Oracle JDeveloper (if it’s not open already), by selecting Window -> Structure from the top-level menu.
  2. Click in the Index.jsf page source.
  3. In the Structure panel, expand the f:view -> af:document -> af:form nodes, right-click the af:pageTemplate node, and select Go to Declaration to open the template source file.
  4. To see the template component sources, select the Source tab at the bottom of the tabletFirstTemplate.jspx tab. You can see from various af:declarativeComponent tags in the template source that the template is not a monolithic file but instead a composite built from page fragments. To see what is in the declarative component reference, select the af:declarativeComponent tag of interest in the template page source.
  5. Go to the Structure panel, right-click the af:declarativeComponent node, and choose Go to Declaration.
  6. Select the Source tab at the bottom of the opened tab window showing the declarative component content.
  7. Repeat steps 25 through 30 for any file and declarative component you are interested in.

What you just did: You “unboxed” the Tablet First template to read and understand the template structure and behavior. You can see that the Oracle Alta UI layout uses af:panelGridLayout components with custom CSS to create a simple flowing layout.


Adding Content to the Index.jsf Page

Now you’ll add content from a bounded task flow as a dynamic region to the Index.jsf page. Dynamic regions enable users to switch between bounded task flows at runtime so they can view different sets of information without leaving the page. In this exercise, you create a reference to the dashboard task flow used in the Oracle Alta UI Faces demo.

  1. Switch to the Index.jsf tab, and ensure that you are viewing the page source.
  2. Edit the page source, and change the template center facet definition from 
    <f:facet name="center"/>

    to 
    <f:facet name="center">
    </f:facet>

Note: Make sure that a blank line is included between the facet start and end tags.

  1. Expand the ViewController -> Web Content -> WEB-INF -> dashboard nodes in the Oracle JDeveloper Application Navigator.
  2. Drag the dashboard-btf.xml bounded task flow file entry onto the blank line you left between the center facet start and end tags.
  3. Release the mouse button, and choose Dynamic Region.
  4. In the Choose Managed Bean for Dynamic Region dialog box, click the green plus icon to create a new bean.
  5. Define the Bean Name field value as IndexPageBean.
  6. Define the Class Name field value as IndexPageBean.
  7. Ensure that the Scope field value is set to view, and click OK three times.

Creating a Command Link

Now you’ll configure the managed bean with a method for switching dynamically to the dashboard task flow:

  1. Edit the Index.jsf page source and change the template appNav facet definition from 
    <f:facet name="appNav"/>

    to 
    <f:facet name="appNav">
    </f:facet>
  2. Drag the dashboard-btf.xml bounded task flow file entry onto the blank line you left between the appNav facet start and end tags.
  3. Release the mouse button, and choose Dynamic Region Link -> dynamicRegion1.

What you just did: You created a command link that, when clicked, sets references to the dashboard bounded task flows as the current displayed region context. Whenever this link is clicked, the region UI refreshes to show the switched content.


Completing the Sample Application

More steps are required to complete the Index.jsf sample page UIs. To save you from more typing and to keep the focus on the aspects of interest, the completed page source is available for copy and paste:

  1. In the Application Navigator, right-click the indexjsf.txt file in the ViewController -> Web Content -> txtfiles folder and choose Open.
  2. Click in the opened text file. Press Ctrl-A and then Ctrl-C to copy the contents to the clipboard.
  3. Select the Index.jsf tab, and click in the page source.
  4. Press Ctrl-A to select all the page content, and press Delete to remove it.
  5. Press Ctrl-V to paste the prepared page content into the page.
  6. Save your work.

What you see: After copy and paste, the page source now contains the following changes and additions:

  • The command link to switch the task flow content displayed in a region has been replaced by buttons. (Two of the buttons illustrate the Oracle Alta UI page look for navigation bars and are nonfunctional.)
  • Two Apache MyFaces Trinidad trh:meta tags have been added, each of which sets a header parameter to support the responsiveness of the Oracle ADF Faces page layout.
  • The apple-mobileweb-app-capable parameter for running on Apple iOS devices tells the Safari browser not to display browser elements that are specific to web applications—such as the browser URL text field or the browser button bar at the bottom of the screen—so that the Oracle ADF Faces page looks like a standalone application on iOS.
  • The viewport header parameter defines the zoom behavior of the Oracle ADF Faces view and determines whether users can enlarge parts of the page on a tablet device. In the sample, the zoom factor is set to 100 percent and doesn’t allow any scaling.

Running the Sample

With the Index.jsf page completed, you can run the sample page to see the Oracle Alta UI design in action:

  1. In a desktop browser, right-click the Index.jsf page in the Oracle JDeveloper Application Navigator and choose Run.
  2. Wait for the browser to render the page. Then resize the browser window to see the responsive page design in action. For example, you can see the four-column layout of the information boxes changing to a three-, two-, and single-column layout as you reduce the browser width.
  3. Note that some of the information boxes are clickable, which you can see by hovering the cursor over them. (In the sample application, none of the clickable areas has any functionality applied. A completed implementation of the Oracle Alta UI Faces demo is available at jdevadf.oracle.com/workbetter/faces/index.jsf.)
  4. Optional: To test the application on a mobile device, use the mobile browser of iOS Simulator (see Figure 3) or an Android emulator and request the same application URL. Alternatively, run the application on a tablet.

o25adf-f3

Figure 3: Sample application displayed in a desktop browser and the mobile browser of iOS Simulator


Rebuild, Retouch, or Renovate

Oracle recommends using Oracle Alta UI design for building new Oracle ADF UIs. However, existing Oracle ADF applications can also be modified to implement this new design. Depending on the complexity of the existing application, you can

  • Rebuild. Rebuild the application UI to take advantage of Oracle Alta UI design and the new UI components. This approach is recommended for businesses that want to run Oracle ADF applications in mobile browsers on tablets and in desktop browsers.
  • Retouch. Retouch the application—a minor effort that changes the look and feel to Oracle Alta UI and applies corrections only for layout and rendering issues that are detected during runtime testing. This approach does not adopt the responsive-design improvements that Oracle Alta UI design provides and so might be best suited for applications that run solely on desktop browsers.
  • Renovate. Renovate the application by applying the Oracle Alta UI skin, changing to a floating layout, and replacing existing UI components with new ones. This approach is labor-intensive and is suitable for simpler UIs for which renovation is less expensive than rebuilding.

Summary

The Oracle Alta UI design system provides a new user experience with proven skin and developer guidelines that enable Oracle ADF developers to build web applications with a responsive page design for use on desktop and mobile browsers. You learned how to configure the Oracle Alta UI skin, build responsive Oracle ADF Faces pages with the Tablet First page template, analyze the template to learn how to build your own, and add modular page content defined in bounded task flows as a dynamic region.

A mobile version of Oracle Alta UI—Oracle Alta Mobile UI—is built into Oracle Mobile Application Framework, ensuring the same look and feel and UX for native mobile applications as for Oracle ADF–based desktop and mobile browser applications.

Next Steps

DOWNLOAD
Oracle JDeveloper 12c

the sample application

READ more about
Oracle Alta UI for ADF Faces
Oracle Mobile Alta UI
Creating Oracle ADF dynamic regions


Photography by Stefan Stefancik, Unsplash

Frank Nimphius

Frank Nimphius is a Master Principal Product Manager at Oracle Corporation where he works in the Oracle Mobile Platform group.

Frank joined Oracle Product Management more than 20 years ago and since then worked on various Oracle products including Oracle Forms, Oracle JDeveloper, Oracle Application Development Framework (ADF) and the Mobile Application Framework (MAF). In his 20+ years at Oracle Frank enjoyed the many opportunities the job offered and became an author, an in-class and online-video trainer, a presenter at various international conferences, a collateral and training writer, a Java developer, as well as a product marketer and blogger. Not to forget the so-called “good old times” that Frank spent in sales in his early years at Oracle.

In his current role, Frank works in the development organisation responsible for Oracle Mobile Cloud Service Enterprise (OMCe), Oracle Intelligent Bots and Customer Experience and Analytics. 

Oracle

Integrated Cloud & Platform Services

Integrated Cloud and Platform Services