Lernen vom Page Designer. Auf den Spuren von Jules Verne

Transkript

1 Lernen vom Page Designer Auf den Spuren von Jules Verne 1

2 Lernen vom Page Designer Agenda 1 Einführung 2 Application Builder als Anwendung importieren Page Designer im Detail (javascript stack, MVC, etc.) Demo Zusammenfassung 2

3 BASF We create chemistry Unsere Chemie wird in nahezu allen Branchen eingesetzt Wir verbinden wirtschaftlichen Erfolg, gesellschaftliche Verantwortung und den Schutz der Umwelt Umsatz 2015: Millionen EBIT 2015: Millionen Mitarbeiter ( ): Verbund- und 338 weitere Produktionsstandorte 3

4 Information Services & Supply Chain Operations Connected to deliver value Wir sind der Anbieter von Geschäftslösungen für die BASF-Gruppe Wir unterstützen die We create chemistry -Strategie in drei Hauptbereichen: Supply Chain Operations (einschließlich Logistik) Information Services Business Process Management 4

5 APEX at BASF Einheit Bespoke Applications Planung, Implementierung und Betrieb aus einer Hand. Maßgeschneiderte Anwendungen (APEX, Forms, java,.net) für den verschiedensten BASF Unternehmensbereiche. Größere Anzahl APEX Anwendungen für die BASF Gruppe Environment, Health & Safety Plant Maintenance Supply Chain Logistics, 5

6 Lernen vom Page Designer Application Builder importieren Tip: Application Builder in eigenen Workspace importieren <installationsverzeichnis>/apex/builder/f4000.sql Beim Import application ID neu vergeben, z.b. 143 Der Page Designer ist zum Großteil aus einer einzigen APEX Seite aufgebaut! Wie sieht die Seite 4500 aus? Es lohnt sich reinzuschauen! 6

7 Lernen vom Page Designer Seite 4500 (Komponentenansicht) 7

8 Lernen vom Page Designer Seite 4500 (Komponentenansicht) 17 Page Prozesse 8

9 Lernen vom Page Designer Seite 4500 (Komponentenansicht) 1 (region) Plug-in 9

10 Lernen vom Page Designer Seite 4500 APEX region Splitter plugin 10

11 Lernen vom Page Designer Seite 4500 (Komponentenansicht) 1 Dynamische Aktion und viel, viel Javascript 11

12 Page Designer (client) Javascript Stack Page Designer Main Controller f4000_p4500.js Tree f4000_p4500.tree.js Grid Layout f4000_p4500.glv.js Components Gallery f4000_p4500.gallery.js Property Editor f4000_p4500.pe.js Page Designer custom Widgets widget.lovdialog.js widget.pesearch.js widget.codeeditor.js widget.propertyeditor.js widget.pemessagesview.js gridlayout.js widget.colorpicker.js widget.iconlist.js widget.menu.js APEX 5.0 Widgets widget.splitter.js widget.treeview.js jquery UI jquery GUI library (widgets, interactions, themes) APEX JS API s ajax, security, actions, PE callbacks pe.callbacks.js jquery core library CodeMirror Text Editor library PE model pe.model.js 12

13 Page Designer (client) Javascript Bibliotheken Beim Öffnen der Page Designer-Seite werden die benötigten Bibliotheken in komprimierter ( minified ) form geladen. Es handelt sich hierbei um open source + Oracle spezifische Bibliotheken. Quelltexte der APEX Javascript API s sind im APEX Installationspaket vorhanden <installationsverzeichnis>/apex/images/libraries/apex jquery UI jquery GUI library (widgets, interactions, themes) APEX JS API s ajax, security, actions, jquery core library CodeMirror Text Editor library 13

14 Lernen vom Page Designer Seite 4500 Seite 0 jquery UI tabs

