APEX connect 2017

1. APEX 5.1 Design
Crashkurs
Steven Grzbielok:
09.05.2017 | APEX connect
2017

2. Facts & Figures
Mittelständischer IT-Dienstleister
Technologie-orientiert
Branchen-unabhängig
Hauptsitz
Ratingen
240
Beschäftigte
Gründung
1994
Niederlassung
Frankfurt am Main
Ausbildungs-
betrieb
Inhabergeführt
Zertifizierter
Partner von
Oracle,
Microsoft
und SAP
28 Mio. Euro
Umsatz
2
Managing
Technology

3.  Steven Grzbielok
 Seit 08.2014 Berater bei der MT AG in Ratingen
 B.Sc. in Wirtschaftsinformatik, M.Sc. in Arbeit
 Beschäftigt sich seit 2014 mit Oracle Application Express
und Oracle Datenbanken
 APEX Showcase https://apex.mt-ag.com/
 Twitter https://twitter.com/sgrzbielok
3
Über mich

4. 4
Kurze Frage  Gerne direkt stellen!
Längere Frage  Im Workshop um 15:00 (Jazz 1+2)
vorbeischauen
Fragen?

5. 1. Bestandteile der UI in APEX
2. Deklaratives UI Design
3. Erweitertes Design
5
Agenda – APEX Grundlagen

6.  APEX ist für DB-Entwickler leicht umzusetzen (Backend)
 … Frontend benötigt Einarbeitung
6
Warum dieser Crashkurs?

7.  Ältere APEX Versionen: Viele verschiedene Themes
 APEX 5:
 Also: Entweder Universal Theme für mobile und Desktop oder Universal Theme für Desktop
und APEX mobile für die mobilen Endgeräte
7
Themes
Responsive für Desktop und
mobile:
(42) Universal Theme
(Standard in APEX 5)
Mobile only:
(51) APEX mobile
(Enthält diverse Komponenten, die speziell
auf mobile Geräte ausgerichtet sind. Dafür
fehlen aber auch gewohnte Desktop
Komponenten)

8.  Universal Theme bietet ausreichend Möglichkeiten zur Anpassung für nahezu alle
Anforderungen
Alternative Empfehlung: Material APEX von Vincent Morneau https://github.com/vincentmorneau/material-apex
8
Nein, außer Sie haben sehr viel Zeit!
Fragestellung: Muss man ein eigenes Theme erstellen?
Das selbe
Theme

9.  Bringt von Haus aus eine Menge Komponenten mit
 Responsive
 Gute Darstellung sowohl auf Desktop- als auch mobilen Geräten
ohne weitere Anpassungen
 Farbliche Anpassungen an das Corporate Design
durch den Theme Roller möglich
 Strukturierung der Seiten durch den Page Designer
 Anlehnung an das Material Design
 Unterstützt Icon Fonts (APEX Icons bzw. Font Awesome direkt inklusive)
 Unterstützt CSS3 und HTML5
Selbst ausprobieren auf https://apex.oracle.com/ut
9
One Size fits All
(42) Universal Theme

10.  Templates
 Global Template Options
 Icons
 Images
 Styles
 Javascript & CSS Files
10
Bestandteile eines Themes in APEX
Universal Theme

11.  Auswahl des Typen beeinflusst das automatisch gewählte Template
 Templates sind für die grafische Darstellung relevant
 Für Breadcrumbs, Buttons, Labels, Kalender, Listen, LOVs, Regionen und
• Seiten
11
Die grafische Darstellung anpassen
Templates
• Weitere Anpassung durch Template Options möglich
Nicht für jede Anpassung neues Template nötig

12.  HTML Code mit Platzhaltern
 Substitution Strings (zum Ersetzen der Platzhalter)
 Javascript Code & Files
 CSS Code & Files
 Template Options
 Abhängig vom Typ verfügbare Optionen
12
Bestandteile eines Templates
Templates

