Oracle Alta UI Looks & Implementation

Posted by in Blog | December 1, 2014

As we recently announced in our last blog post regarding new features of Application Development Framework, here are the details about Oracle’s new user interface Alta.

Introduction

So far Applications developed with Application Development Framework had a lot of specifics and ADF components have consisted of large number of parts. Each of these parts had his specific CSS class, which needed to be overridden in order to implement new design. Results were often large number of CSS classes regarding only one component.

To make things easier for developers, Oracle introduced some of default skins of applications and Skin Selector with their JDeveloper IDE. Skin Selector gave developers possibility to visually check out all components included in ADF and see of which parts are they assembled. In addition, Skin Selector allowed developers to change manually style of those components parts. Even with using predefined skins and Skin Selector developers often needed to check CSS in runtime to make additional changes to their CSS in order to fully implement their specific design. All mentioned often required a lot of time and even with successful implementation of design, ADF applications still looked dated. As Oracle saw the need for visual improvement of ADF applications, they introduced Alta User Interface.

Looks

Alta UI offers modern minimalistic design achieved through redesign of existing ADF components. To make such design possible component redesign needed to be somewhat radical. New redesign considerably lowered number of parts of which components consisted.

In addition, style attributes are added in runtime of application, meaning that while developing there is no way to see how included component would behave at runtime. Developers will end up looking at the page source and adjusting their CSS files accordingly. Oracle added whole set of components as show cases to introduce developers with their behavior and possibilities. Full list of components can be found at official link.

Alta UI also made an improvement regarding responsive design, therefore making higher availability of applications on desktop and on mobile devices such as tablets.
Important thing to note is that Oracle highly recommend not to use Alta UI with old applications as Alta UI is using different layout which, among other things, better covers responsive design and ensures vertical scrolling in case when large content is needed to be shown on smaller screen resolution. For developing Content Area, Oracle recommends using Panel Grid Layout.

Implementation

Even though Oracle does not recommend it and application will lose some of benefits given by Alta mostly regarding responsiveness of the design, developers can include Alta UI in their old applications. As Alta UI is available in latest edition of Oracle JDeveloper 12.1.3, application needs to be migrated into the new IDE and therefore certain changes needs to be made on application itself considering some of the components, and component properties were deprecated during improvement and new releases of Application Development Framework.

As for implementation of Alta UI itself there are not out-of-the-box support as there were with ADF skins in past. Currently Oracle provides Alta UI only by making certain changes in some of ADF configuration xml files. Even though process is not very intuitive, it is not very demanding for developers.

To include Alta UI into the application trinidad-config.xml file needs to be modified as on picture below.

Results are immediately visible in Skin Selector, but developers still can’t override CSS classes provided by Alta UI, that is, until they make certain changes in trinidad-config.xml and build their own CSS file. To override default Alta’s CSS trinidad-settings.xml should look like on the example below. On the example it is visible that ADF needs to be told which class will extend Alta’s and that class needs to be created before these changes.

After this, ADFSkin can be created, and in list of predefined skins, Alta’s skin will be provided as option, which needs to be chosen in order to have CSS file, which will override Alta’s CSS classes. After finishing creation of ADFSkin, trinidad-settings.xml will look like on the example below.

As mentioned earlier implementation of Alta UI on applications developed by earlier versions of Application Development Framework require some work regarding functionalities in case of very old applications and almost certainly visual polishing regardless of ADF version used for development. NEOS Ltd. successfully managed to migrated ADF Kickstart product to Alta UI, and now is in finishing stage of visual polishing process. Even though ADF Kickstart visual presentation does not have any influence over application developed using ADF Kickstart in NEOS Ltd. we are very keen to be in step with latest releases of Oracle and open source technologies and to use everything they can offer.

With introduction of Alta User Interface Oracle clearly made vast improvement in visual presentation of applications developed by Application Development Framework. Alta User Interfaces is definitely setting higher visual standards in enterprise application segment. Responsive design ensures higher availability of the application regardless of the device on which it is rendered. Minimalistic and simplified pages make them more appealing to the end-user while ensuring clear data presentation on modern user interface.

2 comments on “Oracle Alta UI Looks & Implementation

  1. Ivica Sruk on said:

    Hi Srinivas,

    trinidad-config.xml is located in project by default and trinidad-skins.xml is created upon creation of skin. Both files are needed to change manually in order to apply ALTA.

    However, I would like to point out that this article is specific for JDdeveloper version 12.1.3, in latest version this actions are not needed. In 12.2.1 version Skyros is not anymore the default skin and ALTA is applied by default.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>