DOAG München Layout und dynamische Elemente für APEX Anwendungen

Größe: px

Ab Seite anzeigen:

Download "DOAG München Layout und dynamische Elemente für APEX Anwendungen"

Manfred Böhmer
vor 5 Jahren
Abrufe

1 DOAG München 2012 Layout und dynamische Elemente für APEX Anwendungen

Datenbank Support (Telefon-/Remote, Remote DBA) Software-Lösungen Oracle Lizenzen

2 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 Unterhaching

3 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

4 Frage Welche Layouts sind mit Oracle Application Express APEX überhaupt möglich? 4

5 Oder anders gefragt: Sind diese Layouts mit APEX möglich? 5

6 6

7 7

8 8

9 Ja 9

10 Natürlich 10

11 Warum nicht! 11

12 Alles ist möglich was auch mit anderen webbasierten Systemen möglich ist! 12

13 Gibt es mit APEX keine Einschränkungen? 13

14 Aus der klassischen Oracle Sicht: Welche Einschränkungen gibt es in einem browserbasierten System? - Anordnung von Elementen - Workflow mit Submit (Stateless) 14

15 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

16 Was ist Layout in Bezug zu einer Webseite 16

17 Template 17

18 - Content 18

19 Gesamtbild 19

20 - Formular 20

21 - Warnung Zu Risiken und Nebenwirkungen lesen Sie Ergonomie-Anleitungen und fragen Ihren Web-Entwickler oder Dienstleister! 21

22 Beispiel Schwebendes Formular 22

23 - Problem 23

24 - Problem 24

25 Lösung Schritt 1 25

26 - Lösung 26

27 Mini-Einführung jquery 27

28 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

29 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 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

30 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

31 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

32 Selektor Der jquery Selektor <div id="header"> $('#header') <span class="blue"> $('.blue') <h1>überschrift</h1> $('h1') 32

33 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

34 APEX Alles weitere und noch viel mehr auf 34

35 APEX Beispiel Sidebar ausblenden 35

36 - Problem 36

37 Debugging im Browser Frage 1 Frage 2 Welche Elemente sollen dynamisch ausgeblendet werden? Welches Element soll als Schalter dienen? 37

38 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

39 Chrome Internes Tool 39

40 Firefox Internes Tool 40

41 Firefox Addon Firebug 41

42 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 43

44 44

45 APEX Beispiel Aufklappbarer Report 45

46 46

47 47

48 48

49 APEX Beispiel Notification Area als jquery Dialog 49

50 50

51 51

52 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 53

54 Beispiel Ein- uns Ausblenden von Regionen 54

55 55

56 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 57

58 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

59 Fragen? 59

60 Vielen Dank für Ihre Aufmerksamkeit! 60

Ähnliche Dokumente

Layout und dynamische Elemente für Apex-Anwendungen

Layout und dynamische Elemente für Apex-Anwendungen Der Artikel zeigt, welche Layouts mit Apex möglich sind, welche Einschränkungen existieren und worauf man achten sollte. Er gibt Antwort darauf, wie eine funktionierende Vermischung von Design und Funktionalität