APEX (Dynamic Actions)

Mail: [email protected]
Twitter: @JuergenSchuster
Web: juergen-schuster-it.de
APEX Podcast: apex.press/talkshow
Dynamic Actions Examples: dynamic-actions.com
APEX-Meetups: apexmeetups.com
APEX D-A-CH Facebook Group: bit.ly/apex_on_facebook
Zu meiner Person
• Oracle
(13 Jahre)
• Freiberuflich
• APEX
(6 Jahre)
> 10 Jahre
• Sonstige: Java, Ext-JS, QlikView, HANA
• The
guy with the stickers
• apex.press/talkshow
SAP UI 5
Agenda
• Rich
Client-, Web 2.0 Apps / Rich Internet Apps (RIA)
• Webarchitektur
• Unterschied
Basics und DA Beispiele
zu traditionellen Ansätzen z. B. Ext-JS
• Dynamic Actions
• It’s
Erweiterungen in APEX 5
all about Backend-Performance
Agenda
• Rich
Client-, Web 2.0 Apps / Rich Internet Apps (RIA)
• Webarchitektur
• Unterschied
Basics und DA Beispiele
zu traditionellen Ansätzen z. B. Ext-JS
• Dynamic Actions
• It’s
Erweiterungen in APEX 5
all about Backend-Performance
Wir haben uns längst an Webapps gewöhnt,
die wie Desktop-Apps funktionieren!
Der Browser ist der neue Desktop
Der Browser ist der neue Desktop
Der Browser ist der neue Desktop
Klassisches APEX ohne AJAX
APEX mit Dynamic Actions (AJAX)
Änderungen in 5 Minuten gemacht
KEINE Submits auf dieselbe Seite!
Voraussetzungen
• HTML, CSS
• Genaues Verständnis
von Web-Architektur
• Genaues Verständnis
von APEX (Dynamic Actions)
• Javascript
(Objekte-Literale, Anonyme Funktionen)
• jQuery
• Hat
aber im Grunde nichts mit APEX zu tun
Agenda
• Rich
Client-, Web 2.0 Apps / Rich Internet Apps (RIA)
• Webarchitektur
• Unterschied
Basics und DA Beispiele
zu traditionellen Ansätzen z. B. Ext-JS
• Dynamic Actions
• It’s
Erweiterungen in APEX 5
all about Backend-Performance
HTTP
• GET
= f?p=110:101 = Show = Page Rendering
• POST
• AJAX
• PUT
= wwv_flow.accept = Page Processing
(DA) = wwv_flow.show = HTML / JSON / …
/ DELETE
APEX - Frontend
GET = Rendering = show / POST = Processing = accept
HTTP
• GET
= f?p=110:101 = Show = Page Rendering
• POST
= wwv_flow.accept = Page Processing
• AJAX(DA)=
• PUT
wwv_flow.show = HTML / JSON / …
/ DELETE
Debugging AJAX Call
AJAX Call (APEX Debugging ON)
AJAX Call
AJAX Call
AJAX Call
jQuery
Agenda
• Rich
Client-, Web 2.0 Apps / Rich Internet Apps (RIA)
• Webarchitektur
• Unterschied
Basics und DA Beispiele
zu traditionellen Ansätzen z. B. Ext-JS
• Dynamic Actions
• It’s
Erweiterungen in APEX 5
all about Backend-Performance
Dynamic Action in APEX
1
on Event
2
of Elemt
3
at Condition
Dynamic Action in APEX
4
True Action
Dynamic Action in jQuery-Syntax
2
of Elemt
1
on Event
3
at Condition
4
True Actions
5
False Actions
Picture by: Dan McGhan
APEX Dynamic Action Beispiele
APEX Dynamic Action Beispiele
APEX Dynamic Action Beispiele
APEX Dynamic Action Beispiele
APEX Dynamic Action Beispiele
APEX Dynamic Action Beispiele
APEX Dynamic Action Beispiele
Fantasie sind keine Grenzen gesetzt!
100% der APEX-Möglichkeiten
Doppelt so viel Spaß - Entwickler UND Kunde!
Arten von Dynamic Actions
• Änderungen
• Nachladen
• Meistens
am Frontend (DOM) ohne DB
von Daten via AJAX aus der DB
beides
• Beispiele: dynamic-actions.com
dynamic-actions.com
The Deal!
• Holt
euch eine Kopie der Applikation
• Versucht
• Fragen:
die Beispiele zu verstehen
apex.oracle.com-> [email protected]
Mehr als nur nette Effekte!
Agenda
• Rich
Client-, Web 2.0 Apps / Rich Internet Apps (RIA)
• Webarchitektur
• Unterschied
Basics und Beispiele
zu traditionellen Ansätzen z. B. Ext-JS
• Dynamic Actions
• It’s
Erweiterungen in APEX 5
all about Backend-Performance
Die Herausforderung
- Ersetze Ext-JS Application mit > 20.000 Zeilen JS
✔
- Exakt gleiche UI (5000 User gewöhnt seit 5 Jahren ) ✔
- Exakt gleiche dynamische Funktionalitäten oder mehr ✔
- 10% der ursprünglichen Zeit und Budget
- 10% der jährlichen Wartungskosten
- 10 mal schneller ✘ 100-mal schneller!
✔
✘ nur 1%! ✔ ✔
✔✔✔
Beispielcode der Ext-JS API
Vergleich zu anderen Technologien z. B. Ext-JS
Ablösung durch reines APEX mit Dynamic Actions
In APEX komplette Logik in wenigen DA auf P0
…restlichen Seiten haben keine eigene Logik
Javascript Frameworks (Ext-JS, SAP-UI5, …)
+ Interaktive, komplexe Funktionalität am Browser
- Schulungsaufwendig (Framework will gelernt sein)
- Viel JS-Code (UI und Controllerschicht) = teuer
- Individuelle Layoutanpassungen kaum möglich
Denkt an Ersatz von bestehenden teuren oder
langsamen Applikationen!
Agenda
• Rich
Client-, Web 2.0 Apps / Rich Internet Apps (RIA)
• Webarchitektur
• Unterschied
Basics und Beispiele
zu traditionellen Ansätzen z. B. Ext-JS
• Dynamic Actions
• It’s
Erweiterungen in APEX 5
all about Backend-Performance
APEX 4
APEX 5
APEX 5
DOM Object deprecated
APEX 4
APEX 5
Create Opposite Action
Modal Dialogs
Im Parent Fenster
Im Parent Fenster
Doku Modal Dialog DA
Denes Kubicek:
https://apex.oracle.com/pls/otn/f?p=31517
http://www.deneskubicek.blogspot.de
Carsten Czarski:
https://apex.oracle.com/pls/apex/GERMAN_COMMUNITIES.SHOW_TIPP?P_ID=3941
Deprecated
Deprecated Synchronous Ajax in Dynamic Actions - In a future release, Oracle Application Express will change to use asynchronous
Ajax requests for dynamic actions with attribute Wait For Result equal to Yes. Oracle Application Express applications must not rely on
the currently synchronous behavior. Specifically do not make Ajax requests (using dynamic actions or by any other means) in response
to the Page Unload (unload) or Before Page Submit (apexbeforepagesubmit) events.
• Ab APEX Version
5.1
• Kein Wait
For Result (PL/SQL, Set Value) “Page Unload”
• Kein Wait
For Result “Before Page Submit”
• Wait
For Result wartet nicht mehr auf gleichen Event!
Deprecated
• Wait
For Result wartet nicht mehr auf gleichen Event!
1. before ajax
2. action two
3. after ajax
Agenda
• Rich
Client-, Web 2.0 Apps / Rich Internet Apps (RIA)
• Webarchitektur
• Unterschied
Basics und Beispiele
zu traditionellen Ansätzen z. B. Ext-JS
• Dynamic Actions
• It’s
Erweiterungen in APEX 5
all about Backend-Performance
Performance
• Ist APEX
• Weder
• Nur
schnell oder langsam?
noch, es tut ja nichts…!
unser SQL auf unser Datenmodell ist langsam!
Performance
Performance - Tips
• Dynamisches
SQL bei großen Datenmengen
(11gR2 adaptive Cursor Sharing up to14 Bind-Variables)
• Voraggregieren
• Partitionieren
• with
clause /*+ materialize */
• Vorsicht
mit Collections…!!!
Explain Plan?
• Kein
• Alle
Bind Varaible Peeking…!
Bind Variables werden als Varchar angenommen…!
Was passiert wirklich…?
SQLs > 5 Sekunden oder Hint /*+ monitor juergen */
Was passiert wirklich…?
Was passiert wirklich…?
Was passiert wirklich…?
Was passiert wirklich…?
Was passiert wirklich…?
Was passiert wirklich…?
#orclapex
@JuergenSchuster
apex.press/talkshow
iTunes
apexmeetups.com
bit.ly/apex_on_facebook
Mail: [email protected]
Twitter: @JuergenSchuster
Web: juergen-schuster-it.de
APEX Podcast: apex.press/talkshow
Dynamic Actions Examples: dynamic-actions.com
APEX-Meetups: apexmeetups.com
APEX D-A-CH Facebook Group: bit.ly/apex_on_facebook