amis oracle jdeveloper 12c 07 adf faces skin editor-betty van dongen

Luc Bors

Betty van Dongen

14-aug-2013, ADF 12c Launch event

ADF 12.1.2.0

New Features ADF Faces & Skin Editor

Code Editor

• Code Editor

– For “Editing Code”

– Attributes for language, linenumbers

List View

– To create a List Layout

– Renders ListItem children

– Based on a collectionModel, just like

a table

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

How does it work ?

Separators and Spacers

• Default behavior

• Spacers and Separators

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

PanelDrawer

Demo

PanelSpringboard

Demo

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)

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

New Features and Enhancements

• InputText, InputDate, InputColor

– Placeholder attribute

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.

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

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

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

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

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

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