Rich Clients mit Ajax eine Alternative zu Forms?

Größe: px

Ab Seite anzeigen:

Download "Rich Clients mit Ajax eine Alternative zu Forms?"

Rudolf Diefenbach
vor 6 Jahren
Abrufe

1 Rich Clients mit Ajax eine Alternative zu Forms? Sven Tissot pdv Technische Automation + Systeme GmbH

April 2002 Formierung der C1 Group Standorte Hamburg

2 Die C1 Group auf einen Blick Historie Mitarbeiter 1991 Gründung der ersten C1- Unternehmen, u.a. April 2002 Formierung der C1 Group Standorte Hamburg Essen Köln Bremen Berlin Dresden Umsatz (Mio ) Frankfurt München Seite 1

3 Die Unternehmen der C1 Group C1 Conexus psc C1 Financial Services C1 FinCon INTESIO pdv Financial Software Industrie, Handel & Logistik Branchenübergreifend Managementberatung Managementberatung Prozesse & Systeme Energie & Utilities Finanzdienstleister Technologien & Services cadooz btconsult C1 Solutions C1 WPS C3 Consulting Group psc C1 Industry Projects & Solutions inconso Ponton Consulting C1 Conexus C1 Energy Seite 2

4 Fact Sheet der GmbH Kontakt pdv Technische Automation + Systeme GmbH Dorotheenstraße Hamburg Fon: +49 (40) Fax: +49 (40) contact@pdv-tas.de Gründung September 1990 Geschäftsführer Dr. Oswald Römer Mitarbeiter 35 Leistungen Konzeption und Realisierung von Datenbank-basierten Lösungen (v.a. Oracle), Embedded Systems und Internet-Integration dieser Systeme Seite 3

5 Inhalt Demo 1 Begriffsbestimmung Frameworks Demo 2 Architektur Ajax und JDeveloper Fazit Seite 4

6 Begriffsbestimmung Rich Client Was ist ein Rich Client? Nutzung lokaler Rechenleistung Direktes Feedback Visualisierung Echtzeit-Anzeige und Verarbeitung Drag & Drop Seite 5

7 Begriffsbestimmung Rich Client & Oracle Bisher Oracle Forms Oracle Forms Services Oracle UIX Swing Zukunft Oracle ADF Swing Oracle ADF Faces Seite 6

8 Begriffsbestimmung Ajax Seite 7

9 Begriffsbestimmung Ajax Ajax: A New Approach to Web Applications Jesse James Garrett Adaptive path 18. Februar 2005 Tipping point Google Mail Google Maps Google Suggest Seite 8

10 Begriffsbestimmung Ajax Seite 9

11 Begriffsbestimmung Ajax Ajax = Asynchronous Javascript + CSS + DOM + XMLHttpRequest Seite 10

12 Begriffsbestimmung Ajax XHTML + CSS für statische Inhalte <html> <head> <title>admin: edit</title> <link href="/stylesheets/scaffold.css" media="screen" rel="stylesheet" type="text/css" /> </head> <body>... <label class= Label > ein Label </label>... </body> </html> Seite 11

13 Begriffsbestimmung Ajax DOM + Javascript für dynamische Inhalte... <input autocomplete="off" id="bank_ort" name="bank[ort]" size="30" type="text" /> <div class="auto_complete id="bank_ort_auto_complete"></div>... <script type="text/javascript">new Ajax.Autocompleter('bank_ort', 'bank_ort_auto_complete', '/admin/auto_complete_for_bank_ort', {}) </script> Seite 12

