SlideShare ist ein Scribd-Unternehmen logo
APEX 5.1 Design
Crashkurs
Steven Grzbielok:
09.05.2017 | APEX connect
2017
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
 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
Kurze Frage  Gerne direkt stellen!
Längere Frage  Im Workshop um 15:00 (Jazz 1+2)
vorbeischauen
Fragen?
1. Bestandteile der UI in APEX
2. Deklaratives UI Design
3. Erweitertes Design
5
Agenda – APEX Grundlagen
 APEX ist für DB-Entwickler leicht umzusetzen (Backend)
 … Frontend benötigt Einarbeitung
6
Warum dieser Crashkurs?
 Ä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)
 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
 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
 Templates
 Global Template Options
 Icons
 Images
 Styles
 Javascript & CSS Files
10
Bestandteile eines Themes in APEX
Universal Theme
 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
 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
 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
In der Demo App unter apex.oracle.com/ut sind die Variationen leicht ausprobierbar
Template Options
15
Festgelegte Template Options, die für jedes Template des Typen gelten
Globale Template Options
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
 Ab einer bestimmten Bildschirmgröße wird dann automatisch ein Reflow durchgeführt
17
Responsive
Grid
18
Anordnung der Regionen und Items im Page Designer über Drag&Drop oder Attribute
Grid
 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
 Ä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
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
 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
 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>
Crashkurs im
Crashkurs:
CSS Basics
APEX 5.1 UI Design Crashkurs
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
 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
 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
CSS-Anpassungen
Live Demo
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
Live-Demo
Favicon anpassen
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
Live-Demo
Login Seite anpassen
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
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
Kommen Sie gern direkt mit von 15:00 bis 17:00 zu Jazz 1+2 
Workshop: APEX 5.1 für Anfänger
Vielen Dank! Noch Fragen?
Vortragsbewertung:
http://bit.ly/2orkcLp
@sgrzbielok
xing.com/profile/Steven_Grzbielok

Weitere ähnliche Inhalte

Ähnlich wie APEX 5.1 Ui design crashkurs

Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
Peter Müller
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
Sebastian Springer
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
Philipp Burgmer
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
Benjamin Zekavica Projects
 
CodeFluent Entities and AppSofa
CodeFluent Entities and AppSofaCodeFluent Entities and AppSofa
CodeFluent Entities and AppSofa
Mykola Dobrochynskyy
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
.NET User Group Dresden
 
Silverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für FortgeschritteneSilverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für Fortgeschrittene
André Wussow
 
Sitecore. Ready to Start. Software Engineer
Sitecore. Ready to Start. Software EngineerSitecore. Ready to Start. Software Engineer
Sitecore. Ready to Start. Software Engineer
Namics – A Merkle Company
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
Nicolai Schwarz
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblick
a3 systems GmbH
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
Andreas Schulte
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Peter Ramm
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
Georg Schmidl
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
Angelo Maron
 

Ähnlich wie APEX 5.1 Ui design crashkurs (20)

Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
CodeFluent Entities and AppSofa
CodeFluent Entities and AppSofaCodeFluent Entities and AppSofa
CodeFluent Entities and AppSofa
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Silverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für FortgeschritteneSilverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für Fortgeschrittene
 
Sitecore. Ready to Start. Software Engineer
Sitecore. Ready to Start. Software EngineerSitecore. Ready to Start. Software Engineer
Sitecore. Ready to Start. Software Engineer
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblick
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
Oracle-DB: Beeinflussen der Ausführungspläne von SQL-Statements ohne Code-Anp...
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
 

APEX 5.1 Ui design crashkurs

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

Hinweis der Redaktion

  1. Generell fast immer Universal Theme, wenn etwas anderes gesucht wird, in der Community schauen: Material APEX
  2. Gliederung?
  3. Inception Bild?
  4. Typ und Template teilweise gekoppelt: z.B. Button Templates nicht auf Regionen anwendbar