JSF Tools Tutorial

From jbosstools-commits at lists.jboss.org Mon May 11 12:41:15 2009 Content-Type: multipart/mixed; boundary="===============8518502455082980412==" MIME-Version: 1.0 From: jbosstools-commits at lists.jboss.org To: jbosstools-commits at lists.jboss.org Subject: [jbosstools-commits] JBoss Tools SVN: r15198 - branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en. Date: Mon, 11 May 2009 12:37:05 -0400 Message-ID: --===============8518502455082980412== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: smukhina Date: 2009-05-11 12:37:05 -0400 (Mon, 11 May 2009) New Revision: 15198 Added: branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_output.x= ml Removed: branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_output.x= ml Log: https://jira.jboss.org/jira/browse/JBDS-717 merged changes from trunk are a= dded to the corresponding branch = Deleted: branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_ou= tput.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_output.= xml 2009-05-11 16:36:49 UTC (rev 15197) +++ branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_output.= xml 2009-05-11 16:37:05 UTC (rev 15198) @@ -1,798 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - = - -]> - = - - JSF Tools Tutorial - = - AnatolyFedosik - OlgaChikvina - SvetlanaMukhina<= email>smukhina(a)exadel.com - = - April 2008 - - 2007 - 2009 - JBoss, a div= ision of Red Hat - - - - Version: 3.0.0.GA - - - - - - - PDF version - - - - - = - = - = - = - = - = - - - - - JBoss Developer Studio - Eclipse - Java - JBoss - - - Introduction - The following chapters describe how to deal with classic/old style= of JSF development. We - recommend users to use JBoss - Seam to simplify development, but until then you can read abou= t classical JSF = - usage here. - = - Thus, in this document we are going to show you how to create a si= mple JSF application - using JBoss Tools plug= ins for Eclipse. The completed - application will ask a user to enter a name and click a button. The re= sulting new page - will display the familiar message, "Hello <name>!" This - tutorial will show you how to create and run such an application from = the beginning along the - way demonstrating some of the powerful features of JBoss Tools. - = -

- Other relevant resources on the topic - All JBoss Developer Studio/JBoss Tools documentation you can fin= d here.= - The latest documentation builds are available here. -

- = - - - = - - - - - JBoss Developer Studio - JSF application - Java - - - - Creating a Simple JSF Application - - Firstly, we assume that you have already launched Eclipse with <= property moreinfo=3D"none">JBoss Tools - plug-ins installed and also that the W= eb Development perspective is the current - one. (If not, make it active by selecting - Window > Open Perspective > = Web Development - from the menu bar or by selecting - Window > Open Perspective > = Other... - from the menu bar and then selecting - Web Development - from the Select Perspective dialog box.) - -

- - Setting Up the Project - Now we are going to create a new project for the application= . - - - For that go to the menu bar and select - File > New > Pro= ject... - - - - Select - JBoss Tools Web > J= SF > JSF Project - in the New Project dialog box - - - Click - Next - - - - Enter "jsfHello" as the project name. - - - Leave everything else as is, and click - Finish - - - - -

- -

- - JSF Configuration File - A jsfHello node should appear in the upper-left Package Expl= orer view. -

- Package Explorer View - - - - - - - - - Click the plus sign next to - jsfHello - to reveal the child nodes - - - Click the plus sign next to - WebContent - under jsfHello - - - Click the plus sign next to - WEB-INF - under WebContent - - - - Then double-click on the faces-config.xml node to display - the JSF application configuration file editor - - -

- Configuration File Editor - - - - - - - -

- - - = - - - - - JBoss Tools - JSF application - Java - - - = - Adding Navigation to the Application - = - In our simple application, the flow is defined as a single n= avigation rule connecting - two views (presentation files). At this point, we will create = the placeholders for the - two JSP presentation files and then the navigation rule to con= nect them as views. Later, - we will complete the coding for the JSP presentation files. We= can do all of this in the - Diagram mode of the configuration file editor. -

