ADF kompakt: Workshop zum Einstieg in ADF

Transkript

1 Eine Veranstaltung der DOAG durchgeführt von und Inhalt 1. HR Schema in der Datenbank frei schalten Zum Einstieg in den JDeveloper Workshop: Mitarbeiter-Applikation erweitern...11 Edit Funktionalitäten für Mitarbeiterdatensatz hinzufügen...11 Erweitern des Datenmodells für eine Auswahlliste der Jobs in der Oberfläche...21 Anpassen der Oberfläche: Anzeigen des Jobs in der Employee Übersicht Anpassen der Oberfläche: Auswahl des Jobs in dem Employee-Formular...36 Autoren Annegret Warnecke (ORACLE Deutschland B.V. & Co. KG) Wolf G. Beckmann (Team GmbH)

2 1. HR Schema in der Datenbank frei schalten I m J D e v e l o p e r V e r b i n d u n g z u m U s e r s y s h e r s t e l l e n +++ Starten Sie den JDeveloper. Akzeptieren Sie die Defaults. Stellen Sie eine Verbindung vom JDeveloper zu der XE Datenbank her (für User sys) /40

3 + + + H R S c h e m a f r e i s c h a l t e n SQL Worksheet öffnen /40

4 alter user HR identified by HR; alter user HR account unlock; grant connect to HR; P a s s w o r t f ü r d a s i n d e r Ü b u n g v e r w e n d e t e H R S c h e m a a n p a s s e n /40

5 Passwort für das Schema HR eingeben, so wie es in der eigenen XE DB definiert ist (die Skripte oben setzen das Passwort auf "HR") /40

6 /40

7 2. Zum Einstieg in den JDeveloper I n t e g r i e r t e n W e b L o g i c S e r v e r s t a r t e n A n w e n d u n g e n e n t z i p p e n b e s t e h e n d e A n w e n d u n g ö f f n e n /40

8 zur bestenden Anwendung navigieren S e i t e d e r b e s t e h e n d e n A n w e n d u n g i m B r o w s e r ö f f n e n davor müssen der integrierte WebLogic Server und die Datenbank gestartet sein /40

9 /40

10 /40

11 3. Workshop: Mitarbeiter-Applikation erweitern Edit Funktionalitäten für Mitarbeiterdatensatz hinzufügen S o s o l l d a s E r g e b n i s a u s s e h e n Über einen Edit Button, soll auf eine Seite verzweigt werden, auf der Änderungen an dem jeweiligen Datensatz vorgenommen werden können. Von dort aus soll auf die Ursprungsseite zurück verzweigt werden können. Im Ausgangszustand der Demo fehlt der "Edit" Link und die "Edit Employee" Seite ist leer /40

