rich-internet-applications mit jquery und dem apex-listener · 18. november 2010...

Rich-Internet-Applications mit jQuery und dem APEX-Listener

Klaus FriemeltMT AG, Ratingen

Nürnberg, 18. November 2010

18. November 2010 Rich-Internet-Applications mit jQuery und dem APEX Listener

MT AG

2

Gründung 1994 Inhabergeführte AG:

Aktienkapital 1.500.000 € Hauptsitz Ratingen;

Niederlassung Dortmund Mitarbeiter:

> 200 Festangestellte > 65 Freie Mitarbeiter

Full-Service-Dienstleistung für alle Phasen des Software-Lifecycle

Herstellerunabhängige Expertise in den marktführenden Technologien wie Oracle, IBM, Microsoft, SAP und OpenSource

Themen- und Lösungs-Know-how in den Kerndisziplinen des Adaptive Enterprise

MT AG MANAGING TECHNOLOGY – ENABLING THE ADAPTIVE ENTERPRISE


Agenda

■ Einführung RIA■ Auswahl Applikationsserver■ APEX Listener■ jQuery - ein JavaScript-Framework■ Beispiele■ F&A

3


Einführung - RIA

■ Rich Internet Applications (RIA) zeichnen sich aus durch besonderes Verhalten und ansprechende Bedienelemente■ Vermitteln das Gefühl einer Desktop-Anwendung■ Tastatursteuerung, Menüs■ Serverkommunikation im Hintergrund (AJAX)■ Vermeidung von kompletten Seitenaufrufen („partial page refresh“)

■ jQuery mit seiner Plugin-Technik unterstützt alle diese Punkte!

■ Verwendung von jQuery ist nicht auf spezielle Technologie beschränkt■ php■ Java EE (JEE)■ PL/SQL via Oracle WebToolkit

4


Einführung - Oracle WebToolkit

■ Sammlung von Datenbank-Packages im Schema SYS■ HTP■ HTF■ OWA_UTIL

■ Wichtigste Prozedur htp.p()■ übergebene Zeichenkette (üblicherweise HTML) wird im Browser

dargestellt

■ Eingeführt zur Oracle WebDB - Urahn von APEX

■ Kerntechnologie von APEX und vielen Webanwendungen

5


Einführung - WebToolkit-Gateways

Drei Möglichkeiten für WebToolkit-Anwendungen

■ mod_plsql auf dem iAS 10g■ leider kein Nachfolger unter Oracle Web Logic Server

■ Embedded PL/SQL Gateway (EPG) der Datenbank■ Sicherheitsrisiko für produktive Umgebungen

■ Java EE-Lösung APEX Listener■ Oracle iAS 10g■ Oracle WLS 11g■ Oracle GlassFish Server■ [Tomcat, GlassFish OSE]

6


Oracle GlassFish Server - Download

Downloads für Linux, OS X, Solaris, Windows unter: http://www.oracle.com/technetwork/middleware/glassfish/overview/index.html

7

http://www.oracle.com/technetwork/middleware/glassfish/overview/index.html

http://www.oracle.com/technetwork/middleware/glassfish/overview/index.html


Oracle GlassFish Server - Installation

■ Heruntergeladene zip-Datei ins Zielverzeichnis entpacken■ von der Konsole den Server starten mit <Zielverzeichnis>/glassfishv3/

glassfish/bin sh startsrv■ Webkonsole starten mit http://localhost:4848/■ standardmäßig erscheint die Konsole anmeldungsfrei■ Absichern: „Enterprise Server“ > „Administrator Password“ Kennwort setzen

8

http://localhost:4848

http://localhost:4848


Oracle GlassFish Server - Konfiguration I

■ „Default Principal To Role Mapping“ aktivieren

■ damit ist nur die Datei web.xml zur Authentifizierung zu modifizieren■ kein security-role-mapping in sun-web.xml

9


Oracle GlassFish Server - Konfiguration II

User ID ist dabei frei wählbar, wichtig ist aber die Gruppenbezeichnung!

10


APEX-Listener - Installation

■ Download und detaillierte Installationsbeschreibung für alle drei unterstützen Server sind zu finden unter http://www.oracle.com/technetwork/developer-tools/apex-listener/downloads/index.html

■ Listener ist eine 4.2MB grosse war-Datei, die auf den Server verteilt wird

11

http://www.oracle.com/technetwork/developer-tools/apex-listener/downloads/index.html





APEX Listener - Konfiguration

■ Oberfläche unter: http://localhost:8080/apex/listenerConfigure■ weitgehend analog zu mod_plsql-Konfiguration■ Aber: fixe Doc-Tabelle www_flow_file_objects$ in FLOWS_FILES !■ Ordner glassfishv3/glassfish/domains/domain1/docroot/i/ anlegen für js/css/jpg,...■ ggf. /WEB_INF/web.xml anpassen

12

http://localhost:8080/apex/listenerConfigure

http://localhost:8080/apex/listenerConfigure

http://web.xml

http://web.xml


Absicherung von nicht-APEX-Anwendungen

■ security-constraint in der web.xml „verschärfen“

13

http://web.xml

http://web.xml


jQuery - Javascript-Framework

■ Entwicklung seit 2005■ ausgereift■ grosse Entwicklergemeinde

■ komfortable AJAX-Integration■ Browserunabhängiges Javascript■ Umgehung von onLoad()-Problemen■ Zugriff mit „Selektoren“■ alle Elemente des DOM-Baumes einer HTML-Seite können anhand ihrer ID

abgefragt und modifiziert werden■ Indiz für das „Query“ im Namen jQuery

■ Erweiterbarkeit durch PlugIns

14


Beispiel 1 - Administration des Listeners

■ jQuery mit den Erweiterungen jQuery UI „Tabs“ und „Accordion“■ auch im J2EE-Umfeld verbreitet

15


Beispiel 2 - Ajax-Fähigkeit für BLZ-Suche

16

FireBug-Konsole zeigt die Serverkommunikation Anfrage/Antwort


Beispiel 2 - Erzeugung via WebToolkit

17


Beispiel 2 - Serverseitige Prozedur

mime-type setzen per WebToolkit-Prozedur OWA_UTIL.mimeheader()■ text/plain■ text/html■ text/xml■ application/json

18


Beispiel 3 - jsTree-Plugin für hierarchische Daten

19


Beispiel 3 - Serverkommunikation

20


Beispiel 3 - Serverseitige Prozedur

21


Weiterführende Beispiele...

■ Dokumentationen, Demos, Downloads■ http://jquery.com■ http://jqueryui.com■ http://jstree.com

■ Reichhaltiges Plugin-Repository für Erweiterungen■ http://plugins.jquery.com

22

http://jquery.com

http://jquery.com

http://jqueryui.com

http://jqueryui.com

http://jstree.com

http://jstree.com

http://plugins.jquery.com

http://plugins.jquery.com


F&A

Fragen ?

23

MT AG managing technology I Balcke-Dürr-Allee 9 I 40882 RatingenTel. +49 (0) 2102 309 61-0 I [email protected] I www.mt-ag.com

Danke für Ihre Aufmerksamkeit!

rich-internet-applications mit jquery und dem apex-listener · 18. november 2010...

Documents