13.  Template Options = CSS Klassen, die abhängig von der getroffenen Auswahl in den HTML
Code eingefügt werden
 Vordefinierte Template Options
 Standard Werte sind bereits gesetzt, können aber auch verändert werden
 Lassen sich auf der Ebene der einzelnen Elemente ändern
 Eigene Template Options können ohne Schwierigkeiten erstellt werden
 Lassen sich gut ausprobieren, da die Änderung der Template Options kaum Aufwand ist
13
Template Options

14. 14
In der Demo App unter apex.oracle.com/ut sind die Variationen leicht ausprobierbar
Template Options

15. 15
Festgelegte Template Options, die für jedes Template des Typen gelten
Globale Template Options

16. 16
Abhängig von der Menge der Spalten wird die Größe der Regionen ermittelt
Grid
Hier: Zwei Regionen nebeneinander, Column Span = Automatic -> 50% der Seitenbreite pro Spalte

17.  Ab einer bestimmten Bildschirmgröße wird dann automatisch ein Reflow durchgeführt
17
Responsive
Grid

18. 18
Anordnung der Regionen und Items im Page Designer über Drag&Drop oder Attribute
Grid

19.  LayoutSequence: Reihenfolge der Elemente
 LayoutPosition: Body oder innerhalb einer anderen Region?
 GridColumn: Welche Spalte?
 GridColumn Span: Wieviele Spalten soll die Region einnehmen?
 GridColumn CSS Classes: CSS-Klasse, die für die gesamte Spalte gültig ist
 GridColumn Attributes: CSS-Attribut, das für die gesamte Spalte gültig ist
19
Relevante Attribute für die Grid Einstellungen
Grid

20.  Änderungen werden Live als Vorschau angezeigt
 Änderungen erst nach Speichern aktiv
 Erstellung mehrerer Theme-Styles möglich
 Custom CSS
 CSS-Code direkt im Code-Editor eingeben
 Viel CSS-Code lieber zur einfacheren Pflege als Datei hochladen
20
Inspiriert durch den jQuery Mobile ThemeRoller und LESS
Theme Roller

21. 1. Vorhandenen Style auswählen
2. Anpassungen von Oben nach Unten durchführen
3. Style unter neuem Namen Speichern (Save as)
4. Style als aktuellen Style auswählen (Set as Current)
 Spätere Anpassungen müssen nur gespeichert werden
 Export des Styles leider aktuell nicht nativ möglich
 Shared Components  Themes Edit Theme  Styles
21
Vorgehensweise
Theme Roller

22.  Inhalte auf der Global Page werden auf jeder Seite geladen
 Sequenzen bleiben gültig
 Besonders interessant für
 Header
 Footer
 Dynamic Actions, die überall ausgeführt werden
 Regionen, die sich auf jeder Seite wiederholen
 Beispiel QA-Plugin
22
Global Page – Page 0

23.  Wählbar für einzelne Regionen, Buttons oder auch
Einträge in der Navigation
 Direkte Einbindung in dafür vorgesehenen Feldern
oder
oder inline via HTML und den Font Awesome
Shortcodes
 Einbindung eigener Icon Bibliotheken in ein Theme
möglich
23
Font Awesome bzw. Font APEX Icons
Icons
<i class="fa fa-users"></i>

24. Crashkurs im
Crashkurs:
CSS Basics
APEX 5.1 UI Design Crashkurs

25. img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
/* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px;
/* 50% */
} }
25
Grundstruktur
CSS-Crashkurs

26.  Universalselektoren: *
 Typselektoren: element
 Klassenselektoren: .class
 ID-Selektoren: #id
 Können verkettet werden
 Am besten mit F12 oder Rechte MaustasteElement untersuchen und die passende Klasse
herausfinden
26
Selektoren
CSS-Crashkurs

