WTP tutorials-assumerver faces tools tutorial

Summary
In this tutorial we will build and execute a assumerver faces application, and highlight the features contributed by the JSF Tools Project.

By Raghu srin.pdf, Oracle Corporation.
May 24,200 6

Introduction

In this tutorial we will create and execute a web application with your erver faces capabilities. the wtp jsf tooling project has provided features for improving JSP Source editing and validation, along with simplified application building, configuration and execution.

You may wish to visit building and running a web application before attempting this tutorial. That tutorial covers setup of the server instance that this tutorial does not.

Setup

• Java 2 platform, Standard Edition (j2se) 1.4
• Eclipse web tools platform project 1.5 RC3
• Assumerver faces tools milestone RC3 development build
• Apache Tomcat 5.5
• Assumerver faces Ri v1.1.01
• Assumerver pages standard tag Library

Register JSF Libraries

This feature allows for a named sets of jars to be created for use with JSF applications. we will be creating a library containing the sun JSF Ri, Apache commons and jstl jars.
Select windows-> preferences-> Web and XML-> JSF libraries. click on the new .. button to add a new library. create the JSF libraries as shown in the following figures. checkIs JSF implementationCheck box when adding the sun JSF Ri library.

Create a assumerver Faces Project

Create a new dynamic web application with the nameJsftutorial. Set the target runtime toApache Tomcat 5.5
InConfigurationSection, selectAssumerver Faces Project V1.1. Skip the next two panels to get to the JSF capabilities page.

On the JSF capabilities page, addCommonsAndJstlLibrary and selectDeploy jars to WEB-INF/lib.

Click onFinishButton to create the assumerver faces application. you may be prompted to accept the license for the web app DTD from sun. you may also be asked to choose the J2EE perspective upon completion. in both cases accept.

Your JSF application has been created. note that the web. XML file has been updated with the faces Servlet and servlet-mapping, a stub JSF application configuration file (faces-config.xml) has been created, and the build path has been updated with the Implementation jars.

If you have an existing dynamic web application, it is possible to add JSF capabilities by going:
Project Properties> Project facets> Add/Remove project facets...

Create a jsf jsp page

Use the JSP page Wizard to create a page calledLogin. jspIn the web content folder of the new application. In the select templates page of the wizard, selectNew JSP (HTML)Template. Click Finish.
Add the JSF taglibs, the view and the form tag. the JSP page shocould look like the following:

Add the following JSF tag,<H: messages layout = ""> . Postion the cursor inside the double-quotes ofLayoutAttribute and hitCTRL + Space. You will get a pop-up with the list of valid values for the attribute. SelectTable. The editor providesContent assistFor values of attributes that have a discrete list of values.

Now, change the value of the layout attribute to say,TablexAnd save the change. The editor will validate the value of this attribute against the meta-data defined list of valid values and will flag the line with a warning that the value is invalid.

Change the value of the layout attribute backTableAnd save. Note that the warning message disappears.

Add the following JSF tag,<H: outputlabel rendered = ""> . Position the cursor inside the double-quotes ofRenderedAttribute and hitCTRL + Space. You will get a pop-up with the list of values for the attribute. Select the value,True. The editor providesContent assistFor values of attributes that are of boolean type.

Complete the tag as shown,<H: outputlabel rendered = "true" value = "name">

Add the JSF tag,<H: inputtext tabindex = ""> With an empty string for the value of the attributeTabindexAnd save. The editor will report a warning that the value is not a valid integer. Enter the value0And save. The editor provides meta-driven validation of values of attributes based on the type of the value as defined in the meta-data.

AddValueAttribute to the above tag, with an empty El expression for the Value Attribute without a closing double-quote as shown below and save. the editor has comprehensive validation of El syntax and will indicate a syntax error.

Change the El expression to include the double-quote, but now remove the closing bracket as shown below and save. The editor will mark the line with an error.

Now enter a value binding expression referring to an undefined managed bean,"# {Loginbean. name }"And save. The editor will flag a warning indicating that the variable cannot be resolved.

Create a Java class,Com. Tutorial. loginbeanWith the following code and save.

In the project explorer, expand the node, jsftutorial-> webcontent. Double-click onFaces-config.xml. This will launch the faces-config editor. SelectManagedbeanTab.

