Ausblick 2013: Xpert.ivy Applikationsentwicklung und Extensions

Das Jahr neigt sich dem Ende zu und ich will die Gelegenheit nutzen, um mich bei allen meinen Lesern zu bedanken. Es waren tolle erste Wochen als Xpert.ivy Blogger und ich hoffe es hat Ihnen genauso viel Spass gemacht wie mir.

Bevor ich mich für dieses Jahr verabschiede, möchte ich Ihnen einen kurzen Ausblick auf 2013 geben und was Sie auf xpertivyhacker.ch erwarten können.

Ein Fokus wird die Applikationsentwicklung mit Xpert.ivy Rothorn und JSF/PrimeFaces sein. Ziel ist es an Hand praktischer Beispiele zu zeigen, wie man Applikationen und wiederverwendbare Komponenten mit dem neuen Xpert.ivy Release entwickelt und testet.

Ein weiteres Projekt das ich starten werde ist die Entwicklung von Xpert.ivy Extensions. Mehr will ich dazu aber noch nicht verraten. Damit Sie den Start und News über dieses Projekt nicht verpassen, können Sie sich hier für den Xpert.ivy Extensions Newsletter anmelden.

Als kleines Weihnachtsgeschenk an Sie können Sie mir Ihre Wünsche für Blog-Themen und Xpert.ivy Extensions in den Kommentaren oder auf Twitter mitteilen und mit etwas Glück werde ich Ihrem Wunsch nächstes Jahr nachkommen.

Ich werde nun in die Weihnachts- und Neujahrspause gehen und im Januar wieder voll durchstarteten.

In diesem Sinne wünsche Ihnen und Ihrer Familie frohe Festtage und einen guten Rutsch ins neue Jahr!
Ü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 11 Review Meeting

Heute haben die Jungs vom IvyTeam die Resultate des Sprint 11 im Review Meeting gezeigt, der unter dem Motto System DB and Library Updates stand. Es ist ein Sprint voller technischer Updates.
  • Java 7
  • Tomcat 7
  • Ivy spezifischer Editor wird für SVN/Local History Einträge geöffnet
  • JPA 2.0 (Hibernate 4.1)
  • 64 bit IDs in der Datenbank
Das Update auf Tomcat 7 hat positive Auswirkungen auf PrimePush. Nun können, falls es der Browser unterstützt, native Websockets verwendet werden. Bei den bisherigen Rothorn Sprint Inkrements wurde Tomcat 6 verwendet und deshalb nur ein Fallback auf Comet/Long Polling von PrimePush gemacht.

Mein persönliches Highlight ist das öffnen von Ivy spezifischen Editoren für Einträge die man aus der SVN bzw. Local History öffnet. Dies ist vor allem für das Mergen von Prozessen praktisch, da man nun visuell sehen kann wo die Unterschiede sind.

Die 64 bit IDs haben Auswirkungen auf die Public API. Da IDs nun vom Typ Long und nicht mehr Integer sind, wurden Methoden  wie z.B. ITask.getIdentifier() deprecated. Neu gibt es dafür z.B. ITask.getId(), die einen Long zurück gibt. Während die deprecated Methoden noch funktionieren, sollten man den Code updaten um Probleme bei einem Integer-Overflow zu vermeiden. Mehr dazu findet man in den Migration-Notes.

Eine Liste aller erledigten Punkte findet man auf dem ivyTeam Blog.
Ü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.

Quickfix für Html User Dialoge

Eines meiner neuen Lieblings-Features in Xpert.ivy Rothorn ist der Quickfix für die Html User Dialoge. Wenn ein Attribut, Event oder eine Methode fehlt, kann man per CTRL+1 ein Kontextmenü öffnen um das fehlende Attribut, Event oder Methode zu erstellen.

Ich habe ein Video erstellt das dieses Feature demonstriert.


Ü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.

IvyScript und null

IvyScript ist die Scriptsprache die in Ivy auf Prozesselementen verwendet wird. Während IvyScript Java sehr ähnelt, gibt es subtile Unterschiede. Einer dieser Unterschiede ist das null Handling.

Schauen wir uns das erste Beispiel an.

Code Snippet 1: Was wird es ausgeben?

Wäre dies hier Java, wäre in.string == null true. Doch in IvyScript wird diese Bedingung false sein. Der Grund dafür ist das sogenannte Auto-Initialisieren von Variablen die null sind. Wenn auf eine Variable die null ist zugegriffen wird, dann wird diese mit einem Standard Wert initialisiert. Ein String der null ist, ist danach "", eine Number ist 0 und ein Boolean ist false.

Bei Ivy Datenklassen wird eine neue Instanz erstellt. Java-Objekte müssen es einen Default Konstruktor haben, sonst funktioniert die Auto-Initialisierung nicht.

Doch was ist wenn man das nicht will? Dazu kann man einfach # vor das Attribut schreiben.

Code Snippet 2: Variable nicht Auto-Initialisieren

Nun wir die Bedingung true sein.

Was ist, wenn man ein Objekt erhält, dass man nicht selber unter Kontrolle hat? Es könnte also sein, dass es schon Auto-Initialisiert ist. Das Objekt ist danach zwar nicht mehr null, aber trotzdem ist es nicht richtig initialisiert. Ein Beispiel ist, wenn ein Objekt per in.meinObjekt an einen Callable als Parameter mitgegeben wird. Das Objekt ist danach Auto-Initialisiert und in.#meinObjekt wird nicht mehr null sein.

