2. Xpert.ivy Developer Day

Nach dem ersten erfolgreichen Xpert.ivy Developer Day, findet am 11. April 2013 der 2. Xpert.ivy Developer Day statt.

Unten die Einladung, die vom ivyTeam versendet wurde.

Liebe Anwender-Community von Xpert ivy

Hiermit laden wir Sie herzlich zum 2. Xpert.ivy Developer Day vom 11. April 2013 in Zug ein. 

Die Entwickler der Xpert.ivy Plattform präsentieren Ihnen aus erster Hand den Release 5.0. ganz nach dem Motto "von Entwickler für Entwickler". 

Ort: IFZ Institut für Finanzdienstleistungen Zug, Seminarraum Auditorium in der Grafenau, in Zug

Datum: Donnerstag den 11. April 2013
13:00 - 13:30   Eintreffen
13:30 - 14:00   Offizieller Launch Xpert.ivy 5
14:00 - 15:30   Präsentationen zu Xpert.ivy
15:30 – 16:00   Pause
16:00 - 17:00   Präsentationen zu Xpert.ivy
Ab 17:00          Networking-Bier

Wir freuen uns, Sie am 11. April 2013 zum 2. Developer Day begrüssen zu dürfen. Bitte melden Sie sich noch heute bei caty.huerlimann@ivyteam.ch an. Teilnehmerzahl ist beschränkt.

Bruno Bütler                            Reto Weiss
Leiter ivyTeam AG                   Dipl. El. Ing. HTL

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Templating mit Xpert.ivy und JSF

Jede nicht triviale Applikation hat ein Grunddesign das sich über die meisten Masken wiederholt. Damit man dieses Design nicht für jede Maske immer wieder Codieren muss, gibt es in JSF Templates, mit denen man an einem zentralen Ort diese Designs erstellen und, was noch viel wichtiger ist, warten kann.

In diesem Tutorial werde ich zeigen, wie man Templates in Xpert.ivy erstellt und verwendet.

SVN

Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importieren.

Demos

Ich habe 2 Demos erstellt die Application Template Demo und Decorated Template Demo heissen.

Templates erstellen

Templates sind *.xhtml Dateien die im webContent Ordner drin sein müssen.

Die Templates sollten in einem dafür vorgesehenen Ordner abgelegt werden. Dazu legt man einfach einen neuen Ordner im webContet Folder an. In diesem Beispiel heisst er templates.

Jetzt wo die Grundstruktur steht, kann man über das Kontext-Menu per New -> Other ein HTML Template anlegen.

Abb. 1: Neues HTML Template erstellen

Im Dialog wählt man nun den templates Ordner aus, gibt den Namen des Templates ein und klickt auf Next.

Abb. 2: Name des Templates eingeben

Als Template wählt man das New Facelet Template aus und klickt Finish. Das Resultat ist eine einfaches Template mit Titel, Header, Content und Footer. Dieses Template kann jetzt bearbeitet werden.

Abb. 3: Vorlage auswählen

Aufbau eines Templates

Schauen wir uns nun applicationTemplate.xhtml an und wie es von ApplicationTemplateDemo verwendet wird.

Code-Snippet 1: applicationTemplate.xhtml

Code-Snippet 2: ApplicationTemplateDemo

Wie im Code-Snippet 1 zu sehen ist, besteht ein Template nur aus HTML, ui:insert und ui:include.

ui:insert ist ein Platzhalter für den Inhalt den man per ui:define in einer Komponente, wie ApplicationTemplateDemo, definieren kann. Wenn nichts definiert ist, wird das Default das zwischen ui:insert ist verwendet.

Im Code-Snippet 2 sieht man, wie mit ui:composition das Template verwendet wird.

Interessant bei ui:composition ist auch, dass nur der Inhalt von ui:composition gerendert wird. Alles was ausserhalb von ui:composition ist, wird ignoriert.

ui:include, wie der Name schon verrät, fügt den Inhalt eines Templates ein. Ein solches Template kann wie das erste Template vorher erstellt werden, mit dem Unterschied, dass man New Facelet Composition Page als Template wählt.

Abb. 4: Facelet Composition Page

Code-Snippet 3: header.xhtml

ui:decorate

