New GUI Features of ADF 12C. Skin Editor and new Oracle ADF 12c features.

1. Luc Bors
Betty van Dongen
14-aug-2013, ADF 12c Launch event
ADF 12.1.2.0
New Features ADF Faces & Skin Editor

2. Code Editor
• Code Editor
– For “Editing Code”
– Attributes for language, linenumbers

3. List View
– To create a List Layout
– Renders ListItem children
– Based on a collectionModel, just like
a table

4. The PanelGridLayout
• The panelGridLayout component is a layout container component that
– uses one or more gridRow components to describe the rows of a grid layout
structure.
– Each row defines a height and margins.
– Each gridRow uses one or more gridCell components to describe the cells for
columns in that row of the grid layout structure.
– Each cell defines width, margins, column span, row span, horizontal alignment, and
vertical alignment

5. How does it work ?

6. Separators and Spacers
• Default behavior • Spacers and Separators

7. Bye Bye Spacers & Separators
Another hidden benefit is the runtime cost. Because we can use a single layout
to achieve much more complex geometries the client side layout code inside
the browser is having to work a lot less. This will be a real benefit if your
application needs to run on lower powered clients such as netbooks or tablets

8. 8
PanelDrawer
Demo

9. PanelSpringboard
Demo

10. New Features and
Enhancements
• TableComponent
– Paging is back
• via scrollPolicy attribute (page)
• autoHeightRows=’0′
• Inside a flowing container such as a panelGroupLayout with
layout =”scroll”.
– Row Navigation can be prevented when
validation failure occurs
• (via BlockRowNavigationOnError)
– Frozen Columns from the end
• via FreezeDirection)

11. New Features and
Enhancements
• Calendar component
– Time slots are configurable and need not be fixed at 30 minutes
• When set to "auto", the calendar will fallback to the skin property "-tr-time-slots-per-hour"
– Support hour zoom-in/zoom-out of the calendar

12. New Features and
Enhancements
• InputText, InputDate, InputColor
– Placeholder attribute

13. New Features and
Enhancements
• InputFile
– Supports Multiple File Upload (via MaximumFiles attribute)
– Full control over when Upload is executed (via uploadType attribute)
Depending on what value is used, the Upload button will appear to enable manual
uploading of files or files will be upload automatically once added.

14. New Skyros Skin
– A new look and feel that incorporates current UI visual design trends
– flat, rather than dimensional,
– reduced gradients,
– reduced borders,
– light and or white colors with splashes of color.
• This skin family uses CSS3 for gradients, drop shadows, rounded corners etc. in comparison to the fusion
skins that use background images. Making this skin modern, lightweight, and easy to skin.

15. 15
Enable Runtime Skin Updates
• New deployment option in Standalone Skin Editor which allows
deployment of skin ADF Library jars directly to running web applications.
• This is a developer/testing productivity improvement for developers of
new skins.

16. 16
Enable Runtime Skin Updates
• Web applications need to make themselves available to accept new skins
using the new web application property "Enable Runtime Skin Updates".

17. 17
Skin Editor Design Tab
• New Design Tab that allows for easy customization of the most commonly
skinned items.
• Includes sample page preview and preview in browser, allowing the
developer to further debug skins using browser developer tools.

18. 18
Skin Editor Selectors Tab
• Selecting a pseudo-element highlights the area in the preview that pseudo
element effects. Selecting an element in the preview provides information
regarding which pseudo element(s) control that area.

19. 19
Links
• PanelDrawer Demo Oracle
• http://jdevadf.oracle.com/adf-richclient-
demo/faces/components/panelDrawer.jspx;jsessionid=ebF9NlpMflUBI_YaSZo7vNQp
h9sZcCkaq9lhrL7rZdQwqzcsiWEV!-1046269988
• PanelSpringBoard Demo Oracle
• http://jdevadf.oracle.com/adf-richclient-
demo/faces/feature/panelSpringboardApp.jspx
• Oracle Demo general (also try skinning)
• http://jdevadf.oracle.com/adf-richclient-demo/faces/index.jspx
• Skin Editor Documentation
• http://docs.oracle.com/middleware/1212/skineditor/index.html
• Skin Editor Documentation, 11.4 Applying an ADF Skin to Your Web
Application
• http://docs.oracle.com/middleware/1212/skineditor/ADFSG/adfsg_apply.htm#BABDBEFD