Um dieses Problem zu lösen bietet IvyScript is initialized an.

Code Snippet 3: is initialized

Auf der ersten Zeile wird in.string Auto-Initialisiert. Würde man nun mit in.#string != null die Abfrage machen, so würde dies true zurück geben. Um zu testen, ob ein Objekt nicht Auto-Initialisiert wurde, kann man is initialized verwenden. In diesem Fall wird hier not initialized geloggt.
Ü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 Html User Dialoge mit Selenium testen

Wer kennt das nicht? Schnell etwas fixen, Engine starten und kurz darüber schauen um sicher zu gehen, dass das gefixte auch so funktioniert wie man es angedacht hat und nichts anderes kaputt ging. Der Schock kommt jedoch meistens kurz nachdem man das Ganze auf dem Kundensystem deployt hat und sich der Kunde über neue Fehler beschwert, die seit dem Update auftauchen.

Was ist passiert? Die Unit- und Integrationstests waren alle grün. Der Fix funktioniert einwandfrei. Doch ein Button auf der Maske auf der man etwas gefixt hat macht nichts mehr! Kurz Debuggen und tatsächlich: Ein Event wurde umbenennt, auf das der actionListener des Button gemappt war.

GUI Testing Tools können Ihnen helfen, solche Fehler schon während dem Entwickeln zu finden und zu beheben.

In diesem Tutorial zeige ich, wie man mit Selenium, dem PageObject und Business Rule-User Interface Workflow-Technical Activity Pattern wartbare Html User Dialoge Tests schreibt.

Selenium ist eine GUI Testing Bibliothek, mit der ein JUnit-Test einen Browser Steuern kann um z.B. eine Seite zu öffnen, Buttons zu drücken und Text einzugeben. Darüber hinaus bietet Selenium Funktionen an, um Elemente und deren Inhalt aus einer Seite auszulesen. Selenium bedient sich sogenannter WebDrivers um Browser wie z.B. Firefox oder Chrome fernzusteuern.

Beispiel Projekte

Ich habe ein Ivy und ein Java Projekt als Beispiel per SVN bereit gestellt.
Das Java Projekt hat die Selenium Bibliothek eingebunden. Die Jars sind alle von selenium-java.2.27.0.zip.

Damit das Beispiel läuft, müssen Chrome und der Selenium ChromeDriver (download) installiert sein. ChromeDriver erlaubt es Selenium Chrome fernzusteuern.

Wenn Sie einen anderen Browser wie z.B. Firefox oder Internet  Explorer zum testen verwenden wollen, müssen Sie einen anderen WebDriver installieren. Beachten Sie dazu die Anleitung des entsprechenden WebDriver. Des Weiteren muss bei den Tests eine andere WebDriver Klasse verwendet werden.

Um ChromeDriver Selenium zugänglich zu machen, muss das Verzeichnis in dem der ChromeDriver liegt zu der Umgebungsvariable PATH hinzugefügt werden. Zum verifizieren ob er richtig installiert ist, geben Sie über die Command Line chromedriver ein. Wenn Started ChromeDriver  zu sehen ist, ist ChromeDriver richtig installiert.

Starten Sie nun die Xpert.ivy Engine und den JUnit-Test MyApplicationTest.java im MyApplicationsTests Projekt. Chrome öffnet sich und die definierten Tests werden abgespielt.

Business Rule-User Interface Workflow-Technical Activity Pattern und Page Objects

Ein grosses Problem bei GUI-Tests ist die Wartbarkeit. Jedes mal wenn sich eine Maske ändert, so müssen sich je nach Test-Architektur auch alle Tests die etwas auf dieser Maske machen, angepasst werden.

Gojko Adzic hat in diesem Blog Post einen interessanten Ansatz um GUI-Tests wartbar zu machen. Er bricht dazu einen GUI-Test in 3 Teile auf.
  • Business Rule - Was soll getestet werden? Beispiel: Einloggen mit ungültigem Benutzernamen/Passwort zeigt Fehler an.
  • User Interface Workflow - Was muss der Benutzer machen damit die Business Rule eintrifft? Beispiel: Applikation öffnen, falsche Benutzername/Passwort Kombination eingeben, Fehler wird angezeigt
  • Technical Activity - Wie wird dies Technisch gelöst? Beispiel: Seite unter http://xyz öffnen, falsche Benutzername/Passwort Kombination ins Feld Benutzername/Passwort eingeben, Login Button klicken usw.
Code Snippet 1: Business Rule und User Interface Workflow

In Code Snippet 1 sieht man die ersten beide Teile. Der Methodenname ist die Business Rule: Mit ungültigen Benutzername/Passwort einloggen zeigt einen Fehler an.

Die Implementation des Tests ist der User Interface Workflow. Hier sieht man grob, wie der Test ablaufen muss. Die Methoden die hier aufgerufen werden, repräsentieren den dritten Teil, die Technical Activity.

Code Snippet 2: Technical Activity