Eine Variation von ui:composition ist ui:decorate. ui:decorate hat die selben Funktionen wie ui:composition. Zusätzlich kann man aber ein ui:insert ohne name im Template definieren.

Code-Snippet 4: decoratedTemplate.xhtml

Im Code-Snippet 4 sieht man auf Zeile 17, dass ui:insert ohne name Attribute verwendet wird. Dies hat zur Folge, dass im Code-Snippet 5, alles was ausserhalb von einem ui:define ist, dort eingefügt wird.

Code-Snippet 5: DecoratedTemplateDemo

Fazit

Templates sind für jede nicht triviale Applikation ein muss, damit Änderungen am Design nicht an zig Stellen nachgeführt werden müssen.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Xpert.ivy Code-Rezept: Drill-Down Master-Detail-Edit Formular erstellen

Problem

Sie wollen ein Formular mit Drill-Down Master-Detail-Edit Funktionalität erstellen.

Lösung

Die PrimeFaces Extensions bieten eine pe:masterDetail Komponente an, mit der solche Formulare schnell und einfach erstellt werden können.

In diesem Tutorial zeige ich, wie man die pe:masterDetail Komponente einsetzt.

Abb. 1: Stufe 1 - Übersicht der Kontakte

Abb. 2: Stufe 2 - Detail des gewählten Kontaktes

Abb. 3: Stufe 3 - Kontakt bearbeiten

SVN

Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importieren.

Code

Die Demo Master Detail Edit Demo zeigt ein Beispiel, wie man pe:masterDetail einsetzen kann (Abbildungen 1 bis 3).

Als kleinen Bonus habe ich noch ein Beispiel für das hinzufügen und löschen von Kontakten reingepackt. Dies hat aber nichts mit der pe:masterDetail Komponente an sich zu tun und ist fürs Selbststudium gedacht.

Code-Snippet 1: MasterDetail Code der Demo

Code-Snippet 1 zeigt den ganzen JSF Code der für die Demo benötigt wird.

Während dies nach sehr viel Code aussieht, kann man das Ganze auf 1 Pattern reduzieren, dass Allgemein eingesetzt werden kann, um mit pe:masterDetail zu Entwickeln.

Code-Snippet 2: pe:masterDetail Pattern

Der pe:masterDetail Tag kann 1 oder mehrere pe:masterDetailLevel beinhalten. Im pe:masterDetail konfiguriert man das Allgemeine Verhalten der Komponente wie z.B. ob oberhalb der Levels ein Breadcrumb angezeigt werden soll. Die pe:masterDetailLevel beinhalten die eigentlichen Komponenten, die je nach Level angezeigt werden sollen.

Allgemein hat man im ersten Level eine Liste/Tabelle von etwas, von dem man das Detail im zweiten Level anzeigt.

pe:selectDetailLevel kann als Child-Element von p:commandButton und p:commandLink verwendet werden. pe:selectDetailLevel bestimmt, zu welchem Level gewechselt wird, wenn man z.B. einen Button drück. Des Weiteren kann man das selektierte Objekt per contextValue übergeben, dass danach im nächsten pe:masterDetailLevel per contextVar zur Verfügung steht.

Mit dem selectLevelListener kann man pe:selectDetailLevel übersteuern. Schauen Sie sich dazu die selectLevel Methode in der Logic an.

Wie man sieht, kann man dieses Pattern beliebig weit erweitern. In der Demo habe ich z.B. ein drittes Level erstellt, über das man den selektierten Kontakt direkt bearbeiten kann.

Bei Objekten die selber wieder Listen von Objekten beinhalten, kann man mit der pe:masterDetail Komponte einfach weitere Levels hinzufügen und somit einen Drill-Down Effekt erzielen.

Weiterführende Ressourcen

Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Rothorn Sprint 13 Review Meeting: Polish Html Dialog

Der Fokus in diesem Sprint war Polish Html Dialog. Zu diesem Polish gehören unter andrem eine neue Perspektive für Html User Dialog Entwicklung, verbesserte Html User Dialog Validation und ein verbesserter Ivy Projekt Tree, der nun die src, webContent und eigene Verzeichnisse anzeigt.