27.  Durch das Theme oder Templates werden CSS- und Javascript-Dateien geladen
 Eigene Skripte können auf dem Server, im Web oder in APEX hinterlegt sein
 In APEX: Shared Components  Static Application Files/Static Workspace Files
 Hier können alle Dateien hochgeladen werden und mit einer Ordnerstruktur versehen werden
 Skripte können an verschiedenen Stellen referenziert werden
 Anwendungsebene: User Interface Attributes
 Seitenebene: Seiteneigenschaften (außer bei Page 0)
 Templateebene: Templateeigenschaften
 Dynamic Actions für Javascript, das an bestimmte Bedingungen geknüpft ist und nur bei
bestimmten Events aufgerufen wird
 CSS und Javascript auch inline möglich
27
CSS und Javascript
Ressourcen

28. CSS-Anpassungen
Live Demo

29. 1. Theme Roller
2. Template Options
3. Eigene CSS-Klassen erstellen
1. CSS-Code im Theme Roller
2. CSS-/Javascript-Dateien hochladen
4. Template anpassen
1. Template Options anpassen/erstellen  Wählbar ob Veränderungen jeweils genutzt werden
2. Template Struktur anpassen  Veränderungen betreffen alle Elemente, die dieses Theme
nutzen
 Nach Möglichkeit das Theme nicht anpassen, damit kein Unsubscribe durchgeführt wird
 Template wird durch Customizing ebenfalls vom urspr. Template gelöst und lässt sich
dadurch nicht updaten
29
Wo sollte ich meine Anpassung als Erstes beginnen?
Customizing

30. Live-Demo
Favicon anpassen

31. 1. Application Properties öffnen
2. Substitutions öffnen
3. HTML Code als Inhalt für den Platzhalter #APP_FAVICONS# einfügen
Z.B.
<link rel="shortcut icon" href=“#APP_IMAGES#favicon.ico”>
<link rel="icon" sizes="16x16" href="#APP_IMAGES#favicon-16x16.png">
<link rel="icon" sizes="32x32" href="#APP_IMAGES#favicon-32x32.png">
31
Fav Icon
Icons
• Substitutions sind Platzhalter in der gesamten Anwendung, die durch bestimmten Text oder Code ersetzt
werden
• Besonders hilfreich bei Informationen, die sich schnell ändern können aber nicht in einer Tabelle in der
DB hinterlegt sind
• Variablen in APEX: http://www.talkapex.com/2011/01/variables-in-apex.html

32. Live-Demo
Login Seite anpassen

33. Folgenden CSS-Code anpassen und an entsprechender Stelle einfügen
span.t-Login-logo {
background-image: url(&APP_IMAGES.logo.png);
background-size: contain;
width: 268px;
height: 80px;
background-color: white !important;
}
.t-PageBody--login .t-Body {
background: url(&APP_IMAGES.Quaderwand.png);
background-size: 100% auto;
}
33
Eigenes Logo und eigener Hintergrund
Beispiel: Login-Page

34. Vorträge der MT AG
Mittwoch, 10. Mai Donnerstag, 11. Mai
12.15 Uhr | Soul 11.30 Uhr | Music Hall 2
Node.js – von der Entwicklung bis zum produktiven Einsatz
Kai Donato
Pimp my Interactive Grid
Moritz Klein
14.00 Uhr | Soul 11.30 Uhr | Soul
JavaScript Debugging und Tuning
Till Albert
CSS(3) verstehen und anwenden
Alexej Schneider
15.30 Uhr | Music Hall 2
Let your Clients do the work
Steven Grzbielok
15:30 Uhr |Soul
Ein Blick unter die Haube: JavaScript in APEX
Davide Groppuso

35. 35
Kommen Sie gern direkt mit von 15:00 bis 17:00 zu Jazz 1+2 
Workshop: APEX 5.1 für Anfänger

36. Vielen Dank! Noch Fragen?
Vortragsbewertung:
http://bit.ly/2orkcLp
@sgrzbielok
xing.com/profile/Steven_Grzbielok