In der Technical Activity wird nun die technische Implementation des Tests gemacht. Hier kommen sogenannte Page Objects zum Einsatz, die das was (Login Seite öffnen) vom wie (Selenium Code: gehe zu Url http://xyz) abstrahieren.

D.h. wenn wir etwas am GUI verändern, so müssen wir mit grosser Wahrscheinlichkeit nichts am Test selber ändern, sondern nur in den Page Objects.

Eine interessante Eigenschaft von Page Objects ist, dass Sie andere Page Objects zurück geben können.

Code Snippet 3: Page Object

Hier erhalten wir ein ApplicationPage Objekt zurück, als die nächste Seite, nachdem wir uns mit gültigen Credentials angemeldet haben. Dieses Page Objekt können wir im weiteren Testverlauf verwenden.

Code Snippet 4: Page Object und assert

Zusammen mit der ApplicationPage machen wir in einer Technical Activity nun eine Assertion. Wir holen uns von der ApplicationPage das Greeting und prüfen, ob diese Welcome Hans Peter beinhaltet.

Wie in diesem Beispiel zu sehen ist, abstrahieren die Page Objects den Zugriff auf das Html der Seite. Dies ist wichtig für die Wartbarkeit. Ändert sich etwas an dem GUI, so muss meistens nur in dem Page Object etwas angepasst werden. Des Weiteren können diese Page Objects gut  in anderen Tests wiederverwendet werden, was wiederum die Wartbarkeit steigert.

Als Kontrast dazu: Stellen Sie sich vor, man hätte den ganzen Selenium Code direkt in die Tests geschrieben. Wenn nur die ID eines Feldes ändert, so müsste man das in jedem Test anpassen. Mit dem Page Object braucht man dies nur an 1 Stelle zu tun.

Selenium, PrimeFaces und IDs

Um Elemente wie z.B. Input-Textfelder zu finden, bietet der WebDriver die findElement Methode an, die ein By Objekt als Parameter entgegen nimmt. Mit By kann man z.B. per ID oder CSS-Selektor nach einem Element auf der Seite suchen.

In PrimeFaces kann man zwar IDs definieren, jedoch wird vor diese ID immer noch ein Zusatz vorangestellt. D.h. wenn man By.id() nach diesem Element sucht, bekommt man nichts zurück. In diesem Fall kann By.cssSelector() benutzt werden.

Code Snippet 5: By.cssSelector

Das $ vor dem = bedeutet, dass die id mit username enden muss. Vorsicht: Befinden sich mehrere input Elemente die mit username enden auf der Seite, muss man einen anderen Weg finden.

AJAX und WebDriverWait

Html User Dialoge bzw. PrimeFaces setzen auf JavaScript und AJAX. Da Selenium nicht wissen kann, wann ein AJAX Request fertig ist, gibt es die Utiltity Klasse WebDriverWait.

Code Snippet 6: WebDriverWait

Diese Klasse kann dazu eingesetzt werden, um auf einen AJAX Request für eine gewisse Zeit zu warten, bis das Element, dass nach dem AJAX Request erscheinen sollte, auf der Seite ist. Falls man dies nicht tut, wird der findElement Aufruf immer fehlschlagen. Wenn der AJAX Request länger als das Timeout dauert oder das Element nicht erscheint, wird eine Exception geworfen.

Fazit

In diesem Tutorial bin ich bewusst nicht tiefer auf die Selenium API eingegangen, da es mir wichtiger ist, dass GUI-Tests sauber und wartbar geschrieben werden. Mit dem Business Rule-User Interface Workflow-Technical Activity Pattern sowie dem Page Object haben Sie 2 Werkzeuge, mit denen sich wartbare GUI-Tests schreiben lassen.

Wichtig ist auch, dass man es mit den GUI-Tests nicht übertreibt. Jede Kombination einer Loginmaske (nur Benutzername leer, nur Passwort leer usw.) zu testen wäre unsinnig. Versetzen Sie sich dazu am besten in die Lage der Benutzer Ihrer Applikation. Diese werden entweder das richtige oder falsche Login eingeben.

Des Weiteren sollten Sie Unit- und Integrationstests für den Rest Ihrer Applikation durchführen. GUI-Tests sind nur das Tüpfelchen auf dem i.

Zu guter Letzt: warum_sind_die_tests_so_geschrieben? Wenn Sie genau aufgepasst haben sehen Sie, dass nur die Methoden die zum Business Rule-User Interface Workflow-Technical Activity Pattern gehören so geschrieben wurden.

Bei Tests sehe ich nun sofort, dass der Methodenname die Business Rule und die Implementation davon der User Interface Workflow ist. Die privaten Methoden sind die Technical Activities mit den Page Objects. Es erinnert mich auch daran, dass es sich hier explizit um GUI-Tests handelt und diese Patterns angewendet werden.

Natürlich können Sie dieNormaleJavaForm verwenden.

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.

Xpert.ivy mini Kontakt Mobile App

Ich hatte heute etwas Zeit um eine kleine Kontakt Mobile App mit Xpert.ivy und PrimeFaces Mobile zu schreiben.

Abb. 1: Kontakt Mobile App
Sie zeigt, wie man eine Liste von Kontakten anzeigen und filtern kann und wie man eine Detail Seite des ausgewählten Kontaktes anzeigt.

Der Source Code kann unter http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/ContactsMobileApp ausgecheckt werden.

Viel Spass!
Ü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 10 Review Meeting

Heute wurden die Ergebnisse von Rothorn Sprint 10 präsentiert. Ein Sprint voller Highlights!
  • Embedding von Html User Dialogen
  • Managed Beans
  • Quickfix für fehlende Events, Methoden und Datenklassen-Attribute
Das Embedding erlaubt es Html User Dialoge in andere Html User Dialoge einzubetten und somit wiederverwendbare Komponenten zu schreiben. Ein Kritikpunkt der dazu aufkam war, dass man beim erstellen eines Html User Dialoges nun ein View Layout auswählen muss.

Abb. 1: View Layout
Dies bestimmt, ob ein Html User Dialog in einen anderen Html User Dialog eingebettet werden kann (Component) oder nicht (Page). Dies ist mit ULC nicht nötig.

Meiner Meinung nach ist dies nicht weiters tragisch, da die meisten Html User Dialoge Component sein sollten und über eine Page zusammen gesetzt werden bzw. in anderen Components eingebettet werden.

Ein Beispiel dazu wäre, ein Layout als Page zu verwenden und in dieses Layout alle Components einzubetten.

Ein weiteres Feature von ULC das vermisst wurde sind die Events die eine Komponente senden und empfangen kann. Dies gibt es zur Zeit für Html User Dialoge nicht. Der JSF Standard bietet jedoch mit actionSource eine Möglichkeit, Events an die äusseren Komponenten zu senden.

Des weiteren werden nun Managed Beans unterstützt. Diese können per @ManagedBean Annotation definiert und in der View verwendet werden.

Klein aber fein ist das neue Quickfix Feature. Damit kann man per CTRL+1 Events, Methoden und Datenklassen-Attribute, die in der View referenziert werden aber nicht existieren, automatisch erstellen lassen und braucht nicht die Logic, das Interface bzw. die Datenklasse zu öffnen.

Das Sprint Inkrement steht zum Download bereit.
Ü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: Realtime ProgressBar

Problem

Der Benutzer startet einen Request der mehrere Sekunden dauert. Während dieser Zeit soll dem Benutzer eine Progress Bar angezeigt werden, die ihm den Fortschritt in Echtzeit anzeigt.

Lösung

p:progressBar kann mit PrimePush in Echtzeit aktualisiert werden.

Dieses Tutorial zeigt Ihnen, wie Sie p:progressBar zusammen mit PrimePush kombinieren können, um dem Benutzer den Fortschritt in Echtzeit anzuzeigen. Zusätzlich wird p:blockUI verwendet, um alle Eingaben des Benutzers zu blockieren.
Abb. 1: Realtime Progress Bar

SVN

Das fertige Projekt kann per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/PrimePush in den Xpert.ivy Designer importiert werden.

Code

Hinweis: Sie benötigen den Preview Release 'Rothorn' von Xpert.ivy und müssen PrimePush installiert haben.

Starten Sie die Engine und probieren Sie das Realtime ProgressBar Beispiel aus. Drück man auf Start, so wird eine p:progressBar angezeigt, die in Echtzeit von der Logic aktualisiert wird.

Schauen wir uns zuerst den Code der View an.

Code Snippet 1: View Code

Auf den Zeilen 15 - 18 wird eine p:blockUI definiert, die eine p:progressBar und ein Label anzeigt sobald der p:commandButton gedrückt wird. Wichtig ist, dass widgetVar definiert wird, damit wir in der handleProgress JavaScript Funktion auf die p:progressBar Komponente zugreifen können und den Prozentsatz setzen können (Zeile 5).

handleProgress nimmt einen JSON-String entgegen, der per eval in ein JavaScript Objekt umgewandelt wird (Zeile 4). Dieses Objekt enthält die Attribute progress und msg. progress ist der Fortschritt in Prozent und msg das Label das angezeigt werden soll.

Doch von wo wird handleProgress aufgerufen? Die Antwort ist auf Zeile 20 zu finden. Diese definiert per p:socket eine Verbindung zum Server und erlaubt uns, Nachrichten vom Server direkt an den Client zu senden. Die Verbindung zum Server ist im Idealfall ein Websocket. Falls Websockets nicht zur Verfügung stehen, wird eine Comet Verbindung aufgebaut. Dies braucht Sie aber nicht zu interessieren, da PrimePush automatisch die best mögliche Verbindung verwendet.

onMessage von p:socket ist die JavaScript Funktion die aufgerufen werden soll, wenn eine neue Nachricht vom Server auf den Client gepusht wurde.

Das channel Attribut von p:socket ist der Kanal worauf auf neue Nachrichten gehört wird. In diesem Fall ist dies der Wert, der in dem Datenklassen-Attribut channel des Html User Dialog steht. Er wird dynamisch beim Start generiert, da jede Instanz der View einen eigenen Kanal benötigt, damit die Updates nur bei dem Benutzer zu sehen sind, der den p:commandButton gedrückt hat.

Öffnen Sie nun die Logic von RealtimeProgressBar. Beim starten des Html User Dialog wird zuerst der Kanal per in.channel = "/realtime/" + java.util.UUID.randomUUID().toString(); generiert. Dies stellt sicher, dass jede Instanz der View einen eigenen Kanal hat.

Die Script-Steps die bei startLongRunningProcess durchlaufen werden senden alle eine Nachricht an die View. Dies wird per PushContextFactory.getDefault().getPushContext().push(in.channel, "{ 'progress' : 10, 'msg' : 'Daten aufbereiten'}"); gemacht. Der zweite Parameter ist der JSON-String der von handleProgress per eval in ein JavaScript Objekt umgewandelt wird.

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.

Xpert.ivy Code Rezept: Lade-Indikatoren für Html User Dialog

Problem

Sie wollen dem Benutzer ein Visuelles Feedback geben während etwas am laden oder speichern ist.

Lösung

PrimeFaces bietet 2 Komponenten, p:ajaxStatus und p:blockUI, mit denen man dem Benutzer Lade-Indikatoren anzeigen kann.

Dieses Tutorial zeigt Ihnen, wie Sie die beiden Komponenten einsetzen können, um dem Benutzer Lade-Indikatoren wie auf Abbildung 1 anzuzeigen.
Abb. 1: p:ajaxStatus und p:blockUI in Aktion

SVN

Das fertige Projekt  kann per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importiert werden.

Code

Hinweis: Sie benötigen den Preview Release 'Rothorn' von Xpert.ivy.

Starten Sie die Engine und probieren Sie die p:ajaxStatus and p:blockUI Demo aus. Wird der obere  Button gedrückt, sieht man, dass oberhalb des Button eine Lade Animation (p:ajaxStatus) angezeigt wird und über das ganze Panel ein grauer Layer mit einem Lade-Indikator (p:blockUI) gelegt wird.

Schauen wir uns den Code an der dazu nötig ist.


Code Snippet 1: Code für die Lade-Indikatoren

Zeilen 4 bis 12 zeigen, wie man p:ajaxStatus konfigurieren kann. p:ajaxStatus wird jedesmal getriggert, wenn ein Ajax Request gefeuert wird. Also z.B. wenn ein p:commandButton gedrückt wird. Sobald der Request abgefeuert wurde, wird der Inhalt der start facet (Zeile 5) eingeblendet. Wenn der Request fertig ist, wird der Inhalt von der complete facet (Zeile 9) angezeigt.

Wenn p:ajaxStatus nicht getriggert werden soll, muss das global Attribut des p:commandButton auf false gestellt werden. Dies ist auf dem p:commandButton auf Zeile 15 zu sehen.

p:blockUI (Zeilen 20 bis 23) funktioniert etwas anders: Man konfiguriert, welche Komponente blockiert werden soll (block="panel") und welche Komponente p:blockUI aktiviert (trigger="btn").

Es kann ein beliebiger Inhalt innerhalb von p:ajaxStatus und p:blockUI angezeigt werden.

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.

PrimeFaces Cookbook angekündigt

Packt Publishing hat das PrimeFaces Cookbook angekündigt. Es wir voraussichtlich im Februar 2013 erscheinen.

Von der Webseite:

What you will learn from this book

  • Learn basic concepts to be able to work with PrimeFaces.
  • Delve deep into 100+ rich UI components with all the required details
  • Get solutions to typical and advanced use cases
  • Use the best practices, avoid pitfalls, and get performance tips when working with the component suite
  • Gain know-how of writing custom components on basis of the PrimeFaces' core functionality
  • Meet additional components from the PrimeFaces Extensions

In Detail

PrimeFaces is the de facto standard in the Java web development. PrimeFaces is a lightweight library with one jar, zero-configuration, and no required dependencies. You just need to download PrimeFaces, add the primefaces-{version}.jar to your classpath and import the namespace to get started. This cookbook provides a head start by covering all the knowledge needed for working with PrimeFaces components in the real world.

"PrimeFaces Cookbook" covers over 100 effective recipes for PrimeFaces 3.x which is a leading component suite to boost JSF applications. The book’s range is wide? from AJAX basics, theming, and input components to advanced usage of datatable, menus, drag & drop, and charts. It also includes creating custom components and PrimeFaces Extensions.

You will start with the basic concepts such as installing PrimeFaces, configuring it, and writing a first simple page. You will learn PrimeFaces' theming concept and common inputs and selects components. After that more advanced components and use cases will be discussed. The topics covered are grouping content with panels, data iteration components, endless menu variations, working with files and images, using drag & drop, creating charts, and maps. The last chapters describe solutions for frequent, advanced scenarios and give answers on how to write custom components based on PrimeFaces and also show the community-driven open source project PrimeFaces Extension in action.

Approach

This is a cookbook with plenty of practical recipes enriched with code and detailed explanations.

Who this book is for

This book is for you if you would like to learn modern Java web development based on PrimeFaces and are looking for a quick introduction into this matter. Prerequisites required for this book are basic JSF and jQuery skills.

Sie können es hier vorbestellen.
Ü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.

PrimeFaces Themes für Xpert.ivy installieren und erstellen

Mit PrimeFaces Themes können Sie Ihrer Applikation mit nur wenig Aufwand ein komplett neues Aussehen geben. Ich werde Ihnen zeigen, wie Sie Themes von der PrimeFaces Theme Gallery in Xpert.ivy installieren können und wie Sie Ihr eigenes mit jQuery ThemeRoller erstellen können.

Unter http://www.primefaces.org/themes.html finden Sie über 30 Themes die Sie installieren können. Die Downloads für die Themes befinden sich unter http://repository.primefaces.org/org/primefaces/themes.

Ich werde das Redmond Theme in diesem Beispiel hier installieren. Sie könne es unter http://repository.primefaces.org/org/primefaces/themes/redmond/1.0.8/redmond-1.0.8.jar herunterladen.

Kopieren Sie redmond-1.0.8.jar in das webapps/ivy/WEB-INF/lib Verzeichnis des Designers.

Als nächstes müssen Sie webapps/ivy/WEB-INF/web.xml in einem Texteditor öffnen. Suchen Sie nach dem context-param mit dem param-name primefaces.THEME. Ersetzen Sie den param-value mit redmond.

Nun können Sie den Xpert.ivy Designer neu starten und Ihre Html User Dialoge erscheinen nun in diesem Theme.

Falls keines der verfügbaren Themes Ihrem Geschmack entspricht, können Sie mit dem jQuery ThemeRoller Ihr eigenes Theme erstellen und in Xpert.ivy installieren.

Öffnen Sie den ThemeRoller unter http://jqueryui.com/themeroller und gestalten Sie Ihr eigenes Theme. Wenn Sie zufrieden sind, klicken Sie auf Download theme. Scrollen Sie ganz nach unten und laden Sie das Theme herunter.

Nachdem Sie das Theme heruntergeladen haben, entpacken Sie das Zip und wechseln Sie in das css/theme-name Verzeichnis der entpackten Zip Datei.

Bevor wir das Theme verwenden könnnen, müssen wir noch ein paar Anpassungen vornehmen.

Löschen Sie als erstes jquery-ui-1.9.2.custom.min.css. Als nächstest müssen Sie jquery-ui-1.9.2.custom.css nach theme.css umbenennen.

Öffnen Sie theme.css in einem Texteditor. Sie müssen die Urls zu den Bildern anpassen. Hier ein Beispiel:

Vorher: url(images/einbild.png)
Nachher: url("#{resource['primefaces-xpertivy-hacker:images/einbild.png']}")

Falls Sie einen anderen Namen als xpertivy-hacker für das Theme gewählt haben, müssen Sie primefaces-xpertivy-hacker mit primefaces-ihr-theme-name ersetzen. Dies gilt für den Rest dieses Tutorials überall wo Sie xpertivy-hacker sehen.

Wenn Sie theme.css mit Notepad++ geöffnet haben, können Sie die Urls folgendermassen automatisch ersetzen lassen:
  • Drücken Sie CTRL+h um den Search/Replace Dialog zu öffnen
  • Wählen Sie Regular expression bei den Search Mode Optionen aus
  • Suchen Sie nach url\((.+)\)
  • Ersetzen Sie mit url("#{resource['primefaces-xpertivy-hacker:\1']}")
  • Klicken Sie Replace All
Erstellen Sie nun folgende Ordnerstruktur:
  • META-INF
    • resources
      • primfaces-xpertivy-hacker

Verschieben Sie theme.css und das images Verzeichnis in das primefaces-xpertivy-hacker Verzeichnis. Zum Schluss müssen Sie aus dem META-INF Verzeichnis eine Zip Datei machen und nach xpertivy-hacker.jar umbennen. Beachten Sie, dass die gezipte Datei nun mit .jar und nicht mehr mit .zip endet.

Jetzt ist Ihr Theme fertig. Kopieren Sie das Jar wie vorher in das lib Verzeichnis und ändern Sie den Wert für primefaces.THEME im web.xml auf xpertivy-hacker.

Starten Sie den Xpert.ivy Designer neu und probieren Sie Ihr eigenes Theme aus.

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.

PrimePush installieren

Mit Xpert.ivy 5.0 können Sie mit PrimePush in Echtzeit Nachrichten an den Browser senden.

Out of the box unterstützt Xpert.ivy PrimePush noch nicht, aber Sie können es ganz einfach dazu installieren.

PrimePush benutzt das Atmosphere Framework um Push zu implementieren. Ich habe Ihnen die benötigten Jars hier zur Verfügung gestellt. Entpacken Sie die Zip Datei und kopieren Sie die 4 Jars in das webapps/ivy/WEB-INF/lib Verzeichnis des Designers.

Als nächstes müssen Sie webapps/ivy/WEB-INF/web.xml mit einem Texteditor öffnen. Scrollen Sie ganz nach unten und fügen Sie das folgende Code Snippet unterhalb von <!-- DO NOT REMOVE OR CHANGE THIS SERVLET --> ein.

Code Snippet 1: PrimePush Servlet konfigurieren

Starten Sie den Designer neu. Falls der Designer nicht mehr startet, ist das Servlet-Mapping nicht korrekt. Vergleichen Sie Ihr web.xml mit diesem hier.

Um zu testen ob PrimePush bei Ihnen funktioniert, können Sie das Beispiel Projekt von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/PrimePush auschecken.

Starten Sie den PrimePush Hello World Prozess in mehreren Browser und senden Sie dann eine Nachricht. Wenn Sie alles richtig installiert haben, sehen Sie die Nachrichten in jedem Browser Fenster wie in Abbildung 1.
Abb.1: PrimePush in IE, Firefox und Chrome

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.

PrimeFaces Mobile installieren

Seit Rothorn S13 wird PrimeFaces Mobile mit Xpert.ivy ausgeliefert. Diese Schritte sind also nicht mehr nötig.

Die nächste Version von Xpert.ivy 'Rothorn' (die Sie hier herunterladen können) bietet eine neue UI Technologie, die auf JSF bzw. PrimeFaces basiert, an. PrimeFaces bietet neben der Standard JSF Implementation auch PrimeFaces Mobile an. PrimeFaces Mobile erlaubt es Ihnen, Benutzeroberflächen für Smartphones und Tablets zu erstellen. PrimeFaces Mobile basiert auf jQuery Mobile.

Out of the box bietet Xpert.ivy nur die Standard JSF Implementierung von PrimeFaces an. PrimeFaces Mobile kann aber ganz einfach dazu installiert werden.

Gehen Sie auf http://www.primefaces.org/downloads.html und laden Sie das primefaces-mobile-x.x.x.jar herunter. Kopieren Sie dieses jar in das webapps/ivy/WEB-INF/lib Verzeichnis des Xpert.ivy Designers.

Nach einem Neustart des Designers steht Ihnen PrimeFaces Mobile zur Verfügung.

Dasselbe können Sie für den Xpert.ivy Server machen, damit es auch dort zur Verfügung steht.

Um zu testen ob es funktioniert, können Sie ein Beispiel Projekt von mir unter http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/PrimeFacesMobile auschecken und das PrimeFaces Mobile Hello World Beispiel ausprobieren. Der Code wurde 1:1 von diesem Beispiel von PrimeFaces übernommen. Der Vollständigkeit halber ist hier noch der Code vom Beispiel.

Code Snippet 1: PrimeFaces Mobile Hello World

Das ganze sieht dann so aus:
Abb. 1: PrimeFaces Mobile Hello World
Hinweis: Die Serverseite (actionListener, value) habe ich nicht implementiert, da wir nur PrimeFaces Mobile installieren wollen. Sie können dies aber gerne tun.

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.

Xpert.ivy Prozesse Debuggen

Wenn ein Prozess nicht so läuft wie Sie glauben das er laufen sollte, müssen Sie das Problem untersuchen und den Prozess Debuggen.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie Prozesse mit dem Xpert.ivy Designer Debuggen können.

Die Simulation

Das einfachste und zugleich eines der effektivsten Werkzeuge ist die Simulation.
Abb. 1: Simulationseinstellungen
Auf Abbildung 1 sehen Sie wie Sie die Simulation ein- bzw. ausschalten können und wie Sie die Geschwindigkeit anpassen können.

In den Preferences (Window -> Preferences) finden Sie unter Xpert.ivy -> Engine weitere Einstellungen die die Simulation beeinflussen.
Abb. 2: Weitere Simulationseinstellungen
Punkt 1 lässt Sie kontrollieren, ob und wann die Simulation den Prozessfluss simuliert. Mit Punkt 2 können Sie Start Event Beans und Intermediate Event Beans ausführen lassen bzw. unterdrücken. Dies kann praktisch sein, wenn Sie diese Events nicht benötigen.

Die History View

Das nächste Werkzeug ist die History View. Die History View speichert einen Snapshot der Prozessdaten auf jedem Prozesselement zum Zeitpunkt als der Prozess das Element durchlief.

Wenn Sie die Engine starten und einen Prozess ausführen, klicken Sie auf das Prozesselement das Sie interessiert. In der History View sehen Sie dann alle Prozessdaten die zum Zeitpunkt, als das Prozesselement durchlaufen wurde, aktuell waren.
Abb. 3: History View

Breakpoints

Mit Breakpoints können Sie stellen in Ihrem Prozess markieren, an denen die Engine anhalten soll. Wenn die Engine einen Breakpoint erreicht hat, können Sie die Variablen untersuchen.

Um einen Breakpoint auf einem Prozesselement zu setzen, klicken Sie mit der rechten Maustaste auf das Prozesselement und wählen Breakpoint -> Add Breakpoint. Auf dem Prozesselement ist nun eine kleine blaue Kugel zu sehen.

Starten Sie die Engine und einen Prozess. Sobald der Prozess das Prozesselement erreicht, stopp die Prozessausführung.
Abb. 4: Prozessausführung stoppt bei Breakpoint
Auf Abbildung 4 sehen Sie wie der Prozess auf ein Prozesselement mit einem Breakpoint gelaufen ist und angehalten hat. Dies erkennt man an dem blauen Pfeil links neben dem Prozesselement. In der Variables View sehen Sie welche Werte die Variablen zu diesem Zeitpunkt haben.

Nun haben Sie 2 Möglichkeiten. Sie können mit F8 zum nächsten Breakpoint springen, oder per F6 durch jedes nachfolgende Prozesselement steppen.

Conditional Breakpoints

Neben den normalen Breakpoints gibt es auch die so genannten Conditional Breakpoints. Diese stoppen die Ausführung des Prozesses nur, wenn eine gewisse Bedingung erfüllt ist. Beispielsweise wenn ein Zähler einen gewissen Wert erreicht hat.

Um einen Conditional Breakpoint zu erstellen, klicken Sie mit der rechten Maustaste auf das Prozesselement und wählen Breakpoint -> Conditional Breakpoint. Ein Fenster wie in Abbildung 5 geht auf, dass Sie auffordert eine Bedingung einzugeben.
Abb. 5: Bedingung des Conditional Breakpoint eingeben

Breakpoints auf Datenklassen

Die letzte Art von Breakpoint ist der Breakpoint auf einem Datenklassen-Attribut. Öffnen Sie dazu eine Datenklasse und wählen Sie das Attribut aus, auf welchem Sie den Breakpoint setzen wollen.
Abb. 6: Breakpoint auf Datenklassen-Attribut setzen
Beachten Sie den kleinen Bleistift der nun auf dem roten A-Symbol des Attributes zu sehen ist. Dieses weist darauf hin, dass auf diesem Attribut ein Breakpoint ist.

Wenn sich dieses Attribut ändert, wird die Prozessausführung gestoppt. In der Variables View sehen Sie unter dem Eintrag debug den alten und neuen Wert des Attributes.

Breakpoints deaktivieren

Sie können in der Breakpoints View die Breakpoints ein- und ausschalten oder ganz löschen.
Abb. 7: Breakpoints View

Debug Log Statements

Die letzte Technik die ich Ihnen zeigen werde ist das ausgeben von Log Statements. Dazu müssen Sie nur folgenden Code in einem Script-Step ausführen.
Code Snippet 1: Debug Log Statement

Dieses Log Statement wird beim durchlaufen des Script-Step im Runtime Log angezeigt. Sie müssen dazu den Log Level auf Debug einstellen und Filter user logs aktivieren.
Abb. 8: Das Runtime Log
Per Doppelklick auf einen Log Eintrag, öffnet sich ein Fenster mit Details.
Abb. 9: Log Details
Von hier aus können Sie, wie in Abbildung 9 gezeigt wird, direkt auf das Prozesselement springen, welches das Log ausgegeben hat. Dies funktioniert auch für Errors.
Ü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: Formulare mit Html User Dialog erstellen

Problem

Sie müssen ein Web Formular mit Xpert.ivy erstellen, dass Benutzereingaben entgegennimmt, validiert und Fehler anzeigt.

Lösung

Mit dem Html User Dialog können Sie schnell und einfach solche Formulare erstellen.

Dieses Tutorial zeigt Ihnen, wie Sie Formulare mit Validierung und Fehleranzeige mit dem Html User Dialog und PrimeFaces erstellen. Abbildung 1 zeigt Ihnen das fertige Formular das wir zusammen erstellen werden.
Abb. 1: Das Formular

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

Hinweis: Sie benötigen den Preview Release 'Rothorn' von Xpert.ivy.

Starten Sie die Engine und probieren Sie das Simple Form Formular aus. Wie Sie sehen prüft es, ob alle Eingabefelder korrekt ausgefüllt wurden. Wenn alles OK ist, wird das Formular ausgeblendet und eine Nachricht dem Benutzer angezeigt.

Schauen wir uns jetzt den Code an der dazu nötig ist.

Code Snippet 1: SimpleForm View

Strukturell unterscheiden sich Html User Dialog Formulare und normale HTML Formularen kaum. Alle Input-Felder die innerhalb des h:form sind, werden an den Server gesendet.

Das Layout wird mit p:panelGrid automatisch für Sie gemacht. Sie brauchen nur zu sagen, wie viele Spalten (columns) es haben soll. Danach werden die Komponenten innerhalb der p:panelGrid automatisch in die richtige Spalte gerendert.

Die Input-Felder werden durch das value Attribut mit der Datenklasse des Html User Dialoges verknüpft. Dies wir mit #{data.attributInDerDatenklasse} gemacht. Xpert.ivy bietet per CTRL+Leertaste Autovervollständigung der Datenklassen-Attribute an.

Die Validation dieser Input-Felder geschieht direkt auf der Komponente selber. Wenn Sie required="true" setzen hat dies zur Folge, dass die Eingabe nun zwingend ist. Des Weiteren werden automatisch die * neben den Labels gesetzt, sofern das Attribut for des p:outputLabel auf die id des korrespondierenden Input-Feldes zeigt.

Wenn Sie nun Registrieren drücken, wird das Formular per AJAX an den Server gesendet. Der Server validiert dieses Formular und zeigt Fehler an falls dies nötig ist. Ist alles OK, werden die Daten vom Formular auf die Datenklasse gemappt und die Logik des Html User Dialog ausgeführt. Der Event der in der Logik aufgerufen werden soll, wird auf dem actionListener Attribut des p:commandButton definiert. Dies sieht dann so aus: actionListener="#{logic.eventName}". Auch hier bietet Xpert.ivy Autovervollständigung an.

Beachten Sie das Attribut update auf dem p:commandButton. Dieses veranlasst alle Komponenten innerhalb von simpleForm sich nach jedem drücken des Button sich zu updaten. Das bedeutet, wenn sich ein Attribut in der Datenklasse geändert hat, dass auf ein Input-Feld gebunden ist, wird das Input-Feld den neuen Wert anzeigen.

Ähnlich verhält es sich mit der p:messages Komponente. Diese zeigt alle Nachrichten an, die nach dem drücken des Buttons dem FacesContext hinzugefügt worden sind. Um eine oder mehrere Nachrichten dem FacesContext hinzuzufügen, können Sie folgenden Code in einem Script-Step verwenden.

Code Snippet 2: Nachricht dem FacesContext hinzufügen

Als letztes möchte ich Ihnen das rendered Attribut vorstellen. Dieses nimmt als Wert true, false oder einen Verweis auf ein Datenklassen-Attribut per #{data.booleanAttribute} an. Wenn der Wert auf true ist, wird die Komponente und deren Kinder angezeigt, andernfalls wird sie ausgeblendet.

Weiterführende Ressourcen

Core JavaServer Faces (3rd Edition) (Amazon.de Affiliate)
JavaServer Faces 2.0: Ein Arbeitsbuch für die Praxis (Amazon.de Affiliate)
JSF 2.0 Cookbook (Amazon.de Affiliate)
Ü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.