Meine persönlichen Highlights kamen ganz am Schluss des Review Meetings: Das Update auf PrimeFaces 3.5 und das Xpert.ivy nun mit PrimeFaces Mobile und PrimeFaces Extensions ausgeliefert wird. Ich werde sicher den einen oder anderen Blog Post den PrimeFaces Extensions widmen.

Eine weitere nennenswerte Neuerung ist das bei Datenbank- bzw. Webservicekonfigurationen nun die Passwörter verschlüsselt gespeichert werden, wenn man es über den entsprechenden Editor eingibt und speichert. Wer die Konfigurationen per Texteditor öffnent, der kann immer noch Plaintext Passwörter verwenden.

Migration auf Rothorn S13

Die verbesserte Html User Dialog Validation bringt auch etwas Arbeit mit sich, falls man Projekte mit älteren Builds entwickelt hat.

Vor S13 wurden für Script-Steps in Html User Dialogen die Scripts-Steps von den ULC RIA Dialogen verwendet. Ab S13 werden aber die von den Prozessen verwendet, da Html User Dialoge keine panel Variable haben.

Zum Glück ist die Migration einfach und gut dokumentiert.

Fazit

Man merkt, dass der offizielle Rothorn Release nicht mehr weit weg ist und das Sprint Motto Polish Html Dialog zeigt dies. Während es in diesem Sprint keine grossen Neuerungen wie in den letzten paar Sprints gab, ist es trotzdem ein toller Sprint Inkrement geworden, denn Details wie z.B. ein verbesserter Projekt Tree erleichtern einem Xpert.ivy Entwickler das Leben.

Für eine komplette Übersicht der neuen Features, schauen Sie sich den ivyTeam Blog an.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Java Klassen mit Xpert.ivy Debuggen

Wer Java Klassen in seinen Prozessen verwendet und diese Debuggen will, der wir schnell merken, dass die Breakpoints nicht funktionieren. Doch mit 2 kleinen Konfigurationen bringt man auch das zum laufen.

Um Java Klassen die von Xpert.ivy verwendet Debuggen zu können, muss man auf Remote Debugging zurückgreifen. Das Ganze funktioniert im Designer sowie auf dem Server, da man Remote den Server, der auch im Designer läuft, debuggt.

Im Designer kann man Remote Debugging aktivieren, in dem man in der Xpert.ivy Designer.ini Datei folgende Zeile zuunterst hinzufügt.

-agentlib:jdwp=transport=dt_socket,server=y,address=8001,suspend=n

Mit diesem zusätzlichen JVM Argument erlaubt man es einem Remote Debugger auf Port 8001 zu verbinden und das Programm zu Debuggen.

Nach einem Neustart des Designer muss man nun auf die Java View wechseln. Unter Run -> Debug Configurations kann man eine neue Remote Java Application Debugging Konfiguration erstellen.

Abb. 1: Remote Java Application Debugging Konfiguration
Dazu wählt man das Projekt aus und überprüft, ob Host und Port stimmen. Per Knopfdruck auf Debug kann es los gehen.

Wenn man nun die Applikation startet und Breakpoints im einer Java Klasse hat, dann wird dieser getriggert und man kann den Code und die Daten analysieren.

Für den Server muss man den ivy.vm.additional.options Eintrag im der entsprechenden *.ilc Datei im bin Verzeichnis anpassen. Nach einer Änderung ist auch hier ein Neustart erforderlich.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Xpert.ivy Code-Rezept: Komponenten in der Html User Dialog Logic updaten

Problem

Sie wollen in der Logic eines Html User Dialogs Komponenten updaten bzw. neu rendern lassen.

Lösung

Über den PartialViewContext kann man Ids von Komponenten die geupdatet werden sollen hinzufügen.

SVN

Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importieren.

Code

Die Demo Update Component From Logic Demo zeigt, wie man normale Komponenten sowie Composite Components updaten kann.

Code-Snippet 1 zeigt, welcher Code nötig ist, um normale Komponenten (Zeile 3) und Composite Components (Zeile 4) innerhalb der Logic updaten zu können.

Code-Snippet 1: Komponenten in der Logic updaten

Interessant bei Composite Components ist, dass man die Id 2 mal angeben muss. Ein Blick auf die Implementation verrät auch warum das so ist.

Code-Snippet 2: Composite Component Id