- - Adding Two Views (JSP Pages) - - - Right-click anywhere on the diagram and select <= emphasis> - New View... - from the pop-up menu - - - In the dialog box, type - pages/inputname - as the value for From-view-id - - - Leave everything else as is - - - Click - Finish - - If you look in the Package Explorer view you sho= uld see a - pages - folder under WebContent. Opening it will r= eveal the JSP file you - just created - - - Back on the diagram, right-click anywhere and se= lect - New View... - from the pop-up menu - - - In the dialog box, type - pages/greeting - as the value for From-view-id - - - Leave everything else as is - - - Click - Finish - - - - = -

- - Creating the Transition (Navigation Rule) - - - In the diagram, select the connection icon third fro= m the top along - the upper left side of the diagram - - -

- Connection Icon - - - - - - - to get an arrow cursor with a two-pronged plug at the arrow'= s bottom. - - - Click on the - pages/inputname - page icon and then click on the - pages/greeting - page icon - - = - - A transition should appear between the two icons. -

- Transition Between Two Icons - - - - - - - - - Select - File > Save - from the menu bar - - -

- = - - = - - - - - JBoss Developer Studio - JSF application - Java - - - - Adding a Managed Bean to the Application - To store data in the application, we will use a managed bean= . - - - Click on the - Tree - tab at the bottom of the editing window - - - Select the - Managed Beans - node and then click the - Add... - button displayed along the right side of the e= ditor window - - - Type in - jsfHello.PersonBean - for Class and - personBean - for Name. Leave Scope as is and Generate Sourc= e Code as is - (checked) - - - Click - Finish - - - - personBean will now be selected and three sections o= f information: - Managed Bean - , - Properties - , and - Advanced - , will be displayed about it. Under the Propert= ies section, click the - Add... - button - - - Type in - name - for Property-Name. Leave everything else as is= . (When Property- - Class is not filled in, String is the assumed type) - - - Click - Finish - - - - Select the - personBean - node in the tree - - - You should see this now: -

- Tree View in Config Editor - - - - - - - - - Select - File > Save - from the menu bar - - - You have now registered the - managed bean - and created a - stub-coded class - file for it. - = - - = - - - - - JBoss Tools - JSF application - Java - - - - Editing the JSP View Files - = - Now we will finish editing the JSP files for our two "views"= using - JSP Visual Page. -

- inputname.jsp - - - Click on the - Diagram - tab for the configuration file editor - - - Open the editor for this first JSP file by doubl= e-clicking on the - /pages/inputname. jsp<= /property> - icon - - - = - The Visual Page Editor will open in a screen split betwe= en source code along the - top and a WYSIWIG view along the bottom: -

- Visual Page Editor - - - - - - - Some JSF code is already in the file, because we have ch= osen a template to create - a page. - - - Select the - Visual - tab, so we can work with the editor comple= tely in its WYSIWYG - mode - - - To the right of the editor, in the JBoss Tools P= alette, expand the - JSF HTML - palette folder by selecting it - - -

- JBoss Tools Palette - - - - - - - - - Click on - form - within this folder, drag the cursor over t= o the editor, and drop - it inside the red box in the editor - - - Another red box will appear inside the first red= box - - - Right-click on the innermost box and select - <h:form> - Attributes from the menu - - - In the value field next to id, type - greeting - and click on the - Close - button - - - Type "Please enter name:" inside the boxes - - - Select - inputText - within the JSF HTML palette folder and dra= g it into the - innermost box in the editor after "Please enter - name:" - - - In the attributes dialog, click in the - value - field next to the value attribute and clic= k on the ... - button - - - Then, select the - Managed Beans > per= sonBean > name - node and click on the - Ok - button - - - Back in the attributes dialog, select the - Advanced - tab, type in - name - as the value for the - "id" - attribute, and then click on the - Finish - button - - - Select - commandButton - within the JSF HTML palette folder and dra= g it into the - innermost box in the editor after the input box - - - In the attributes dialog, click in the value fie= ld next to the - "action" - attribute and click on the ... - button - - - Then, select the - View Actions > gree= ting - node and click on the - OK - button - - - Back in the attributes dialog box, type in "Say = Hello" - as the value for the value attribute ("Say Hello")= and - then click on the - Finish - button - - - The source coding should be something like this now: - -<%@ taglib uri=3D"http://java.sun.com/jsf/core" prefix=3D"f" %> - - - - - - - -Please enter a name: - - - - - - -]]> - The editor should look like this: -

