AMIS Oracle JDeveloper 12c 07 ADF faces skin editor-Betty van Dongen


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

AMIS Oracle JDeveloper 12c 07 ADF faces skin editor-Betty van Dongen

  1. 1. Luc Bors Betty van Dongen 14-aug-2013, ADF 12c Launch event ADF New Features ADF Faces & Skin Editor
  2. 2. Code Editor • Code Editor – For “Editing Code” – Attributes for language, linenumbers
  3. 3. List View – To create a List Layout – Renders ListItem children – Based on a collectionModel, just like a table
  4. 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. 5. How does it work ?
  6. 6. Separators and Spacers • Default behavior • Spacers and Separators
  7. 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. 8 PanelDrawer Demo
  9. 9. PanelSpringboard Demo
  10. 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. 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. 12. New Features and Enhancements • InputText, InputDate, InputColor – Placeholder attribute
  13. 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. 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. 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. 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. 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. 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. 19 Links • PanelDrawer Demo Oracle • demo/faces/components/panelDrawer.jspx;jsessionid=ebF9NlpMflUBI_YaSZo7vNQp h9sZcCkaq9lhrL7rZdQwqzcsiWEV!-1046269988 • PanelSpringBoard Demo Oracle • demo/faces/feature/panelSpringboardApp.jspx • Oracle Demo general (also try skinning) • • Skin Editor Documentation • • Skin Editor Documentation, 11.4 Applying an ADF Skin to Your Web Application •