DOAG München 2012 Layout und dynamische Elemente für APEX Anwendungen
MuniQSoft GmbH Gegründet: 1998 Tätigkeitsbereiche: Oracle Datenbanken IT Consulting & Services Oracle Schulungen (SQL, PL/SQL, DBA, APEX, B&R, ) Oracle Datenbank Support (Telefon-/Remote, Remote DBA) Software-Lösungen Oracle Lizenzen MuniQSoft GmbH Grünwalder Weg 13 a D-82008 Unterhaching www.muniqsoft.de +49 89 6228 6789-0 2
1. Welche Layouts sind mit APEX möglich? 2. Welche Einschränkungen gibt es? 3. Wie kann eine funktionierende Vermischung von Design und Funktionalität aussehen? 4. Wann ist der Einsatz von jquery sinnvoll? 3
Frage Welche Layouts sind mit Oracle Application Express APEX überhaupt möglich? 4
Oder anders gefragt: Sind diese Layouts mit APEX möglich? 5
6
7
8
Ja 9
Natürlich 10
Warum nicht! 11
Alles ist möglich was auch mit anderen webbasierten Systemen möglich ist! 12
Gibt es mit APEX keine Einschränkungen? 13
Aus der klassischen Oracle Sicht: Welche Einschränkungen gibt es in einem browserbasierten System? - Anordnung von Elementen - Workflow mit Submit (Stateless) 14
Aus der Sicht eines Web- Erfahrenen - Unübersichtlich - Eingeschränkt * - Anders als gewohnt - * Weil man die Funktionalität evtl. nicht dort findet wo sie erwartet wird oder sie existiert unter anderem Namen 15
Was ist Layout in Bezug zu einer Webseite 16
Template 17
- Content 18
Gesamtbild 19
- Formular 20
- Warnung Zu Risiken und Nebenwirkungen lesen Sie Ergonomie-Anleitungen und fragen Ihren Web-Entwickler oder Dienstleister! 21
Beispiel Schwebendes Formular 22
- Problem 23
- Problem 24
Lösung Schritt 1 25
- Lösung 26
Mini-Einführung jquery 27
jquery Was ist jquery? Eine Open Source JavaScript Bibliothek Ab der APEX Version 4.0 automatisch in den mitgelieferten Templates enthalten Kompatibel zu den meisten Browsern Unterstützt HTML 5 und CSS 3 Einfache Einbindung und Anwendung Lehnt sich in der Selektion von Objekten an die CSS Notation an Lässt Änderungen zu, die "nach" dem Rendern stattfinden 28
HTML Grundgerüst <html> <head>... <link rel="stylesheet" href="/i/libraries/jqueryui/1.8/themes/base/jquery-ui-1.8.custom.min.css" type="text/css" /> <script src="/i/libraries/jquery/1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>... </head> <body> <div id="header"> <span class="blue"> <h1>überschrift</h1>... </span> </div> <div id="main">... </div> </body> </html> 29
Analyse Fragen Welche HTML-Bereiche gibt es? Wie sind die HTML-Bereiche hierarchisch aufgebaut? Was ist der Unterschied zwischen Klasse (Class) und ID? Was ist besser Klasse oder ID? Wer gibt Klasse oder ID vor? Gibt es noch andere Möglichkeiten als Klasse und ID? Haben wir in APEX Einfluss auf Klasse und ID? 30
Vorzeichen Die jquery Selektion beruht auf CSS Nomenklatur <div id="header"> Vorzeichen für ID = # (Raute) <span class="blue"> Vorzeichen für Class =. (Punkt) <h1>überschrift</h1> Für HTML Tags sind keine Vorzeichen notwendig 31
Selektor Der jquery Selektor <div id="header"> $('#header') <span class="blue"> $('.blue') <h1>überschrift</h1> $('h1') 32
Funktionen Die jquery Funktionen Rote Hintergrundfarbe bei dem Header $('#header').css('background-color', 'red'); Alle Elemente mit der Klasse blue ausblenden $('.blue').hide(); Bei allen Überschriften h1 den Text ersetzen $('h1').text('neue Überschrift'); 33
APEX Alles weitere und noch viel mehr auf http://www.jquery.com 34
APEX Beispiel Sidebar ausblenden 35
- Problem 36
Debugging im Browser Frage 1 Frage 2 Welche Elemente sollen dynamisch ausgeblendet werden? Welches Element soll als Schalter dienen? 37
Debugging Tools Analyse mit Browser-Tools Firefox ab Version 10 bringt eigenes Debug-Tool mit ansonsten das Addon Firebug Chrome bringt ebenfalls eigenes Tool mit Im Internet Explorer das Addon Developer Toolbar Vorgehensweise Gewünschtes Element mit rechter Maustaste anklicken und Debug-Tool auswählen Im Tool den HTML Bereich und die CSS Klassen, sowie Objekt- und Elementgrenzen im Browser analysieren 38
Chrome Internes Tool 39
Firefox Internes Tool 40
Firefox Addon Firebug 41
Switch mit jquery Auf den Div-Bereich der Suche wird ein Event gelegt, der die darunter liegenden Divs aus- oder einschaltet (toggled) $('#mqsearch').click(function() { $('#mqcontact').toggle(); $('#mqlinks').toggle(); $('#mqthema').toggle(); }); 42
43
44
APEX Beispiel Aufklappbarer Report 45
46
47
48
APEX Beispiel Notification Area als jquery Dialog 49
50
51
Arbeitsschritte Analysieren welche IDs für die Notification Area verwendet werden Mit jquery die Notification Area in einen Dialog umwandeln. Dabei allerdings mit der Request-Variable arbeiten, damit die Area nicht immer erscheint An dem Template der Notification Area Änderungen vornehmen um das anzupassen Weitere Idee langsames Ausblenden der Message mit der jquery Fadeout-Funktion 52
53
Beispiel Ein- uns Ausblenden von Regionen 54
55
Arbeitsschritte Der auszublendenden Region eine statische ID zuordnen Weitere Region erstellen, die als Schalter dient, wenn die eigentliche Region ausgeblendet wurde Dynamic Actions erstellen, die auf Klick auf den Header die Region ausblendet und eine Platzhalter-Region einblendet Weitere Dynamic Action erstellen um das Austauschen der Regionen zu ermöglichen Beide Dynamic Action um eine weitere Aktion ergänzen um die jeweils andere Region einzublenden 56
57
Weitere Ideen Anderes Favicon bezogen auf den Datenbank-Status von Objekten. (z.b.: neue Datensätze, die abgearbeitet werden sollen). Mit Cursor Tasten rauf und runter in Textfeld in einem Report wie bei Forms gewohnt. Mit Mausklick eine Zeile in einem Report markieren Bereiche, die sich in der Sidebar befinden ein- oder ausblenden oder ein- und ausklappen Den Benutzer entscheiden lassen, ob eine Sidebar immer dargestellt wird oder nicht, oder auswählen lassen ob sie links oder rechts dargestellt wird 58
Fragen? 59
Vielen Dank für Ihre Aufmerksamkeit! 60