Wie auf Zeile 2 zu sehen ist, wird die Id, die von aussen per <ic:forms.UpdateComponentFromLogicComponent id="mycomponent" /> mitgegeben wird, per #{cc.id} eingesetzt. Der Pfad setzt sich nun aus der Id im Parent sowie der Id im Composite Component zusammen. Da beide die selbe Id haben, muss man es auch 2 mal angeben.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Composite Components mit insert children und Facetten individualisieren

Mit Composite Components hat man die Möglichkeit, wiederverwendbare Komponenten wie z.B. Loginmaske zu schreiben. Doch manchmal kann man trotzdem nicht alles in eine Komponente reinpacken, da es je nach Anwendung kleine Unterschiede gibt.

Was kann man also tun, damit man trotzdem wiederverwendbare Komponenten mit geringem Aufwand individualisieren kann?

JSF bietet insertChildren und f:facet an, um Teile von Composite Components vom aussen zu konfigurieren.

Schauen Sie sich dazu die Facet and Insert Children Demo im Forms Demo Projekt an das unter http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms ausgecheckt werden kann.

Code-Snippet 1: Ivy Composite Component

Code-Snippet 2: Composite Component konfigurieren

insertChildren

Mit insertChildren werden alle Elemente die innerhalb des Composite Components definiert werden, direkt in den Composite Component eingefügt. Ein tolles Beispiel ist die p:dataTable die als Kinder p:column entgegennimmt.

Um diese Kinder innerhalb eines Composite Components anzeigen zu können, kann man einfach cc:insertChildren (Code-Snippet 1, Zeile 15) verwenden. Im Beispiel wird das p:outputLabel und das p:inputText als Kind eingefügt (Code-Snippet 2, Zeilen 9 und 10).

Facetten

Facetten funktionieren ähnlich wie insertChildren. Der Unterschied ist, dass sie Namen haben und man sie mit f:facet einfügen muss. Des Weiteren muss man die Facetten im Interface angeben und es gibt 2 Möglichkeiten Facetten innerhalb des Composite Components zu rendern.

Die erste ist cc:renderFacet (Code-Snippet 1, Zeile 8). Sie rendert den Inhalt von f:facet direkt und hat somit den selben Effekt wie cc:insertChildren.

cc:insertFacet wird nicht direkt im Composite Component gerendert, sondern in der Komponente, in der cc:insertFacet aufgerufen wird als Facette mitgegeben. Im Beispiel geben wird die header und footer Facette der p:panelGrid mitgegeben und dort gerendert (Code-Snippet 1, Zeilen 11 und 13).

Fazit

Facetten und insertChildren sind tolle Werkzeuge, um Composite Components von Fall zu Fall einfach individualisieren zu können.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.

Xpert.ivy Code Rezpet: Managed Beans in der Logic verwenden

Problem

Sie wollen auf ein Managed Bean in der Logic zugreifen. 

Lösung

Über die Application kann man EL-Expressions evaluieren und somit auch auf Managed Beans zugreifen.

Ich werde Ihnen zeigen, wie Sie das Application Objekt holen und eine EL-Expression evaluieren, um auf ein Managed Bean zugreifen zu können.

SVN

Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/ManagedBeans in den Xpert.ivy Designer importieren.

Code

Als erstes definieren wir ein einfaches Managed Bean.

Code-Snippet 1: Managed Bean

Das description Attribut des Bean wird nun in einem p:inputText verwendet.

Code-Snippet 2: Bean Attribut verwenden

Wie hier zu sehen ist, wird über den name des Beans darauf zugegriffen.

Wenn der Button gedrückt wird, wird in der Logic auf das Bean zugegriffen und das description Attribute geändert.

Code-Snippet 3: Zugriff auf das Managed Bean

Der Schlüssel hier ist das evaluieren der EL-Expression auf Zeile 8. Wenn #{sampleBean} evaluiert wird, hat dies den selben Effekt, wie wenn diese EL-Expression innerhalb der View ausgeführt wird.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter

Melden Sie sich für den Xpert.ivy hacker Newsletter an und Sie erhalten immer die neusten Tutorials und Tricks zu Xpert.ivy sobald sie publiziert werden.

Ihre Email Adresse wird nur für diesen Newsletter verwendet und nicht an dritte weitergegeben.