Webanwendungen mit Java

Webentwicklung Serie XDEV 3 - Teil V Webanwendungen mit Java Im fünften Teil unserer Rapid-Java-Serie zeigen wir anhand einer kleinen Kundenverwaltung, wie Sie bei der Entwicklung von Business-Anwendungen mit XDEV 3 vorgehen können. Unsere Serie über XDEV 3 handelte bislang überwiegend von den vielen Features dieser RAD-Entwicklungsumgebung, die so einfach einsetzbar sind, dass XDEV 3 auch unter Webentwicklern immer mehr begeisterte Anhänger findet. Viele sind allerdings noch skeptisch und fragen sich, was eine Java-Entwicklungsumgebung mit Webentwicklung zu tun hat und wann der Einsatz von XDEV 3 überhaupt sinnvoll sein kann. An dieser Stelle möchten wir einige Denkanstöße geben, bevor wir uns mit der Umsetzung einer Beispielanwendung beschäftigen. Eine der Stärken von Java ist die Platt- formunabhängigkeit. Eine mit XDEV 3 entwickelte Java-Anwendung ist nicht nur unter Windows, Linux und auf dem Mac lauffähig, sondern auch als Java-Applet, also als Webanwendung im Browser. Im Laufe dieser Serie haben wir gezeigt, dass Java-Applets gegenüber HTML, Javascript oder Ajax und darauf basierenden Web-Frameworks unschlagbare Vorteile bieten. Java-Oberflächen sind leistungsfähiger, schneller, ausgereifter, stabiler und Browser-Updates können ihnen nicht das Geringste anhaben. Und mit XDEV 3 wird die Entwicklung solcher Oberflächen richtig einfach. Allerdings möchten wir an dieser Stelle auch nicht die Kehrseite der Medaille verschweigen. Um ein Java-Applet ausführen zu können, benötigt der Endanwender das Java-Plug-in auf seinem Rechner. Durch diese Einschränkung ist Java für viele Anwendungsfälle ungeeignet, unter anderem für herkömmliche Websites, Portale und Online-Shops. Immer dann, wenn eine Anwendung möglichst viele Nutzer erreichen soll, sind HTML und Javascript als Basistechnologien gesetzt. Wer allerdings eine Anwendung entwickeln möchte, die überwiegend von einem eingeschränkten Anwenderkreis benutzt wird, für den die einmalige Installation des Java-Plug-ins kein Problem darstellt, Xampp bestehet aus Web- und FTP- Server, MySQL, PHP sowie weiteren Komponenten. kommt durch den Einsatz von XDEV 3 in den Genuss deutlicher Vorteile. Prädestinierte Anwendungen sind vor allem Business-Applikationen wie ein Intranet, CRM- und ERP-Lösungen sowie B2B- Plattformen. Aber auch lediglich einzelne Anwendungsbereiche mit XDEV 3 können in Java entwickelt werden, zum Beispiel ein Backend-Tool wie der Administrationsbereich eines CMS-, Shop- oder Redaktionssystems. Ebenso häufig wie die Frage, wann der Einsatz von XDEV 3 vorteilhaft sein kann, ist die Frage, wie man bei der Anwendungsentwicklung mit XDEV 3 am besten vorgehen sollte. Der folgende Workshop zeigt am Beispiel einer einfachen Kundenverwaltung, wie die Umsetzung vom Datenmodell bis zur grafischen Oberfläche mit XDEV 3 ablaufen kann. Laden Sie zuerst die neue Version XDEV 3.1 unter www.xdev-software.de herunter und installieren Sie diese auf Ihrem PC. Formular-Prototyp designen Noch ein wichtiger Punkt vorab: Jede Anwendung sollte sorgfältig geplant werden, allen voran das Datenmodell. Gewöhnlich erfolgt der Entwurf am Reißbrett und ist für viele Entwickler ein staubtrockenes Thema. Durch die einfache Arbeitsweise mit XDEV 3 und die Möglichkeit, schnell und einfach Korrekturen vornehmen zu können, ist nach dem Prinzip des Rapid Application Development eine agile Vorgehensweise möglich. Mit Hilfe von GUI- Prototypen lassen sich zudem konzeptionelle Schwierigkeiten frühzeitig erkennen und ermöglichen einen sehr frühen Usability-Check durch den Auftraggeber. Legen Sie nach dem Starten von XDEV 3 über das Menü Datei ein neues Projekt Kundenverwaltung und danach ein neues Fenster Start an, das Sie im Ordner Fenster ablegen. Ziehen Sie nun ein XdevFormular in die Arbeitsfläche. Fügen Sie danach in das Formular ein XdevLabel ein, das Sie 48 0512 internet magazin

