APEX, jquery, ajax

1. |
AJAX-Rezepte für Web Services mit APEX-
Bordmitteln, jQuery und JSON
Andreas Wismann, Senior Oracle Berater , MT AG, Ratingen
Ratingen, 17.11.2011

2. |
GESCHÄFTSFORM INHABERGEFÜHRTE AG
HAUPTSITZ RATINGEN
GRÜNDUNGSJAHR 1994
BESCHÄFTIGTE 180 FESTANGESTELLTE MITARBEITER
BETEILIGUNGEN MT-IFS GMBH, MT-IFS SARL (LUXEMBURG)

3. ||
Agenda
Sesam (APEX) Öffne Dich3
1. APEX-Bordmittel für AJAX und Web Services
2. jQuery-Werkzeuge
3. XML vs. JSON
4. Live-Beispiele

4. |
Einen APEX-Report Web Service-fähig machen
Schatten IT mit APEX erfolgreich bekämpfen4

5. |
Demo
 APEX-Report als Web Service
Schatten IT mit APEX erfolgreich bekämpfen5

6. |
XML-Ausgabe des APEX Web Services
http://<...server...>/pls/apex/apex_rest.getReport?app=25499&page=1000&reportid=demoProductInfo
<?xml version="1.0"?>
<ROWSET>
<ROW>
<PRODUCT_ID>41</PRODUCT_ID>
<PRODUCT_NAME>Business Shirt</PRODUCT_NAME>
<PRODUCT_DESCRIPTION>Wrinkle-free cotton business shirt</PRODUCT_DESCRIPTION>
<CATEGORY>Mens</CATEGORY>
<PRODUCT_AVAIL>Y</PRODUCT_AVAIL>
<LIST_PRICE>50</LIST_PRICE>
<MIMETYPE>image/jpeg</MIMETYPE>
<FILENAME>shirt.jpg</FILENAME>
<IMAGE_LAST_UPDATE>18.09.2011</IMAGE_LAST_UPDATE>
</ROW>
<ROW>
<PRODUCT_ID>42</PRODUCT_ID>
<PRODUCT_NAME>Trousers</PRODUCT_NAME>
<PRODUCT_DESCRIPTION>Black trousers suitable for every business man</PRODUCT_DESCRIPTION>
<CATEGORY>Mens</CATEGORY>
<PRODUCT_AVAIL>Y</PRODUCT_AVAIL>
<LIST_PRICE>80</LIST_PRICE>
<MIMETYPE>image/jpeg</MIMETYPE>
<FILENAME>pants.jpg</FILENAME>
<IMAGE_LAST_UPDATE>18.09.2011</IMAGE_LAST_UPDATE>
</ROW>
</ROWSET>
Schatten IT mit APEX erfolgreich bekämpfen6

7. |
Eine Web Service-Referenz anlegen
Schatten IT mit APEX erfolgreich bekämpfen7

8. |
Eine Web Service-Referenz anlegen
Schatten IT mit APEX erfolgreich bekämpfen8

9. |
Eine Web Service-Referenz anlegen
Schatten IT mit APEX erfolgreich bekämpfen9

10. |
Eine Web Service-Referenz abfragen
Schatten IT mit APEX erfolgreich bekämpfen10

11. |
Eine Web Service-Referenz abfragen
Schatten IT mit APEX erfolgreich bekämpfen11

12. |
Wie bekomme ich Daten in mein Formular hinein
und heraus, ohne die gesamte APEX-Seite zu
submitten?
Schatten IT mit APEX erfolgreich bekämpfen12

13. |
Klassischer Ablauf: SUBMIT und Neuladen der Seite
Für jede Änderung ein kompletter Server-Roundtrip
Schatten IT mit APEX erfolgreich bekämpfen13

14. |
Ziel: SUBMIT nur ein Mal verwenden
Schatten IT mit APEX erfolgreich bekämpfen14

15. |
Demo 01
Das Tagesdatum anzeigen, wenn der Benutzer ein Feld betritt.
Schatten IT mit APEX erfolgreich bekämpfen15

16. | AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG16

17. |
Asynchronous JavaScript And XML
 Beispiele für AJAX in APEX
- Interactive Report
- Cascading LOVs
- Textfeld mit Autovervollständigung
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG17

18. |
Demo 02
Abrufen eines Textes von einem Anwendungsprozess
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG18

19. |
htmldb_Get
 APEX-Bordmittel
 undokumentiert
 apex_4_1.js
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG19

20. |
htmldb_Get
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG20

21. |
Einen Anwendungsprozess erstellen
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG21

22. |
AJAX gegen Anwendungsprozess
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG22

23. |
AJAX gegen Anwendungsprozess
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG23