- Visual Page Editor - - - - - - - - - Save the file by selecting - File > Save - from the menu bar - - -

- greeting.jsp - - - Click on the - faces-config.xml - tab to bring the diagram back - - - Open the editor for the second file by double-cl= icking on the - /pages/greeting.jsp - icon - - - Select the - Visual - tab, so we can work with the editor comple= tely in its WYSIWYG - mode - - - Type "Hello "(note space after Hello) into the - box - - - Select - outputText - within the JSF HTML palette folder and dra= g it into the - innermost box in the editor after "Hello" - - - In the attributes dialog, click in - value - field next to the value attribute and clic= k on the - ... (Browse= ) button - - - Then, select the - Managed Beans > per= sonBean > name - node, click on the - Ok - button, and then click on the - Finish - button - - - Right after the output field, type an - exclamation point - ( - ! - ) - - - The source coding should be something like this now: - -<%@ taglib uri=3D"http://java.sun.com/jsf/core" prefix=3D"f" %> - - - - - - -Hello ! - - - -]]> - - - Save the file - - -

- - = - - - - - JBoss Tools - JSF application - Java - - - - Creating the Start Page - You also need to create a start page as an entry point into = the application. - - - In the Package Explorer view to the left, right-clic= k - jsfHello > WebContent - and select - New > JSP File - - - - For Name type in - index - , for Template select - JSPRedirect - and click - Finish - - - - A JSP editor will open up on the newly created file. - = - - - In the Source part of the split screen, type - /pages/inputname.jsf - in between the quotes for the page attribute - - - The source coding should look like this now: - - - - - - - -]]> - = - Note the - .jsf - extension for the file name. This is a mapping defined= in the web.xml file - for the project for invoking JavaS= erver Faces when you run the - application. - - - Select - File > Save - from the menu bar - - - - = - - - - - JBoss Tools - JSF application - Java - - - = - Running the Application - Everything is now ready for running our application by using= the JBoss engine. For - controlling JBoss server there is JBoss Server view: -

- JBoss Server View - - - - - - - - - Start up JBoss by clicking on the icon in JBoss Serv= er view. (If JBoss is - already running, stop it by clicking on the red icon a= nd then start it again. - Remember, the JSF run-time requires restarting the ser= vlet engine when any - changes have been made.) After the messages in the Con= sole tabbed view stop - scrolling, JBoss is available - - = - - Click the Run icon or right click your project folde= r and select - Run As > Run on Server<= /property> - : - - -

