jsf/dev_resource/JSFTutorial-M5/JSFTools_milestone5_tutorial.html - www.eclipse.org/webtools - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>

 <meta http-equiv="Content-Type"
 	content="text/html; charset=windows-1252">
 <title>WTP Tutorials - JavaServer Faces Tools(Milestone5)
 Tutorial/title&gt;</title>


 <link rel="stylesheet" href="default_style.css">

 </head>


 <body link="#0000ff" vlink="#800080">

 <div align="right">&nbsp;
 <table border="0" cellpadding="2" cellspacing="0" width="100%">

 	<tbody>

 		<tr>

 			<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
 				face="Arial,Helvetica"><font color="#ffffff">&nbsp;Eclipse
 			Corner Article</font></font></b></td>

 		</tr>

 	</tbody>
 </table>

 </div>

 <div align="left">
 <h1><img src="images/Idea.jpg" align="middle" height="86"
 	width="120"></h1>

 </div>

 <p></p>

 <h1 align="center">WTP Tutorials - JavaServer Faces
 Tools(Milestone5) Tutorial</h1>

 <blockquote><b>Summary</b> <br>

 In this tutorial we will build and execute a JavaServer Faces
 application, and  highlight the features that are in the Milestone 5 build.
 <p><b> By Raghu Srinivasan, Oracle Corporation.</b> <br>

 <font size="-1">March 17, 2006</font></p>

 </blockquote>

 <hr width="100%">
 <h3>Introduction</h3>

 <p>In this tutorial we will create and execute a web application
 with JavaServer Faces capabilities.<br></br>
 You may wish to visit <a
 	href="http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html">Building
 and Running a Web Application</a> before attempting this tutorial. That
 tutorial covers setup of the server instance that this tutorial does
 not.</p>

 <h3>Setup</h3>

 <p>
 <ul>
 	<li><a href="http://java.sun.com/j2se/1.5.0/download.jsp">Java
 	2 Platform, Standard Edition(J2SE) 5.0</a></li>

 	<li><a
 		href="http://download.eclipse.org/webtools/committers/drops/S-1.5RC2-200604261317/">Eclipse
 	and WTP 1.5</a></li>
 	<li><a
 		href="http://www.eclipse.org/downloads/download.php?file=/webtools/jsf/Milestone5/wtp-jsf-I-I200604261958-200604261958.zip">JavaServer
 	Faces Tools Milestone 5 Development build</a></li>
 	<li><a href="http://tomcat.apache.org/">Apache Tomcat 5.5</a></li>
 	<li><a
 		href="http://java.sun.com/j2ee/javaserverfaces/download.html">JavaServer
 	Faces RI v1.1.01</a></li>
 	<li><a
 		href="http://jakarta.apache.org/builds/jakarta-taglibs/releases/standard">JavaServer
 	Pages Standard Tag Library</a></li>
 </ul>

 <h3>Register JSF libraries</h3>
 <p>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 and Apache JSTL jars so that our application can execute
 against Apache Tomcat.<br>

 Select Windows-&gt;Preferences-&gt;Web and XML-&gt;JSF Libraries. Click
 on the New.. button to add a new library. Create the JSF Libraries as
 shown in the following figures. Check the <b>is JSF Implementation</b>
 check box when adding the Sun JSF RI library.</p>
 <br>
 <img alt="JSF Libraries-add" src="images/jsf-library-new.png"
 	height="523" width="602">

 <br>
 <br>
 <img alt="JSF Libraries" src="images/jsf-libraries.png" height="532"
 	width="580">

 <br>


 <h3>Creating a JavaServer Faces Project</h3>

 <p>Create a New Dynamic Web Application with the name of <b>FirstJSFApp</b>.
 Set the target runtime to the <b>Apache Tomcat 5.5</b><br>
 <br>
 <img alt="New Dynamic Web Application"
 	src="images/new-dynamic-web-project.png" height="500" width="564"></p>


 <br>
 <p>On the next wizard page, add the JavaServer Faces facet. Use the
 preset combo box to choose a version 1.1 project.<br>
 <br>
 <br>
 <img alt="Add the JavaServer Faces facet"
 	src="images/select-project-facets.png" height="500" width="618"></p>


 <br>
 <p>On the JSF Capabilities page, add the <b>JSTL</b> library and
 select the <b>Deploy JARS to WEB-INF/lib</b>.<br>
 <br>
 <br>
 <img alt="JSF Capabilities page"
 	src="images/jsf-capabilities-library.png" height="598" width="667"></p>


 <br>
 Click on the
 <b>Finish</b>
 button to create the JavaServer 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.
 <br>

 <br>
 <p>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.<br>
 <br>
 <br>
 <img alt="" src="images/project-explorer.png" height="390" width="362"></p>


 <br>
 <p><img src="images/note.gif" height="13" width="62">If you
 have an existing Dynamic Web Application, it is possible to add JSF
 capabilities by going to:<br>
 <b>Project Properties &gt; Project Facets &gt; Add\Remove Project
 Facets</b></p>
 <h3>JSF JSP Page Source Editor</h3>
 This section will highlight the following new features in the source
 editor.
 <ul>
 	<li>Syntax checking</li>
 	<li>Semantic validation</li>
 	<li>Quick Fix</li>
 	<li>Content Assist</li>
 </ul>
 <h3>Create a JSF JSP Page</h3>
 <p>Use the JSP Page wizard to create a page called <b>login.jsp</b> in the
 Web Content folder of the new application. In the Select Templates page
 of the wizard, select the <b>New JSP(html)</b> template. Click Finish.<br>
 Add the JSF taglibs, the view and the form tag. The JSP page should look
 like the following: <br>
 <br>
 <img alt="New JSP Page" src="images/jsp-page.png" height="308"
 	width="618"></p>

 <br>
 <h5>Syntax checking</h5>
 Add the JSF tag,
 <b>outputLabel</b>
 with an empty EL expression for the value attribute as shown below and
 save. The editor will indicate a syntax error.
 <br>
 <br>
 <img alt="Syntax error on JSP Page" src="images/syntax-error.png"
 	height="218" width="642">


 <br>
 <br>
 <h5>Semantic validation</h5>
 For the value attribute of the
 <b>outputLabel</b>
 tag above, enter a value binding expression refering to an undefined
 managed bean and save. The editor will flag an error indicating that the
 bean is not defined in the configuration resource file.
 <br>
 <br>
 <img alt="Semantic validation on JSP Page"
 	src="images/validate-managedbean-error.png" height="222" width="614">

 <br>
 Create a Java class,
 <b>com.tutorial.LoginBean</b>
 with the following code and save.
 <br>
 <br>
 <img alt="LoginBean" src="images/loginbean.png" height="396" width="426">

 <br>
 <h5>Quick Fix</h5>
 With the cursor on the
 <b>loginBean</b>
 , enter
 <b>Ctrl+1</b>
 . You will get a pop-up menu as shown below.
 <br>
 <br>
 <img alt="QuickFix-popup" src="images/quickfix.png" height="70"
 	width="570">

 <br>
 <br>
 Select the option in the pop-up menu to create the managed bean . This
 will launch the New Managed Bean wizard. Select the class,
 <b>com.tutorial.LoginBean</b>. Click the Next button twice and the select the
 Finish button.
 <br>
 <br>
 <img alt="New Managed Bean" src="images/new-managedbean.png"
 	height="262" width="488">

 <br>
 <br>
 Make some changes to the login JSP page and save. Note that there is no
 validation error on the bean.
 <br>
 <br>
 <img alt="New Managed Bean" src="images/validate-managedbean.png"
 	height="219" width="567">
 <br>
 <br>
 <h5>Content Assist</h5>
 Add the JSF tag,
 <b>inputText </b>
 with a value binding expression for the value attribute. Hit
 <b>Ctrl+spacebar</b>
 or pause after the
 <b>'.' </b>
 in the bean name. You should see a pop-up listing the properties defined
 in the managed bean. Select
 <b>name</b>
 from the menu.
 <br>
 <br>
 <img alt="Content Assist" src="images/contentassist.png" height="93"
 	width="573">

 <br>
 <br>
 Complete the login page by adding the
 <b>commandButton</b>
 tag. Save the JSF page. Your page should look like the following.
 <br>
 <br>
 <img alt="Complete login page" src="images/login-final.png" height="366"
 	width="636">

 <br>
 <br>
 Create a new JSF page,
 <b>welcome.jsp</b>
 as shown below.
 <br>
 <br>
 <img alt="Complete login page" src="images/welcome.png" height="319"
 	width="642">

 <br>
 <br>
 <h3>Faces Configuration Resource Editor</h3>
 The JSF Tools project includes a first-class 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.
 <br>
 Double-click on the
 <b>faces-config.xml</b>
 file to launch the Faces configuration editor. Switch to the
 <b>Navigation</b>
 tab.
 <br>
 <br>
 <img alt="Faces Configuration Editor"
 	src="images/facesconfig-editor.png" height="448" width="526">

 <br>
 <br>
 <ul>
 	<li>Add the <b>login.jsp</b> and <b>welcome.jsp</b> to the
 	Navigation tab. Select the <b>Page</b> control from the Palette and
 	drop it on the Navigation tab. Choose the page in the resulting <b>Select
 	JSP File</b> dialog.</li>
 	<br>
 	<li>Connect the two pages. Click on the <b>Link</b> control in
 	the Palette, select the <b>login</b> page and draw a line to the <b>welcome</b>
 	page. Select the line in the Navigation tab and in the property view,
 	set the value of the <b>from-outcome</b> to <b>login</b> .</li>
 </ul>
 <br>
 <br>
 <img alt="Faces Configuration Editor"
 	src="images/navigation.png" height="412" width="519">

 <br>
 <br>
 <h3>Testing the JSF JSP Page</h3>
 <p>1) We will now execute the page against the Apache Tomcat server.
 Choose <b>Run on Server</b> using the context menu while selecting the
 login.jsp page in the navigator. <br>
 <br>
 <br>
 <img alt="" src="images/run-jsf.PNG" height="443" width="450"></p>


 <br>

 <p>2) Choose your Apache Tomcat server and set it up as required if
 you had not already done so.<br>
 <br>
 3) Click Finish. You should see from the Console view that the Tomcat
 server starts and then you should see the executing login page appear in
 the Web Browser like below. <br>
 <br>
 <br>
 <img alt="" src="images/jsf-app.png" height="213" width="515"></p>


 <br>
 Click on the <b>login</b> button. You should navigate to the <b>welcome</b> page.
 <br>
 <br>
 <img alt="" src="images/jsf-app1.png" height="144" width="516"></p>


 <br>
 <p><b> Congratulations! You have created and executed your first
 JavaServer Faces application using the new Eclipse WTP JSF tooling. </b></p>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>

	<meta http-equiv="Content-Type"
	content="text/html; charset=windows-1252">
	<title>WTP Tutorials - JavaServer Faces Tools(Milestone5)
	Tutorial/title></title>


	<link rel="stylesheet" href="default_style.css">

	</head>


	<body link="#0000ff" vlink="#800080">

	<div align="right">
	<table border="0" cellpadding="2" cellspacing="0" width="100%">

	<tbody>

	<tr>

	<td colspan="2" align="left" bgcolor="#0080c0" valign="top"><b><font
	face="Arial,Helvetica"><font color="#ffffff"> Eclipse
	Corner Article</font></font></b></td>

	</tr>

	</tbody>
	</table>

	</div>

	<div align="left">
	<h1><img src="images/Idea.jpg" align="middle" height="86"
	width="120"></h1>

	</div>

	<p></p>

	<h1 align="center">WTP Tutorials - JavaServer Faces
	Tools(Milestone5) Tutorial</h1>

	<blockquote><b>Summary</b> <br>

	In this tutorial we will build and execute a JavaServer Faces
	application, and highlight the features that are in the Milestone 5 build.
	<p><b> By Raghu Srinivasan, Oracle Corporation.</b> <br>

	<font size="-1">March 17, 2006</font></p>

	</blockquote>

	<hr width="100%">
	<h3>Introduction</h3>

	<p>In this tutorial we will create and execute a web application
	with JavaServer Faces capabilities.<br></br>
	You may wish to visit <a
	href="http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html">Building
	and Running a Web Application</a> before attempting this tutorial. That
	tutorial covers setup of the server instance that this tutorial does
	not.</p>

	<h3>Setup</h3>

	<p>
	<ul>
	<li><a href="http://java.sun.com/j2se/1.5.0/download.jsp">Java
	2 Platform, Standard Edition(J2SE) 5.0</a></li>

	<li><a
	href="http://download.eclipse.org/webtools/committers/drops/S-1.5RC2-200604261317/">Eclipse
	and WTP 1.5</a></li>
	<li><a
	href="http://www.eclipse.org/downloads/download.php?file=/webtools/jsf/Milestone5/wtp-jsf-I-I200604261958-200604261958.zip">JavaServer
	Faces Tools Milestone 5 Development build</a></li>
	<li><a href="http://tomcat.apache.org/">Apache Tomcat 5.5</a></li>
	<li><a
	href="http://java.sun.com/j2ee/javaserverfaces/download.html">JavaServer
	Faces RI v1.1.01</a></li>
	<li><a
	href="http://jakarta.apache.org/builds/jakarta-taglibs/releases/standard">JavaServer
	Pages Standard Tag Library</a></li>
	</ul>

	<h3>Register JSF libraries</h3>
	<p>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 and Apache JSTL jars so that our application can execute
	against Apache Tomcat.<br>

	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. Check the <b>is JSF Implementation</b>
	check box when adding the Sun JSF RI library.</p>
	<br>
	<img alt="JSF Libraries-add" src="images/jsf-library-new.png"
	height="523" width="602">

	<br>
	<br>
	<img alt="JSF Libraries" src="images/jsf-libraries.png" height="532"
	width="580">

	<br>


	<h3>Creating a JavaServer Faces Project</h3>

	<p>Create a New Dynamic Web Application with the name of <b>FirstJSFApp</b>.
	Set the target runtime to the <b>Apache Tomcat 5.5</b><br>
	<br>
	<img alt="New Dynamic Web Application"
	src="images/new-dynamic-web-project.png" height="500" width="564"></p>


	<br>
	<p>On the next wizard page, add the JavaServer Faces facet. Use the
	preset combo box to choose a version 1.1 project.<br>
	<br>
	<br>
	<img alt="Add the JavaServer Faces facet"
	src="images/select-project-facets.png" height="500" width="618"></p>


	<br>
	<p>On the JSF Capabilities page, add the <b>JSTL</b> library and
	select the <b>Deploy JARS to WEB-INF/lib</b>.<br>
	<br>
	<br>
	<img alt="JSF Capabilities page"
	src="images/jsf-capabilities-library.png" height="598" width="667"></p>


	<br>
	Click on the
	<b>Finish</b>
	button to create the JavaServer 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.
	<br>

	<br>
	<p>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.<br>
	<br>
	<br>
	<img alt="" src="images/project-explorer.png" height="390" width="362"></p>


	<br>
	<p><img src="images/note.gif" height="13" width="62">If you
	have an existing Dynamic Web Application, it is possible to add JSF
	capabilities by going to:<br>
	<b>Project Properties > Project Facets > Add\Remove Project
	Facets</b></p>
	<h3>JSF JSP Page Source Editor</h3>
	This section will highlight the following new features in the source
	editor.
	<ul>
	<li>Syntax checking</li>
	<li>Semantic validation</li>
	<li>Quick Fix</li>
	<li>Content Assist</li>
	</ul>
	<h3>Create a JSF JSP Page</h3>
	<p>Use the JSP Page wizard to create a page called <b>login.jsp</b> in the
	Web Content folder of the new application. In the Select Templates page
	of the wizard, select the <b>New JSP(html)</b> template. Click Finish.<br>
	Add the JSF taglibs, the view and the form tag. The JSP page should look
	like the following: <br>
	<br>
	<img alt="New JSP Page" src="images/jsp-page.png" height="308"
	width="618"></p>

	<br>
	<h5>Syntax checking</h5>
	Add the JSF tag,
	<b>outputLabel</b>
	with an empty EL expression for the value attribute as shown below and
	save. The editor will indicate a syntax error.
	<br>
	<br>
	<img alt="Syntax error on JSP Page" src="images/syntax-error.png"
	height="218" width="642">


	<br>
	<br>
	<h5>Semantic validation</h5>
	For the value attribute of the
	<b>outputLabel</b>
	tag above, enter a value binding expression refering to an undefined
	managed bean and save. The editor will flag an error indicating that the
	bean is not defined in the configuration resource file.
	<br>
	<br>
	<img alt="Semantic validation on JSP Page"
	src="images/validate-managedbean-error.png" height="222" width="614">

	<br>
	Create a Java class,
	<b>com.tutorial.LoginBean</b>
	with the following code and save.
	<br>
	<br>
	<img alt="LoginBean" src="images/loginbean.png" height="396" width="426">

	<br>
	<h5>Quick Fix</h5>
	With the cursor on the
	<b>loginBean</b>
	, enter
	<b>Ctrl+1</b>
	. You will get a pop-up menu as shown below.
	<br>
	<br>
	<img alt="QuickFix-popup" src="images/quickfix.png" height="70"
	width="570">

	<br>
	<br>
	Select the option in the pop-up menu to create the managed bean . This
	will launch the New Managed Bean wizard. Select the class,
	<b>com.tutorial.LoginBean</b>. Click the Next button twice and the select the
	Finish button.
	<br>
	<br>
	<img alt="New Managed Bean" src="images/new-managedbean.png"
	height="262" width="488">

	<br>
	<br>
	Make some changes to the login JSP page and save. Note that there is no
	validation error on the bean.
	<br>
	<br>
	<img alt="New Managed Bean" src="images/validate-managedbean.png"
	height="219" width="567">
	<br>
	<br>
	<h5>Content Assist</h5>
	Add the JSF tag,
	<b>inputText </b>
	with a value binding expression for the value attribute. Hit
	<b>Ctrl+spacebar</b>
	or pause after the
	<b>'.' </b>
	in the bean name. You should see a pop-up listing the properties defined
	in the managed bean. Select
	<b>name</b>
	from the menu.
	<br>
	<br>
	<img alt="Content Assist" src="images/contentassist.png" height="93"
	width="573">

	<br>
	<br>
	Complete the login page by adding the
	<b>commandButton</b>
	tag. Save the JSF page. Your page should look like the following.
	<br>
	<br>
	<img alt="Complete login page" src="images/login-final.png" height="366"
	width="636">

	<br>
	<br>
	Create a new JSF page,
	<b>welcome.jsp</b>
	as shown below.
	<br>
	<br>
	<img alt="Complete login page" src="images/welcome.png" height="319"
	width="642">

	<br>
	<br>
	<h3>Faces Configuration Resource Editor</h3>
	The JSF Tools project includes a first-class 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.
	<br>
	Double-click on the
	<b>faces-config.xml</b>
	file to launch the Faces configuration editor. Switch to the
	<b>Navigation</b>
	tab.
	<br>
	<br>
	<img alt="Faces Configuration Editor"
	src="images/facesconfig-editor.png" height="448" width="526">

	<br>
	<br>
	<ul>
	<li>Add the <b>login.jsp</b> and <b>welcome.jsp</b> to the
	Navigation tab. Select the <b>Page</b> control from the Palette and
	drop it on the Navigation tab. Choose the page in the resulting <b>Select
	JSP File</b> dialog.</li>
	<br>
	<li>Connect the two pages. Click on the <b>Link</b> control in
	the Palette, select the <b>login</b> page and draw a line to the <b>welcome</b>
	page. Select the line in the Navigation tab and in the property view,
	set the value of the <b>from-outcome</b> to <b>login</b> .</li>
	</ul>
	<br>
	<br>
	<img alt="Faces Configuration Editor"
	src="images/navigation.png" height="412" width="519">

	<br>
	<br>
	<h3>Testing the JSF JSP Page</h3>
	<p>1) We will now execute the page against the Apache Tomcat server.
	Choose <b>Run on Server</b> using the context menu while selecting the
	login.jsp page in the navigator. <br>
	<br>
	<br>
	<img alt="" src="images/run-jsf.PNG" height="443" width="450"></p>


	<br>

	<p>2) Choose your Apache Tomcat server and set it up as required if
	you had not already done so.<br>
	<br>
	3) Click Finish. You should see from the Console view that the Tomcat
	server starts and then you should see the executing login page appear in
	the Web Browser like below. <br>
	<br>
	<br>
	<img alt="" src="images/jsf-app.png" height="213" width="515"></p>


	<br>
	Click on the <b>login</b> button. You should navigate to the <b>welcome</b> page.
	<br>
	<br>
	<img alt="" src="images/jsf-app1.png" height="144" width="516"></p>


	<br>
	<p><b> Congratulations! You have created and executed your first
	JavaServer Faces application using the new Eclipse WTP JSF tooling. </b></p>
	</body>
	</html>