24. |
Demo 03
Abrufen einer Datenbank-Procedure via Anwendungsprozess (Kundenummer)
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG24

25. |
Die Kundenummer formatieren
Die eingegebene laufende Nummer ("123") soll beim Verlassen des Feldes ein
bestimmtes Format erhalten
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG25

26. |
APEX-Bordmittel: htmldb_Get
 Datenbank-Prozedur aufrufen
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG26

27. |
Beispiel für den Aufruf einer Stored Procedure
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG27

28. |
AJAX gegen Stored Procedures
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG28

29. |
AJAX gegen Anwendungsprozess
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG29

30. |
AJAX gegen "Fassade"
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG30

31. |
Demo 04: Performance
Aus der eingegebenen Postleitzahl wird der Ort ergänzt
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG31

32. |
AJAX-Performance: Beispiel Postleitzahlen
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG32

33. |
Session State
Wenn die Seite nicht submitted wurde, ist der Session State nicht aktuell. Abhilfe:
.add()
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG33

34. |
Zehn vordefinierte Parameter für
Anwendungsprozesse
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG34

35. |
Exception Handling ist ein Muss!
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG35

36. |
Fehlerquellen beim Aufruf einer Stored Procedure
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"><html><head><title>404 Not
Found</title></head><body><h1>Not Found</h1><p>The requested URL
/pls/apex/DOAG2011.format_knr was not found on this server.</p></body></html>
 Fehlende Ausführungsrechte:
- GRANT EXECUTE ON doag2011 TO apex_public_user
 Schreibfehler bei Procedure- oder Parameternamen
 Falsche Anzahl Parameter
 Laufzeitfehler!
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG36

37. |
htmldb_Get, asynchrone Variante
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG37

38. |
Demo 04b: htmldb_Get.GetAsync
Postleitzahl-Ort-Abfrage, asynchron
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG38

39. |
synchron vs. Asynchron
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG39

40. |
jQuery-Werkzeug: $.ajax
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG40

41. |
APEX-Regionen mit .load auf jeder Seite laden
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG41

42. |
APEX-Regionen mit .load auf jeder Seite laden
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG42

43. |
Vergleich der Formate XML und JSON
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG43

44. | AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG44

45. |
APEX-Bordmittel vs. jQuery-Werkzeuge
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG45

46. |
jQuery Tools (Overlay)
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG46

47. |
Demo 05
Kundendaten einlesen anhand KNr, Kundenauswahl-Overlay anhand Nachname
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG47

48. |
jQuery Tools (Overlay): Tabelle generieren
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG48

49. |
jQuery Tools (Overlay): Tabelle generieren
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG49

50. |
Demo 06
Serverseitige Validierung mit JSON
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG50

51. |
Hitliste der Fehlerquellen
 OWNER (Schema) fehlt in der URL
 Parameter fehlen - oder falsch benannt
 POST erwartet, GET gesendet - und umgekehrt
 Fehlende Ausführungsrechte (grant execute...)
 Variablen im Formular, aber kein Session State
 Seitenbezüge falsch (P3008 <> P3009)
 Fehlendes Exception Handling
 htp.prn nicht verwendet
 console.log im Code vergessen (Internet Explorer)
 Groß-/Kleinschreibung: htmldb_Get, get(), GetAsync()
 JavaScript-Fehler an anderer Stelle
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG51

52. |
Vorsicht, wenn Sie Ihre Entwickler sagen hören...
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG52

53. |
nützliche Hilfsmittel
 PL/JSON Hilfsfunktionen zur Erzeugung von JSON-Strukturen
http://sourceforge.net/projects/pljson/
 jQuery Tools Overlays, Tooltips, Tabreiter, Validierung, ...
http://flowplayer.org/tools/index.html
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG53

54. |
Kosten
 Tools sind zumeist frei verfügbar (z.B. jQuery Tools, PL/JSON)
 Lernkurve
 Dokumentationsbedarf
 => Plugins bauen!
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG54

55. |
Buchempfehlungen
 anspruchsvoller und umfassender Einstieg
 beinhaltet auch Aspekte wie CSS und Browserkompatibilität
 Fokus auf jQuery
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG55

56. |
Buchempfehlungen
 viele praxisrelevante Fallbeispiele
 professionelles Niveau
 JavaScript-Vorkenntnisse empfehlenswert
AJAX-Rezepte für Web Services mit APEX-Bordmitteln. © MT AG56

57. |
Vielen Dank.
MT AG
Balcke-Dürr-Allee 9
40882 Ratingen
Telefon: +49 (0) 21 02 309 61-0
Telefax: +49 (0) 21 02 309 61-10
E-Mail: apex@mt-ag.com
www.mt-ag.com