Author: msorokin Date: 2009-03-09 12:16:25 -0400 (Mon, 09 Mar 2009) New Revision: 14114 Modified: trunk/seam/docs/reference/en/modules/seam_editors.xml Log: https://jira.jboss.org/jira/browse/JBDS-387 Documenting pages.xml editor Modified: trunk/seam/docs/reference/en/modules/seam_editors.xml =================================================================== --- trunk/seam/docs/reference/en/modules/seam_editors.xml 2009-03-09 16:14:46 UTC (rev 14113) +++ trunk/seam/docs/reference/en/modules/seam_editors.xml 2009-03-09 16:16:25 UTC (rev 14114) @@ -9,15 +9,359 @@ </keywordset> </chapterinfo> - <title>Seam Editors Features</title> + <title>Seam Editors</title> + + + <para>This chapter tells about Seam Editors and their features.</para> + + <section> + <title>Visual Page Editor</title> + <para>Visual Page Editor fits perfectly for authoring view Seam pages. The major features of VPE are listed in <link linkend="SeamEditors">Main Features of Seam Editors</link> </para> + <para>You can also read more about Visual Page Editor in <ulink url="http://download.jboss.org/jbosstools/nightly-docs/en/jsf/html/e... Page Editor</ulink> chapter of &quot;Visual Web Tools Reference Guide&quot;.</para> + </section> + + + + + <section> + <title>Seam Pages Editor</title> + + + <para> + <property>Seam Pages Editor</property> provides a handy way to edit the <property>pages.xml</property> file. + + </para> + + <para> + You can edit the pages.xml file in three modes: Graphical, Tree and Source. + + </para> + + <section> + <title>Graphical Mode</title> + + + <para>Graphical mode provides you with a set of visual tools to organize your project pageflow, exception handling etc.</para> + <figure> + <title>Seam Pages Editor: Graphical View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/seam_editors_7.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The Graphical part of the editor has some visual elements. The table below shows graphical representation of the elements and explains their meanings. </para> +<table> + <title>Pages Editor: Graphical View. Visual elements</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Element</entry> + + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/element_page.png"/> + </imageobject> + </mediaobject> + </entry> + <entry><para>A yellow box with a solid border represents a <emphasis> + <property>&lt;page&gt;</property> + </emphasis> element. + </para></entry> + </row> + <row> + <entry> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/element_param.png"/> + </imageobject> + </mediaobject></entry> + <entry> + <para>Pressing on the plus icon (<inlinemediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/icon_plus.png"/> + </imageobject> + </inlinemediaobject>) + + + on the <emphasis> + <property>&lt;page&gt;</property> + </emphasis> element reveals a box that lists the parameters for the page.</para> + </entry> + + </row> + + <row> + <entry> <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/element_page2.png"/> + </imageobject> + </mediaobject></entry> + <entry> + <para>A red cross in the upper left corner of the page box indicates that the view-id is not found in the project.</para> + </entry> + </row> + + <row> + <entry><mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/element_page1.png"/> + </imageobject> + </mediaobject></entry> + <entry> <para> + A gray box with a dashed border represents a page that has navigation + (navigation rule) to but the page is not defined in the page.xml file. + </para></entry> + </row> + + + <row> + <entry> <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/element_exception.png"/> + </imageobject> + </mediaobject></entry> + <entry> <para>An &lt;exception&gt; is represented by a blue box with a orange diamond.</para></entry> + </row> + + + + + + </tbody> + </tgroup> +</table> + + + <para>Pageflow relations are shown with gray arrows, when you select a relationship the arrow is changed to orange. </para> + + + + <para>On the lefthand side of the Graphical view of <property>Seam Page Editor</property> you can find a toolbar with a set of icons for the most frequently used commands. </para> + + <table> + <title>Pages Editor: Graphical View. Commands Icons</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Icon Image</entry> + + <entry>Command</entry> + </row> + </thead> + <tbody> + <row> + <entry> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/icon_select.png"/> + </imageobject> + </inlinemediaobject> + + </entry> + <entry>Select a page element</entry> + + </row> + + <row> + <entry><inlinemediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/icon_marquee.png"/> + </imageobject> + </inlinemediaobject></entry> + <entry>Marquee a page item</entry> + </row> + + + <row> + <entry> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/icon_new_link.png"/> + </imageobject> + </inlinemediaobject> + + </entry> + <entry>Add a page relationship</entry> + </row> + + + <row> + <entry> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/icon_exception.png"/> + </imageobject> + </inlinemediaobject> + + </entry> + <entry>Add an exception rule</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>Context menus are also available when you click either on an item or a blank space.</para> + + + <para>A context menu called on a blank space of the diagram provides the following options:</para> + <itemizedlist> + <listitem><para><emphasis role="bold">Page</emphasis> creates a new page element on the diagram</para></listitem> + <listitem><para><emphasis role="bold">Exception</emphasis> creates a new exception element on the diagram</para></listitem> + <listitem><para><emphasis role="bold">Auto Layout</emphasis> formats the layout of the diagram automatically</para></listitem> + <listitem><para><emphasis role="bold">Select Element</emphasis> calls the <property>Select Element Wizard</property> with a filter to perform a quick search through the <property>pages</property> file </para></listitem> + </itemizedlist> + <para>Rightclicking on a <emphasis> + <property>&lt;page&gt;</property> + </emphasis> element calls a context menu where you can choose the following options if you click on the <emphasis role="bold">New</emphasis> menu item: </para> + + + + <itemizedlist> + <listitem><para><emphasis role="bold">Rule</emphasis> defines a new navigation rule for the element </para></listitem> + <listitem><para><emphasis role="bold">Param</emphasis> adds a <emphasis> + <property>&lt;param&gt;</property> tag + </emphasis> to the <emphasis> + <property>&lt;page&gt;</property> + </emphasis> element</para></listitem> + </itemizedlist> + </section> + + + <section> + <title>Tree Mode</title> + + <para>Tree Mode provides a wider range of options and way to edit and modify the pages.xml file.</para> + + + + <figure> + <title>Seam Pages Editor: Tree View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/seam_editors_8.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + In this mode all elements and attributes of the page.xml + file can be viewed and edited in a visual, user friendly way. + </para> + + </section> + + + <section> + <title>Outline Support for Seam Pages Editor</title> + + + <para>Seam Pages Editor provides <property>Outline</property> view support. + You can explore the pages.xml using Outline view in two modes: <property>Tree</property> ( <inlinemediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/outline_tree.png"/> + </imageobject> + </inlinemediaobject> ) and <property>Diagram Navigation</property> ( <inlinemediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/outline_navigation.png"/> + </imageobject> + </inlinemediaobject> ).</para> + + <para> + The Diagram Navigation mode of Outline view gives a birds-view of the layout to allow quick navigation for large-scale applications. + </para> + + <figure> + <title>Outline view: Diagram Navigation mode</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/seam_editors_9.png"/> + </imageobject> + </mediaobject> + </figure> + + + <para>The Tree mode shows a tree for every element in the pages.xml file. You can get a quick overview of the whole file and selecting an element the related element is highlighted in the Graphical, Tree or Source page of Seam Pages Editor.</para> + + + + <figure> + <title>Outline view: Tree mode</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/seam_editors_10.png"/> + </imageobject> + </mediaobject> + </figure> + + + + + </section> + + + </section> + + + <section> + + + <title>Seam Components Editor</title> + + <para>When editing <property>components.xml</property> a structured tree editor is available + in addition to pure source editing. It has a graphical view (Tree tab) and source + (Source tab).</para> + + <figure> + <title>component.xml Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/seam_editors_4.png"/> + </imageobject> + </mediaobject> + </figure> + + <note> + <title>Note:</title> + + <para>You can view and edit <property>components.xml</property> and other xml files + directly in the Project Explorer and Properties sheet without opening the + components.xml editor.</para> + </note> + <figure> + <title>component.xml Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/seam_editors/seam_editors_5.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + + + + <section id="SeamEditors"> + <title>Main Features of Seam Editors</title> + + + <para>In this chapter you will know what Seam Editors features are and how to work with them. </para> <section id="ContentAssist"> <title>Content Assist</title> - <para><property>Content Assist</property> (Ctrl + Space) is available when using EL variables in the following file formats:</para> + <para><property>Content Assist</property> (Ctrl + Space) is available when using EL expressions in the following file formats:</para> <itemizedlist> <listitem> <para>JSP</para> @@ -48,8 +392,7 @@ <title>Note:</title> <para>To get Code Assist available for an externally generated and imported project, - don&apos;t forget to enable Seam features and configure Seam Settings in <link - linkend="project_pref">Project Preferences</link>.</para> + don&apos;t forget to enable Seam features and configure Seam Settings in <link linkend="project_pref">Project Preferences</link>.</para> </note> <section id="components_code_assist" role="new"> @@ -157,38 +500,5 @@ execute all the active WTP validations.</para> </section> - <section id="ComponentsEditor" > - <title>Structured components.xml Editor</title> - - <para>When editing <property>components.xml</property> a structured tree editor is available - in addition to pure source editing. It has a graphical view (Tree tab) and source - (Source tab).</para> - - <figure> - <title>component.xml Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/seam_editors/seam_editors_4.png"/> - </imageobject> - </mediaobject> - </figure> - - <note> - <title>Note:</title> - - <para>You can view and edit <property>components.xml</property> and other xml files - directly in the Project Explorer and Properties sheet without opening the - components.xml editor.</para> - </note> - <figure> - <title>component.xml Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/seam_editors/seam_editors_5.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> - +</section> </chapter>