15 Model, View, Controller (MVC) Entwurfsmuster Model Das Modell enthält die anzuzeigenden Daten (Listeneinträge, Text, die Beschriftung einer Schaltfläche usw.). Von außen kann man die Daten über dafür vorgesehene Methoden erfragen und Änderungswünsche bekannt geben. View Die Ansicht stellt die Daten in der Oberfläche dar, sie ist der sichtbare Teil der GUI- Komponente im MVC-Muster und für die Erscheinung (Größe, Farbe, Position usw.) zuständig. Die anzuzeigenden Daten werden durch den View vom Modell erfragt. Controller Die Steuerung empfängt Benutzeraktionen (Tastatureingaben, Mausklicks usw.) und verarbeitet sie in Form von Botschaften an Ansicht und Modell. Quelle: 15

16 Model, View, Controller (MVC) Entwurfsmuster Controller (Steuerung) aktualisiert aktualisiert benachrichtigt Benutzeraktion Model (Modell) View (Präsentation) 16

17 Model, View, Controller (MVC) Model (=Datenmodell im Client) Das Page Designer Datenmodell wird zur Laufzeit durch das Javascript Objekt pe, den Properties Editor, repräsentiert. Es ist unter anderem zuständig für die Kommunikation mit der Datenbank. AJAX requests mittels JS API apex.server.process Ruft PL/SQL Page Prozesse auf Seite 4500 auf (z.b. GetPageData) Bekommt JSON zurückgeliefert Triggert Javascript Callback Funktionen. M Model PE callbacks pe.callbacks.js PE model pe.model.js 17

18 Model, View, Controller (MVC) Model (=Datenmodell im Client) Benachrichtigt Views/Controllers damit Änderungen visualisiert werden synchronisieren client (browser) mit server (datenbank). Quelltexte in <installationsverzeichnis>/apex/images/apex_ui/js pe.model.js Definiert Javascript pe Objekt und API. Interne Funktionen, z.b. mergen Properties aus APEX Plugins. Page Designer Transaktionshandling im Client! pe.callbacks.js JS Callback Funktionen der PL/SQL Page Prozesse. Befüllen Properties Editor mit Werte/Typen für Seitenelemente (Regions, Page Items, etc.) M Model PE callbacks pe.callbacks.js PE model pe.model.js 18

19 Model, View, Controller (MVC) View (=GUI Komponenten) Page Designer custom Widgets Meistens nicht dokumentiert und nur für Verwendung im Page Designer gedacht. Quelltexte in <installationsverzeichnis>/apex/images/apex_ui/js APEX 5.0 Widgets zum Teil dokumentiert + Verwendung in andere APEX Komponenten (Interactive Reports, ), z.b. widget.menu.js Quelltexte in <installationsverzeichnis>/apex/images/libraries/apex V Page Designer custom Widgets widget.lovdialog.js widget.pesearch.js widget.codeeditor.js widget.propertyeditor.js widget.pemessagesview.js gridlayout.js View widget.colorpicker.js widget.iconlist.js widget.menu.js APEX 5.0 Widgets widget.splitter.js widget.treeview.js 19