14 Begriffsbestimmung Ajax XMLHttpRequest zur asynchronen Kommunikation var xmlhttp = false; try {// Internet Explorer xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xmlhttp = false; } } // Mozilla, Opera und Safari if(!xmlhttp && typeof XMLHttpRequest!= 'undefined') { xmlhttp = new XMLHttpRequest(); } Seite 13

15 Begriffsbestimmung Ajax XMLHttpRequest zur asynchronen Kommunikation if(xmlhttp) { xmlhttp.open('get', ' true); xmlhttp.onreadystatechange = function() { if(xmlhttp.readystate == 4) { alert(xmlhttp.responsetext); } } xmlhttp.send(null); Seite 14

16 Begriffsbestimmung Ajax XML für die Kommunikation mit dem Server <?xml version="1.0" encoding="iso "?> <ajax-response> <response type="object" id="data_grid_updater"> <rows update_ui="true"> <tr> <td>... </td> </tr>... </rows> </response> </ajax-response> Seite 15

17 Begriffsbestimmung Fallstricke Back, stop und refresh Buttons Bookmarks Drucken Kein offline Betrieb Javascript, ActiveX und Sicherheit Entwicklungswerkzeuge Seite 16

18 Inhalt Demo 1 Begriffsbestimmung Frameworks Demo 2 Architektur Ajax und JDeveloper Fazit Seite 17

19 Frameworks Übersicht 1 Pure Javascript: Application Frameworks 1.1 Isomorphic (Commercial RIA Toolkit) 1.2 Bindows (Since 2003) 1.3 BackBase (from 2003) 1.4 DOJO (Under development; from September, 2004) 1.5 Open Rico (Under development; from May, 2005; 1.6 qooxdoo (Under development; from May, 2005) 1.7 Tibet (Under development; from June, 2005) 1.8 AJFORM (Since June 2005) 1.9 ThyAPI (Under development; Since end of 2004) 2 Pure Javascript: Infrastructural Frameworks 2.1 AjaxCaller (Alpha; from May 2005) 2.2 Flash JavaScript Integration Kit () 2.3 Google AJAXSLT (Released June 2005) 2.4 HTMLHttpRequest (Beta; from 2005) 2.5 Interactive Website Framework (from May 2005) 2.6 LibXMLHttpRequest (Released; June 2003) 2.7 MAJAX (Released; August 2005) 2.8 RSLite (x) 2.9 Sack (In development; from May 2005) 2.10 Sarissa (Released; from February, 2003) 2.11 XHConn (Released; from April, 2005) 3 Server-Side: Multi-Language 3.1 Cross-Platform Asynchronous INterface Toolkit (May 2005) 3.2 SAJAX (March 2005) 3.3 Javascipt Object Notation (JSON) and JSON-RPC 3.4 Javascript Remote Scripting (JSRS) (from 2000) 3.5 Bitkraft for ASP.NET 4 Server-Side: Java 4.1 WebORB for Java (from August 2005) 4.2 Echo 2 (from March 2005) 4.3 Direct Web Remoting (DWR) (2005) 4.4 SWATO (2005) 4.5 AJAX JSP Tag Library 4.6 AJAX Java Server Faces Framework 5 Server-Side: Lisp 5.1 CL-Ajax 6 Server-Side:.NET 6.1 WebORB for.net (from August 2005) 6.2 Ajax.NET (from March 2005) 6.3 ComfortASP.NET (from August2005) 6.4 AjaxAspects (from August 2005) 7 Server-Side: PHP 7.1 AjaxAC (From April, 2005) 7.2 JPSpan 7.3 XAJAX 7.4 PEAR::HTML::Ajax 8 Server-Side: Ruby 8.1 Ruby On Rails Seite 18

20 Frameworks Beispiele Prototype (JavaScript, Rails) Rico (JavaScript) Backbase (Java,.NET, XML) Echo2 (Java) ADF Faces (Java) Seite 19

21 Frameworks Prototype Javascript Client Bibliothek Funktionen für Visuelle Effekte Drag & Drop Auto-Completion XMLHttpRequest Basis für Rico, Rails Seite 20

22 Frameworks Rico Ajax Drag & Drop Animationen Position Größe Fading Behaviors Accordion LiveGrid Seite 21

23 Frameworks Backbase Single Page Interface einfache Programmierung mit BXML BPC GUI System asynchrone Kommandos Integration mit.net J2EE XML Servern Seite 22

24 Frameworks Echo2 reines Java Framework Ajax basierte Rendering-Engine keine Kenntnisse von Javascript nötig Zusammenbau von Komponenten Column Label Button TextField Events Seite 23

25 Inhalt Demo 1 Begriffsbestimmung Frameworks Demo 2 Architektur Ajax und JDeveloper Fazit Seite 24

26 Inhalt Demo 1 Begriffsbestimmung Frameworks Demo 2 Architektur Ajax und JDeveloper Fazit Seite 25

27 Architektur SOA Bereitstellung fachlicher Dienste und Funktionalitäten in Form von Services Ein Service ist in diesem Kontext eine Funktionalität, die über eine standardisierte Schnittstelle in Anspruch genommen werden kann. Ajax Client Komplexe Prozesse lassen sich durch Aneinanderreihung von Service- Aufrufen (Orchestrierung von Services) realisieren. Integration heterogener Systeme, Applikationen und Datenwelten Server PL/SQL Java Server Rich Clients mit Ajax und Web Services bzw. XML Seite 26

28 Architektur SOA 1. Stufe Ajax-Komponenten in HTML/JSP Seiten für bessere Bedienbarkeit Reine Client Lösung 2. Stufe Lose gekoppelte Teil-Systeme mit Ajax Clients und Server Komponenten in PL/SQL oder JAVA Server-Komponenten liefern XML, SOAP, X-HTML SPI Clients 3. Stufe Durchgängige J2EE Lösung JSF mit rich components Seite 27

29 Inhalt Demo 1 Begriffsbestimmung Frameworks Demo 2 Architektur Ajax und JDeveloper Fazit Seite 28

30 JDeveloper reine Javasript Frameworks PHP Frameworks Java/XML Frameworks und JSP uixml partial rendering JSF Seite 29

31 JDeveloper ADF Faces Rich Components < af:choosecolor > < af:selectmanyshuttle > < af:tableselectmany > Automatische Validierung im Client Validatoren Converter Seite 30

32 Inhalt Demo 1 Begriffsbestimmung Frameworks Demo 2 Architekturen Ajax und JDeveloper Fazit Seite 31

33 Fazit benutzerfreundliche Anwendungen im Browser Echtzeitverarbeitung und Anzeige produktiv Skalierbar HTML / CSS / Javascript Java, PHP J2EE, JSF Service orientierte Architektur Seite 32

34 The road ahead? Seite 33

35 Danke Stellen Sie ihre Fragen! Sven Tissot pdv Technische Automation + Systeme GmbH Hamburg Dorotheenstraße 64 info@pdv-tas.de Seite 34

Ähnliche Dokumente

Von Ajax bis GRAILS Neue Techniken im Web-Engineering. W3L AG info@w3l.de

1 Von Ajax bis GRAILS Neue Techniken im Web-Engineering W3L AG info@w3l.de 2008 2 Inhaltsverzeichnis Was ist Web 2.0? Praxisprobleme AJAX Entwurfs- und Implementierungsmuster State-Of-The-Art Web-Frameworks