12 + + + S o r i c h t e n S i e e i n e n L i n k e i n, u m a u f d i e S e i t e z u v e r z w e i g e n, d i e d i e M ö g l i c h k e i t z u m U p d a t e d e r M i t a r b e i t e r d a t e n s ä t z e b i e t e t +++ Die Einstiegsseite ("Main.jsf") ist mit dem "Tablet First" Seitentemplate erstellt worden. Dass der innere Bereich ausgegraut ist, deutet darauf hin, dass dieser Bereich mit Hilfe von sogenannten "dynamic regions" erstellt worden ist. Der Inhalt der dynamic regions besteht aus einem oder mehreren Taskflows, von denen jeweils zunächst die erste Seite angezeigt wird. Die Verlinkung erfolgt über "dynamic region links", die in diesem Fall mit den beiden Buttons im oberen Bereich ("Departments" und Employees) verbunden worden sind (s. YouTube Video /40

13 In diesem Fall handelt es sich um die Taskflows "DeptInfo" und "EmpInfo". Die Aufgabe an dieser Stelle ist, den 2. Taskflow zu ergänzen. Der Taskflow besteht aus zwei Seiten, die noch miteinander verbunden werden müssen. Die Verbindungen werden zunächst auf der Metaebene eingerichtet und können dann als Links auf die konkreten Seiten übernommen werden /40

14 Als grafische "Verbinder" werden "Control Flow Cases" aus der Komponentenbibliothek verwendet. Man klickt das Symbol des "Control Flow Cases" an und zieht es auf die Seite, von der aus weiter verzweigt werden soll, klickt diese Seite an und klickt als nächstes auf die Seite, auf der der Flow enden soll. Es wird dann ein entsprechender Pfeil in der Diagramm Sicht des Taskflows eingerichtet. Die Bezeichnung der Pfeile lässt sich entweder in der Diagramm-Sicht oder in dem dazugehörigen Properties Fenster eingeben. Bitte Pfeile in beide Richtungen erzeugen, wie oben benennen und alles speichern. Damit eine Verzweigung von einer konkreten Seite auf die andere möglich ist, muss ein Link eingerichtet werden. Dieser Link soll in unserem Beispiel an einen Button gebunden werden /40

15 Dazu bitte durch einen Doppelklick das Seitenfragment "EmpInfosView" öffnen. Das Formular mit den Mitarbeiterinformationen befindet sich dort in der obersten Zeile eines PanelGrid Layouts. Es ist von einer PanelBox eingeschlossen. Zu dieser PanelBox gehört ein Bereich (eine Facette) mit der Bezeichnung "toolbar". Bitte einen Button aus der Komponentenbibliothek auf die toolbar ziehen (entweder in die Design Sicht der Seite oder in die StructurePane). Bitte bezeichnen Sie den Button mit "Edit" und fügen Sie ein Icon zum Botton hinzu. Nutzen Sie dazu bitte den Properties Bereich. Wählen Sie aus der Drop Down Liste für die Eigenschaft "Action" "Edit" aus. Das ist der Link zu der Updateseite (EditEmployeesView), wie vor kurzem als Verbinder eingerichtet worden ist /40

16 Eine Auswahl von Icons steht Ihnen mit dieser Demo-Anwendung zur Verfügung. Sie finden diese im Filesystem unter einem Pfad wie nachfolgend angezeigt. Die Icons können Im JDeveloper direkt adressiert werden. Speichern Sie Ihre Anwendung /40

17 + + + E i n r i c h t e n d e r S e i t e " E d i t E m p l o y e e s V i e w ", m i t d e r U p d a t e s a n d e n M i t a r b e i t e r d a t e n s ä t z e n v o r g e n o m m e n w e r d e n k a n n +++ Die fertige Seite soll eine PanelBox enthalten, die ein PanelFormLayout umschließt. Die Seite soll einen Submit Button aufweisen und maximal 4 Zeilen aufweisen. Öffnen Sie das Seitenfragment "EditEmployeesView". Ziehen Sie aus den Data Controls "EmployeesView1" auf die PanelBox in der StructurePane und wählen Sie aus dem sich öffnenden Fenster "ADF Form" /40

18 Es öffnet sich ein Wizard, in dem Sie u.a. die Anzahl der angezeigten Elemente verringern können (indem Sie diese anklicken und das rote Kreuz drücken). In diesem Fall soll davon kein Gebrauch gemacht werden. Alle Bestandteile der Datensätze sollen angezeigt werden. Bitte markieren Sie die Checkbox vor "Submit". Ok. In der Design Sicht erscheint nun die Tabelle. Die Zeilen sind alle untereinander angeordnet. Damit max. 4 Zeilen untereinander angezeigt werden, geben Sie bitte in dem Properties Fenster unter "Rows" eine "4" ein. Sobald Sie irgendwo anders hin klicken, wird die Zeilendarstellung entsprechend umgestellt /40

19 Damit Sie zur Übersichtsseite zurücknavigieren können ändern Sie noch die Property Action des Submit-Buttons auf OK /40

20 Bitte speichern Sie alles. Ok. Lassen Sie die Seite Main laufen und betrachten Sie das Ergebnis der durchgeführten Änderungen im Browser /40

21 Erweitern des Datenmodells für eine Auswahlliste der Jobs in der Oberfläche S o s o l l d a s E r g e b n i s a u s s e h e n K o n f i g u r a t i o n d e s J D e v e l o p e r s a n p a s s e n Dieser Schritt ist nur einmal in der Laufzeit Ihrer JDeveloper-Installation notwendig. Hier handelt es sich um die Best Practices bei der Strukturierung des Datenmodells. Öffnen Sie die Preferences über das Menü: Wählen Sie die Einstellungen für ADF Business Components > Packages : /40

22 Übernehmen Sie die Einstellungen für die Business Components D a t e n m o d e l u m d i e J o b s - T a b e l l e e r w e i t e r n Starten Sie den Wizard zum hinzufügen von Tabellen über den Links-Click auf model /40

23 Fügen Sie die Tabelle Jobs zu den Entity Objects hinzu /40

24 Fügen Sie die Jobs-Tabelle auch zu den Etity-based View Objects hinzu: /40

25 Drücken Sie nun solange Next > bis Sie beim Summary angelangt sind. Hier wird angezeigt, dass die Tabelle Jobs als Entity Object hinzugefügt und ein zugehöriges Entity-based View Object erzeugt wird. Diese beiden Objekte werden dem Application Modul HrService zugeordnet. Drücken Sie Finish und Ihr Datenmodell wird erweitert /40

26 + + + J O B L O V ( L i s t o f V a l u e s ) d e m E m p l o y e e s V i e w h i n z u f ü g e n Um eine Auswahlliste für die Jobs in der Oberfläche zu erhalten muss eine LOV im Datenmodell hinzugefügt werden. Öffnen Sie die Eigenschaften des EmployeesView durch einen Doppelklick auf das View- Object. Dadurch öffnet sich die Eigenschafts-Seite. Unter Attributes werden die einzelnen Spalten des View-Objects angezeigt /40

27 Wählen Sie das Attribut (also die Spalte) JobId und öffnen Sie den Reiter List of Values Über das innerhalb der List of Values öffnen Sie den Wizard zum hinzufügen der LOV /40

28 Im Wizard geben Sie zuerst an, welche Quelle (welches View-Object) die Daten liefern wird. Hier also der Jobs-View. Da er noch nicht als DataSource angegeben ist, muss er hinzugefügt werden. Anschließend geben Sie an welche Spalte aus dem ListSource (dem Jobs-View) die Daten für die Employee-Spalte JobId enthält: Geben Sie JobId an /40

29 Anschließend geben wir an, welche Felder in der Oberfläche zur Auswahl angezeigt werden sollen. Dazu gehen Sie auf den UI Hints Reiter /40

30 Und wählen OK /40

31 Damit haben Sie die LOV erstellt: Da wir in der Anzeige nun nicht mehr die JobId sondern den Job sehen, wollen wir das Label anpassen. Dazu wird im Reiter UI Hints das Label angepasst: /40

32 Damit ist das Datenmodell angepasst. Speichern Sie alles. ( ) Nun passen wir die Oberfläche an. Anpassen der Oberfläche: Anzeigen des Jobs in der Employee Übersicht A u f f r i s c h e n d e s D a t a C o n t r o l s - R e i t e r s i m J D e v e l o p e r Drücken Sie den Refresh Button Jetzt hat der JDeveloper intern seine Informationen über das Datenmodell aktualisiert D a s F e l d J o b I d i m E m p I n f o s V i e w a n p a s s e n Wir öffnen einfach den Wizard für das Formular und ändern die Form der Anzeige auf Select one Choice für das Feld JobId. Öffnen Sie das Seitenfragment EmpInfosView /40

33 Wählen Sie das Formular im StructurePane durch anklicken aus. Öffnen Sie den Wizard über das Symbol im Property-Fenster /40

34 Wählen Sie für die Anzeige des Feldes JobId Select one Choice aus. Dann drücken Sie OK /40

35 Jetzt wird der Name des Jobs im Dialog angezeigt: /40

36 Auch das Label ist jetzt Job statt JobId Anpassen der Oberfläche: Auswahl des Jobs in dem Employee-Formular D a s F e l d J o b I D i m E d i t E m p l o y e e s V i e w ü b e r d e n W i z a r d a n p a s s e n Öffnen Sie das Seitenfragment EditEmployeesView. Markieren Sie im StructurePane das Formular durch anklicken. Öffnen Sie den Wizard des Formulars /40

37 Wählen Sie für das Feld JobId Select one Choice aus. Und drücken Sie OK /40

38 Fertig!! Speichern Sie alles ( ) Starten Sie die Anwendung neu und Betrachten Sie das Ergebnis /40

39 /40

40 /40