Click onAddButton. This will launch the new managed bean wizard. Select the class,Com. Tutorial. loginbean. Click the next button twice and the select the finish button. This will register the managed bean.

Switch toLoginJSP page. Right-mouse click on the page and from the context menu, selectValidateOption. Note that the page shoshould now be valid.

Add the JSF tag,<H: inputsecret value = "#{}"> . With the cursor inside the brackets, hitCTRL + spacebar. You shoshould see a pop-up with a list of all the implicit objects plus the managed bean defined above. Select the managed bean,Loginbean

Enter the name of a property, say X, that is not defined in the managed bean and save the change. The editor will report a warning that the property cannot be resolved.

Delete the invalid property. HitCTRL + spacebarAfter'.'In the bean name. You shocould see a pop-up listing the properties defined in the managed bean. SelectPasswordFrom the menu.

The propertyPasswordHas nested properties. Enter a dot afterPasswordAnd hitCTRL + spacebar. The editor will pop-up a list of the nested properties. SelectConvertedid

Add the JSF tag,<F: converter converterid = ""> </F: converter>And save. The editor will flag a warning that the converterid attribute can not be null. The editor provides meta-data driven validation for attribute values.

With the cursor inside the double-quote ofConverterid, HitCTRL + spacebar. You shoshould see a pop-up with a list of all the Standard converters plus those registered in the faces-config file. the editor provides content assist for various artifacts registered in the faces-config files including validators. selectJavax. Faces. LongId.

Create a Java class,Com. Tutorial. validatepasswordThat implementsValidatorInterface and save.

In the project explorer, expand the node, jsftutorial-> webcontent. Double-click onFaces-config.xml. This will launch the faces-config editor. SelectComponentTab. ExpandValidatorsSection.

Click onAddButton. SelectBrowseButton associated withValidator classField and selectCom. Tutorial. validatepasswordClass. Save the changes.

Add the JSF tag,<F: validator id = ""> </F: validator>. With the cursor inside the double-quote, hitCTRL + spacebar. You shoshould see a pop-up with a list of all the standard validators plus those registered in the faces-config file. SelectValidate Password.

Add the JSF tag,<H: commandbutton action = ""> And save. The editor will flag a warning that the action attribute can not be null. This is another example of meta-data driven validation for attribute values.

Complete the tag as shown below.
<H: commandbutton action = "login" value = "login">

We will now move the static strings we have used in the page to a resource bundle. To do this, add a file called,Messages. PropertiesIn the folderCom. Tutorial. Define the properties as shown below and save the file.

Add the JSF tag,LoadbundleAs shown below.

Delete the string,NameIn the Value Attribute ofOutputlabelTag. Position the Curson inside the brackets and hitCTRL + spacebar. You shoshould see a pop-up with a list that includes desMSGVariable that you defined inLoadbundleTag. select it.

Enter a dot afterMSGAnd and hitCTRL + spacebar. You shoshould see a pop-up with a list of properties defined inMessages. PropertiesFile. Select the property,Name.

Complete the login page as shown below.

Create a new JSF page,Welcome. jspAs shown below.

Faces configuration resource editor

The JSF Tools Project has des a Special Editor for the faces configuration resource files. the following section gives a brief introduction to the editor. A comprehensive tutorial detailing all the features of the editor will be published soon.
Double-click onFaces-config.xmlFile to launch the faces configuration editor. Switch toNavigationTab.

• AddLogin. jspAndWelcome. jspTo the navigation tab. SelectPageControl from the palette and drop it on the navigation tab. Choose the page in the resultingSelect JSP fileDialog.
• Connect the two pages. Click onLinkControl in the palette, selectLoginPage and draw a line toWelcomePage. Select the line in the navigation tab and in the property view, set the value ofFrom-outcomeToLogin.

Testing the jsf jsp page

1) We will now execute the page against the Apache Tomcat server. ChooseRun on serverUsing the context menu while selecting the login. jsp page in the navigator.

2) choose your Apache Tomcat server and set it up as required if you had not already done so.

3) Click Finish. You shoshould see from the console view that the Tomcat server starts and then you shoshould see the executing login page appear in the Web browser like below.

Click onLoginButton. You shoshould navigate toWelcomePage.

Congratulations! You have created and executed your first assumerver faces application using the new eclipse wtp jsf tooling.