- Run Icon - - - - - - - This is the equivalent of launching the browser and typing <= emphasis> - http://localhost:8080/jsfHello - into your browser. Our JSF= application should now - appear. - = - = - - - - - JBoss Tools - JSF application - Java - - - - Other Relevant Resources on the topic - JSF on Sun: JavaServer Faces - Technology - Core JSF: Core = JavaServer Faces - API: JSF - API - JSF Tags: JSF Core - Tags - HTML Tags Reference: JSF HTML Tags Reference - JSF Central: JSF Centr= al - Your JavaServer Faces - Community - FAQ: JSF - FAQ - Download: JavaServer - Faces Technology - Download - - In summary, with this tutorial you should now know how to organi= ze JSF sample application - using the wizards provided by JBoss To= ols, configure its stuff and - finally run it on the JBoss Server. - - Find out more features on JSF tooling in our JSF Tools - Reference Guide. If you have questions and suggestions= , please refer to JBoss - Tools Forum. - - = - Copied: branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_out= put.xml (from rev 15128, trunk/jsf/docs/jsf_tools_tutorial/en/master_output= .xml) =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_output.= xml (rev 0) +++ branches/jbosstools-3.0.x/jsf/docs/jsf_tools_tutorial/en/master_output.= xml 2009-05-11 16:37:05 UTC (rev 15198) @@ -0,0 +1,791 @@ + + + + + + + + + + + + + + + + + + + + + = + +]> + = + + JSF Tools Tutorial + = + AnatolyFedosik + OlgaChikvina + SvetlanaMukhina<= email>smukhina(a)exadel.com + = + April 2008 + + 2007 + 2009 + JBoss, a division of Red Hat + + + + Version: 3.0.1.GA + + + + + + + PDF version + + + + + = + = + = + = + = + = + + + + + JBoss Developer Studio + Eclipse + Java + JBoss + + + Introduction + The following chapters describe how to deal with classic/old style= of JSF development. We + recommend users to use JBoss + Seam to simplify development, but until then you can read abou= t classical JSF = + usage here. + = + Thus, in this document we are going to show you how to create a si= mple JSF application + using JBoss Tools plug= ins for Eclipse. The completed + application will ask a user to enter a name and click a button. The re= sulting new page + will display the familiar message, "Hello <name>!" This + tutorial will show you how to create and run such an application from = the beginning along the + way demonstrating some of the powerful features of JBoss Tools. + = +

+ Other relevant resources on the topic + All JBoss Developer St= udio/JBoss Tools release documentation you can find athttp://docs.jboss.org/tools in the corresponding rele= ase directory. + The latest documentati= on builds are available at http://download.jboss.org/jbosstools/nightly-docs. +

+ = + + + = + + + + + JBoss Developer Studio + JSF application + Java + + + + Creating a Simple JSF Application + + Firstly, we assume that you have already launched Eclipse with <= property moreinfo=3D"none">JBoss Tools + plug-ins installed and also that the W= eb Development perspective is the current + one. (If not, make it active by selecting + Window > Open Perspective > = Web Development + from the menu bar or by selecting + Window > Open Perspective > = Other... + from the menu bar and then selecting + Web Development + from the Select Perspective dialog box.) + +

+ + Setting Up the Project + Now we are going to create a new project for the application= . + + + For that go to the menu bar and select + File > New > Pro= ject... + + + + Select + JBoss Tools Web > J= SF > JSF Project + in the New Project dialog box + + + Click + Next + + + + Enter "jsfHello" as the project name. + + + Leave everything else as is, and click + Finish + + + + +

+ +

+ + JSF Configuration File + A jsfHello node should appear in the upper-left Package Expl= orer view. +

+ Package Explorer View + + + + + + + + + Click the plus sign next to + jsfHello + to reveal the child nodes + + + Click the plus sign next to + WebContent + under jsfHello + + + Click the plus sign next to + WEB-INF + under WebContent + + + + Then double-click on the faces-config.xml node to display + the JSF application configuration file editor + + +

+ Configuration File Editor + + + + + + + +

+ + + = + + + + + JBoss Tools + JSF application + Java + + + = + Adding Navigation to the Application + = + In our simple application, the flow is defined as a single n= avigation rule connecting + two views (presentation files). At this point, we will create = the placeholders for the + two JSP presentation files and then the navigation rule to con= nect them as views. Later, + we will complete the coding for the JSP presentation files. We= can do all of this in the + Diagram mode of the configuration file editor. +

