jsf/dev_resource/JSFTutorial/JSFTools_milestone1_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(Milestone1)
 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(Milestone1)
 Tutorial</h1>

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

 In this tutorial we will create and execute a web application with
 JavaServer Faces capabilities.
 <p><b> By Gerry Kessler, Oracle Corporation.</b> <br>

 <font size="-1">December 19, 2005</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.4.2/download.html">Java 2
 	Platform, Standard Edition(J2SE) 1.4</a></li>
 	<li><a href="http://download.eclipse.org/webtools/downloads">Eclipse
 	and WTP</a></li>
 	<li><a href="http://www.eclipse.org/downloads/download.php?file=/webtools/jsf/Milestone1/wtp-jsf-I200512161901.zip
 ">JavaServer
 	Faces Tools Milestone 1</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>
 </p>
 <h3>Creating a JavaServer Faces Project</h3>


 <p>1) 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>

 </p>
 <br>
 <p>2) 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="564"></p>

 </p>
 <br>
 <p>3) On the JSF Capabilities page we will need to specify and create a
 JSF Implementation library. 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. Click on the Add button.<br>
 <br>
 <br>
 <img alt="JSF Capabilities page" src="images/jsf-capabilities.PNG"
 	height="500" width="564"></p>

 </p>
 <br>
 <p>4) Create the JSF Implementation library with the name and the jars
 shown below. Click on the <b>Finish</b> button.<br>
 <br>
 <br>
 <img alt="JSF Implementation library"
 	src="images/jsf-implementation-library.PNG" height="470" width="438"></p>

 </p>
 <br>
 <p>5) This library will now be selected as the implementation to use
 with this application. <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>
 <img alt="JSF Capabilites page with JSF implementation"
 	src="images/jsf-capabilities-library.PNG" height="149" width="564"></p>

 </p>
 <br>
 <p>6) 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 implementation jars have been copied to the Web App Libraries
 classpath container.<br>
 <br>
 <br>
 <img alt="" src="images/project-explorer.PNG" height="500" width="373"></p>

 </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>Create a JSF JSP Page</h3>
 <p>1) Use the JSP Page wizard to create a page called login.jsp in the
 Web Content folder of the new application. Click Finish.<br>
 <br>
 <br>
 <img alt="New JSP Page" src="images/new-jsp-page.PNG" height="571"
 	width="438"></p>

 </p>
 <br>
 <p>2) Delete the generated contents of the JSP page and replace with the
 code below which makes use of some standard JSF components:<br>
 <pre>
 &lt;html&gt;
 &lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
 &lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;

 &lt;f:view&gt;
 	&lt;body&gt;
 	&lt;h:form&gt;
 		&lt;h3&gt;Please enter your name and password.&lt;/h3&gt;
 		&lt;table&gt;
 			&lt;tr&gt;
 				&lt;td&gt;Name:&lt;/td&gt;
 				&lt;td&gt;&lt;h:inputText value="#{user.name}" /&gt;&lt;/td&gt;
 			&lt;/tr&gt;
 			&lt;tr&gt;
 				&lt;td&gt;Password:&lt;/td&gt;
 				&lt;td&gt;&lt;h:inputSecret value="#{user.password}" /&gt;&lt;/td&gt;
 			&lt;/tr&gt;
 		&lt;/table&gt;
 		&lt;p&gt;&lt;h:commandButton value="Login" action="login" /&gt;&lt;/p&gt;
 	&lt;/h:form&gt;
 	&lt;/body&gt;
 &lt;/f:view&gt;
 &lt;/html&gt;
 </pre>
 <br>
 <br>
 The JSP editor page should now look something like this:
 <br>
 <br>
 <img alt="Sample JSP page" src="images/jsp-page.PNG" height="441"
 	width="628">
 </p>
 <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="511" width="557"></p>

 </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="343" width="560"></p>

 </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(Milestone1)
	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(Milestone1)
	Tutorial</h1>

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

	In this tutorial we will create and execute a web application with
	JavaServer Faces capabilities.
	<p><b> By Gerry Kessler, Oracle Corporation.</b> <br>

	<font size="-1">December 19, 2005</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.4.2/download.html">Java 2
	Platform, Standard Edition(J2SE) 1.4</a></li>
	<li><a href="http://download.eclipse.org/webtools/downloads">Eclipse
	and WTP</a></li>
	<li><a href="http://www.eclipse.org/downloads/download.php?file=/webtools/jsf/Milestone1/wtp-jsf-I200512161901.zip
	">JavaServer
	Faces Tools Milestone 1</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>
	</p>
	<h3>Creating a JavaServer Faces Project</h3>



	<p>1) 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>

	</p>
	<br>
	<p>2) 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="564"></p>

	</p>
	<br>
	<p>3) On the JSF Capabilities page we will need to specify and create a
	JSF Implementation library. 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. Click on the Add button.<br>
	<br>
	<br>
	<img alt="JSF Capabilities page" src="images/jsf-capabilities.PNG"
	height="500" width="564"></p>

	</p>
	<br>
	<p>4) Create the JSF Implementation library with the name and the jars
	shown below. Click on the <b>Finish</b> button.<br>
	<br>
	<br>
	<img alt="JSF Implementation library"
	src="images/jsf-implementation-library.PNG" height="470" width="438"></p>

	</p>
	<br>
	<p>5) This library will now be selected as the implementation to use
	with this application. <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>
	<img alt="JSF Capabilites page with JSF implementation"
	src="images/jsf-capabilities-library.PNG" height="149" width="564"></p>

	</p>
	<br>
	<p>6) 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 implementation jars have been copied to the Web App Libraries
	classpath container.<br>
	<br>
	<br>
	<img alt="" src="images/project-explorer.PNG" height="500" width="373"></p>

	</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>Create a JSF JSP Page</h3>
	<p>1) Use the JSP Page wizard to create a page called login.jsp in the
	Web Content folder of the new application. Click Finish.<br>
	<br>
	<br>
	<img alt="New JSP Page" src="images/new-jsp-page.PNG" height="571"
	width="438"></p>

	</p>
	<br>
	<p>2) Delete the generated contents of the JSP page and replace with the
	code below which makes use of some standard JSF components:<br>
	<pre>
	<html>
	<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
	<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

	<f:view>
	<body>
	<h:form>
	<h3>Please enter your name and password.</h3>
	<table>
	<tr>
	<td>Name:</td>
	<td><h:inputText value="#{user.name}" /></td>
	</tr>
	<tr>
	<td>Password:</td>
	<td><h:inputSecret value="#{user.password}" /></td>
	</tr>
	</table>
	<p><h:commandButton value="Login" action="login" /></p>
	</h:form>
	</body>
	</f:view>
	</html>
	</pre>
	<br>
	<br>
	The JSP editor page should now look something like this:
	<br>
	<br>
	<img alt="Sample JSP page" src="images/jsp-page.PNG" height="441"
	width="628">
	</p>
	<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="511" width="557"></p>

	</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="343" width="560"></p>

	</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>