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.
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.
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.
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.
With release of Fusion Middleware 12c Oracle made sure to fix a numerous number of bugs that were noticed in previous versions of their integrated development environment JDeveloper. Beside bug fixes, Oracle introduced a number of enchantments for existing components therefore making available new usage of those components by making them more adjustable. We decided to describe shortly some of the mentioned components.
File Upload is now supporting transfer of large file uploads, multiple uploads, Drag and Drop functionality and progress bar.
Table has been given possibility for freezing right most columns so that a scroll bar appears on the left side of the frozen columns. Both Table, TreeTable, PivotTable and Gantt now allow configuration of paging vs. scrolling via the new scrollPolicy attribute. In addition, PivotTable now provides support for both row and column paging, Split View mode and Attachment mode.
This release also included support for Java Server Faces 2.0, which added new features to ADF, some of which are Facelets, Ajax, Get, new scopes, expression language methods with arguments and adding expression language inside page content.
In addition, Oracle has introduced a completely new palette of innovative components for Application Development Framework as part of their new Middleware. Below, you will find the list of new components with short description.
Treemap and Sunburst components are fresh addition to current Hierarchy Viewer component. They offer different visualization styles to display hierarchy.
|Picture 1. Treemap component|
|Picture 2. Sunburst component|
Timeline component is an interactive data visualization that allows users to view events in chronological order. It is provided with navigation for showing specific timeframe.
|Picture 3. Timeline component|
PanelGridLayout is a more predictable and more efficient layout component that can be used to create all new layouts. This component generates the same markup that meets the CSS3 specs for grid layout so it can be optimized for layout performance. This is now a recommended UI layout component for most pages.
Panel Drawer component renders tabs attached to the side of container component. Clicking a tab opens the drawer containing defined content.
|Picture 4. Panel Drawer|
Panel Springboard is somewhat similar to Panel Drawer presenting toolbar navigation that can be displayed as tab strip or as grid of icons. Clicking an icon displays its content.
|Picture 5. Panel Springboard|
Code Editor allows displaying and editing text in a code editor format with line numbers and text highlighting.
|Picture 6. Code Editor|
Even though we have mentioned a quite number of changes, which came with new Application Development Framework, there are even more enchantments and components available for use, regarding not only ADF but also JDeveloper and more. Full list of changes is available on official documentation.
Latest highlight in 12c is concerning completely new visual representation of existing components. Oracle achieved this goal with introducing Oracle Alta UI in their new version of JDeveloper 184.108.40.206.0. Simple enablement makes it simple for use in development and to users of the application gives completely new impression of applications developed by Application Development Framework therefore setting higher standards for UI of enterprise applications. With Alta UI pages are simplified with emphasis on graphics which makes them more appealing while ensuring clear data presentation. More on Oracle Alta UI will be available in our next blog entry.