20 Model, View, Controller (MVC) View (=GUI Komponenten) Beispiel: Property-Editor widget (widget.propertyeditor.js) Definiert Eingabe-Elemente für Page Designer COMBOBOX, NUMBER, INTEGER, SELECT_LIST, TEXT, TEXT_AREA, YES_NO, CHECKBOXES, RADIOS, COLOR, POPUP_LOV DIV-Element kann in Property Editor umgewandelt werden mit apex.jquery( #mydiv ).propertyeditor( ) 20

21 Model, View, Controller (MVC) Controller Quelltexte in <installationsverzeichnis>/apex/images/apex_ui/js Zur Laufzeit wird der Page Designer Main Controller durch das Javascript Objekt pagedesigner repräsentiert. Objekt Definition ist vorhanden in f4000_p4500.js Der Main Controller ist die API für die Interaktion mit Page Designer. C Controller Page Designer Main Controller f4000_p4500.js Tree f4000_p4500.tree.js Grid Layout f4000_p4500.glv.js Components Gallery f4000_p4500.gallery.js Property Editor f4000_p4500.pe.js 21

22 Lernen vom Page Designer Das pagedesigner javascript Objekt Ausgabe pagedesigner Objekt in javascript Konsole: APEX Seite in Page Designer laden <installationsverzeichnis>/apex/images/apex_ui/js/f4000_p4500.dump.js Debug Infos pagedesigner.showdumptab(); 22

23 Lernen vom Page Designer MVC-Stack im Page Designer client C Page Designer Main Controller f4000_p4500.js C C C C Tree Grid Layout Components Gallery f4000_p4500.tree.js f4000_p4500.glv.js f4000_p4500.gallery.js Property Editor f4000_p4500.pe.js V Page Designer custom Widgets widget.lovdialog.js widget.pesearch.js widget.codeeditor.js widget.propertyeditor.js widget.pemessagesview.js gridlayout.js V widget.colorpicker.js widget.iconlist.js widget.menu.js APEX 5.0 Widgets widget.splitter.js widget.treeview.js M M PE callbacks pe.callbacks.js PE model pe.model.js 23

24 Lernen vom Page Designer Ablauf öffnen Seite 4500 Page Designer ist eine Single-page-Webanwendung: Besteht aus einem einzigen HTML-Dokument Inhalte werden dynamisch per JSON nachgeladen Ablauf öffnen Page Designer 1. HTML Quelltext Seite 4500 laden document.ready Minified CSS einbinden (8 Dateien) Minified JS einbinden (16 Dateien) 2. Sprachdatei einmalig aus images-verzeichnis laden (pd_static_data_en.json) 3. Spezifizierte Anwendungsseite laden (getpagedata, ) 4. Einzelheiten Anwendungsseite darstellen (properties editor) 24

25 APEX Seite in Page Designer laden Übersicht Eine APEX Seite wird in 3 Schritten in Page Designer geladen. Dazu gibt es 3 asynchrone ajax GET-requests: Browser getpagedata JSON Datenbank Properties for Computations, Regions, Page Items, Buttons, Processes, Browser getsharedcomponentdata JSON Template properties, Plugin properties, Datenbank Browser getadditionaldata JSON Comments & Team-Development (Features, Bugs, Todos) Datenbank 25

26 APEX Seite in Page Designer laden Aufruf Page Prozess getpagedata Aufruf Page Prozess getpagedata um Seitendefinition aus der Datenbank zu laden (Computations, Regions, Items, Dynamic Actions, Page Prozesse, etc.) Browser Beispiel: Laden Seite 2 getpagedata JSON Datenbank Component Types 5000 = Page 5110 = Region 5120 = Page Item 5130 = Item Property ID s 1 = Name 10 = Page Mode 13 = Title 26

27 APEX Seite in Page Designer laden Page Prozess getpagedata intern Der Page Prozess getpagedata wird nur benutzt für das Aufrufen von eine interne APEX Package Prozedur. Wir sehen, dass die Page-ID aus :FB_FLOW_PAGE_ID übernommen wird; der Wert wurde als Parameter mitgeliefert. Die Applikation-ID wurde bereits vor dem öffnen von Page Designer in :FB_FLOW_ID geladen. Hier geht es nicht weiter; die Prozedur wwv_flow_property_dev.emit_page_data ist gewrappt. 27

28 Zusammenfassend Was ist bei PD anders als bei eine klassische APEX Anwendung? Ist aus eine einzige APEX-Seite aufgebaut (Singe-Page App) Ist hoch dynamisch Nach öffnen Page Designer wird nur noch über JSON mit der Datenbank kommuniziert. Eingabefelder (Properties) werden erst zur Laufzeit ermittelt und generiert. Mehrsprachigkeit ist nicht über Schatten -Applikation geregelt, sondern Labels werden zur Laufzeit geholt (JSON). PD folgt MVC Muster 28

29 Zusammenfassend Es gibt viel zu entdecken... Offizielle APEX API Dokumentation Packaged Applications mit Beispielcode Original Quelltexte Javascript-Teil vom Page Designer (im APEX Installationspaket enthalten) Application Builder importieren 29

30 Fragen Bildquelle: 30

31 Lernen vom Page Designer Vielen Dank für Ihre Aufmerksamkeit. 31

32 2/18/

33 Lernen vom Page Designer Backup Slides 33

34 Application Builder (4000) Page Flow öffnen Page Designer Seite 1500 IR Übersicht Applikationen Applikation Seite 1 IR Pages Zu editierende Seite auswählen auswählen Seite 4150 component View Before Header branch Seite 4500 Page Designer 34