Serie XDEV 3 - Teil V Webentwicklung mit Name benennen, und daneben ein XdevTextField. Fügen Sie anschließend weitere Formularfelder für Vorname, Firma, Position, Telefon und E-Mail ein. Für dieses Formular wäre eine einzige Datenbanktabelle Kunden ausreichend. Wenn Sie die Vorschau starten und das Formular mehrmals ausfüllen, werden Sie auf Anhieb feststellen, dass es sehr aufwendig ist, alle Daten händisch eingeben zu müssen. Das ist nicht nur unkomfortabel, sondern führt auch dazu, dass zahlreiche Informationen vielfach erfasst werden und es dabei sehr leicht zu Schreibfehlern kommen kann. In der Datenbank entstehen dadurch Redundanzen sowie schwerwiegende Inkonsistenzen, die es generell zu vermeiden gilt. Mit Hilfe des Prototyps wird man schnell zu der Erkenntnis kommen, dass in bestimmten Fällen eine Auswahlliste praktischer wäre, die ausschließlich relevante Begriffe zur Auswahl vorhält. Ganz nebenbei werden durch den Einsatz einer Optionsliste Redundanzen und Inkonsistenzen von vornherein ausgeschlossen. In unserem Beispiel ist die Verwendung einer Auswahlliste für die Erfassung von Firma und Position sinnvoll. Ersetzen Sie deshalb die Eingabefelder bei Firma und Position jeweils durch die Komponente XdevComboBox. Diese Änderung hat Auswirkungen auf unser Datenmodell. Eine Combobox enthält für gewöhnlich Daten aus einer anderen Datenbanktabelle, die durch eine 1:n- Relation mit der Haupttabelle verknüpft ist. Das bedeutet, dass wir neben unserer Kunden-Tabelle Über das Control Panel lässt sich das freie Software-Bundle Xampp steuern. Starter-Workshop zu XDEV 3 Sie wollen Rapid Application Development für Java und Webanwendungen noch besser kennenlernen? Gemeinsam mit der XDEV Software Corp. bieten wir unseren Lesern einen Workshop zu besonders günstigen Konditionen an. Die Inhalte des eintägigen Kurses sind:»»überblick: Architektur, Framework, Entwicklungsumgebung»»Beeindruckende Java-Oberflächen designen»»formulare designen und automatisch generieren lassen»»datenbanken anbinden, Abfragen, Filter und Datenausgabe»»XDEV Component Suite: Kalender, Power-Tabellen, Quickfilter, Texteditor»»Projekt fertigstellen für Windows, Linux, Mac und als Webanwendung»»Specials: Reporting, Lokalisierung, Excel-Export»»Oberflächen-Themes ändern»»projektstart: Was möglich ist und wie Sie vorgehen sollten»»beantwortung Ihrer Fragen Uhrzeit: 9:00 bis 16:00 Uhr Teilnahmegebühren: 199 Euro - 110 Euro Internet-Magazin-Earlybird-Sponsoring* nur 89 Euro (jew. zzgl. MwSt.) Infos und Anmeldung unter www.xdev-software.de zwei weitere Datenbanktabellen benötigen. Zu dieser Erkenntnis kommt man gewöhnlich durch Normalisierung. Durch unseren Formularprototyp, den wir live testen können, werden sämtliche Problematiken jedoch tatsächlich sichtbar und sind demnach einfacher zu erkennen als in einem ER-Diagramm auf dem Papier. Vor allem für Entwickler, die sich nicht täglich mit Datenmodellen beschäftigen,! Aktion Heftcode: IM892012 Termine: 24. April 2012 Hamburg 25. April 2012 Köln 26. April 2012 Stuttgart 02. Mai 2012 München 03. Mai 2012 Berlin 08. Mai 2012 Leipzig 09. Mai 2012 Frankfurt a.m. 10. Mai 2012 Nürnberg 15. Mai 2012 Wien 16. Mai 2012 Zürich 17. Mai 2012 Düsseldorf sind Prototypen sehr hilfreich. Auch der Auftraggeber wird mögliche Probleme und deren Folgen sehr viel leichter anhand eines Prototyps verstehen können. Datenmodell Mit den durch unseren Prototy gewonnenen Erkenntnissen können wir im nächsten Schritt das Datenmodell entwickeln. Von unserem Formular leiten wir unsere Haupttabelle Kunden mit den Datenfeldern Name, Vorname, Firma, Position, Telefon und E-Mail ab. Da jeder Datensatz einen eindeutigen Primärschlüssel benötigt, definieren wir dafür ein Feld Id. Zur Füllung der Combobox Firma benötigen wir eine Datenbanktabelle Firma mit den Feldern Id und Name. Für die Combobox Position verwenden wir eine Tabelle Position mit den Feldern Id und Bezeichnung. MySQL mit Xampp aufsetzen Jetzt können wir die Datenbank gestalten. Als relationales Datenbankmanage- *Earlybird gültig bis 15.4.2012 und nur für Internet Magazin-Leser! www.internet-magazin.de 49

