Op deze pagina tonen we hoe je een eenvoudige webapplicatie kan maken met gebruik van Java Server Faces en MyEclipse.
Aanmaken van het webproject
Selecteer File - new - web project om een nieuw Java webproject aan te maken.
In het onderstaande scherm geven we het project een naam (LoginDemo) en we duiden aan dat we werken met Java Enterprise Edition 5.0. De optie JSTL (JSP Standard Tag Library) is uitgegrijsd en kan je dus niet meer selecteren.
Hieronder zie je het resultaat. Er zijn een aantal JAR-bestanden die verwijzen naar Java EE 5.0 en JSF. Jar is tevens het Engels voor kruik en dus zie je in Eclipse het pictogram van een kruik. JAR staat voor Java ARchive. Je kan dit bestand openen met een programma zoals WinZip. In feite is het ook een gezipte versie van een bibliotheek gevuld met .class-bestanden. En een .class-bestand is een gecompileerde versie van een Java-bestand. Je mag dus gebruik maken van de Javaklassen maar de bijbehorende code heb je niet.
Indien we willen werken met Java Server Faces, dan selecteren we het webproject en we klikken met de rechtermuisknop. Selecteer MyEclipse - Add JSF capabilities.
Je kan nu de naam van het xml-bestand kiezen dat je voor deze JSF webapplicatie gaat gebruiken. Wil je ook een beroep doen op Facelets, dan moet je dit hier aangeven. We zijn tevreden met de standaard waardes en klikken op "Finish".
Je ziet nu het bestand faces-config.xml staan. In dit bestand wordt de overgang tussen de verschillende webpagina's van je webapplicatie beheerd.
Editeren van de Java Server Pages
Selecteer het bestand index.jsp. Klik met de rechtermuisknop en kies voor MyEclipse - Open with JSF Visual Designer.
Je zit nu in de editor. Bovenaan krijg je een zicht op hoe de Java Server Page er (ongeveer) in een web browser uit zal zien. Onderaan zie je de code waar HTML wordt afgewisseld met Javacode (maar daar is nju natuurlijk nog niet veel van te merken). En rechts zie je de palette met diverse folders : HTML, JSP, JSF. Klik je op een folder, dan zie je de diverse objecten die je kan verslepen naar de editor.
Hieronder zie je een voorbeeld van wat er onder JSF HTML zoal zit : een formulier (form), knop (button), boodschap (message). Je kan de cursor op één van deze elementen plaatsen om het element te verslepen naar de editor.
We beginnen met een formulier op de webpagina te zetten. Dat vind je onder JSF - HTML. Versleep het formulier. Je ziet in het bovenste deel van het scherm waar het formulier geplaatst is. De overeenkomstige code zie je in het onderste deel van het scherm.
Hier hebben we 2 knoppen toegevoegd (OK en Cancel). Via de properties kan je de waarden van een element op een webpagina beheren.
Deze eenvoudige webapplicatie bevat maar twee webpagina's. Op de eerste vult de gebruiker naam en wachtwoord in. Als hij/zij op OK klikt, moet de webapplicatie kijken of naam en wachtwoord gekend zijn. Is de combinatie correct, dan gaat de applicatie naar de tweede webpagina om te melden dat de gebruiker succesvol is aangemeld. Hieronder zie je de tweede Java Server Page. Via faces-config.xml moeten we nog duidelijk maken wanneer we van de ene naar de andere pagina overgaan.
Dubbelklik op het bestand faces-config.xml om dit bestand te openen. Je kan nu de beide JSP's hiernaar verslepen.
Als je de bestand versleept hebt, moet je nu duidelijk maken wat de voorwaarden zijn om over te gaan van de ene naar de andere pagina.
Aanmaken van de ManagedBean
Een ManagedBean is een JavaBean die je kan koppelen aan een pagina. Op de webpagina index.jsp hebben we een gebruikersnaam en een wachtwoord nodig. Die kan je noteren in de UserBean. Om een ManagedBean te maken kan je in de outline naast de visuele editor van faces-config.xml klikken op "Add ManagedBean".
Je kan best eerst een leeg bestand maken met de naam van de JavaBean die je wil toevoegen. Code moet je hier niet aan toevoegen, die genereer je "onderweg" wel.
Hieronder zie je de naam van het bestand org.gco.logindemo.UserBean die we via de "browse"-knop hebben opgehaald. We voegen vervolgens een eigenschap toe aan deze klasse via de "Add"-knop.
Daaarna kunnen we de naam en het type van de eigenschappen definiëren.
Vervolgens voegen we de twee eigenschappen of properties toe (gebruikersnaam en wachtwoord). We kunnen nu aanvinken dat we de code willen genereren en dat we getters en setters voor de eigenschappen willen.
Toevoegen van de code
Hieronder zie je een deel van de gegenereerde code van de UserBean.
In de outline zie je onder de UserBean de twee bijbehorende properties.
We voegen de methode loginUser() eraan toe. Via deze methode gaan we na of de persoon in kwestie de juiste combinatie gebruiker+wachtwoord heeft ingetikt.
De strings "success" en "failure" gaan we gebruiken in faces-config.xml om de navigatie te regelen.
De loginform waarvan sprake in de UserBean vinden we terug als naam van het formulier in de index.jsp.
Hieronder zie je een deel van de visuele JSF-editor bovenaan, links onder zie je de bijbehorende code en rechts staan de eigenschappen van het element dat je in de JSF-editor hebt geselecteerd. In dit geval zie je dat een bepaalde outputtext is gekoppeld aan de gebruikersnaam in de UserBean.
Hieronder zie je eenzelfde opstelling voor het wachtwoord; de outputtext in de JSP wordt gekoppeld aan de eigenschap password van de UserBean.
Een outputlabel kan je koppelen aan een veld van de UserBean.
Voor de commandotoetsen kan je best werken met de JSF command buttons.
De commandotoets kan je dan koppelen aan een actie van de UserBean. Zoals je hieronder ziet, is de OK-toets gekoppeld aan de methode loginUser() van de UserBean.
In de JSP zie je de volgende code :
