DOAG 2011 - Upgrade Guide for Oracle ADF on WebLogic Server
ADF User Interface Design Best Pratices
1. ADF USER INTERFACE DESIGN
BEST PRACTICE
Andreas Koop
CEO & Consultant
Oracle Technologies
DOAG 2012
2. ENTERPRISE PRAGMATIC IT
Consulting Training Development
Oracle Fusion Oracle Oracle Oracle
Middleware WebCenter ADF WebLogic
Enable productive IT by Oracle Technologies
3. WHAT IS MOST CHALLENGING IN
ADF PROJECTS?
In courtesy of
Andrejus Baranovskis
Quelle: http://andrejusb.blogspot.de/2012/10/oow12-oracle-adf-implementations-around.html
Andreas Koop 3
4. WHY IS USER INTERFACE DESIGN
MOST CHALLENGING?
‣ Component Based
‣ 150+ Components
‣ Lots of Properties
‣ Lots of easily confusing
components - XYLayout, XYHeader, XYBox
‣ Design Preview != Runtime View
Andreas Koop 4
5. AGENDA
Design before you Code
Seitenlayout
Formular Design
Barrierefreies Design (Accessible)
Tipps und Tricks
Andreas Koop 5
6. BEFORE YOU START
‣ Mockup / Wireframing
Klick-Prototyping
‣ Fokussierung auf Inhalt
und Funktionalität
‣ Günstige und Schnelle
Iterationszyklen
Andreas Koop 6
7. MOCKUP TOOLING
EMPFEHLUNG
‣ Balsamiq
(Desktop,
Web,
GDrive Sync)
‣ Moqups Beta
(Web / HTML5)
https://moqups.com jeweils inkl.
Mobile UI
Mockups
Andreas Koop 7
17. CONTENT LAYOUT
HOW NOT TO
Panel boxes are intended only for ancillary information,
and should not be used for the primary page task!
Oracle RCUI Guide
Andreas Koop 17
37. BARRIEREFREIHEIT
BEST PRACTICE
‣ Einstellungen im Cookie speichern
‣ Korrekte Komponentenverwendung achten
(H1-6 Level, af:showDetailHeader, size=“-1“)
‣ Orientierungspunkte verwenden (Landmarks)
‣ Tabelle (Summary), Label for InputComponent
‣ WAI-ARIA (role=presentation, => Layouttable kein
Problem!)
Andreas Koop 32
38. BARRIEREFREIHEIT
HERAUSFORDERUNGEN^3
‣ Fokussteuerung!
=> W/A ab 11gR2 mittels JSF 2 FaceBehaviors
‣ Navigation im af:tree / af:treeTable unzumutbar
(Warum nicht wie im Windows Explorer?)
‣ Einfach Link-Listen <ul>... nicht möglich ;)
Andreas Koop 33
39. Do not use
EMPFEHLUNG every 150+ UI
Components
‣ An ADF UI Standards halten, auch wenn (noch)
nicht alle modernen Patterns möglich sind (z.B.
HTML5 Placeholder)
‣ Komponenten-Architektur von ADF/JSF schenkt
neue Features bei Versionsupgrade!
(Beispiel: DVT Komponenten als HTML5)
‣ ADF Skin, Skin, Skin
‣ Nicht gegen, sondern mit ADF gehen!
Andreas Koop 34
- component based: d.h. man ist auf die von JSF zur Verf&#xFC;gung gestellten Properties angewiesen und kann den HTML-Code nicht direkt beeinflussen\n\n
\n
\n
\n
\n
\n
Oracle UI Shell ist nicht fix. Dient als Grundlage f&#xFC;r Custom UI Shell!\n
\n
\n
\n
\n
Inhaltsbereich klar strukturieren\naf:panelHeader\naf:showDetailHeader\nkein af:panelbox! => Nur f&#xFC;r Zusatzinformationen!\n
\n
\n
\n
\n
- Old style: af:panelForm, LabelAndMessage\nFeldHilfe\n- Auto scale. 50% scale usw...\n
\n
\n
\n
\n
\n
TODO: Beispiel zeigen\n\n
TODO: Beispiel zeigen\n\n
- Beispiel: 2 Spaltig. von oben nach unten\n- Zeigen: ADF UI Struktur\n
\n
- Beispiel: 2 Spaltig. von oben nach unten\n- Zeigen: ADF UI Struktur\n
\n
\n
\n
\n
\n
\n
+ Unified, consistent Popup Handling (no IFrame)\n