1&1 MOBILE mentsystem (RDBMS) verwenden wir MySQL, das wir mit Hilfe von Xampp leicht auf unserem lokalen Entwicklungsrechner aufsetzen können. Xampp ist ein freies Software Bundle, bestehend aus Web- und FTP-Server, MySQL, PHP sowie weiteren Komponenten. Unter www. apachefriends/de/xampp.html können Sie das Paket für Ihr Betriebssystem herunterladen. Rufen Sie nach der Installation das Control Panel auf und starten Sie damit Apache und MySQL. Öffnen Sie anschließend im Browser mit http:// localhost das Xampp-Frontend und klicken Sie auf phpmyadmin, um das MySQL-Frontend zu starten. Legen Sie im Frontend zuerst eine neue Datenbank kundenverwaltung an. Auf der folgenden Seite können Sie dann die Datenbanktabelle Kunden mit sieben Feldern anlegen. Bestimmen Sie danach auf der folgenden Seite als erstes das Feld Id mit dem Datentyp INT und wählen Sie die Option A_I (AUTO_IN- CREMENT). Legen Sie danach die Felder Name und Vorname jeweils vom Typ VARCHAR und einer Länge von 100 (Zeichen) fest. Legen Sie nun für die Comboboxen die Felder Firma_id und Position_id jeweils vom Typ INT zur Speicherung des Fremdschlüssels an, der durch den angehängten Zusatz _id hervorgehoben wird. Legen Sie schließlich noch die Felder Telefon und Mail vom Typ VARCHAR und einer Länge von 100 Zeichen an und klicken Sie abschließend auf Speichern. Klicken Sie nun auf kundenverwaltung, um die zweite Tabelle anzulegen. Geben Sie auf der folgenden Seite bei Name den Tabellennamen Firma mit zwei Feldern an und klicken Sie auf OK. Legen Sie dann NEU: HTC ONE S 0 1&1 10,9 cm Bildschirmdiagonale Super-AMOLED Touchscreen 7,8 mm flaches Design 8 Megapixel-Kamera 1,5 GHz Dual-Core Prozessor 16 GB interner Speicher Android TM mit HTC Sense 0, 499, 50 0512 internet magazin

ALL-NET-FLAT FLAT FESTNETZ FLAT ALLE HANDY-NETZE FLAT INTERNET 29, 99 39, 99 39, /Monat* In bester D-Netz-Qualität unbegrenzt ins gesamte deutsche Festnetz und in alle deutschen Handy-Netze telefonieren und mobil surfen. Mit Ihrem eigenen Handy für 29,99 /Monat. Oder mit einem kostenlosen Smartphone von 1&1, wie dem HTC One S, für 39,99 /Monat. Weitere topaktuelle Smartphones finden Sie auf 1und1.de handytarife.de 11/2011 Sofort starten: 1 NACHT OVERNIGHT- LIEFERUNG In Ruhe ausprobieren: 1 MONAT TESTEN Defekt? Morgen neu bei Ihnen: 1 TAG AUSTAUSCH VOR ORT www.1und1.de 0 26 02 / 96 96 *24 Monate Mindestvertragslaufzeit. Einmaliger Bereitstellungspreis 29,90, keine Versandkosten.

