Author: mcaspers Date: 2011-03-13 19:34:27 -0400 (Sun, 13 Mar 2011) New Revision: 29727 Added: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7a.png trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7b.png trunk/jsf/docs/jsf_tools_tutorial/jsf_tools_tutorial Modified: trunk/jsf/docs/jsf_tools_tutorial/en-US/adding_navigation.xml trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_4.png trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_6.png trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7.png trunk/jsf/docs/jsf_tools_tutorial/en-US/jsp_view_files.xml Log: "General editing and screenshot updates" Modified: trunk/jsf/docs/jsf_tools_tutorial/en-US/adding_navigation.xml =================================================================== --- trunk/jsf/docs/jsf_tools_tutorial/en-US/adding_navigation.xml 2011-03-13 20:53:44 UTC (rev 29726) +++ trunk/jsf/docs/jsf_tools_tutorial/en-US/adding_navigation.xml 2011-03-13 23:34:27 UTC (rev 29727) @@ -20,6 +20,9 @@ <?dbhtml filename="AddingTwoViewsJSPPages.html"?> <title>Adding Two Views (JSP Pages)</title> <itemizedlist> + <listitem> + <para>Create a new folder called <filename>pages</filename> under the <filename>WebContent</filename> folder.</para> + </listitem> <listitem> <para>Right-click anywhere on the diagram and select <guimenuitem>New View...</guimenuitem> from the context menu.</para> </listitem> Modified: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_4.png =================================================================== (Binary files differ) Modified: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_6.png =================================================================== (Binary files differ) Modified: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7.png =================================================================== (Binary files differ) Added: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7a.png =================================================================== (Binary files differ) Property changes on: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7a.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7b.png =================================================================== (Binary files differ) Property changes on: trunk/jsf/docs/jsf_tools_tutorial/en-US/images/jsf_application/jsf_application_7b.png ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Modified: trunk/jsf/docs/jsf_tools_tutorial/en-US/jsp_view_files.xml =================================================================== --- trunk/jsf/docs/jsf_tools_tutorial/en-US/jsp_view_files.xml 2011-03-13 20:53:44 UTC (rev 29726) +++ trunk/jsf/docs/jsf_tools_tutorial/en-US/jsp_view_files.xml 2011-03-13 23:34:27 UTC (rev 29727) @@ -1,151 +1,148 @@ <?xml version="1.0" encoding="UTF-8"?> <chapter id="jsp_view_files"> - <?dbhtml filename="jsp_view_files.html"?> - <chapterinfo> - <keywordset> - <keyword>JBoss Tools</keyword> - <keyword>JSF application</keyword> - <keyword>Java</keyword> - </keywordset> - </chapterinfo> + <?dbhtml filename="jsp_view_files.html"?> + <chapterinfo> + <keywordset> + <keyword>JBoss Tools</keyword> + <keyword>JSF application</keyword> + <keyword>Java</keyword> + </keywordset> + </chapterinfo> - <title>Editing the JSP View Files</title> - - <para>Now we will finish editing the JSP files for our two &quot;views&quot; using + <title>Editing the JSP View Files</title> + + <para>Now we will finish editing the JSP files for our two &quot;views&quot; using JSP Visual Page Editor.</para> - <section id="Inputname.jsp"> - <title>inputname.jsp</title> - <itemizedlist> - <listitem> - <para>Click on the <emphasis> - <property>Diagram</property> - </emphasis> tab of the configuration file editor</para> - </listitem> - <listitem> - <para>Open the editor for this first JSP file by double-clicking on the <emphasis> - <property>/pages/inputname. 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:</para> - <figure> - <title>Visual Page Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsf_application/jsf_application_6.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Some JSF code is already in the file, because we have chosen a template to create - a page.</para> - <itemizedlist> - <listitem> - <para>Select the <emphasis> - <property>Visual</property> - </emphasis> tab, so we can work with the editor completely in its WYSIWYG - mode</para> - </listitem> - <listitem> - <para>To the right of the editor, in the JBoss Tools Palette, expand the <emphasis> - <property>JSF HTML</property> - </emphasis> palette folder by selecting it</para> - </listitem> - </itemizedlist> - <figure> - <title>JBoss Tools Palette</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsf_application/jsf_application_7.png"/> - </imageobject> - </mediaobject> - </figure> - <itemizedlist> - <listitem> - <para>Click on <emphasis> - <property>form</property> - </emphasis> within this folder, drag the cursor over to the editor, and drop - it inside the red box in the editor</para> - </listitem> - <listitem> - <para>Another red box will appear inside the first red box</para> - </listitem> - <listitem> - <para>Right-click on the innermost box and select <emphasis role="bold"> - <property>&lt;h:form&gt;</property> - </emphasis> Attributes from the menu</para> - </listitem> - <listitem> - <para>In the value field next to - <property>id</property> - , type <emphasis> - <property>&quot;greeting&quot;</property> - </emphasis> and click on the <emphasis> - <property>Close</property> - </emphasis> button</para> - </listitem> - <listitem> - <para>Type &quot;Please enter name:&quot; inside the boxes</para> - </listitem> - <listitem> - <para>Select <emphasis> - <property>inputText</property> - </emphasis> within the JSF HTML palette folder and drag it into the - innermost box in the editor after &quot;Please enter - name:&quot;</para> - </listitem> - <listitem> - <para>In the attributes dialog, click in the <emphasis> + <section id="Inputname.jsp"> + <title>inputname.jsp</title> + <itemizedlist> + <listitem> + <para>Click on the <guilabel>Diagram</guilabel> tab of the configuration file editor.</para> + </listitem> + <listitem> + <para>Open the editor for this first JSP file by double-clicking on the <guilabel>/pages/inputname.jsp</guilabel> 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:</para> + <figure> + <title>Visual Page Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsf_application/jsf_application_6.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Some JSF code is already in the file, because we have chosen a template to create a page.</para> + <itemizedlist> + <listitem> + <para>Select the <guilabel>Visual</guilabel> tab, so we can work with the editor completely in its WYSIWYG mode.</para> + </listitem> + <listitem> + <para>To the right of the editor, in the JBoss Tools Palette, expand the <guilabel>JSF HTML</guilabel> palette folder by selecting it.</para> + </listitem> + </itemizedlist> + <figure> + <title>JBoss Tools Palette</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsf_application/jsf_application_7.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para> + Click on <guimenuitem>form</guimenuitem> within this folder, drag the cursor over to the editor, and drop it inside the <code>&lt;f:view&gt;</code> element. This can be done by dragging the form element onto the horizontal line at the top of the <code>&lt;f:view&gt;</code> element. You should see a message saying <guilabel>Place at the beginning of &lt;f:view&gt;</guilabel>. + </para> + </listitem> + </itemizedlist> + <figure> + <title>Inserting the form element</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsf_application/jsf_application_7a.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>The <guilabel>Insert Tags</guilabel> dialog box will be displayed.</para> + </listitem> + <listitem> + <para> + In the value field next to <guilabel>id</guilabel>, type <guilabel>greeting</guilabel> and click on the <guibutton>Close</guibutton> button. + </para> + </listitem> + <listitem> + <para>Type &quot;Please enter name:&quot; inside the <code>&lt;h:form&gt;</code> element.</para> + </listitem> + <listitem> + <para> + Select <guimenuitem>inputText</guimenuitem> within the JSF HTML palette folder place it at the end of the<code>&lt;h:form&gt;</code> element. + </para> + </listitem> + </itemizedlist> + <figure> + <title>Inserting the input text element</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsf_application/jsf_application_7b.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>In the attributes dialog, click in the <emphasis> <property>value</property> - </emphasis> field next to the value attribute and click on the <property>... + </emphasis> field next to the value attribute and click on the <property>... </property>button</para> - </listitem> - <listitem> - <para>Then, select the <emphasis> + </listitem> + <listitem> + <para>Then, select the <emphasis> <property>Managed Beans > personBean > name</property> - </emphasis> node and click on the <emphasis> + </emphasis> node and click on the <emphasis> <property>Ok</property> - </emphasis> button</para> - </listitem> - <listitem> - <para>Back in the attributes dialog type in <emphasis> + </emphasis> button</para> + </listitem> + <listitem> + <para>Back in the attributes dialog type in <emphasis> <property>&quot;name&quot;</property> - </emphasis> as the value for the <emphasis role="italic"> + </emphasis> as the value for the <emphasis role="italic"> <property>id</property> - </emphasis> attribute, and then click on the <emphasis> + </emphasis> attribute, and then click on the <emphasis> <property>Close</property> - </emphasis> button</para> - </listitem> - <listitem> - <para>Select <emphasis> + </emphasis> button</para> + </listitem> + <listitem> + <para>Select <emphasis> <property>commandButton</property> - </emphasis> within the JSF HTML palette folder and drag it into the + </emphasis> within the JSF HTML palette folder and drag it into the innermost box in the editor after the input box</para> - </listitem> - <listitem> - <para>In the attributes dialog, click in the value field next to the <emphasis> + </listitem> + <listitem> + <para>In the attributes dialog, click in the value field next to the <emphasis> <property>action</property> - </emphasis> attribute and click on the <property>... + </emphasis> attribute and click on the <property>... </property>button</para> - </listitem> - <listitem> - <para>Then, select the <emphasis> + </listitem> + <listitem> + <para>Then, select the <emphasis> <property>View Actions > greeting</property> - </emphasis> node and click on the <emphasis> + </emphasis> node and click on the <emphasis> <property>OK</property> - </emphasis> button</para> - </listitem> - <listitem> - <para>Back in the attributes dialog box, type in &quot;Say Hello&quot; + </emphasis> button</para> + </listitem> + <listitem> + <para>Back in the attributes dialog box, type in &quot;Say Hello&quot; as the value for the value attribute (&quot;Say Hello&quot;) and then click on the <emphasis> <property>Close</property> - </emphasis> button</para> - </listitem> - </itemizedlist> - <para>The source coding should be something like this now:</para> - <programlisting role="XML"><![CDATA[<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> + </emphasis> button</para> + </listitem> + </itemizedlist> + <para>The source coding should be something like this now:</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" %> <html> <head> @@ -162,77 +159,77 @@ </body> </html> ]]></programlisting> - <para>The editor should look like this:</para> - <figure> - <title>Visual Page Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/jsf_application/jsf_application_8.png"/> - </imageobject> - </mediaobject> - </figure> - <itemizedlist> - <listitem> - <para>Save the file by selecting <emphasis> + <para>The editor should look like this:</para> + <figure> + <title>Visual Page Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/jsf_application/jsf_application_8.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Save the file by selecting <emphasis> <property>File > Save</property> - </emphasis> from the menu bar</para> - </listitem> - </itemizedlist> - </section> - <section id="Greeting.jsp"> - <title>greeting.jsp</title> - <itemizedlist> - <listitem> - <para>Click on the <emphasis> + </emphasis> from the menu bar</para> + </listitem> + </itemizedlist> + </section> + <section id="Greeting.jsp"> + <title>greeting.jsp</title> + <itemizedlist> + <listitem> + <para>Click on the <emphasis> <property>faces-config.xml</property> - </emphasis> tab to bring the diagram back</para> - </listitem> - <listitem> - <para>Open the editor for the second file by double-clicking on the <emphasis> + </emphasis> tab to bring the diagram back</para> + </listitem> + <listitem> + <para>Open the editor for the second file by double-clicking on the <emphasis> <property>/pages/greeting.jsp</property> - </emphasis> icon</para> - </listitem> - <listitem> - <para>Select the <emphasis> + </emphasis> icon</para> + </listitem> + <listitem> + <para>Select the <emphasis> <property>Visual</property> - </emphasis> tab, so we can work with the editor completely in its WYSIWYG + </emphasis> tab, so we can work with the editor completely in its WYSIWYG mode</para> - </listitem> - <listitem> - <para>Type &quot;Hello &quot;(note space after Hello) into the + </listitem> + <listitem> + <para>Type &quot;Hello &quot;(note space after Hello) into the box</para> - </listitem> - <listitem> - <para>Select <emphasis> + </listitem> + <listitem> + <para>Select <emphasis> <property>outputText</property> - </emphasis> within the JSF HTML palette folder and drag it into the + </emphasis> within the JSF HTML palette folder and drag it into the innermost box in the editor after &quot;Hello&quot;</para> - </listitem> - <listitem> - <para>In the attributes dialog, click in <emphasis> + </listitem> + <listitem> + <para>In the attributes dialog, click in <emphasis> <property>value</property> - </emphasis> field next to the value attribute and click on the + </emphasis> field next to the value attribute and click on the <property>...</property> (Browse) button</para> - </listitem> - <listitem> - <para>Then, select the <emphasis> + </listitem> + <listitem> + <para>Then, select the <emphasis> <property>Managed Beans > personBean > name</property> - </emphasis> node, click on the <emphasis> + </emphasis> node, click on the <emphasis> <property>Ok</property> - </emphasis> button, and then click on the <emphasis> + </emphasis> button, and then click on the <emphasis> <property>Close</property> - </emphasis> button</para> - </listitem> - <listitem> - <para>Right after the output field, type an <emphasis> + </emphasis> button</para> + </listitem> + <listitem> + <para>Right after the output field, type an <emphasis> <property>exclamation point</property> - </emphasis> (<emphasis> + </emphasis> (<emphasis> <property>!</property> - </emphasis>)</para> - </listitem> - </itemizedlist> - <para>The source coding should be something like this now:</para> - <programlisting role="XML"><![CDATA[<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> + </emphasis>)</para> + </listitem> + </itemizedlist> + <para>The source coding should be something like this now:</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" %> <html> <head> @@ -245,10 +242,10 @@ </body> </html> ]]></programlisting> - <itemizedlist> - <listitem> - <para>Save the file</para> - </listitem> - </itemizedlist> - </section> - </chapter> \ No newline at end of file + <itemizedlist> + <listitem> + <para>Save the file</para> + </listitem> + </itemizedlist> + </section> +</chapter> \ No newline at end of file Added: trunk/jsf/docs/jsf_tools_tutorial/jsf_tools_tutorial =================================================================== --- trunk/jsf/docs/jsf_tools_tutorial/jsf_tools_tutorial (rev 0) +++ trunk/jsf/docs/jsf_tools_tutorial/jsf_tools_tutorial 2011-03-13 23:34:27 UTC (rev 29727) @@ -0,0 +1 @@ +link /shared/JBossToolsDocs/trunk/jsf/docs/jsf_tools_tutorial/ \ No newline at end of file Property changes on: trunk/jsf/docs/jsf_tools_tutorial/jsf_tools_tutorial ___________________________________________________________________ Added: svn:special + *