Entwicklung von Web-Applikationen mit UIX Entwicklung von
Werbung
Entwicklung von Web-Applikationen mit UIX Sabine Klessa-Tönnes, i.B.A.G.S. GmbH Dr. Günter Unbescheid, Database Consult GmbH • • • • Gegründet 2000 Schwesterfirma der TerraSel Software GmbH Projektplanung und Projektmanagement Datenbankanwendungen WEB-Applikationen mit UIX i.B.A.G.S. GmbH – Planung, Entwurf, Modellierung und Erstellung – Datenbankpflege und Administration • WEB - Applikationen • Geo-Informationssysteme Copyright iBAGS und Database Consult GmbH 11/2003 2 • Gegründet 1996 – www.database-consult.de • Kompetenzen im Umfeld von ORACLEbasierten Systemen • Tätigkeitsbereiche WEB-Applikationen mit UIX Database Consult GmbH – Datenmodellierung und –design – Datenbankdesign – Systemanalysen – Tuning, Installation, Konfiguration – Support, Troubleshooting, DBA-Aufgaben Copyright iBAGS und Database Consult GmbH 11/2003 4 1 • Programmierumgebungen – SQL und PL/SQL – Oracle Forms und Reports, Delphi – Java, JSP und Servlets, BC4J und UIX-Framew. WEB-Applikationen mit UIX Database Consult GmbH • Projekte – Komplette Anwendungsentwicklung – Inhouse-Schulungen – Coaching – Support Copyright iBAGS und Database Consult GmbH 11/2003 5 • Teil 1 – Grundlagen der UIX-Technik –– –– –– –– Einführung Einführung Demo Demo Architektur Architektur und und Standards Standards Generierung Generierung der der BC4J-Schicht, BC4J-Schicht, UIX-Seiten UIX-Seiten WEB-Applikationen mit UIX Agenda • Teil 2 – Elementare Anwendungsbausteine –– –– –– –– Page Page Layout Layout und und Stylesheet Stylesheet Standard-Tags, Standard-Tags, LOV LOV EventEvent- und und Errorhandling Errorhandling Databinding Databinding und und BC4J-Integration BC4J-Integration • Teil 3 – Ausblick: JDeveloper 10g und ADF UIX Copyright iBAGS und Database Consult GmbH 11/2003 6 • User Interface XML bzw. Application Development Framework • J2EE-basiertes Framework zur Erstellung von Web-Applikationen WEB-Applikationen mit UIX Einführung UIX – Java-Klassen zur Generierung von Seiteninhalten (presentation layer) und Kontrollflüssen – Renderer für unterschiedliche Visualisierungen (HTML, WML) – UIX-Language zur deklarativen Erstellung von Seiten und Kontrollflüssen Copyright iBAGS und Database Consult GmbH 11/2003 7 2 WEB-Applikationen mit UIX Einführung •• Typische Typische 3-Schichten 3-Schichten Architektur Architektur •• Gute Gute Umsetzung Umsetzung des des MVCMVCPrinzips Prinzips –– Model: Model: enterprise enterprise data, data, business business rules rules –– View: View: Abfrage Abfrage und und Darstellung Darstellung der der Daten Daten –– Controler: Controler: setzt setzt Aktionen Aktionen um um •• Effiziente Effiziente Seitengestaltung Seitengestaltung für für "standardisierte" "standardisierte" Anforderungen Anforderungen •• Gut Gut für für "transaktionale" "transaktionale" Arbeit Arbeit mit mit den den Daten Daten Copyright iBAGS und Database Consult GmbH 11/2003 8 • Produktive Anwendung zu Planung und Erfassung von Versuchen und Messdaten • Joint-Venture Database Consult und i.B.A.G.S. • Bausteine WEB-Applikationen mit UIX Demo – UIX Language zur Seitendefinition, Kontrollfluss – BC4J für die Persistenzschicht – Eigene Java Beans für Authentifizierung etc. – Relationales Modell mit Table API und eigenen PL/SQL-Prozeduren Copyright iBAGS und Database Consult GmbH 11/2003 9 • Eingesetzte Tools: – JDeveloper 9.0.3.2 – UIX und Bc4J, Deployment – Oracle9i Designer – Datenmodell, Table API WEB-Applikationen mit UIX Demo • Betrieben derzeit unter OC4J (Oracle Application Server Containers for J2EE ) • Datenhaltung in Oracle 9iR2 Demo Copyright iBAGS und Database Consult GmbH 11/2003 10 3 • UIX Components – User interface (UI) components WEB-Applikationen mit UIX UIXUIX-Bausteine (1) •• LayoutLayout- und und Kontrollelemente Kontrollelemente für für Seiten: Seiten: buttons, buttons, checkboxes checkboxes etc. etc. •• Implementiert Implementiert als als Java Java Beans Beans – Renderers •• Darstellungen Darstellungen abhängig abhängig von von Client Client devices devices – Java Code liegt in Package oracle.cabo.ui und abhängigen Copyright iBAGS und Database Consult GmbH 11/2003 11 • UIX Controller – Kontrolliert Navigation zwischen den Seiten – Implementiert als J2EE-Servlet – Java Code liegt in Package oracle.cabo.servlet und abhhängigen WEB-Applikationen mit UIX UIXUIX-Bausteine (2) • Dynamic Images – Dynamische Generierung von Images – Trennung von Graphik und Text – einfache Lokalisierung – Code liegt im Package oracle.cabo.image Copyright iBAGS und Database Consult GmbH 11/2003 12 • UIX Styles – Zentrale Definition des Erscheinungsbildes – oracle.cabo.style WEB-Applikationen mit UIX UIXUIX-Bausteine (3) • UIX Share – Allgemeine UIX-Klassen – oracle.cabo.share Copyright iBAGS und Database Consult GmbH 11/2003 13 4 • UIX Language – "Oberste" UIX-Schicht – XML-Dialekt – Deklarative Sprache für user interfaces, data bindings, events – Umsetzung in Java Objekte – oracle.cabo.ui.xml und oracle.cabo.servlet.xml – Tags für •• •• •• •• •• WEB-Applikationen mit UIX UIXUIX-Bausteine (4) UIX UIX components components Data Data binding binding Error Error handling handling Event Event handling handling Templates Templates Copyright iBAGS und Database Consult GmbH 11/2003 14 WEB-Applikationen mit UIX Graphische Elemente Copyright iBAGS und Database Consult GmbH 11/2003 15 • • • Eine Möglichkeit für persistence layer Business Components for Java Framework in Java und XML für wiederverwendbare Business Components • Entity Object – Associations WEB-Applikationen mit UIX BC4J – Java-Klasse + XML-Metadaten – Mapping zu DB-Tabelle, View oder Synonym – Zusätzliche Einbettung von Business-Logik und Validierungen – Zugriff über View Objekte Copyright iBAGS und Database Consult GmbH 11/2003 16 5 WEB-Applikationen mit UIX BC4J • View Object – View Links – Zugriff auf Entity-Objekte – Filtern Attribute, Rows • Application Module – Logischer Container für Instanzen von ViewObjekte, Links, Transaktionen etc. Copyright iBAGS und Database Consult GmbH 11/2003 17 WEB-Applikationen mit UIX BC4J Copyright iBAGS und Database Consult GmbH 11/2003 18 WEB-Applikationen mit UIX Gesamtsicht Browser middle tier UIX Share UIX-Language UIX-Components UIX-Controller Dyn. Images UIX-Styles BC4J Datenbank Copyright iBAGS und Database Consult GmbH 11/2003 19 6 UIX-Datei = UIX-Seite UIX-Node Baum von UI-Nodes WEB-Applikationen mit UIX UIXUIX-Konzepte Repräsentation eines UI-Elements named children Indexed children Abhängig von UI-Node Innerhalb von <contents> Copyright iBAGS und Database Consult GmbH 11/2003 20 • UIX Programmierung empfohlen über JDeveloper • Prozedere WEB-Applikationen mit UIX Demo – Workspace: Gruppierung von Projekten – Project: Gruppierung von Dateien einer Applikation – BC4J-Generierung für Persistenzschicht – UIX-Generierung und Programmierung Copyright iBAGS und Database Consult GmbH 11/2003 21 • • • Rechte Maustaste – "new Workspace" Pfad- und Dateiangaben machen JWS-Datei wird in gleichnamigem Verzeichnis angelegt WEB-Applikationen mit UIX Demo: Workspace anlegen <?xml version = '1.0' encoding = 'windows-1252'?> <workspace xmlns="http://xmlns.oracle.com/jdeveloper/903/workspace" nselem="workspace" class="oracle.ide.model.Workspace"> <activeProjectURL path="Project1/Project1.jpr" id="1"/> <listOfChildren class="oracle.ide.model.DataList"> <Item class="oracle.ide.model.Reference"> <URL path="BC4J/BC4J.jpr"/> <nodeClass id="0">oracle.jdeveloper.model.JProject</nodeClass> </Item> <Item class="oracle.ide.model.Reference"> <URL path="UIX/UIX.jpr"/> <nodeClass idref="0"/> </Item> ... Copyright iBAGS und Database Consult GmbH 11/2003 22 7 • • • • Workspace auswählen Rechte Maustaste – "new empty project" Pfad- und Dateiangaben machen JPR-Datei wird in entprechendem Verzeichnis angelegt WEB-Applikationen mit UIX Demo: Projekt anlegen <?xml version = '1.0' encoding = 'windows-1252'?> <project xmlns="http://xmlns.oracle.com/jdeveloper/903/jproject" nselem="project" class="oracle.jdeveloper.model.JProject"> <defaultPackage>mypackage4</defaultPackage> <defaultPackages class="java.util.ArrayList"> <Item class="java.lang.String">mypackage4</Item> </defaultPackages> <dependencyList/> <htmlRootDirectory path="public_html/"/> <j2eeWebAppName>BasisTest-Project1-webapp</j2eeWebAppName> <j2eeWebContextRoot>BasisTest-Project1-context-root</j2eeWebContextRoot> <listOfChildren class="oracle.ide.model.DataList"/> ... Copyright iBAGS und Database Consult GmbH 11/2003 23 • Workspace auswählen • RMT "New Project", rechts "Project containing new Business Components" • Über Wizzard –– –– –– –– WEB-Applikationen mit UIX BC4J Komponenten generieren SourceSource- und und Klassenpfade Klassenpfade Default Default Packagename Packagename "Entity "Entity Objects Objects mapped mapped to to Database Database Schema Schema Objects" Objects" Connection-Auswahl Connection-Auswahl und und Objectauswahl Objectauswahl • Klassen und XML-Dateien für Entity- und ViewObjekte sowie Application Module • BC4J-Konfigurationsdateien Copyright iBAGS und Database Consult GmbH 11/2003 24 • Verbindet ein Projekt mit einer Persistenzschicht (BC4J Application Module) • Projekt auswählen • Rechte Maustaste – "New" • "Web Tier" – "uiXML for Business Components" – rechts "Business Components Client Data Model" WEB-Applikationen mit UIX Client Datamodel anlegen – Erzeugt CPX-Datei im Java-Sourcepath Copyright iBAGS und Database Consult GmbH 11/2003 25 8 • RMT "new" – "uiXML for Business Components" – "complete uiXML Application" oder "uiXML Browse & Edit Form" • Erstellt J2EE Verzeichnisstruktur WEB-Applikationen mit UIX UIX Application generieren – Public_html mit WEB-INF u.a. – Uix-Dateien (*create, *view, *update) – Deployment Descriptor (web.xml) Copyright iBAGS und Database Consult GmbH 11/2003 26 WEB-Applikationen mit UIX Anwendung (1) Copyright iBAGS und Database Consult GmbH 11/2003 27 WEB-Applikationen mit UIX Anwendung (2) Copyright iBAGS und Database Consult GmbH 11/2003 28 9 WEB-Applikationen mit UIX Anwendung (3) Copyright iBAGS und Database Consult GmbH 11/2003 29 WEB-Applikationen mit UIX Anwendung (4) Copyright iBAGS und Database Consult GmbH 11/2003 30 WEB-Applikationen mit UIX Anwendung (5) Copyright iBAGS und Database Consult GmbH 11/2003 31 10 WEB-Applikationen mit UIX Demo Teil 1 Copyright iBAGS und Database Consult GmbH 11/2003 32 • UIX Controller Element • Root-Element der UIX Page • Beschreibung der Seitenkomponenten (required) • Liste der beauftragten Event-Handler • Import und Definition der Templates WEB-Applikationen mit UIX <page> page> - Element <?xml version="1.0“ encodeing="windows-1252“?> <page> <content> ... </content> <handlers> ... </handlers> <templates> ... </templates> </page> Copyright iBAGS und Database Consult GmbH 11/2003 33 • Root-Element des Seiteninhalts • Muss mindestens eine UINode beinhalten • Alle von der UINode abstammenden Elemente können verwendet werden WEB-Applikationen mit UIX <content> content> - Element BEISPIEL: <page> <content> <pageLayout xmlns="http://xmlns.oracle.com/uix/ui"> ... </pageLayout> </content> </page> Copyright iBAGS und Database Consult GmbH 11/2003 34 11 WEB-Applikationen mit UIX Demo Teil 2 Copyright iBAGS und Database Consult GmbH 11/2003 35 • Layout-Element zur Seitengestaltung • Vergleichbar mit einem Template • Liefert verschiedene Content-Bereiche zur Erstellung der Benutzeroberfläche <productBranding> <globalButtons> <start> <userInfo> <copyright> <contents> ... ... ... ... ... ... WEB-Applikationen mit UIX <pageLayout> pageLayout> - Element (1) </productBranding> </globalButtons> </start> </userInfo> </copyright> </contents> etc. Copyright iBAGS und Database Consult GmbH 11/2003 36 productBranding globalButtons userInfo start WEB-Applikationen mit UIX <pageLayout> pageLayout> - Element (2) contents copyright Copyright iBAGS und Database Consult GmbH 11/2003 37 12 WEB-Applikationen mit UIX Demo Teil 3 Copyright iBAGS und Database Consult GmbH 11/2003 38 • • • • • • pageLayout stackLayout flowLayout labeledFieldLayout tableLayout / rowLayout / cellFormat etc. WEB-Applikationen mit UIX Layout - Elemente Copyright iBAGS und Database Consult GmbH 11/2003 39 • • • • • • <header> <image> <styledText> <spacer> <link> <globalButton> WEB-Applikationen mit UIX Basis – Elemente (1) Copyright iBAGS und Database Consult GmbH 11/2003 40 13 • • • • • • • • • <textInput> <choice> <option> <checkBox> <radioButton> <dateField> <submitButton> <resetButton> <form> <message*> z.B. <messageTextInput> WEB-Applikationen mit UIX Basis – Elemente (2) Copyright iBAGS und Database Consult GmbH 11/2003 41 WEB-Applikationen mit UIX Demo Teil 4 Copyright iBAGS und Database Consult GmbH 11/2003 42 • • • • Browser Look And Feel XML Style Sheet Language Definition von Farben und Schriftfonts Styles werden in Browser-, Lokale- und Platform spezifische css-Styles konvertiert • Blaf.xss nicht direkt überschreiben • Import der blaf.xss in eigene *.xss-Datei • ...\public_html\cabo\styles WEB-Applikationen mit UIX blaf. blaf.xss (1) Copyright iBAGS und Database Consult GmbH 11/2003 43 14 • Anpassung der übergeordneten Styles ausreichend (z.B. DefaultFontFamily, DarkBackground, ...) • Alle anderen Styles sind abhängig • Eigene Styles/StyleSheets können definiert werden WEB-Applikationen mit UIX blaf. blaf.xss (2) <styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style version="2.0"> <import name="blaf.xss"/> <styleSheet> ... </styleSheet> <styleSheet browsers="ie"> ... </styleSheet> </styleSheetDocument> Copyright iBAGS und Database Consult GmbH 11/2003 44 WEB-Applikationen mit UIX Demo Teil 5 Copyright iBAGS und Database Consult GmbH 11/2003 45 • Dynamische Anbindung von Daten • Jedes Attribut einer Komponente kann mit dem DataBinding versorgt werden • Namespace für das DataBinding WEB-Applikationen mit UIX DataBinding (1) xmlns:data=http://xmlns.oracle.com/uix/ui • DataBinding ist unabhängig von der Datenquelle (JDBC, EJB, etc.) Copyright iBAGS und Database Consult GmbH 11/2003 46 15 • Sammlung von DatenObjekten • DatenObjekt ist eine Sammlung von Daten WEB-Applikationen mit UIX DataProvider - <inline> (into the UIX Page) - <method> (from static Methode) - <bean> (Java-Bean) - <bundle> (ResourceBundle) - <instance> (from Class) • Werden innerhalb des <dataScope>-Tags spezifiziert • Ein Java-Provider liefert ein DataObject. Die Attributwerte werden daraus per Key ermittelt Copyright iBAGS und Database Consult GmbH 11/2003 47 • Syntax für die DatenQuelle: Key@Provider • Namespace-Name muss angegeben werden WEB-Applikationen mit UIX Simples DataBinding Beispiel: <dataScope xmlns="http://xmlns.oracle.com/uix/ui"> <provider> <data name="myFirstProvider"> <inline myText="Text aus Provider" myValue="100"/> </data> <data name="mySecondProvider"> <method class="package.MyDataProvider" method="getText"/> </data> </provider> <contents> <textInput data:text="myText@myFirstProvider"/> </contents> </dataScope> Copyright iBAGS und Database Consult GmbH 11/2003 48 • Mit dem Tag boundAttribute kann eine komplexere Form des DataBinding durchgeführt werden • Das Attribut Name von boundAttribute muss identisch zu dem anzubindenden Attribut sein WEB-Applikationen mit UIX Komplexes DataBinding (1) - Select gibt den Key an - Source gibt den Provider an • Zu jedem Provider muss ein UIX-Datahandler existieren Copyright iBAGS und Database Consult GmbH 11/2003 49 16 Beispiel Langform: <textInput text="test"> <boundAttribute name="text"> <dataObject select="myText" source=“myProvider"/> </boundAttribute> </textInput> WEB-Applikationen mit UIX Komplexes DataBinding (2) Beispiel Kurzform: <textInput data:text="myText@myProvider" Copyright iBAGS und Database Consult GmbH 11/2003 50 WEB-Applikationen mit UIX DataProvider / DataObject Rendering Context / UINodes Copyright iBAGS und Database Consult GmbH 11/2003 51 WEB-Applikationen mit UIX Demo Teil 6 Copyright iBAGS und Database Consult GmbH 11/2003 52 17 • Namespace für das Eventhandling xmlns:ctrl=http://xmlns.oracle.com/uix/controller WEB-Applikationen mit UIX Events / EventHandling • Events werden vom UIX Controller behandelt • Alle Elemente mit dem Attribut „destination“ unterstützen UIX Controllen Events • Alle Form-Parameter (Key-Value-Pairs) stehen im EventHandling zur Verfügung • Java Interface ist PageEvent Copyright iBAGS und Database Consult GmbH 11/2003 53 • Framework für Web Applikationen basierend auf dem Model-View-Controller-Konzept (MVC) • PageFlow kann kontrolliert werden • Datenfluss zwischen den Views wird kontrolliert • Gruppiert Seiten zu einer Applikation WEB-Applikationen mit UIX UIX Controller (1) Copyright iBAGS und Database Consult GmbH 11/2003 54 WEB-Applikationen mit UIX UIX Controller (2) Copyright iBAGS und Database Consult GmbH 11/2003 55 18 Beispiele: <page> ... <contents> <link text="Vorherige" ctrl:event="myEvent"/> <submitButton text="Nächste" ctrl:event="next"/> </contents> ... <handlers> <event name="myEvent"> <method class="package.MyClass" method="handleMyEvent"/> </event> <event name="next"> <go name="NextPage"/> </event> </handlers> WEB-Applikationen mit UIX Events </page> Copyright iBAGS und Database Consult GmbH 11/2003 56 WEB-Applikationen mit UIX Demo Teil 7 Copyright iBAGS und Database Consult GmbH 11/2003 57 • Namespace für Templates xmlns="http://xmlns.oracle.com/uix/controller" WEB-Applikationen mit UIX Templates (1) • • • • • • Einheitliche Seitengestaltung Definition von Wiederholungsbereichen Wiederverwendbarkeit Erweitern von bestehenden Komponenten Erstellen von neuen Komponenten Tag-Definition: Ein Template entspricht einem XML-Tag, leichte Verwendung • Unterstützt DataBinding Copyright iBAGS und Database Consult GmbH 11/2003 58 19 • Root-Element <tempalteDefinition> • targetNamespace = Namensraum des Templates • localName = Definiertert Tag-Name innerhalb des Namespace • Dateierweiterung *.uit WEB-Applikationen mit UIX TemplateTemplate-Definition Copyright iBAGS und Database Consult GmbH 11/2003 59 • Können nicht direkt angezeigt werden • Müssen vor <head> bzw. <content>-Element importiert werden • Einzeltemplates können in einer TemplateLibrary zusammengefasst und importiert werden WEB-Applikationen mit UIX Templates (2) Copyright iBAGS und Database Consult GmbH 11/2003 60 WEB-Applikationen mit UIX Demo Teil 8 Copyright iBAGS und Database Consult GmbH 11/2003 61 20 • Verknüpfung über das Client Data Model • Registrierung des Applikation Moduls in der UIX Page • Deklarieren von ViewObjekten/Rows • Definition der BC4J-Scope Bereiche für ApplikationModul, ViewObject, Row ... • Erweiterung jeder UI-Komponente um „attrName“ für das DataBinding per BC4J • <keyStamp>-Element für TableBean WEB-Applikationen mit UIX BC4JBC4J-Integration Copyright iBAGS und Database Consult GmbH 11/2003 62 • Application Developement Environment • Implementiert über JDeveloper 10g • Verstärkte graphische Entwicklungsmöglichkeiten WEB-Applikationen mit UIX Ausblick Copyright iBAGS und Database Consult GmbH 11/2003 63 WEB-Applikationen mit UIX Vielen Dank für´s Zuhören www.ibags.de www.database-consult.de Copyright iBAGS und Database Consult GmbH 11/2003 64 21