Webentwicklung Serie XDEV 3 - Teil V Sie danach das Feld Id der Tabelle Position auf das Feld Position_id der Tabelle Kunden, bestätigen Sie die Verknüpfung und speichern Sie Ihr Projekt ab. PHPmyAdmin Admin-Frontend für MySQL. das Feld Id an und wählen Sie die Option AUTO_INCREMENT sowie das Feld Name vom Typ VARCHAR und einer Länge von 100 Zeichen und klicken Sie auf Speichern. Legen Sie abschließend die dritte Tabelle Position mit den Feldern Id als AUTO_INCREMENT sowie Position vom Typ VARCHAR und einer Länge von 100 an und klicken Sie auf Speichern. Datenbank anbinden Die MySQL-Datenbank können wir nun an unser Projekt anbinden. Wechseln Sie dazu nach XDEV 3, wählen Sie im Menü Datei/Neu/Datenquelle aus. Legen Sie im folgenden Dialog MySQL_Kunden_DB als Name für die neue Datenquelle fest, wählen Sie bei Ordner Datenquellen und bei Plugin die MySQL-Schnittstelle aus. Klicken Sie abschließend auf OK. Geben Sie im folgenden Verbindungseditor bei Datenbankname kundenverwaltung ein und klicken Sie auf Aktualisieren, um die Verbindung zur Datenbank herzustellen. Data Binding Ziehen Sie die drei Datenbanktabellen per Drag-und-Drop auf den Ordner Virtuelle Tabellen im Projektmanagement und speichern Sie Ihr Projekt ab. Die virtuellen Tabellen bilden in unserer Anwendung das Gegenstück zu unseren Datenbanktabellen und sind für die Aufnahme sämtlicher Abfrageergebnisse zuständig. Um die Daten auf der Oberfläche auszugeben, muss eine virtuelle Tabelle mit einer GUI- Komponente verknüpft werden, was im GUI-Builder per Drag-und-Drop erfolgt. ER-Diagramm Bevor wir mit der Umsetzung der Benutzeroberfläche beginnen können, müssen wir ein ER-Diagramm konstruieren, das XDEV 3 zwingend für automatisierte Datenbankzugriffe benötigt. Wählen Sie dazu im Menü Datei/Neu/ER-Diagramm aus, legen Sie als Namen ER_kundenverwaltung fest und wählen Sie bei Ordner das Verzeichnis Datenquellen aus. Fügen Sie nun alle virtuellen Tabellen in die Arbeitsfläche ein und verknüpfen Sie die Tabellen korrekt miteinander. Ziehen Sie dazu das Feld Id der Tabelle Firma auf das Feld Firma_id der Tabelle Kunden und bestätigen Sie die Kardinalität 1:n. Ziehen Administrations-Frontend Nachdem die Datenbank angelegt ist, können wir den Administrationsbereich für unsere Anwendung erstellen. Unsere Datenbank, genauer gesagt alle mit der Haupttabelle verknüpften Tabellen, müssen wir zuerst mit zahlreichen Default-Daten füttern. Im Admin-Bereich benötigen wir für jede 1:n verknüpfte Datenbanktabelle ein Formular. Zudem wäre eine Tabellenkomponente für die Kontrolle der Eingaben hilfreich. Tabelle und Formular sollten dabei automatisch interagieren. Legen Sie über das Menü Datei ein neues Fenster Firmen an. Fügen Sie zuerst eine XdevTable in die Arbeitsfläche ein. Ziehen Sie danach die virtuelle Tabelle Firma per Drag-und-Drop auf die XdevTable. Durch diese Verknüpfung wird die XdevTable beim Aufruf des Fensters automatisch mit Daten gefüllt. Ziehen Sie danach die virtuelle Tabelle nochmals per Drag-und-Drop unterhalb der XdevTable direkt auf die Arbeitsfläche, um dort aus der virtuellen Tabelle ein Formular generieren zu lassen. Im folgenden Assistenten können Sie die von der virtuellen Tabelle übernommenen Beschriftungen ändern. Verknüpfen Sie nun die XdevTable mit dem Formular, indem Sie diese selektieren und danach in den Eigenschaften bei Verbundenes Formular das generierte Formular auswählen. Legen Sie ein weiteres Fenster Positionen an und gehen Sie hier genauso vor wie beim Fenster Firmen. Speichern Sie Ihr Projekt ab, starten Sie die Vorschau und geben Sie erste Testdaten ein. Die einzelnen Administrationsfenster lassen sich nun leicht zu einem Admin-Frontend zusammenführen. Legen Sie ein Fens- ter Administration an und geben Sie dem Fenster zuerst ein Border Layout. Dadurch 52 0512 internet magazin

