Author: ochikvina Date: 2007-12-18 07:18:23 -0500 (Tue, 18 Dec 2007) New Revision: 5358 Modified: trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/first_seam.xml trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/getting_started.xml trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/jsp_application.xml trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/manage.xml trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/rad_jsf_application.xml Log: http://jira.jboss.com/jira/browse/JBDS-143 - adding transition sentences between the chapters and sections Modified: trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/first_seam.xml =================================================================== --- trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/first_seam.xml 2007-12-18 11:44:45 UTC (rev 5357) +++ trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/first_seam.xml 2007-12-18 12:18:23 UTC (rev 5358) @@ -6,105 +6,164 @@ <keyword>JBoss Developer Studio</keyword> <keyword>Seam</keyword> <keyword>JBoss</keyword> - </keywordset> + </keywordset> </chapterinfo> - + <title>Write Your First Seam Web Application</title> - - <para>The JBoss Developer Studio provides sophisticated tools for enterprise applications. With the JBoss Developer Studio, you can get started very quickly with a web prototype, and then scale up your application to include enterprise features (e.g., business processes, web services, etc.) using the same developer tools. It is a &quot;scalable&quot; RAD (Rapid Application Development) tool.</para> - - <para>A core element that makes the JBoss Developer Studio &quot;scalable&quot; is the <property>JBoss Seam</property> framework.</para> - - <para>In this chapter, we will cover how to build a simple Seam web application in minutes with the JBoss Developer Studio.</para> - + + <para>The JBoss Developer Studio provides sophisticated tools for enterprise applications. With + the JBoss Developer Studio, you can get started very quickly with a web prototype, and then + scale up your application to include enterprise features (e.g., business processes, web + services, etc.) using the same developer tools. It is a &quot;scalable&quot; RAD (Rapid + Application Development) tool.</para> + + <para>A core element that makes the JBoss Developer Studio &quot;scalable&quot; is the + <property>JBoss Seam</property> framework.</para> + + <para>In this chapter, we will cover how to build a simple Seam web application in minutes with + the JBoss Developer Studio.</para> + <section> <title>Create a Seam Project</title> - - <para>To create a new web application in <property>Seam</property>, select <emphasis><property>New &gt; Project ... &gt; Seam &gt; Seam Web Project</property></emphasis>. You will be prompted to enter a name and a location directory for your new project. The wizard has an option for selecting the actual Server (and not just WTP runtime) that will be used for the project. This allow the wizard to correctly identify where the needed datasource and driver libraries need to go.</para> - + <para>To create a new web application in <property>Seam</property>, you should create a Seam web + project. This section provides all the necessary steps to organize a new project with appropriate + tooling and adjust the settings that match your needs.</para> + <para>First, select <emphasis> + <property>New &gt; Project ... &gt; Seam &gt; Seam Web Project</property> + </emphasis>. You will be prompted to enter a name and a location directory for your new + project. The wizard has an option for selecting the actual Server (and not just WTP runtime) + that will be used for the project. This allow the wizard to correctly identify where the + needed datasource and driver libraries need to go.</para> + <figure> <title>Create a Seam Project</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_1.png"/> </imageobject> </mediaobject> </figure> - - <para>Next, you will be asked to select the &quot;features&quot; you want to use in your project. This allows JBoss Developer Studio to setup the appropriate tooling for your project. Since JBoss Seam integrates all popular Java EE frameworks, you can select any combination of technologies from the list. Here, for this project, we will select Dynamic Web Module, Java, JavaServer Faces (JSF), and Seam Facet for a typical database-driven web application. </para> - + + <para>Next, you will be asked to select the &quot;features&quot; you want to use in your + project. This allows JBoss Developer Studio to setup the appropriate tooling for your project. + Since JBoss Seam integrates all popular Java EE frameworks, you can select any combination of + technologies from the list. Here, for this project, we will select Dynamic Web Module, Java, + JavaServer Faces (JSF), and Seam Facet for a typical database-driven web application. </para> + <figure> <title>Select Toolings for the Project</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_2.png"/> </imageobject> </mediaobject> </figure> - <para>In this screen you can also bring up server runtimes panel by clicking <emphasis><property>Show Runtimes</property></emphasis> in the bottom right corner. This panel shows available server runtimes. Then this button will be changed into <emphasis><property>Hide Runtimes</property></emphasis> one.</para> - <para>Click <emphasis><property>Next</property></emphasis> to proceed further.</para> + <para>In this screen you can also bring up server runtimes panel by clicking <emphasis> + <property>Show Runtimes</property> + </emphasis> in the bottom right corner. This panel shows available server runtimes. Then this + button will be changed into <emphasis> + <property>Hide Runtimes</property> + </emphasis> one.</para> + <para>Click <emphasis> + <property>Next</property> + </emphasis> to proceed further.</para> <figure> <title>Available Server Runtimes</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_2_a.png"/> </imageobject> </mediaobject> </figure> - <para>A dynamic web application contains both web pages and Java code. The wizard will ask you where you want to put those files. You can just leave the default values.</para> - + <para>A dynamic web application contains both web pages and Java code. The wizard will ask you + where you want to put those files. You can just leave the default values.</para> + <figure> <title>Select Directory Names for Web Pages and Java Files</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_3.png"/> </imageobject> </mediaobject> - </figure> - - - <para>In the next screen, you will be able to select where those library JARs come from. The easiest is just to select the JARs provided by the JBoss AS runtime associated with this project. That is why it is important to chose the right JBoss AS 4.2 runtime in the project setup window.</para> + </figure> + + + <para>In the next screen, you will be able to select where those library JARs come from. The + easiest is just to select the JARs provided by the JBoss AS runtime associated with this + project. That is why it is important to chose the right JBoss AS 4.2 runtime in the project + setup window.</para> <orderedlist continuation="continues"> - <listitem><para>Check <emphasis><property>Server Supplied JSF Implementation</property></emphasis>. We will use JSF implementation that comes with JBoss server</para></listitem> - <listitem><para>Click <emphasis><property>Next</property></emphasis></para></listitem> + <listitem> + <para>Check <emphasis> + <property>Server Supplied JSF Implementation</property> + </emphasis>. We will use JSF implementation that comes with JBoss server</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Next</property> + </emphasis></para> + </listitem> </orderedlist> <figure> <title>Define JSF Implementation</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_5.png"/> </imageobject> </mediaobject> </figure> - - <para>We will also use a default Hibernate Dialect - <emphasis>org.hibernate.dialect.HSQLDialect</emphasis> and deploy as a <emphasis>war</emphasis> archive.</para> - - <para>The project setup wizard also asks you to configure how Seam generates code for the project. The Seam Home Folder should point to a valid Seam distribution. By default, it is set to the Seam distribution bundled in your JBoss Developer Studio tool. If you need another one choose setting up the appropriate check box:</para> - + + <para>We will also use a default Hibernate Dialect - + <emphasis>org.hibernate.dialect.HSQLDialect</emphasis> and deploy as a + <emphasis>war</emphasis> archive.</para> + + <para>The project setup wizard also asks you to configure how Seam generates code for the + project. The Seam Home Folder should point to a valid Seam distribution. By default, it is set + to the Seam distribution bundled in your JBoss Developer Studio tool. If you need another one + choose setting up the appropriate check box:</para> + <figure> <title>Enter Java Packages for Generated Code</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_6.png"/> </imageobject> </mediaobject> </figure> -<para>If in this list there is no Seam runtime you want to use add it through <emphasis><property>Window &gt; Preferences &gt; JBoss Tools &gt; Web &gt; Seam</property></emphasis> or just click <emphasis><property>Add</property></emphasis> button near the Seam Runtime list:</para> -<figure> + <para>If in this list there is no Seam runtime you want to use add it through <emphasis> + <property>Window &gt; Preferences &gt; JBoss Tools &gt; Web &gt; + Seam</property> + </emphasis> or just click <emphasis> + <property>Add</property> + </emphasis> button near the Seam Runtime list:</para> + <figure> <title>Add New Seam Runtime</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_7.png"/> </imageobject> </mediaobject> </figure> -<para>For the deployment format, choose WAR deployment if you want to use POJOs for UI event handling and business logic; choose EAR deployment if you want to EJB3 beans for added features. In most web applications, the WAR deployment option would suffice. You should also enter Java packages for the entity beans (for database mapping) and session beans (for action handlers). All generated code will be placed in those packages. </para> + <para>For the deployment format, choose WAR deployment if you want to use POJOs for UI event + handling and business logic; choose EAR deployment if you want to EJB3 beans for added + features. In most web applications, the WAR deployment option would suffice. You should also + enter Java packages for the entity beans (for database mapping) and session beans (for action + handlers). All generated code will be placed in those packages. </para> - <para>Click on <emphasis><property>Finish</property></emphasis> to generate a project. The generated project contains all the necessary library JARs, XML configuration files, the ANT build script, as well as simple XHTML web pages and Java classes for the skeleton web application. The project will be shown in Project Explorer as well as in <emphasis><property>Seam Components</property></emphasis> view. If Seam Components view is not open select <emphasis><property>Window &gt; Show View &gt; Seam Components</property></emphasis>.</para> + <para>Click on <emphasis> + <property>Finish</property> + </emphasis> to generate a project. The generated project contains all the necessary library + JARs, XML configuration files, the ANT build script, as well as simple XHTML web pages and + Java classes for the skeleton web application. The project will be shown in Project Explorer + as well as in <emphasis> + <property>Seam Components</property> + </emphasis> view. If Seam Components view is not open select <emphasis> + <property>Window &gt; Show View &gt; Seam Components</property> + </emphasis>.</para> <figure> <title>Seam Components View</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_8.png"/> </imageobject> @@ -112,76 +171,109 @@ </figure> <para>You can hide unused Seam components from this view.</para> <itemizedlist> - <listitem><para>Click the button <emphasis><property>Menu</property></emphasis> on the top of the view (down-pointing arrow)</para></listitem> - <listitem><para>Choose <emphasis><property>Customize View..</property></emphasis></para></listitem> - <listitem><para>In the dialog <emphasis><property>Available Customization</property></emphasis> check the filter you want to apply under the <emphasis><property>Filters</property></emphasis> tab</para></listitem> + <listitem> + <para>Click the button <emphasis> + <property>Menu</property> + </emphasis> on the top of the view (down-pointing arrow)</para> + </listitem> + <listitem> + <para>Choose <emphasis> + <property>Customize View..</property> + </emphasis></para> + </listitem> + <listitem> + <para>In the dialog <emphasis> + <property>Available Customization</property> + </emphasis> check the filter you want to apply under the <emphasis> + <property>Filters</property> + </emphasis> tab</para> + </listitem> </itemizedlist> <figure> <title>Seam Components Filtering</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_9.png"/> </imageobject> </mediaobject> </figure> </section> - + <section> <title>Build and Deploy the Seam Application</title> - - <para>Once the application is generated, you can use the &quot;Run on server&quot; menu to build and deploy it into the JBoss AS runtime associated with the project. All you need is to start JBoss AS in the server manager, and load the browser at URL http://localhost:8080/MySeamProj/. You should see the following web page.</para> - + + <para>Once the application is generated, you can use the &quot;Run on server&quot; menu + to build and deploy it into the JBoss AS runtime associated with the project. All you need is + to start JBoss AS in the server manager, and load the browser at URL + http://localhost:8080/MySeamProj/. You should see the following web page.</para> + <figure> <title>The Generated Application in Action</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_10.png" scale="75"/> </imageobject> </mediaobject> </figure> - - <para>To make simple changes to the page, you just need to double click on the <emphasis><property>WebContent/home.xhtml file</property></emphasis> and edit it in the visual editor. Notice that the visual editor lets you both the XHTML code and the rendered page. The rendered view is designed to make it easy to find stuff in a complex XHTML page.</para> - + + <para>To make simple changes to the page, you just need to double click on the <emphasis> + <property>WebContent/home.xhtml file</property> + </emphasis> and edit it in the visual editor. Notice that the visual editor lets you both the + XHTML code and the rendered page. The rendered view is designed to make it easy to find stuff + in a complex XHTML page.</para> + <figure> <title>Making Changes in the Visual Editor</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_11.png" scale="75"/> </imageobject> </mediaobject> </figure> - - <para>Once you finished editing, save the file (<emphasis><property>File &gt; Save</property></emphasis>), and reload the browser to see the changes.</para> - + + <para>Once you finished editing, save the file (<emphasis> + <property>File &gt; Save</property> + </emphasis>), and reload the browser to see the changes.</para> + <figure> <title>The Front Page is Changed</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_12.png"/> </imageobject> </mediaobject> </figure> - - <para>Notice that we do not need to re-build and re-deploy the application. Just save the edited page and reload the browser.</para> - + + <para>Notice that we do not need to re-build and re-deploy the application. Just save the edited + page and reload the browser.</para> + </section> - + <section> <title>Add a Web Page and an Action</title> - - <para>To add a new page and related UI action to the project, use the <emphasis><property>New &gt; Other ... &gt; Seam &gt; Seam Form</property></emphasis> wizard. You are prompted to enter the name of the project and seam component name, all the others fields will be filled by the wizard.</para> - + + <para>Here, we are going to add a new page and related UI action to the project.</para> + <para>To do this use the <emphasis> + <property>New &gt; Other ... &gt; Seam &gt; Seam Form</property> + </emphasis> wizard. You are prompted to enter the name of the project and seam component name, + all the others fields will be filled by the wizard.</para> + <figure> <title>New Form for the Application</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_13.png"/> </imageobject> </mediaobject> </figure> - - <para>The wizard generate a web page with a single text input field and an action button. Notice that the generated page uses <emphasis><property>layout/template.xhtml</property></emphasis> as a template. The template page provides the page header, footer, side menu, and CSS styles (see the template.xhtml for more details). The simpleAction.xhtml is assembled into the template when the simpleAction.seam URL is loaded.</para> - + + <para>The wizard generate a web page with a single text input field and an action button. Notice + that the generated page uses <emphasis> + <property>layout/template.xhtml</property> + </emphasis> as a template. The template page provides the page header, footer, side menu, and + CSS styles (see the template.xhtml for more details). The simpleAction.xhtml is assembled into + the template when the simpleAction.seam URL is loaded.</para> + <programlisting role="XML"><![CDATA[ <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @@ -218,14 +310,22 @@ ]]></programlisting> <figure> <title>Generated Form</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_14.png"/> </imageobject> </mediaobject> </figure> - <para>The <emphasis><property>#{simpleAction.value}</property></emphasis> notation on the web page maps to the &quot;value&quot; property in the backend component named &quot;simpleAction&quot;, and the <emphasis><property>#{simpleAction.simpleAction}</property></emphasis> notation indicates that the <emphasis><property>simpleAction()</property></emphasis> method is called when the button is clicked on. Here is the &quot;simpleAction&quot; named backend Seam component generated by the wizard.</para> - + <para>The <emphasis> + <property>#{simpleAction.value}</property> + </emphasis> notation on the web page maps to the &quot;value&quot; property in the + backend component named &quot;simpleAction&quot;, and the <emphasis> + <property>#{simpleAction.simpleAction}</property> + </emphasis> notation indicates that the <emphasis> + <property>simpleAction()</property> + </emphasis> method is called when the button is clicked on. Here is the + &quot;simpleAction&quot; named backend Seam component generated by the wizard.</para> + <programlisting role="JAVA"><![CDATA[package org.domain.MySeamProj.session; import org.jboss.seam.annotations.Name; @@ -268,27 +368,43 @@ } ]]></programlisting> - - <para>Load the Simplepage.seam in the web browser. Type something in the text field and click on the &quot;simpleAction&quot; button. A JSF message containing the input string is created by the <emphasis><property>simpleAction.simpleAction()</property></emphasis> method. The message is displayed on the page via the <emphasis role="bold"><property>&lt;h:message&gt;</property></emphasis> tag.</para> - + + <para>Load the Simplepage.seam in the web browser. Type something in the text field and click on + the &quot;simpleAction&quot; button. A JSF message containing the input string is + created by the <emphasis> + <property>simpleAction.simpleAction()</property> + </emphasis> method. The message is displayed on the page via the <emphasis role="bold"> + <property>&lt;h:message&gt;</property> + </emphasis> tag.</para> + </section> - + <section> <title>Input Validation</title> - - <para>Notice that in the generated SimpleAction class, there is a <emphasis><property>@Length</property></emphasis> annotation to validate the input when the input string is bound to <emphasis><property>#{simpleAction.value}</property></emphasis>. To see how this works, enter a text string longer than 10 chars and click on the button. This is what you should see.</para> - + <para>In this section we&apos;ll focus on the support of input validations.</para> + <para>Notice that in the generated SimpleAction class, there is a <emphasis> + <property>@Length</property> + </emphasis> annotation to validate the input when the input string is bound to <emphasis> + <property>#{simpleAction.value}</property> + </emphasis>. To see how this works, enter a text string longer than 10 chars and click on the + button. This is what you should see.</para> + <figure> <title>The Input Validation in Action</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_15.png"/> </imageobject> </mediaobject> </figure> - - <para>Seam supports many different input validation annotations. To see an example, you can replace the <emphasis><property>@Length(max=10)</property></emphasis> annotation with the following. It would require the input string to have a first name and last name separated by a space. If the validation fails, the web page would print the customized error message.</para> - + + <para>Seam supports many different input validation annotations. To see an example, you can + replace the <emphasis> + <property>@Length(max=10)</property> + </emphasis> annotation with the following. It would require the input string to have a first + name and last name separated by a space. If the validation fails, the web page would print the + customized error message.</para> + <programlisting role="JAVA"><![CDATA[@NotNull @Pattern(regex="^[a-zA-Z.-]+ [a-zA-Z.-]+", message="Need a firstname and a lastname") @@ -297,25 +413,29 @@ return value; } ]]></programlisting> - - <para>Save the Java file, deploy the application, and reload the browser to see the new validation scheme in action.</para> - + + <para>Save the Java file, deploy the application, and reload the browser to see the new + validation scheme in action.</para> + <figure> <title>More Input Validation</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_16.png"/> </imageobject> </mediaobject> </figure> - + </section> - + <section> <title>Add a new UI Component</title> - - <para>Now, let&apos;s add a little more logic to the application. We will add a new boolean property to the action component. If it is set to true, the action would capitalize the input string and display it on the web page. The following code in the SimpleAction class implements the logic.</para> - + + <para>Now, let&apos;s add a little more logic to the application. We will add a new boolean + property to the action component. If it is set to true, the action would capitalize the input + string and display it on the web page. The following code in the SimpleAction class implements + the logic.</para> + <programlisting role="JAVA"><![CDATA[@Name("simpleAction") public class SimpleAction { @@ -335,38 +455,46 @@ } ]]></programlisting> - <para>Next, on the web page, add the following line to display the value property on the simpleAction component. Notice that code completion is supported for the JSF EL expression.</para> - + <para>Next, on the web page, add the following line to display the value property on the + simpleAction component. Notice that code completion is supported for the JSF EL expression.</para> + <programlisting role="XML"><![CDATA[<p><b>Hello, #{simpleAction.value}</b></p> ]]></programlisting> - <para>Finally, on the web page, we add a boolean selection box component. It is bound to the <emphasis><property>convertToCap</property></emphasis> property on the backend component.</para> - + <para>Finally, on the web page, we add a boolean selection box component. It is bound to the <emphasis> + <property>convertToCap</property> + </emphasis> property on the backend component.</para> + <programlisting role="XML"><![CDATA[<h:selectBooleanCheckbox title="convertToCap" value="#{simpleAction.convertToCap}" /> Capitalize the input? ]]></programlisting> <para>Deploy the application and see it in action now.</para> - + <figure> <title>Add UI Components and Business Logic</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_17.png"/> </imageobject> </mediaobject> </figure> - + </section> - + <section id="AddSecurity"> <title>Add Security to the Application</title> - - <para>You have probably noticed that the web page template has a login link at the top of the page. You can use the Seam security framework to secure access to - any web page or web action. We just use hardcoded username and password but you can easily change it to use database, LDAP or any other means. - The simplest use case for Seam security is to add a declarative security in <property>pages.xml</property> (<emphasis><property>WebContent > WEB-INF > pages.xml</property></emphasis>) like this:</para> - + + <para>As the last point, we can add an access control to the application.</para> + <para>You have probably noticed that the web page template has a login link at the top of the + page. You can use the Seam security framework to secure access to any web page or web action. + We just use hardcoded username and password but you can easily change it to use database, LDAP + or any other means. The simplest use case for Seam security is to add a declarative security + in <property>pages.xml</property> (<emphasis> + <property>WebContent > WEB-INF > pages.xml</property> + </emphasis>) like this:</para> + <programlisting role="XML"><![CDATA[<!DOCTYPE pages PUBLIC "-//JBoss/Seam Pages Configuration DTD 1.2//EN" "http://jboss.com/products/seam/pages-1.2.dtd"> @@ -378,35 +506,43 @@ <page view-id="/simpleAction.xhtml" login-required="true"/> </pages>]]></programlisting> - - - <para>Re-deploy the application and try the action button. The application redirects to the <emphasis><property>login</property></emphasis> page asking for login credentials. The method is invoked after you successfully logged in.</para> - + + + <para>Re-deploy the application and try the action button. The application redirects to the <emphasis> + <property>login</property> + </emphasis> page asking for login credentials. The method is invoked after you successfully + logged in.</para> + <figure> <title>Access Control for Action Methods</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/first_seam/first_seam_18.png"/> </imageobject> </mediaobject> </figure> - + </section> - -<section id="OtherRelevantResourcesOnTheTopic2"> -<?dbhtml filename="OtherRelevantResourcesOnTheTopic2.html"?> -<title>Other relevant resources on the topic</title> -<para>Seam on JBoss: <ulink url="http://www.jboss.com/products/seam">Seam Framework</ulink></para> -<para>Ten Good Reasons to use Seam: <ulink url="http://www.jboss.com/products/seam/whyseam">Why Seam</ulink></para> -<para>Getting Started: <ulink url="http://labs.jboss.com/jbossseam/gettingstarted">Getting Started with JBoss Seam</ulink></para> -<para>Wiki: <ulink url="http://www.jboss.com/wiki/Wiki.jsp?page=JBossSeam">JBoss Wiki</ulink></para> -<para>FAQ: <ulink url="http://labs.jboss.com/jbossseam/faq/index.html">JBoss Seam FAQ</ulink></para> -<para>Downloads: <ulink url="http://labs.jboss.com/jbossseam/download">JBoss Seam Downloads</ulink></para> -<para>Jira: <ulink url="http://jira.jboss.org/jira/browse/JBSEAM">Jira issue tracker</ulink></para> -<para>Rules Framework: <ulink url="http://www.jboss.com/products/rules">JBoss Rules</ulink></para> -<para>Seam Tools - New and Noteworthy: <ulink url="http://fisheye.jboss.org/browse/~raw,r=3993/JBossTools/trunk/do... new and noteworthy</ulink></para> + <section id="OtherRelevantResourcesOnTheTopic2"> + <?dbhtml filename="OtherRelevantResourcesOnTheTopic2.html"?> + <title>Other relevant resources on the topic</title> + <para>Seam on JBoss: <ulink url="http://www.jboss.com/products/seam">Seam Framework</ulink></para> -</section> + <para>Ten Good Reasons to use Seam: <ulink url="http://www.jboss.com/products/seam/whyseam">Why + Seam</ulink></para> + <para>Getting Started: <ulink url="http://labs.jboss.com/jbossseam/gettingstarted">Getting + Started with JBoss Seam</ulink></para> + <para>Wiki: <ulink url="http://www.jboss.com/wiki/Wiki.jsp?page=JBossSeam">JBoss Wiki</ulink></para> + <para>FAQ: <ulink url="http://labs.jboss.com/jbossseam/faq/index.html">JBoss Seam FAQ</ulink></para> + <para>Downloads: <ulink url="http://labs.jboss.com/jbossseam/download">JBoss Seam + Downloads</ulink></para> + <para>Jira: <ulink url="http://jira.jboss.org/jira/browse/JBSEAM">Jira issue tracker</ulink></para> + <para>Rules Framework: <ulink url="http://www.jboss.com/products/rules">JBoss Rules</ulink></para> + <para>Seam Tools - New and Noteworthy: <ulink + url="http://fisheye.jboss.org/browse/~raw,r=3993/JBossTools/trunk/do... + >What&apos;s new and noteworthy</ulink></para> + + </section> </chapter> Modified: trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/getting_started.xml =================================================================== --- trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/getting_started.xml 2007-12-18 11:44:45 UTC (rev 5357) +++ trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/getting_started.xml 2007-12-18 12:18:23 UTC (rev 5358) @@ -275,6 +275,7 @@ </section> <section id="JBossToolsInstall"> <title>JBoss Tools Installation</title> + <para>Here, let&apos;s consider the installation of the JBoss Tools modules.</para> <para>JBoss Tools is an umbrella project for the JBoss developed plugins that will make it into JBoss Developer Studio. The JBoss Tools modules are:</para> <itemizedlist> Modified: trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/jsp_application.xml =================================================================== --- trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/jsp_application.xml 2007-12-18 11:44:45 UTC (rev 5357) +++ trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/jsp_application.xml 2007-12-18 12:18:23 UTC (rev 5358) @@ -2,35 +2,62 @@ <chapter id="jsp_application" xreflabel="jsp_application"> <?dbhtml filename="jsp_application.html"?> <chapterinfo> - <keywordset> - <keyword>JBoss Developer Studio</keyword> - <keyword>JSP</keyword> - <keyword>JBoss</keyword> - </keywordset> - </chapterinfo> + <keywordset> + <keyword>JBoss Developer Studio</keyword> + <keyword>JSP</keyword> + <keyword>JBoss</keyword> + </keywordset> + </chapterinfo> <title>Developing a simple JSP web application</title> - + <note> <title>Note:</title> - <para>We highly recommend developing in <property>Seam</property>. This chapter is for users who for some reason cannot use Seam.</para> + <para>We highly recommend developing in <property>Seam</property>. This chapter is for users + who for some reason cannot use Seam.</para> </note> - - <para>In this chapter you'll find out how to create a simple JSP application using the JBoss Developer Studio. The application will show a classic &quot;Hello World!&quot; on the page.</para> - <para>We&apos;ll assume that you have already launched JBoss Developer Studio and -also that the Web Development perspective is the current perspective. (If not, make it active by selecting <emphasis><property>Window &gt; Open Perspective &gt; Web Development</property></emphasis> from the menu bar or by selecting <emphasis><property>Window &gt; Open Perspective &gt; Other...</property></emphasis> from the menu bar and then selecting Web Development from -the Select Perspective dialog box.)</para> + + <para>In this chapter you'll find out how to create a simple JSP application using the JBoss + Developer Studio. The application will show a classic &quot;Hello World!&quot; on + the page.</para> + <para>We&apos;ll assume that you have already launched JBoss Developer Studio and also that + the Web Development perspective is the current perspective. (If not, make it active by + selecting <emphasis> + <property>Window &gt; Open Perspective &gt; Web Development</property> + </emphasis> from the menu bar or by selecting <emphasis> + <property>Window &gt; Open Perspective &gt; Other...</property> + </emphasis> from the menu bar and then selecting Web Development from the Select Perspective + dialog box.)</para> <section id="SettingUpTheProject"> <?dbhtml filename="SettingUpTheProject.html"?> <title>Setting Up the Project</title> - <para>At first a new project for the application will be created.</para> + <para>We&apos;ll start with creation a new project for the application.</para> <itemizedlist> - <listitem><para>Go to the menu bar and select <emphasis><property>File &gt; New &gt; Project...</property></emphasis></para></listitem> - <listitem><para>Select <emphasis><property>Web &gt; Dynamic Web Project</property></emphasis> in the New Project dialog box</para></listitem> - <listitem><para>Click <emphasis><property>Next</property></emphasis> </para></listitem> - <listitem><para>Enter &quot;jspHello&quot; as a project name</para></listitem> - <listitem><para>Leave everything else as is, and click <emphasis><property>Finish</property></emphasis></para></listitem> - </itemizedlist> - <figure> + <listitem> + <para>Go to the menu bar and select <emphasis> + <property>File &gt; New &gt; Project...</property> + </emphasis></para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>Web &gt; Dynamic Web Project</property> + </emphasis> in the New Project dialog box</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Next</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>Enter &quot;jspHello&quot; as a project name</para> + </listitem> + <listitem> + <para>Leave everything else as is, and click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + </itemizedlist> + <figure> <title>Create New Web Project</title> <mediaobject> <imageobject> @@ -47,21 +74,37 @@ </imageobject> </mediaobject> </figure> - </section> - - <section id="CreatingJSPPage"> - <?dbhtml filename="CreatingJSPPage.html"?> - <title>Creating JSP Page</title> - <para>In our simple application we need to create only one JSP page which displays a &quot;Hello World!&quot; message.</para> + </section> + + <section id="CreatingJSPPage"> + <?dbhtml filename="CreatingJSPPage.html"?> + <title>Creating JSP Page</title> + <para>This section covers all the points how to create, edit and then preview JSP page.</para> + <para>In our simple application we need to create only one JSP page which displays a + &quot;Hello World!&quot; message.</para> <itemizedlist continuation="continues"> -<listitem><para>Right click <emphasis><property>WebContent &gt; New &gt; JSP</property></emphasis>.</para></listitem> -<listitem><para>Type &quot;hello.jsp&quot; for a file name and click the <emphasis><property>Next</property></emphasis> button.</para></listitem> -</itemizedlist> -<para>In the next window you can choose a template for your jsp page and see its preview.</para> -<itemizedlist continuation="continues"> -<listitem><para>Select <emphasis><property>New JSP File (xhtml)</property></emphasis> template and click <emphasis><property>Finish</property></emphasis> button.</para></listitem> -</itemizedlist> -<figure> + <listitem> + <para>Right click <emphasis> + <property>WebContent &gt; New &gt; JSP</property> + </emphasis>.</para> + </listitem> + <listitem> + <para>Type &quot;hello.jsp&quot; for a file name and click the <emphasis> + <property>Next</property> + </emphasis> button.</para> + </listitem> + </itemizedlist> + <para>In the next window you can choose a template for your jsp page and see its preview.</para> + <itemizedlist continuation="continues"> + <listitem> + <para>Select <emphasis> + <property>New JSP File (xhtml)</property> + </emphasis> template and click <emphasis> + <property>Finish</property> + </emphasis> button.</para> + </listitem> + </itemizedlist> + <figure> <title>Create JSP Page</title> <mediaobject> <imageobject> @@ -71,164 +114,227 @@ </figure> <para>Our hello.jsp page will now appear in Project Explorer.</para> <section id="EditingJSPPage"> - <?dbhtml filename="EditingJSPPage.html"?> - <title>Editing a JSP Page</title> - <para>Let&apos;s now make a little change so that a jsp page displays &quot;Hello World!&quot; message.</para> - <itemizedlist continuation="continues"> -<listitem><para>Insert this line inside the <emphasis role="bold"><property>&lt;body&gt;</property></emphasis><emphasis role="bold"><property>&lt;/body&gt;</property></emphasis> tag: -</para></listitem> -</itemizedlist> -<programlisting role="XML"><![CDATA[<% System.out.println("Hello World!"); %>]]> + <?dbhtml filename="EditingJSPPage.html"?> + <title>Editing a JSP Page</title> + <para>Let&apos;s now make a little change so that a jsp page displays + &quot;Hello World!&quot; message.</para> + <itemizedlist continuation="continues"> + <listitem> + <para>Insert this line inside the <emphasis role="bold"> + <property>&lt;body&gt;</property> + </emphasis><emphasis role="bold"> + <property>&lt;/body&gt;</property> + </emphasis> tag: </para> + </listitem> + </itemizedlist> + <programlisting role="XML"><![CDATA[<% System.out.println("Hello World!"); %>]]> </programlisting> -<para>Notice that content assist functionality is always available when you are typing:</para> -<figure> - <title>Content Assist in JSP Page</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_4.png"/> - </imageobject> - </mediaobject> - </figure> - <para>After changes made your hello.jsp page should look like this:</para> - <figure> - <title>Hello.jsp Page</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_5.png"/> - </imageobject> - </mediaobject> - </figure> + <para>Notice that content assist functionality is always available when you are typing:</para> + <figure> + <title>Content Assist in JSP Page</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_4.png"/> + </imageobject> + </mediaobject> + </figure> + <para>After changes made your hello.jsp page should look like this:</para> + <figure> + <title>Hello.jsp Page</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_5.png"/> + </imageobject> + </mediaobject> + </figure> </section> - + <section id="WebXML"> - <?dbhtml filename="WebXML.html"?> - <title>web.xml file</title> - <para>When you are creating web project the wizard creates the web.xml for you automatically. The web.xml file editor provided by JBoss Developer Studio is available in two modes: design and source.</para> - <figure> - <title>Web.xml in Design Mode</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_6.png"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Web.xml in Source Mode</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_7.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Both modes are fully synchronized. Let&apos;s add mapping to our hello.jsp page in web.xml file.</para> - <itemizedlist> - <listitem><para>Switch to <property>source</property> mode.</para></listitem> - <listitem><para>Add the next code into <emphasis role="bold"><property>&lt;welcome-file-list&gt;</property></emphasis>:</para></listitem> - </itemizedlist> - <programlisting role="XML"><![CDATA[<welcome-file>hello.jsp</welcome-file> + <?dbhtml filename="WebXML.html"?> + <title>web.xml file</title> + <para>When you are creating web project the wizard creates the web.xml for you + automatically. The web.xml file editor provided by JBoss Developer Studio is + available in two modes: design and source.</para> + <figure> + <title>Web.xml in Design Mode</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_6.png"/> + </imageobject> + </mediaobject> + </figure> + <figure> + <title>Web.xml in Source Mode</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_7.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Both modes are fully synchronized. Let&apos;s add mapping to our hello.jsp + page in web.xml file.</para> + <itemizedlist> + <listitem> + <para>Switch to <property>source</property> mode.</para> + </listitem> + <listitem> + <para>Add the next code into <emphasis role="bold"> + <property>&lt;welcome-file-list&gt;</property> + </emphasis>:</para> + </listitem> + </itemizedlist> + <programlisting role="XML"><![CDATA[<welcome-file>hello.jsp</welcome-file> ]]></programlisting> -<para>If you come back to design mode you will see that the changes made are automatically reflected in that mode.</para> -<para>Actually you don&apos;t really need any config right now. You can clear the web.xml file, save it and you&apos;ll still be able to launch your application.</para> + <para>If you come back to design mode you will see that the changes made are + automatically reflected in that mode.</para> + <para>Actually you don&apos;t really need any config right now. You can clear the + web.xml file, save it and you&apos;ll still be able to launch your + application.</para> </section> - + <section id="DeployTheProject"> - <?dbhtml filename="DeployTheProject.html"?> - <title>Deploying the project</title> - <para>While creating any web project you could experience a pain writing ant scripts and managing the -packaging even if a developer is writing the most trivial web applications. With JBoss Developer Studio you are saved from such a pain. All you need is to start JBoss server and launch your application in your favorite browser.</para> - <para>You can also create a war archive with JBDS&apos;s Archive Tools and export it to any web server.</para> - <section id="WarConfig"> - <?dbhtml filename="WarConfig.html"?> - <title>WAR Config</title> - <para>Project archives managing is available through <property>Project archives</property> view.</para> - <itemizedlist> - <listitem><para>Select <emphasis><property>Window &gt; Show view &gt; Other &gt; JBoss Tools &gt; Project archives</property></emphasis> from menu bar</para></listitem> - <listitem><para>Select a project in Package Explorer you want to be archived</para></listitem> - </itemizedlist> - <para>In Project Archives you will see available archive types for the project:</para> - <figure> - <title>Project Archives</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_8.png"/> - </imageobject> - </mediaobject> - </figure> - <itemizedlist> - <listitem><para>Click, for example, <emphasis><property>WAR</property></emphasis> option to create war archive</para></listitem> - </itemizedlist> - <para>In the dialog New WAR you can see automatically selected default values</para> - <figure> - <title>New WAR Archive</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_9.png"/> - </imageobject> - </mediaobject> - </figure> - <itemizedlist> - <listitem><para>Click <emphasis><property>Next</property></emphasis> to see a stub archive configuration for your project: - <figure> - <title>Stub Archive Configuration</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_10.png"/> - </imageobject> - </mediaobject> - </figure> - </para></listitem> - <listitem><para>Click <emphasis><property>Finish</property></emphasis>. The <emphasis>.war</emphasis> file will appear in Package Explorer and in Project archives view as structure tree: - <figure> - <title>Archive is Created</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_11.png"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Archive in Project Archives View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_12.png" scale="75"/> - </imageobject> - </mediaobject> - </figure> - </para></listitem> - </itemizedlist> - <para>Via Project archives view you could now edit your archive, add new folders, publish to server, and so on:</para> - <figure> - <title>Configure Archive</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_13.png" scale="75"/> - </imageobject> - </mediaobject> - </figure> + <?dbhtml filename="DeployTheProject.html"?> + <title>Deploying the project</title> + <para>While creating any web project you could experience a pain writing ant scripts and + managing the packaging even if a developer is writing the most trivial web + applications. With JBoss Developer Studio you are saved from such a pain. All you + need is to start JBoss server and launch your application in your favorite browser.</para> + <para>You can also create a war archive with JBDS&apos;s Archive Tools and export it + to any web server.</para> + <section id="WarConfig"> + <?dbhtml filename="WarConfig.html"?> + <title>WAR Config</title> + <para>Project archives managing is available through <property>Project + archives</property> view.</para> + <itemizedlist> + <listitem> + <para>Select <emphasis> + <property>Window &gt; Show view &gt; Other &gt; JBoss + Tools &gt; Project archives</property> + </emphasis> from menu bar</para> + </listitem> + <listitem> + <para>Select a project in Package Explorer you want to be archived</para> + </listitem> + </itemizedlist> + <para>In Project Archives you will see available archive types for the project:</para> + <figure> + <title>Project Archives</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_8.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Click, for example, <emphasis> + <property>WAR</property> + </emphasis> option to create war archive</para> + </listitem> + </itemizedlist> + <para>In the dialog New WAR you can see automatically selected default values</para> + <figure> + <title>New WAR Archive</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_9.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Click <emphasis> + <property>Next</property> + </emphasis> to see a stub archive configuration for your project: <figure> + <title>Stub Archive Configuration</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/jsp_application/jsp_application_10.png" + /> + </imageobject> + </mediaobject> + </figure> + </para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Finish</property> + </emphasis>. The <emphasis>.war</emphasis> file will appear in Package + Explorer and in Project archives view as structure tree: <figure> + <title>Archive is Created</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/jsp_application/jsp_application_11.png" + /> + </imageobject> + </mediaobject> + </figure> + <figure> + <title>Archive in Project Archives View</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/jsp_application/jsp_application_12.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> + </para> + </listitem> + </itemizedlist> + <para>Via Project archives view you could now edit your archive, add new folders, + publish to server, and so on:</para> + <figure> + <title>Configure Archive</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_13.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="AutoRedeploy"> + <?dbhtml filename="AutoRedeploy.html"?> + <title>Auto redeploy</title> + <para>When you are creating a web application and register it on JBoss server it is + automatically deployed into <emphasis>/deploy</emphasis> directory of the + server. JBDS comes with the feature of auto-redeploy. It means that you + don&apos;t need to restart JBoss. Any changes made in the application in + exploded format will trigger a redeployment on the server.</para> + </section> </section> - - <section id="AutoRedeploy"> - <?dbhtml filename="AutoRedeploy.html"?> - <title>Auto redeploy</title> - <para>When you are creating a web application and register it on JBoss server it is automatically deployed into <emphasis>/deploy</emphasis> directory of the server. JBDS comes with the feature of auto-redeploy. It means that you don&apos;t need to restart JBoss. Any changes made in the application in exploded format will trigger a redeployment on the server.</para> - </section> - </section> - + <section id="Previewtab"> - <?dbhtml filename="Previewtab.html"?> - <title>JSP Page Preview</title> - <para>JBDS comes with JSP design-time preview features. When designing JSP pages you can easily preview how they will look during runtime. You can even attach your stylesheet to the preview.</para> - <itemizedlist> - <listitem><para>Make a little change to hello.jsp page, e.g. put this code snippet:</para></listitem> + <?dbhtml filename="Previewtab.html"?> + <title>JSP Page Preview</title> + <para>JBDS comes with JSP design-time preview features. When designing JSP pages you can + easily preview how they will look during runtime. You can even attach your + stylesheet to the preview.</para> + <itemizedlist> + <listitem> + <para>Make a little change to hello.jsp page, e.g. put this code snippet:</para> + </listitem> </itemizedlist> <programlisting role="XML"><![CDATA[<%= new java.util.Date() %> ]]></programlisting> - <itemizedlist> - <listitem><para>Click <emphasis><property>Save</property></emphasis> button.</para></listitem> - <listitem><para>Switch to Preview page by clicking Preview tab at the bottom of the page. You will see how the page will look at runtime.</para></listitem> + <itemizedlist> + <listitem> + <para>Click <emphasis> + <property>Save</property> + </emphasis> button.</para> + </listitem> + <listitem> + <para>Switch to Preview page by clicking Preview tab at the bottom of the page. + You will see how the page will look at runtime.</para> + </listitem> </itemizedlist> -<!-- <figure> + <!-- <figure> <title>Preview Page</title> <mediaobject> <imageobject> @@ -236,44 +342,56 @@ </imageobject> </mediaobject> </figure> ---> +--> </section> <section id="LaunchingTheProject"> - <?dbhtml filename="LaunchingTheProject.html"?> - <title>Launch JSP Project</title> - <para>Let&apos;s now launch our project on server. We&apos;ll use JBoss server that is shipped with JBoss Developer Studio.</para> - <itemizedlist continuation="continues"> -<listitem><para>Start JBoss server from JBoss Server view by clicking the Start icon.</para></listitem> -</itemizedlist> -<figure> - <title>Starting Server</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_15.png"/> - </imageobject> - </mediaobject> - </figure> - <itemizedlist continuation="continues"> -<listitem><para>Click the Run icon or right click your project folder and select <emphasis><property>Run As &gt; Run on Server</property></emphasis>. If you haven&apos;t made any changes in web.xml file or cleared it out you can launch the application by right clicking the hello.jsp page and selecting <emphasis><property>Run on the Server</property></emphasis>.</para></listitem> -</itemizedlist> -<figure> - <title>Run Project</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_16.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You should see the next page in a browser :</para> - <figure> - <title>Running Project</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsp_application/jsp_application_17.png"/> - </imageobject> - </mediaobject> - </figure> + <?dbhtml filename="LaunchingTheProject.html"?> + <title>Launch JSP Project</title> + <para>Let&apos;s now launch our project on server. We&apos;ll use JBoss server + that is shipped with JBoss Developer Studio.</para> + <itemizedlist continuation="continues"> + <listitem> + <para>Start JBoss server from JBoss Server view by clicking the Start + icon.</para> + </listitem> + </itemizedlist> + <figure> + <title>Starting Server</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_15.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist continuation="continues"> + <listitem> + <para>Click the Run icon or right click your project folder and select <emphasis> + <property>Run As &gt; Run on Server</property> + </emphasis>. If you haven&apos;t made any changes in web.xml file or + cleared it out you can launch the application by right clicking the + hello.jsp page and selecting <emphasis> + <property>Run on the Server</property> + </emphasis>.</para> + </listitem> + </itemizedlist> + <figure> + <title>Run Project</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_16.png"/> + </imageobject> + </mediaobject> + </figure> + <para>You should see the next page in a browser :</para> + <figure> + <title>Running Project</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsp_application/jsp_application_17.png"/> + </imageobject> + </mediaobject> + </figure> </section> - </section> - -</chapter> \ No newline at end of file + </section> + +</chapter> Modified: trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/manage.xml =================================================================== --- trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/manage.xml 2007-12-18 11:44:45 UTC (rev 5357) +++ trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/manage.xml 2007-12-18 12:18:23 UTC (rev 5358) @@ -16,7 +16,7 @@ <section id="JBossbundled"> <?dbhtml filename="JBossbundled.html"?> <title>How to Manage the JBoss AS Bundled in JBDS</title> - <para>This section covers the basics of working with the JBoss server directly supported by JBDS via bundled plug-in.</para> + <para>This section covers the basics of working with the JBoss server supported directly by JBDS via bundled plug-in.</para> <section id="StartingServer"> <?dbhtml filename="StartingServer.html"?> <title>Starting JBoss server</title> Modified: trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/rad_jsf_application.xml =================================================================== --- trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/rad_jsf_application.xml 2007-12-18 11:44:45 UTC (rev 5357) +++ trunk/documentation/guides/userguide/GettingStartedGuide/en/modules/rad_jsf_application.xml 2007-12-18 12:18:23 UTC (rev 5358) @@ -1,208 +1,371 @@ <?xml version="1.0" encoding="UTF-8"?> <chapter id="rad_jsf_application" xreflabel="rad_jsf_application"> <?dbhtml filename="rad_jsf_application.html"?> - <chapterinfo> - <keywordset> - <keyword>JBoss Developer Studio</keyword> - <keyword>JSF</keyword> - <keyword>JBoss</keyword> - <keyword>RAD</keyword> - </keywordset> - </chapterinfo> - <title>RAD development of a simple JSF application</title> - + <chapterinfo> + <keywordset> + <keyword>JBoss Developer Studio</keyword> + <keyword>JSF</keyword> + <keyword>JBoss</keyword> + <keyword>RAD</keyword> + </keywordset> + </chapterinfo> + <title>RAD development of a simple JSF application</title> + <note> <title>Note:</title> - <para>We highly recommend developing in <property>Seam</property>. This chapter is for users who for some reason cannot use Seam.</para> + <para>We highly recommend developing in <property>Seam</property>. This chapter is for users + who for some reason cannot use Seam.</para> </note> - - <para>In this chapter you will see how to create a simple JSF application being based on <property>&quot;RAD&quot;</property> philosophy. We will create the familiar Guess Number application. The scenario is the following. You are asked to guess a number between 0 and 100. If the guess is correct, a success page is displayed with a link to play again. If the guess is incorrect, a message is printed notifying the user that a smaller or a larger number should be entered and the game continues.</para> - <para>We&apos;ll show you how to create such an application from scratch, along the way demonstrating powerful features of JBoss Developer Studio such as project templating, Visual Page Editor, code completion and others. You will design the -JSF application and then run the application from inside JBoss Developer Studio using the bundled JBoss server.</para> -<section id="SettingUpTheProject12"> -<?dbhtml filename="SettingUpTheProject12.html"?> -<title>Setting up the project</title> -<para>We will create a JSF 1.2 project using an integrated JBDS&apos;s new project wizard and predefined templates.</para> -<itemizedlist> - <listitem><para>In Web Projects View (if it is not open select <emphasis><property>Window &gt; Show View &gt; Others &gt; JBoss Tools Web &gt; Web Projects View</property></emphasis>) click <emphasis><property>Create New JSF Project</property></emphasis> button. -<figure> -<title>Create New JSF Project</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_1.png"/> - </imageobject> -</mediaobject> -</figure></para></listitem> + <para>In this chapter you will see how to create a simple JSF application being based on + <property>&quot;RAD&quot;</property> philosophy. We will create the familiar + Guess Number application. The scenario is the following. You are asked to guess a number + between 0 and 100. If the guess is correct, a success page is displayed with a link to play + again. If the guess is incorrect, a message is printed notifying the user that a smaller or + a larger number should be entered and the game continues.</para> + <para>We&apos;ll show you how to create such an application from scratch, along the way + demonstrating powerful features of JBoss Developer Studio such as project templating, Visual + Page Editor, code completion and others. You will design the JSF application and then run + the application from inside JBoss Developer Studio using the bundled JBoss server.</para> -<listitem><para>Put <property>GuessNumber</property> as a project name, in JSF Environment drop down list choose <property>JSF 1.2.</property></para></listitem> -<listitem><para>Leave everything else as it is and click <emphasis><property>Finish</property></emphasis></para></listitem> -</itemizedlist> -<para>Our project will appear in Project Explorer and Web Projects Views. As you can see Red Had Developer Studio has created for us the whole skeleton for the project with all needed libraries, faces-config.xml and web.xml files.</para> -<figure> -<title>New JSF Project</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_2.png"/> - </imageobject> -</mediaobject> -</figure> + <section id="SettingUpTheProject12"> + <?dbhtml filename="SettingUpTheProject12.html"?> + <title>Setting up the project</title> + <para>First, we will create a JSF 1.2 project using an integrated JBDS&apos;s new + project wizard and predefined templates. Follow the next steps:</para> + <itemizedlist> + <listitem> + <para>In Web Projects View (if it is not open select <emphasis> + <property>Window &gt; Show View &gt; Others &gt; JBoss Tools Web + &gt; Web Projects View</property> + </emphasis>) click <emphasis> + <property>Create New JSF Project</property> + </emphasis> button. <figure> + <title>Create New JSF Project</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/rad_jsf_application/rad_jsf_application_1.png"/> + </imageobject> + </mediaobject> + </figure></para> + </listitem> -</section> -<section id="CreatingJSPPages"> -<?dbhtml filename="CreatingJSPPages.html"?> -<title>Creating JSP Pages</title> -<para>The application has two pages. The first page is inputnumber.jsp. It prompts you to enter a number. If the guess is incorrect, the same page will be redisplayed with a message indicating whether a smaller or a larger number should be tried. The second page is success.jsp. This page will be shown after you guess the number correctly. From this page you also have the option to play the game again.</para> + <listitem> + <para>Put <property>GuessNumber</property> as a project name, in JSF Environment + drop down list choose <property>JSF 1.2.</property></para> + </listitem> + <listitem> + <para>Leave everything else as it is and click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + </itemizedlist> + <para>Our project will appear in Project Explorer and Web Projects Views. As you can see Red + Had Developer Studio has created for us the whole skeleton for the project with all + needed libraries, faces-config.xml and web.xml files.</para> + <figure> + <title>New JSF Project</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_2.png"/> + </imageobject> + </mediaobject> + </figure> -<para>On the first page inputnumber.jsp you will enter a number.</para> -<itemizedlist> - <listitem><para>Open <emphasis><property>faces-config.xml</property></emphasis> file</para></listitem> -<listitem><para>Right click anywhere on the diagram mode</para></listitem> -<listitem><para>From the context menu select <emphasis><property>New View</property></emphasis></para></listitem> -</itemizedlist> -<figure> -<title>Create New View</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_3.png"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> + </section> + <section id="CreatingJSPPages"> + <?dbhtml filename="CreatingJSPPages.html"?> + <title>Creating JSP Pages</title> + <para>And now, let&apos;s add two pages to our application.</para> + <para>The first page is inputnumber.jsp. It prompts you to + enter a number. If the guess is incorrect, the same page will be redisplayed with a + message indicating whether a smaller or a larger number should be tried. The second page + is success.jsp. This page will be shown after you guess the number correctly. From this + page you also have the option to play the game again.</para> - <listitem><para>Type <emphasis><property>pages/inputnumber</property></emphasis> as the value for <emphasis><property>From-view-id</property></emphasis></para></listitem> - <listitem><para>Leave everything else as is and click <emphasis><property>Finish</property></emphasis></para></listitem> - <listitem><para>In the same way create another jsf view. Type <emphasis><property>pages/success</property></emphasis> as the value for <emphasis><property>From-view-id</property></emphasis></para></listitem> -<listitem><para>Select <emphasis><property>File &gt; Save</property></emphasis></para></listitem> -</itemizedlist> -<para>On the diagram you will see two created views.</para> -<figure> -<title>New Views</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_4.png"/> - </imageobject> -</mediaobject> -</figure> -</section> + <para>On the first page inputnumber.jsp you will enter a number.</para> + <itemizedlist> + <listitem> + <para>Open <emphasis> + <property>faces-config.xml</property> + </emphasis> file</para> + </listitem> + <listitem> + <para>Right click anywhere on the diagram mode</para> + </listitem> + <listitem> + <para>From the context menu select <emphasis> + <property>New View</property> + </emphasis></para> + </listitem> + </itemizedlist> + <figure> + <title>Create New View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_3.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> -<section id="CreatingTransition"> -<?dbhtml filename="CreatingTransition.html"?> -<title>Creating Transition between two views</title> -<para>We should now create connection between jsp pages.</para> -<itemizedlist> - <listitem><para>In the diagram, select the <emphasis><property>Create New Connection</property></emphasis> icon third from the top along the upper left side of the diagram to get an arrow cursor with a two-pronged plug at the arrow&apos;s bottom -<figure> -<title>Create Connection</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_5.png"/> - </imageobject> -</mediaobject> -</figure> -</para></listitem> -<listitem><para>Click on the <emphasis><property>pages/inputnumber</property></emphasis> page icon and then click on the <emphasis><property>pages/success</property></emphasis> page icon</para></listitem> -</itemizedlist> -<para>A transition should appear between the two icons of views.</para> -<figure> -<title>Created Connection</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_6.png"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> -<listitem><para>Select <emphasis><property>File &gt; Save</property></emphasis> from the menu bar</para></listitem> -</itemizedlist> -</section> -<section id="CreatingResourceFile"> -<?dbhtml filename="CreatingResourceFile.html"?> -<title>Creating Resource File</title> -<para>JBoss Developer Studio allows to create quickly a resource file. Using this feature you can collect text messages in one central place. A resource file is just a file with a <emphasis>.properties</emphasis> extension. The messages stored in resource file can be displayed to you on a Web page during application execution. </para> -<para>With resource file first, you don&apos;t hard code anything into the JSP pages. And second, it makes it easier to translate your application to other languages. All you have to do is to translate all your messages to the other language and save them in a new properties file with a name that ends with the appropriate ISO-639 language code.</para> -<para>It is a good idea to keep your resources inside the <emphasis><property>JavaSource</property></emphasis> folder, where you keep your .java files. Every time you build the project, all <emphasis>.properties</emphasis> files will then be copied to the <emphasis>classes</emphasis> folder by default.</para> -<itemizedlist> -<listitem><para>Right click <emphasis><property>JavaSource</property></emphasis> folder and select <emphasis><property>New &gt; Folder</property></emphasis></para></listitem> - <listitem><para>Type <emphasis><property>game</property></emphasis> for Folder name and click <emphasis><property>Finish</property></emphasis></para></listitem> -</itemizedlist> -<para>We will store in this folder our resource file and java bean.</para> -<itemizedlist> - <listitem><para>Right click on <emphasis><property>game folder</property></emphasis> and select <emphasis><property>New &gt; Properties File</property></emphasis></para></listitem> -<listitem><para>Type <emphasis><property>messages</property></emphasis> as the value for &quot;name&quot; attribute and click <emphasis><property>Finish</property></emphasis></para></listitem> -</itemizedlist> -<para>JBoss Developer Studio will automatically open <property>messages.properties</property> file for editing.</para> -<figure> -<title>Messages.properties File</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_7.png"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> -<listitem><para>Click <emphasis><property>Add</property></emphasis> button</para></listitem> -<listitem><para>Type <emphasis role="italic"><property>how_to_play</property></emphasis> for &quot;name&quot; and <emphasis role="italic"><property>Please pick a number between 0 and 100.</property></emphasis> for value</para></listitem> -<listitem><para>Click <emphasis><property>Finish</property></emphasis></para></listitem> -<listitem><para>In such a way add the next properties:</para></listitem> -</itemizedlist> -<programlisting role="JAVA"><![CDATA[makeguess_button=Make Guess + <listitem> + <para>Type <emphasis> + <property>pages/inputnumber</property> + </emphasis> as the value for <emphasis> + <property>From-view-id</property> + </emphasis></para> + </listitem> + <listitem> + <para>Leave everything else as is and click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + <listitem> + <para>In the same way create another jsf view. Type <emphasis> + <property>pages/success</property> + </emphasis> as the value for <emphasis> + <property>From-view-id</property> + </emphasis></para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>File &gt; Save</property> + </emphasis></para> + </listitem> + </itemizedlist> + <para>On the diagram you will see two created views.</para> + <figure> + <title>New Views</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_4.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="CreatingTransition"> + <?dbhtml filename="CreatingTransition.html"?> + <title>Creating Transition between two views</title> + <para>Then, we should create connection between jsp pages.</para> + <itemizedlist> + <listitem> + <para>In the diagram, select the <emphasis> + <property>Create New Connection</property> + </emphasis> icon third from the top along the upper left side of the diagram to + get an arrow cursor with a two-pronged plug at the arrow&apos;s bottom <figure> + <title>Create Connection</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/rad_jsf_application/rad_jsf_application_5.png"/> + </imageobject> + </mediaobject> + </figure> + </para> + </listitem> + <listitem> + <para>Click on the <emphasis> + <property>pages/inputnumber</property> + </emphasis> page icon and then click on the <emphasis> + <property>pages/success</property> + </emphasis> page icon</para> + </listitem> + </itemizedlist> + <para>A transition should appear between the two icons of views.</para> + <figure> + <title>Created Connection</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_6.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Select <emphasis> + <property>File &gt; Save</property> + </emphasis> from the menu bar</para> + </listitem> + </itemizedlist> + </section> + <section id="CreatingResourceFile"> + <?dbhtml filename="CreatingResourceFile.html"?> + <title>Creating Resource File</title> + <para>JBoss Developer Studio allows to create quickly a resource file. Using this feature + you can collect text messages in one central place. A resource file is just a file with + a <emphasis>.properties</emphasis> extension. The messages stored in resource file can + be displayed to you on a Web page during application execution. </para> + <para>With resource file first, you don&apos;t hard code anything into the JSP pages. + And second, it makes it easier to translate your application to other languages. All you + have to do is to translate all your messages to the other language and save them in a + new properties file with a name that ends with the appropriate ISO-639 language code.</para> + <para>It is a good idea to keep your resources inside the <emphasis> + <property>JavaSource</property> + </emphasis> folder, where you keep your .java files. Every time you build the project, + all <emphasis>.properties</emphasis> files will then be copied to the + <emphasis>classes</emphasis> folder by default.</para> + <itemizedlist> + <listitem> + <para>Right click <emphasis> + <property>JavaSource</property> + </emphasis> folder and select <emphasis> + <property>New &gt; Folder</property> + </emphasis></para> + </listitem> + <listitem> + <para>Type <emphasis> + <property>game</property> + </emphasis> for Folder name and click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + </itemizedlist> + <para>We will store in this folder our resource file and java bean.</para> + <itemizedlist> + <listitem> + <para>Right click on <emphasis> + <property>game folder</property> + </emphasis> and select <emphasis> + <property>New &gt; Properties File</property> + </emphasis></para> + </listitem> + <listitem> + <para>Type <emphasis> + <property>messages</property> + </emphasis> as the value for &quot;name&quot; attribute and click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + </itemizedlist> + <para>JBoss Developer Studio will automatically open + <property>messages.properties</property> file for editing.</para> + <figure> + <title>Messages.properties File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_7.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Click <emphasis> + <property>Add</property> + </emphasis> button</para> + </listitem> + <listitem> + <para>Type <emphasis role="italic"> + <property>how_to_play</property> + </emphasis> for &quot;name&quot; and <emphasis role="italic"> + <property>Please pick a number between 0 and 100.</property> + </emphasis> for value</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + <listitem> + <para>In such a way add the next properties:</para> + </listitem> + </itemizedlist> + <programlisting role="JAVA"><![CDATA[makeguess_button=Make Guess trayagain_button=Play Again? success_text=How cool.. You have guessed the number, {0} is correct! tryagain_smaller=Oops..incorrect guess. Please try a smaller number. tryagain_bigger=Oops..incorrect guess. Please try a bigger number. ]]></programlisting> -<itemizedlist> -<listitem><para>Click <emphasis><property>File &gt; Save</property></emphasis> from the menu bar</para></listitem> -</itemizedlist> -<para>Your .properties file should now look like follows:</para> -<figure> -<title>Properties are Added</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_8.png"/> - </imageobject> -</mediaobject> -</figure> -</section> + <itemizedlist> + <listitem> + <para>Click <emphasis> + <property>File &gt; Save</property> + </emphasis> from the menu bar</para> + </listitem> + </itemizedlist> + <para>Your .properties file should now look like follows:</para> + <figure> + <title>Properties are Added</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_8.png"/> + </imageobject> + </mediaobject> + </figure> + </section> -<section id="CreatingJavaBean"> -<?dbhtml filename="CreatingJavaBean.html"?> -<title>Creating Java Bean</title> -<para>Now we create a Java bean that will hold business logic of our application.</para> -<itemizedlist> -<listitem><para>Right click <emphasis><property>game folder</property></emphasis></para></listitem> -<listitem><para>Select <emphasis><property>New &gt; Class</property></emphasis></para></listitem> -<listitem><para>Type <emphasis><property>NumberBean</property></emphasis> for bean name</para></listitem> -</itemizedlist> -<para>A java bean is created.</para> -<itemizedlist> -<listitem><para>Declare the variable of your entered number:</para></listitem> -</itemizedlist> -<programlisting role="JAVA"><![CDATA[Integer userNumber; + <section id="CreatingJavaBean"> + <?dbhtml filename="CreatingJavaBean.html"?> + <title>Creating Java Bean</title> + <para>In this section you&apos;ll see how to create a Java bean that will hold business logic of our application.</para> + <itemizedlist> + <listitem> + <para>Right click <emphasis> + <property>game folder</property> + </emphasis></para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>New &gt; Class</property> + </emphasis></para> + </listitem> + <listitem> + <para>Type <emphasis> + <property>NumberBean</property> + </emphasis> for bean name</para> + </listitem> + </itemizedlist> + <para>A java bean is created.</para> + <itemizedlist> + <listitem> + <para>Declare the variable of your entered number:</para> + </listitem> + </itemizedlist> + <programlisting role="JAVA"><![CDATA[Integer userNumber; ]]></programlisting> -<para>JBDS allows to quickly generate getters and setters for java bean.</para> -<itemizedlist> - <listitem><para>Right click <emphasis><property>NumberBean.java</property></emphasis> in Package Explorer</para></listitem> -<listitem><para>Select <emphasis><property>Source &gt; Generate Getters and Setters...</property></emphasis></para></listitem> -<listitem><para>Check <emphasis><property>userNumber</property></emphasis> box and click <emphasis><property>OK</property></emphasis> -<figure> -<title>Generate Getters and Setters</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_9.png"/> - </imageobject> -</mediaobject> -</figure> -</para></listitem> -<listitem><para>Add the declaration of the second variable</para></listitem> -</itemizedlist> -<programlisting role="JAVA"><![CDATA[int randomNumber; + <para>JBDS allows to quickly generate getters and setters for java bean.</para> + <itemizedlist> + <listitem> + <para>Right click <emphasis> + <property>NumberBean.java</property> + </emphasis> in Package Explorer</para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>Source &gt; Generate Getters and Setters...</property> + </emphasis></para> + </listitem> + <listitem> + <para>Check <emphasis> + <property>userNumber</property> + </emphasis> box and click <emphasis> + <property>OK</property> + </emphasis> + <figure> + <title>Generate Getters and Setters</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/rad_jsf_application/rad_jsf_application_9.png"/> + </imageobject> + </mediaobject> + </figure> + </para> + </listitem> + <listitem> + <para>Add the declaration of the second variable</para> + </listitem> + </itemizedlist> + <programlisting role="JAVA"><![CDATA[int randomNumber; ]]></programlisting> -<itemizedlist> -<listitem><para>.. other bean methods:</para></listitem> -</itemizedlist> -<programlisting role="JAVA"><![CDATA[public NumberBean () + <itemizedlist> + <listitem> + <para>.. other bean methods:</para> + </listitem> + </itemizedlist> + <programlisting role="JAVA"><![CDATA[public NumberBean () { randomNumber = (int)(Math.random()*100); System.out.println ( "Random number: "+randomNumber); @@ -239,17 +402,19 @@ } } ]]></programlisting> -<itemizedlist> -<listitem><para>And the import declarations:</para></listitem> -</itemizedlist> -<programlisting role="JAVA"><![CDATA[import javax.faces.context.FacesContext; + <itemizedlist> + <listitem> + <para>And the import declarations:</para> + </listitem> + </itemizedlist> + <programlisting role="JAVA"><![CDATA[import javax.faces.context.FacesContext; import javax.servlet.http.HttpSession; import javax.faces.application.FacesMessage; import java.util.Locale; import java.util.ResourceBundle; ]]></programlisting> -<para>The whole java bean should look as follows:</para> -<programlisting role="JAVA"><![CDATA[import javax.faces.context.FacesContext; + <para>The whole java bean should look as follows:</para> + <programlisting role="JAVA"><![CDATA[import javax.faces.context.FacesContext; import javax.servlet.http.HttpSession; import javax.faces.application.FacesMessage; import java.util.Locale; @@ -313,17 +478,22 @@ } } ]]></programlisting> -</section> + </section> -<section id="EditingFacesConfig"> -<?dbhtml filename="EditingFacesConfig.html"?> -<title>Editing faces-config.xml File</title> -<para>This file holds two navigation rules and defines the backing bean used.</para> -<itemizedlist> -<listitem><para>Open faces-config.xml file in a source mode</para></listitem> -<listitem><para>Add here one more navigation rule and a managed bean declarations that the content of the file looks like this:</para></listitem> -</itemizedlist> -<programlisting role="XML"><![CDATA[<?xml version="1.0" encoding="UTF-8"?> + <section id="EditingFacesConfig"> + <?dbhtml filename="EditingFacesConfig.html"?> + <title>Editing faces-config.xml File</title> + <para>This file holds two navigation rules and defines the backing bean used.</para> + <itemizedlist> + <listitem> + <para>Open faces-config.xml file in a source mode</para> + </listitem> + <listitem> + <para>Add here one more navigation rule and a managed bean declarations that the + content of the file looks like this:</para> + </listitem> + </itemizedlist> + <programlisting role="XML"><![CDATA[<?xml version="1.0" encoding="UTF-8"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" @@ -353,161 +523,372 @@ </faces-config> ]]></programlisting> -<para>The first navigation rule states that from any page (<property>*</property> stands for any page) an outcome of playagain will take you to <emphasis>/pages/inputnumber.jsp</emphasis>. Outcome values are returned from backing bean methods in this example. The second navigation rule states that if you are at the page <emphasis>/pages/inputnumber.jsp</emphasis>, and the outcome is success, then navigate to the <emphasis>/pages/success.jsp</emphasis> page. -</para> -</section> -<section id="EditingTheJSPViewFiles2"> -<?dbhtml filename="EditingTheJSPViewFiles2.html"?> -<title>Editing the JSP View Files</title> -<para>Now we will finish editing the JSP files for our two &quot;views&quot; using Visual Page -Editor.</para> -<section id="EditingInputjsp"> -<?dbhtml filename="EditingInputjsp.html"?> -<title>Editing inputnumber.jsp page</title> -<para>On this page we will have an output text component displaying a message, a text field for user&apos;s number entering and a button for input submission.</para> -<itemizedlist> -<listitem><para>Open inputnumber.jsp by double-clicking on the <emphasis><property>/pages/inputnumber. -jsp</property></emphasis> icon</para></listitem> -</itemizedlist> -<para>The Visual Page Editor will open in a screen split between source code along the top and -a WYSIWIG view along the bottom. You can see that some JSF code will be already generated as we choose a template when creating the page.</para> -<para>At the beginning it's necessary to create a <emphasis role="bold"><property>&lt;h:form&gt;</property></emphasis> component where all others components are put.</para> -<itemizedlist> -<listitem><para>Place the mouse cursor inside <emphasis role="bold"><property>&lt;f:view&gt;</property></emphasis><emphasis role="bold"><property>&lt;/f:view&gt;</property></emphasis></para></listitem> -<listitem><para>Go to JBoss Tools Palette and expand JSF HTML folder by selecting it</para></listitem> -<listitem><para>Click on <emphasis role="bold"><property>&lt;h:form&gt;</property></emphasis> tag -<figure> -<title>Insert h:form</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_10.png"/> - </imageobject> -</mediaobject> -</figure> -</para></listitem> -<listitem><para>In the dialog Insert Tag select <emphasis><property>id</property></emphasis> and click on this line below the value header. A blinking cursor will appear in a input text field inviting to enter a value of id -<figure> -<title>Define Id of Form</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_11.png"/> - </imageobject> -</mediaobject> -</figure> -</para></listitem> -<listitem><para>Type <emphasis><property>inputNumbers</property></emphasis> and click <emphasis><property>Finish</property></emphasis></para></listitem> -</itemizedlist> -<para>In source view you can see the declaration of a form.</para> -<figure> -<title>Created Form</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_12.png"/> - </imageobject> -</mediaobject> -</figure> -<para>First let&apos;s declare the properties file in inputnumber.jsp page using the loadBundle JSF tag.</para> -<itemizedlist> -<listitem><para>Put this declaration on the top of a page, right after the first two lines:</para></listitem> -</itemizedlist> -<programlisting role="XML"><![CDATA[<f:loadBundle basename="game.messages" var="msg"/> + <para>The first navigation rule states that from any page (<property>*</property> stands for + any page) an outcome of playagain will take you to + <emphasis>/pages/inputnumber.jsp</emphasis>. Outcome values are returned from backing + bean methods in this example. The second navigation rule states that if you are at the + page <emphasis>/pages/inputnumber.jsp</emphasis>, and the outcome is success, then + navigate to the <emphasis>/pages/success.jsp</emphasis> page. </para> + </section> + <section id="EditingTheJSPViewFiles2"> + <?dbhtml filename="EditingTheJSPViewFiles2.html"?> + <title>Editing the JSP View Files</title> + <para>Now we will finish editing the JSP files for our two &quot;views&quot; using + Visual Page Editor.</para> + <section id="EditingInputjsp"> + <?dbhtml filename="EditingInputjsp.html"?> + <title>Editing inputnumber.jsp page</title> + <para>First, let&apos;s dwell on how to edit inputnumber.jsp.</para> + <para>On this page we will have an output text component displaying a message, a text + field for user&apos;s number entering and a button for input submission.</para> + <itemizedlist> + <listitem> + <para>Open inputnumber.jsp by double-clicking on the <emphasis> + <property>/pages/inputnumber. jsp</property> + </emphasis> icon</para> + </listitem> + </itemizedlist> + <para>The Visual Page Editor will open in a screen split between source code along the + top and a WYSIWIG view along the bottom. You can see that some JSF code will be + already generated as we choose a template when creating the page.</para> + <para>At the beginning it's necessary to create a <emphasis role="bold"> + <property>&lt;h:form&gt;</property> + </emphasis> component where all others components are put.</para> + <itemizedlist> + <listitem> + <para>Place the mouse cursor inside <emphasis role="bold"> + <property>&lt;f:view&gt;</property> + </emphasis><emphasis role="bold"> + <property>&lt;/f:view&gt;</property> + </emphasis></para> + </listitem> + <listitem> + <para>Go to JBoss Tools Palette and expand JSF HTML folder by selecting + it</para> + </listitem> + <listitem> + <para>Click on <emphasis role="bold"> + <property>&lt;h:form&gt;</property> + </emphasis> tag <figure> + <title>Insert h:form</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/rad_jsf_application/rad_jsf_application_10.png" + /> + </imageobject> + </mediaobject> + </figure> + </para> + </listitem> + <listitem> + <para>In the dialog Insert Tag select <emphasis> + <property>id</property> + </emphasis> and click on this line below the value header. A blinking cursor + will appear in a input text field inviting to enter a value of id <figure> + <title>Define Id of Form</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/rad_jsf_application/rad_jsf_application_11.png" + /> + </imageobject> + </mediaobject> + </figure> + </para> + </listitem> + <listitem> + <para>Type <emphasis> + <property>inputNumbers</property> + </emphasis> and click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + </itemizedlist> + <para>In source view you can see the declaration of a form.</para> + <figure> + <title>Created Form</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_12.png"/> + </imageobject> + </mediaobject> + </figure> + <para>First let&apos;s declare the properties file in inputnumber.jsp page using the + loadBundle JSF tag.</para> + <itemizedlist> + <listitem> + <para>Put this declaration on the top of a page, right after the first two + lines:</para> + </listitem> + </itemizedlist> + <programlisting role="XML"><![CDATA[<f:loadBundle basename="game.messages" var="msg"/> ]]></programlisting> -<para>As always JBDS provides code assist:</para> -<figure> -<title>Code Assist</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_13.png" scale="75"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> -<listitem><para>Switch to Visual tab, so it could be possible to work with the editor completely in its WYSIWYG mode</para></listitem> -<listitem><para>Click on <emphasis><property>outputText</property></emphasis>, drag the cursor over to the editor, and drop it inside the blue box in the editor</para></listitem> + <para>As always JBDS provides code assist:</para> + <figure> + <title>Code Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_13.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Switch to Visual tab, so it could be possible to work with the editor + completely in its WYSIWYG mode</para> + </listitem> + <listitem> + <para>Click on <emphasis> + <property>outputText</property> + </emphasis>, drag the cursor over to the editor, and drop it inside the blue + box in the editor</para> + </listitem> -<listitem><para>Select <emphasis><property>value</property></emphasis> and click on this line below &quot;value&quot; header</para></listitem> -<listitem><para>Click <property>...</property> button next to the value field</para></listitem> -</itemizedlist> -<para>JBDS will nicely propose you to choose within available values:</para> -<figure> -<title>Choose Value</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_14.png"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> -<listitem><para>Expand <emphasis><property>Resource Bundles &gt; msg</property></emphasis></para></listitem> - <listitem><para>Select <emphasis><property>how_to_play</property></emphasis> value and click <emphasis><property>Ok</property></emphasis>. Then click <emphasis><property>Finish</property></emphasis> -<figure> -<title>Selecting Value</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_15.png"/> - </imageobject> -</mediaobject> -</figure> -</para></listitem> -</itemizedlist> -<para>The text will appear on the page:</para> -<figure> -<title>Created OutputText Component</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_16.png"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> -<listitem><para>Switch to Source mode and insert <emphasis role="bold"><property>&lt;br/&gt;</property></emphasis> tag after <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> component to make a new line.</para></listitem> -<listitem><para>Click <emphasis><property>Save</property></emphasis> button.</para></listitem> -<listitem><para>On the Palette click on <emphasis><property>inputText</property></emphasis>, drag the cursor over to the editor, and drop it inside the editor after the text.</para></listitem> -<listitem><para>Switch to a Source mode and insert <emphasis role="bold"><property>&lt;br/&gt;</property></emphasis> tag after <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> component to make a new line</para></listitem> -<listitem><para>Click <emphasis><property>Save</property></emphasis> button</para></listitem> -<listitem><para>On the Palette click on <emphasis><property>inputText</property></emphasis>, drag the cursor over to the editor, and drop it inside the editor after the text</para></listitem> -<listitem><para>Select <emphasis><property>value</property></emphasis> and click on this line below &quot;value&quot; header</para></listitem> -<listitem><para>Click <property>...</property> button next to the value field</para></listitem> -<listitem><para>Expand <emphasis><property>Managed Beans &gt; NumberBean</property></emphasis></para></listitem> - <listitem><para>Select <emphasis><property>userNumber</property></emphasis> value and click <emphasis><property>Ok</property></emphasis></para></listitem> -<listitem><para>Switch <emphasis><property>Advanced</property></emphasis> tab</para></listitem> -<listitem><para>Select <emphasis><property>id</property></emphasis> and click on this line below &quot;value&quot; header</para></listitem> - <listitem><para>Type <emphasis><property>userNumber</property></emphasis> in text field</para></listitem> -<listitem><para>Select <emphasis><property>required</property></emphasis> and click on this line below &quot;value&quot; header</para></listitem> -<listitem><para>Click <property>...</property> button next to the value field</para></listitem> -<listitem><para>Expand <emphasis><property>Enumeration</property></emphasis> and select <emphasis><property>true</property></emphasis> as a value</para></listitem> -</itemizedlist> -<figure> -<title>Add &quot;required&quot; Attribute</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_17.png"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> -<listitem><para>Click <emphasis><property>Ok</property></emphasis>, then click <emphasis><property>Finish</property></emphasis></para></listitem> -<listitem><para>Go to Source mode</para></listitem> -<listitem><para>Add the validation attribute to <emphasis role="bold"><property>&lt;f:validateLongRange&gt;</property></emphasis> for user input validation</para></listitem></itemizedlist> -<programlisting role="XML"><![CDATA[<h:inputText id="userNumber" value="#{NumberBean.userNumber}" required="true"> + <listitem> + <para>Select <emphasis> + <property>value</property> + </emphasis> and click on this line below &quot;value&quot; + header</para> + </listitem> + <listitem> + <para>Click <property>...</property> button next to the value field</para> + </listitem> + </itemizedlist> + <para>JBDS will nicely propose you to choose within available values:</para> + <figure> + <title>Choose Value</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_14.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Expand <emphasis> + <property>Resource Bundles &gt; msg</property> + </emphasis></para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>how_to_play</property> + </emphasis> value and click <emphasis> + <property>Ok</property> + </emphasis>. Then click <emphasis> + <property>Finish</property> + </emphasis> + <figure> + <title>Selecting Value</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/rad_jsf_application/rad_jsf_application_15.png" + /> + </imageobject> + </mediaobject> + </figure> + </para> + </listitem> + </itemizedlist> + <para>The text will appear on the page:</para> + <figure> + <title>Created OutputText Component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_16.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Switch to Source mode and insert <emphasis role="bold"> + <property>&lt;br/&gt;</property> + </emphasis> tag after <emphasis role="bold"> + <property>&lt;h:outputText&gt;</property> + </emphasis> component to make a new line.</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Save</property> + </emphasis> button.</para> + </listitem> + <listitem> + <para>On the Palette click on <emphasis> + <property>inputText</property> + </emphasis>, drag the cursor over to the editor, and drop it inside the + editor after the text.</para> + </listitem> + <listitem> + <para>Switch to a Source mode and insert <emphasis role="bold"> + <property>&lt;br/&gt;</property> + </emphasis> tag after <emphasis role="bold"> + <property>&lt;h:outputText&gt;</property> + </emphasis> component to make a new line</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Save</property> + </emphasis> button</para> + </listitem> + <listitem> + <para>On the Palette click on <emphasis> + <property>inputText</property> + </emphasis>, drag the cursor over to the editor, and drop it inside the + editor after the text</para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>value</property> + </emphasis> and click on this line below &quot;value&quot; + header</para> + </listitem> + <listitem> + <para>Click <property>...</property> button next to the value field</para> + </listitem> + <listitem> + <para>Expand <emphasis> + <property>Managed Beans &gt; NumberBean</property> + </emphasis></para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>userNumber</property> + </emphasis> value and click <emphasis> + <property>Ok</property> + </emphasis></para> + </listitem> + <listitem> + <para>Switch <emphasis> + <property>Advanced</property> + </emphasis> tab</para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>id</property> + </emphasis> and click on this line below &quot;value&quot; + header</para> + </listitem> + <listitem> + <para>Type <emphasis> + <property>userNumber</property> + </emphasis> in text field</para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>required</property> + </emphasis> and click on this line below &quot;value&quot; + header</para> + </listitem> + <listitem> + <para>Click <property>...</property> button next to the value field</para> + </listitem> + <listitem> + <para>Expand <emphasis> + <property>Enumeration</property> + </emphasis> and select <emphasis> + <property>true</property> + </emphasis> as a value</para> + </listitem> + </itemizedlist> + <figure> + <title>Add &quot;required&quot; Attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_17.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Click <emphasis> + <property>Ok</property> + </emphasis>, then click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + <listitem> + <para>Go to Source mode</para> + </listitem> + <listitem> + <para>Add the validation attribute to <emphasis role="bold"> + <property>&lt;f:validateLongRange&gt;</property> + </emphasis> for user input validation</para> + </listitem> + </itemizedlist> + <programlisting role="XML"><![CDATA[<h:inputText id="userNumber" value="#{NumberBean.userNumber}" required="true"> <f:validateLongRange minimum="0" maximum="100"/> </h:inputText> ]]></programlisting> -<itemizedlist> -<listitem><para>Click <emphasis><property>Save</property></emphasis> button</para></listitem> - <listitem><para>Again select <emphasis><property>Visual</property></emphasis> mode</para></listitem> -<listitem><para>On the Palette, click on <emphasis><property>commandButton</property></emphasis>, drag the cursor over to the editor, and drop it inside the editor after the inputText component.</para></listitem> -<listitem><para>In the editing dialog select <emphasis><property>value</property></emphasis> and click on this line below &quot;value&quot; header</para></listitem> -<listitem><para>Click <property>...</property> button next to the value field</para></listitem> -<listitem><para>Expand <emphasis><property>Resource Bundles &gt; msg</property></emphasis> and select <emphasis><property>makeguess_button</property></emphasis> as a value</para></listitem> - <listitem><para>Click <emphasis><property>Ok</property></emphasis></para></listitem> -<listitem><para>Select <emphasis><property>action</property></emphasis> and click on this line below &quot;value&quot; header</para></listitem> - <listitem><para>Type <emphasis><property>NumberBean.checkGuess</property></emphasis> in text field</para></listitem> -<listitem><para>Click <emphasis><property>Finish</property></emphasis></para></listitem> -<listitem><para>In Source mode add <emphasis role="bold"><property>&lt;br/&gt;</property></emphasis> tags between <emphasis role="bold"><property>&lt;outputText&gt;</property></emphasis>, <emphasis role="bold"><property>&lt;inputText&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;commandButton&gt;</property></emphasis> components to place them on different lines</para></listitem> -</itemizedlist> -<para>inputnumber.jsp page should look like this:</para> -<programlisting role="XML"><![CDATA[<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> + <itemizedlist> + <listitem> + <para>Click <emphasis> + <property>Save</property> + </emphasis> button</para> + </listitem> + <listitem> + <para>Again select <emphasis> + <property>Visual</property> + </emphasis> mode</para> + </listitem> + <listitem> + <para>On the Palette, click on <emphasis> + <property>commandButton</property> + </emphasis>, drag the cursor over to the editor, and drop it inside the + editor after the inputText component.</para> + </listitem> + <listitem> + <para>In the editing dialog select <emphasis> + <property>value</property> + </emphasis> and click on this line below &quot;value&quot; + header</para> + </listitem> + <listitem> + <para>Click <property>...</property> button next to the value field</para> + </listitem> + <listitem> + <para>Expand <emphasis> + <property>Resource Bundles &gt; msg</property> + </emphasis> and select <emphasis> + <property>makeguess_button</property> + </emphasis> as a value</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Ok</property> + </emphasis></para> + </listitem> + <listitem> + <para>Select <emphasis> + <property>action</property> + </emphasis> and click on this line below &quot;value&quot; + header</para> + </listitem> + <listitem> + <para>Type <emphasis> + <property>NumberBean.checkGuess</property> + </emphasis> in text field</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + <listitem> + <para>In Source mode add <emphasis role="bold"> + <property>&lt;br/&gt;</property> + </emphasis> tags between <emphasis role="bold"> + <property>&lt;outputText&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;inputText&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;commandButton&gt;</property> + </emphasis> components to place them on different lines</para> + </listitem> + </itemizedlist> + <para>inputnumber.jsp page should look like this:</para> + <programlisting role="XML"><![CDATA[<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <f:loadBundle basename="game.messages" var="msg"/> @@ -527,12 +908,13 @@ </f:view> </html> ]]></programlisting> -</section> -<section id="EditingSuccessJsp"> -<?dbhtml filename="EditingSuccessJsp.html"?> -<title>Editing success.jsp page</title> -<para>In the same way like inputnumber.jsp, edit success.jsp page. Its whole source should be the next:</para> -<programlisting role="XML"><![CDATA[<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> + </section> + <section id="EditingSuccessJsp"> + <?dbhtml filename="EditingSuccessJsp.html"?> + <title>Editing success.jsp page</title> + <para>In the same way like inputnumber.jsp, edit success.jsp page. Its whole source + should be the next:</para> + <programlisting role="XML"><![CDATA[<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <f:loadBundle basename="game.messages" var="msg"/> @@ -548,41 +930,71 @@ </f:view> </html> ]]></programlisting> -<para>Again you can use code assist provided by JBDS when editing jsp page:</para> -<figure> -<title>Code Assist for &lt;f:param&gt;</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_18.png" scale="75"/> - </imageobject> -</mediaobject> -</figure> -<para>This page, success.jsp, is shown if you correctly guessed the number. The <emphasis role="bold"><property>&lt;h:outputFormat&gt;</property></emphasis> tag will get the value of success_text from the properties file. The {0} in success_text will be substituted for by the value of the value attribute within the <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> tag during runtime.</para> -<para>At the end, you have a button which allows you to replay the game. The action value references a backing bean method. In this case, the method only terminates the current session so that when you are shown the first page, the input text box is clear and a new random number is generated.</para> -<itemizedlist> -<listitem><para>Switch to Preview mode to see how this page will look in a browser:</para></listitem> -</itemizedlist> -<figure> -<title>Success.jsp in Preview Mode</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_19.png"/> - </imageobject> -</mediaobject> -</figure> -</section> -</section> - <section id="CreatingIndexjsp"> -<?dbhtml filename="CreatingIndexjsp.html"?> -<title>Creating index.jsp page</title> -<para>The index.jsp page is the entry point of our application. It&apos;s just forwarding to inputnumber.jsp page.</para> -<itemizedlist> -<listitem><para>Right click <emphasis><property>WebContent &gt; New &gt; JSP File</property></emphasis></para></listitem> - <listitem><para>Type <emphasis><property>index</property></emphasis> for name field and choose <emphasis><property>JSPRedirect</property></emphasis> as a template</para></listitem> -<listitem><para>Click <emphasis><property>Finish</property></emphasis></para></listitem> -<listitem><para>The source for this page should be like the following:</para></listitem> -</itemizedlist> -<programlisting role="XML"><![CDATA[<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> + <para>Again you can use code assist provided by JBDS when editing jsp page:</para> + <figure> + <title>Code Assist for &lt;f:param&gt;</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_18.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> + <para>This page, success.jsp, is shown if you correctly guessed the number. The + <emphasis role="bold"> + <property>&lt;h:outputFormat&gt;</property> + </emphasis> tag will get the value of success_text from the properties file. The {0} + in success_text will be substituted for by the value of the value attribute within + the <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> tag during runtime.</para> + <para>At the end, you have a button which allows you to replay the game. The action + value references a backing bean method. In this case, the method only terminates the + current session so that when you are shown the first page, the input text box is + clear and a new random number is generated.</para> + <itemizedlist> + <listitem> + <para>Switch to Preview mode to see how this page will look in a browser:</para> + </listitem> + </itemizedlist> + <figure> + <title>Success.jsp in Preview Mode</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_19.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + <section id="CreatingIndexjsp"> + <?dbhtml filename="CreatingIndexjsp.html"?> + <title>Creating index.jsp page</title> + <para>The index.jsp page is the entry point of our application. It&apos;s just + forwarding to inputnumber.jsp page.</para> + <itemizedlist> + <listitem> + <para>Right click <emphasis> + <property>WebContent &gt; New &gt; JSP File</property> + </emphasis></para> + </listitem> + <listitem> + <para>Type <emphasis> + <property>index</property> + </emphasis> for name field and choose <emphasis> + <property>JSPRedirect</property> + </emphasis> as a template</para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Finish</property> + </emphasis></para> + </listitem> + <listitem> + <para>The source for this page should be like the following:</para> + </listitem> + </itemizedlist> + <programlisting role="XML"><![CDATA[<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <body> <jsp:forward page="/pages/inputnumber.jsf" /> @@ -590,50 +1002,70 @@ </html> ]]></programlisting> -<para>Note the <emphasis>.jsf</emphasis> extension of a page. It means that we trigger the JSF controller servlet to handle the page according the servlet mapping in the faces-config.xml file.</para> -</section> -<section id="RunningTheApplication33"> -<?dbhtml filename="RunningTheApplication33.html"?> -<title>Running the Application</title> -<para>Everything is ready to run the application.</para> -<itemizedlist> - <listitem><para>Start up JBoss server by clicking on the <emphasis><property>Start</property></emphasis> icon in JBoss Server view. (If JBoss is already running, stop it by clicking on the red icon and then start it again. After the messages in the Console tabbed view stop scrolling, JBoss is available)</para></listitem> - <listitem><para>Right-click on project <emphasis>Run AS &gt; Run on Server<property></property></emphasis></para></listitem> -<listitem><para>Play with the application by entering correct as well as incorrect values</para></listitem> -</itemizedlist> -<figure> -<title>You are Asked to Enter a Number Between 0 and 100</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_20.png" scale="75"/> - </imageobject> -</mediaobject> -</figure> -<figure> -<title>Your Input is Validated and an Error Message is Displayed if Invalid Input was Entered</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_21.png" scale="75"/> - </imageobject> -</mediaobject> -</figure> + <para>Note the <emphasis>.jsf</emphasis> extension of a page. It means that we trigger the + JSF controller servlet to handle the page according the servlet mapping in the + faces-config.xml file.</para> + </section> + <section id="RunningTheApplication33"> + <?dbhtml filename="RunningTheApplication33.html"?> + <title>Running the Application</title> + <para>Finally, we have all the pieces needed to run the application.</para> + <itemizedlist> + <listitem> + <para>Start up JBoss server by clicking on the <emphasis> + <property>Start</property> + </emphasis> icon in JBoss Server view. (If JBoss is already running, stop it by + clicking on the red icon and then start it again. After the messages in the + Console tabbed view stop scrolling, JBoss is available)</para> + </listitem> + <listitem> + <para>Right-click on project <emphasis>Run AS &gt; Run on + Server<property/></emphasis></para> + </listitem> + <listitem> + <para>Play with the application by entering correct as well as incorrect + values</para> + </listitem> + </itemizedlist> + <figure> + <title>You are Asked to Enter a Number Between 0 and 100</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_20.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> + <figure> + <title>Your Input is Validated and an Error Message is Displayed if Invalid Input was + Entered</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_21.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> -<figure> -<title>After You Enter a Guess, the Application Tells You Whether a Smaller or a Larger Number Should be Tried</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_22.png" scale="75"/> - </imageobject> -</mediaobject> -</figure> + <figure> + <title>After You Enter a Guess, the Application Tells You Whether a Smaller or a Larger + Number Should be Tried</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_22.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> -<figure> -<title>Your Guess is Correct</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/rad_jsf_application/rad_jsf_application_23.png" scale="75"/> - </imageobject> -</mediaobject> -</figure> -</section> + <figure> + <title>Your Guess is Correct</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/rad_jsf_application/rad_jsf_application_23.png" + scale="75"/> + </imageobject> + </mediaobject> + </figure> + </section> </chapter>