+ + Adding Two Views (JSP Pages) + + + Right-click anywhere on the diagram and select <= emphasis> + New View... + from the pop-up menu + + + In the dialog box, type + pages/inputname + as the value for From-view-id + + + Leave everything else as is + + + Click + Finish + + If you look in the Package Explorer view you sho= uld see a + pages + folder under WebContent. Opening it will r= eveal the JSP file you + just created + + + Back on the diagram, right-click anywhere and se= lect + New View... + from the pop-up menu + + + In the dialog box, type + pages/greeting + as the value for From-view-id + + + Leave everything else as is + + + Click + Finish + + + + = +

+ + Creating the Transition (Navigation Rule) + + + In the diagr= am, select the connection icon third from the top along + the upper left side of the diagram (<= inlinemediaobject diffmk:change=3D"added"> + + + + ) to get an arrow cursor with a two-pronged plug at the arrow's botto= m. + + + = + + + Click on the + pages/inputname + page icon and then click on the + pages/greeting + page icon + + = + + A transition should appear between the two icons. +

+ Transition Between Two Icons + + + + + + + + + Select + File > Save + from the menu bar + + +

+ = + + = + + + + + JBoss Developer Studio + JSF application + Java + + + + Adding a Managed Bean to the Application + To store data in the application, we will use a managed bean= . + + + Click on the + Tree + tab at the bottom of the editing window + + + Select the + Managed Beans + node and then click the + Add... + button displayed along the right side of the e= ditor window + + + Type in + jsfHello.PersonBean + for Class and + personBean + for Name. Leave Scope as is and Generate Sourc= e Code as is + (checked) + + + Click + Finish + + + + personBean will now be selected and three sections o= f information: + Managed Bean + , + Properties + , and + Advanced + , will be displayed about it. Under the Propert= ies section, click the + Add... + button + + + Type in + name + for Property-Name. Leave everything else as is= . (When Property- + Class is not filled in, String is the assumed type) + + + Click + Finish + + + + Select the + personBean + node in the tree + + + You should see this now: +

+ Tree View in Config Editor + + + + + + + + + Select + File > Save + from the menu bar + + + You have now registered the + managed bean + and created a + stub-coded class + file for it. + = + + = + + + + + JBoss Tools + JSF application + Java + + + + Editing the JSP View Files + = + Now we will finish editing the JSP files for our two "views"= using + JSP Visual Page. +

+ inputname.jsp + + + Click on the + Diagram + tab for the configuration file editor + + + Open the editor for this first JSP file by doubl= e-clicking on the + /pages/inputname. jsp<= /property> + icon + + + = + The Visual Page Editor will open in a screen split betwe= en source code along the + top and a WYSIWIG view along the bottom: +

+ Visual Page Editor + + + + + + + Some JSF code is already in the file, because we have ch= osen a template to create + a page. + + + Select the + Visual + tab, so we can work with the editor comple= tely in its WYSIWYG + mode + + + To the right of the editor, in the JBoss Tools P= alette, expand the + JSF HTML + palette folder by selecting it + + +

+ JBoss Tools Palette + + + + + + + + + Click on + form + within this folder, drag the cursor over t= o the editor, and drop + it inside the red box in the editor + + + Another red box will appear inside the first red= box + + + Right-click on the innermost box and select + <h:form> + Attributes from the menu + + + In the value field next to id, type + greeting + and click on the + Close + button + + + Type "Please enter name:" inside the boxes + + + Select + inputText + within the JSF HTML palette folder and dra= g it into the + innermost box in the editor after "Please enter + name:" + + + In the attributes dialog, click in the + value + field next to the value attribute and clic= k on the ... + button + + + Then, select the + Managed Beans > per= sonBean > name + node and click on the + Ok + button + + + Back in the attributes dialog, select the + Advanced + tab, type in + name + as the value for the + "id" + attribute, and then click on the + Finish + button + + + Select + commandButton + within the JSF HTML palette folder and dra= g it into the + innermost box in the editor after the input box + + + In the attributes dialog, click in the value fie= ld next to the + "action" + attribute and click on the ... + button + + + Then, select the + View Actions > gree= ting + node and click on the + OK + button + + + Back in the attributes dialog box, type in "Say = Hello" + as the value for the value attribute ("Say Hello")= and + then click on the + Finish + button + + + The source coding should be something like this now: + +<%@ taglib uri=3D"http://java.sun.com/jsf/core" prefix=3D"f" %> + + + + + + + +Please enter name: + + + + + + +]]> + The editor should look like this: +