passt sich der Inhalt des Fensters automatisch an die Fenstergröße an. Selektieren Sie dazu das Fenster und klicken Sie in den Eigenschaften bei Layout auf NullLayout. Wählen Sie im erscheinenden Fenster Toolbox die Option BorderLayout an, um das Layout zu aktivieren. Fügen Sie nun die Komponente XdevTabbedPane zentriert in das Fenster ein, das daraufhin automatisch über das gesamte Fenster gestreckt wird. Benennen Sie dann beide Tabs um in Firmen und Positionen. Selektieren Sie jetzt das Tab Firmen und geben Sie auch diesem ein Border Layout. Fügen Sie nun einen XdevWindowContainer zentriert in den TabbedPane ein und ziehen Sie dann das Fenster Firmen per Drag-und-Drop auf den WindowContainer. Dadurch findet zur Laufzeit automatisch ein Fensteraufruf statt. Führen Sie danach dasselbe für das Tab Positionen durch. Die eigentliche Anwendung Kümmern wir uns nun um die Umsetzung der Anwendung, die im Beispiel nur ein Formular umfasst. Wechseln Sie zum Fenster Start und löschen Sie den Formularprototyp. Gehen Sie dann genauso vor wie bei den Admin-Fenstern. Fügen Sie eine XdevTable ein, die Sie etwas verbreitern. Ziehen Sie die virtuelle Tabelle Kunden auf die XdevTable und dann hier unterhalb der XdevTable auf den Arbeitsbereich, um das Kunden-Formular zu generieren. Verknüpfen Sie dann auch hier wieder die XdevTable mit dem Formular. Jetzt wollen wir dem Benutzer noch ermöglichen, die Admin-Dialoge einzeln über das Kunden-Formular aufzurufen. Ziehen Sie dazu einen XdevButton per Drag-und-Drop auf das rechte Ende der Firmen-Auswahlbox, sodass der Button in das Layout integriert wird. Rufen Sie nun über den Button das Fenster Firmen auf. Wählen Sie dazu das Register Ereignisse an und klicken Sie auf actionperformed, um ein Mausklick-Event zu registrieren. www.internet-magazin.de XDEV 3 wechselt daraufhin in die Code- Ansicht. Klicken Sie in der Palette auf die Anweisung XDEV.OpenWindow( ) und wählen Sie im folgenden Assistenten bei Fenster die Option Firmen und bei Anzeige die Option Dialog aus. Wählen Sie abschließend die Option Modal an und beenden Sie mit OK. Wechseln Sie zum GUI-Builder. Fügen Sie auch bei der Position-Auswahlbox einen XdevButton ein, rufen Sie auf dieselbe Weise das Fenster Positionen als modalen Dialog auf und testen Sie die Anwendung. Automatisierte Joins Unsere automatisierten Datenbankabfragen werden bislang nur auf einer Tabelle durchgeführt. Bei den Kundendaten müssen jedoch Firma und Position hinzugebunden werden. Um dies zu automatisieren, müssen wir die virtuelle Tabelle Kunden erweitern. Klicken Sie dazu die virtuelle Tabelle Kunden an. Wählen Sie in der oberen Symbolleiste des Editors das Icon Beziehungen auflösen aus. Die virtuelle Tabelle wird dadurch um zwei Hilfsspalten erweitert, um hinzugekommene Werte aufnehmen zu können. Speichern Sie ab, wechseln Sie in den GUI-Builder und starten Sie die Anwendung erneut. Das Ergebnis Das Ergebnis dieses Workshops ist noch keine praxistaugliche Kundenverwaltung, sondern soll die Vorgehensweise mit XDEV 3 veranschaulichen. Wer leistungsfähige Webapplikationen wie Intranet, CRM- oder ERP-Lösung entwickeln möchte, oder Anwendungsteile, die überwiegend von professionellen Anwendern benutzt werden, wie ein Administrations-Frontends, sollte über den Einsatz einer schnellen und leistungsfähigen Java-Oberfläche nachdenken, die sich mit XDEV 3 schnell und einfach entwickeln lässt, ohne dass dazu Java Knowhow benötigt wird. Gerald Kammerer SUPERGÜNSTIG MOBIL SURFEN 1&1 NOTEBOOK-FLAT AKTION: 1 MONAT 0, sonst 9,99 /Monat* Internet-Flatrate per HSDPA/UMTS! 1&1 Surf-Stick oder Micro-SIM-Karte für 0,!* Beste D-Netz- Qualität! 0, www.1und1.de 0 26 02 / 96 96 * 1&1 Notebook-Flat im 2. Monat für 0,, sonst 9,99 /Monat. Ab einem Datenvolumen von 1 GB steht eine Bandbreite von max. 64 kbit/s zur Verfügung. 24 Monate Mindestvertragslaufzeit. Keine Bereitstellungsgebühr, keine Versandkosten.