At Oracle OpenWorld this year Oracle announced the new Oracle Alta UI - a set of UI guidelines that will help you create better looking and functioning applications. We use these guidelines to build all our modern cloud based applications and products - and you can use it too today if you are on JDeveloper 12.1.3.
Take a look for example at one page from the master details pattern page:
You might be wondering how do I go about starting to create such an Alta page layout?
Below is a quick video that shows you how to build such a page from scratch.
A few things you'll see during the demo:
Basic work with the panelGridLayout - for easier page structure
Working with the new tablet first page template
Enabling selection on a listView component
Working with the circular status meter
The new AFAppNavbarButton style class
Hot-swap usage to reduce page re-runs
One point to raise about this video is that it focuses more on getting the layout and look rather then the Alta way of designing an application flow and content. In a more complete Alta mind-set you'll also figure out things like fields that probably don't need to be shown (such as the employee_id), you'll think more about "why is the user on this page and what will he want to do here?" which might mean you'll add things like a way to see all the employees in a department in a hierarchy viewer rather than a form that scroll a record at a time. There are more things you can do to this page to get even better functionality, but on those in future blog entries...
Responsive web applications are a common pattern for designing web pages that adjust their UI based on the device that access them. With the increase in the number of ADF applications that are being accessed from mobile phones and tablet we are getting more and more questions around this topic.
Steven Davelaar wrote a comprehensive article covering key concepts in this area that you can find here. The article focuses on what I would refer to as server adaptive application, where the server adapts the UI it generates based on the device that is accessing the server.
However there is one more technique that is not covered in that article and can be used with Oracle ADF - it is CSS manipulation on the client that can achieve responsive design. I'll cover this technique in this blog entry. The main advantage of this technique is that the UI manipulation does not require the server to send over a new UI when a change is needed. This for example allows your page to change immediately when you change the orientation of your device.
This changes the properties of the same styleClasses that are defined in my application's skin.
Here is a quick demo video that shows you the full application and explains how it works.
Update - since running this demo I found out that in 12.1.2 you get better results if everything relating to the style is defined just in your template and not spread in your skin file too (as shown in the video)
So For those looking to replicate this, here are the basic files:
<?xml version='1.0' encoding='UTF-8'?> <af:pageTemplateDef xmlns:af="http://xmlns.oracle.com/adf/faces/rich" var="attrs" definition="private" xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component"> <af:xmlContent> <afc:component> <afc:description>A template that will work on phones and desktop</afc:description> <afc:display-name>ResponsiveTemplate</afc:display-name> <afc:facet> <afc:facet-name>main</afc:facet-name> </afc:facet> </afc:component> </af:xmlContent> <meta name="viewport" content="width=device-width, initial-scale=1"/> <af:resource type="css">
I blogged before about the support for tablet and touch device rendering with ADF Faces. Release 12c brings together features that were introduced in previous patches (such as 188.8.131.52) into a single line of code and even adds more features in this area.
To show you what ADF Faces does automatically for you, I re-recorded the interaction with the houses demo that I showed here, but this time on an iPad.
Things to note:
Switching from stretch to flow layout (eliminates scroll bars and allow swipe scroll)
Table pagination instead of scroll bars
HTML5 rendering for data visualization components instead of Flash
Drag and drop and tap and hold support on device
Swipe support on objects such as cards in a hierarchy viewer
Maximize area support
New tablet style UI components (Springboard and list view for example)
It's a single application that runs on both the regular and mobile browser.
The only thing I needed to do is use an EL for two properties (maximize and dimensionsFrom) on the top containers in the page that will switch the whole page to do flow layout on touch devices. You would usually use this in your page template for the application.
A new component that showed up in the JDeveloper 184.108.40.206 release is the af:listView component. This component will become more and more popular as more people target tablet devices with ADF Faces UI. The component allows you to create a scrollable list from a collection of data, and it also does fetching with ranges so you don't get too much network traffic. If you ever used a contacts list on a smart phone you'll recognize the list view source of inspiration - check out the runtime demo of the component here.
The component was actually backported into 220.127.116.11 from the 12c version - and while in the 12c version of JDeveloper there is better design time support for adding and binding a listview to a page, in the current release the work will mostly be manual.
However, for the lazy developer there are some shortcuts you can take to create the list component faster.
Here is a short video that shows you how to leverage an existing table component on your page to make the creation of the list component easier and with more functionality.
In the 11.1.16 version of Oracle ADF we started adding specific features to the ADF Faces components so they'll work better on iPad tablets.
In this entry I'm going to highlight some new capabilities that we have added to the 18.104.22.168 release. (note if you are still on the 11.1.1.* branch - you'll need to wait for 22.214.171.124 to get the features discussed here).
The two key additions in the 126.96.36.199 version compared to the 188.8.131.52 features for iPad support include: pagination for tables and adaptive flow layout.
The pagination for table is self explanatory, basically since iPad don't support scroll bars, we automatically switch the table component to render with a pagination toolbar that allow you to scroll set of records or directly jump to a specific set. See the image below.