+ Visual Page Editor + + + + + + + + + Save the file by selecting + File > Save + from the menu bar + + +

+ greeting.jsp + + + Click on the + faces-config.xml + tab to bring the diagram back + + + Open the editor for the second file by double-cl= icking on the + /pages/greeting.jsp + icon + + + Select the + Visual + tab, so we can work with the editor comple= tely in its WYSIWYG + mode + + + Type "Hello "(note space after Hello) into the + box + + + Select + outputText + within the JSF HTML palette folder and dra= g it into the + innermost box in the editor after "Hello" + + + In the attributes dialog, click in + value + field next to the value attribute and clic= k on the + ... (Browse= ) button + + + Then, select the + Managed Beans > per= sonBean > name + node, click on the + Ok + button, and then click on the + Finish + button + + + Right after the output field, type an + exclamation point + ( + ! + ) + + + The source coding should be something like this now: + +<%@ taglib uri=3D"http://java.sun.com/jsf/core" prefix=3D"f" %> + + + + + + +Hello ! + + + +]]> + + + Save the file + + +

+ + = + + + + + JBoss Tools + JSF application + Java + + + + Creating the Start Page + You also need to create a start page as an entry point into = the application. + + + In the Package Explorer view to the left, right-clic= k + jsfHello > WebContent + and select + New > JSP File + + + + For Name type in + index + , for Template select + JSPRedirect + and click + Finish + + + + A JSP editor will open up on the newly created file. + = + + + In the Source part of the split screen, type + /pages/inputname.jsf + in between the quotes for the page attribute + + + The source coding should look like this now: + + + + + + + +]]> + = + Note the + .jsf + extension for the file name. This is a mapping defined= in the web.xml file + for the project for invoking JavaS= erver Faces when you run the + application. + + + Select + File > Save + from the menu bar + + + + = + + + + + JBoss Tools + JSF application + Java + + + = + Running the Application + Everything is now ready for running our application by using= the JBoss engine. For + controlling JBoss server there is JBoss Server view: +

+ JBoss Server View + + + + + + + + + Start up JBoss by clicking on the icon in JBoss Serv= er view. (If JBoss is + already running, stop it by clicking on the red icon a= nd then start it again. + Remember, the JSF run-time requires restarting the ser= vlet engine when any + changes have been made.) After the messages in the Con= sole tabbed view stop + scrolling, JBoss is available + + = + + Click the Ru= n icon( + + + + ) or right click your project folder and select + Run As > Run on Server<= /property> + : + + + = + This is the equivalent of launching the browser and typing <= emphasis> + http://localhost:8080/jsfHello + into your browser. Our JSF= application should now + appear. + = + = + + + + + JBoss Tools + JSF application + Java + + + + Other Relevant Resources on the topic + JSF on Sun: JavaServer Faces + Technology + Core JSF: Core = JavaServer Faces + API: JSF + API + JSF Tags: JSF Core + Tags + HTML Tags Reference: JSF HTML Tags Reference + JSF Central: JSF Centr= al - Your JavaServer Faces + Community + FAQ: JSF + FAQ + Download: JavaServer + Faces Technology - Download + + In summary, with this tutorial you should now know how to organi= ze JSF sample application + using the wizards provided by JBoss To= ols, configure its stuff and + finally run it on the JBoss Server. + + Find out more features on JSF tooling in our JSF Tools + Reference Guide. If you have questions and suggestions= , please refer to JBoss + Tools Forum. + + = + --===============8518502455082980412==--