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.
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.
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).
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.
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,
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.)
Although Oracle Alta UI is more than a skin, the skin is what you will start with:
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.
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.
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.
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,
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.
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.
Note: Make sure that a blank line is included between the facet start and end tags.
Now you’ll configure the managed bean with a method for switching dynamically to the dashboard task flow:
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.
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:
What you see: After copy and paste, the page source now contains the following changes and additions:
With the Index.jsf page completed, you can run the sample page to see the Oracle Alta UI design in action:
Figure 3: Sample application displayed in a desktop browser and the mobile browser of iOS Simulator
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
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.
Photography by Stefan Stefancik, Unsplash