[jbosstools-commits] JBoss Tools SVN: r29798 - trunk/jsf/docs/userguide/en-US.

Author: mcaspers Date: 2011-03-15 17:57:49 -0400 (Tue, 15 Mar 2011) New Revision: 29798 Modified: trunk/jsf/docs/userguide/en-US/Book_Info.xml trunk/jsf/docs/userguide/en-US/Visual_Web_Tools.xml trunk/jsf/docs/userguide/en-US/css_perspective.xml trunk/jsf/docs/userguide/en-US/editors.xml trunk/jsf/docs/userguide/en-US/palette.xml trunk/jsf/docs/userguide/en-US/spring_tools.xml Log: "General editing and screenshot updates" Modified: trunk/jsf/docs/userguide/en-US/Book_Info.xml =================================================================== --- trunk/jsf/docs/userguide/en-US/Book_Info.xml 2011-03-15 18:41:32 UTC (rev 29797) +++ trunk/jsf/docs/userguide/en-US/Book_Info.xml 2011-03-15 21:57:49 UTC (rev 29798) @@ -2,22 +2,22 @@ <!DOCTYPE Book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [ ]> <bookinfo> - <title>Visual Web Tools Reference Guide</title> - <subtitle>Provides information relating to the Visual Web Tools module.</subtitle> - <productname>JBoss Developer Studio</productname> - <productnumber>4.0</productnumber> - <edition>4.0.0</edition> - <pubsnumber>11</pubsnumber> - <abstract> - <para>The Visual Web Tools Reference Guide explains extensive collection of specialized wizards, editors and views that can be used in various scenarios while developing Web applications.</para> - </abstract> - <corpauthor> - <inlinemediaobject> - <imageobject> - <imagedata fileref="Common_Content/images/title_logo.svg" format="SVG"></imagedata> - </imageobject> - </inlinemediaobject> - </corpauthor> - <xi:include href="Common_Content/Legal_Notice.xml" xmlns:xi="http://www.w3.org/2001/XInclude"></xi:include> - <xi:include href="Author_Group.xml" xmlns:xi="http://www.w3.org/2001/XInclude"></xi:include> -</bookinfo> +<title>Visual Web Tools Reference Guide</title> +<subtitle>Provides information relating to the Visual Web Tools module.</subtitle> +<productname>JBoss Developer Studio</productname> +<productnumber>4.0</productnumber> +<edition>4.0.0</edition> +<pubsnumber>4</pubsnumber> +<abstract> +<para>The Visual Web Tools Reference Guide explains extensive collection of specialized wizards, editors and views that can be used in various scenarios while developing Web applications.</para> +</abstract> +<corpauthor> +<inlinemediaobject> +<imageobject> +<imagedata fileref="Common_Content/images/title_logo.svg" format="SVG"></imagedata> +</imageobject> +</inlinemediaobject> +</corpauthor> +<xi:include href="Common_Content/Legal_Notice.xml" xmlns:xi="http://www.w3.org/2001/XInclude"></xi:include> +<xi:include href="Author_Group.xml" xmlns:xi="http://www.w3.org/2001/XInclude"></xi:include> +</bookinfo> \ No newline at end of file Modified: trunk/jsf/docs/userguide/en-US/Visual_Web_Tools.xml =================================================================== --- trunk/jsf/docs/userguide/en-US/Visual_Web_Tools.xml 2011-03-15 18:41:32 UTC (rev 29797) +++ trunk/jsf/docs/userguide/en-US/Visual_Web_Tools.xml 2011-03-15 21:57:49 UTC (rev 29798) @@ -1,175 +1,239 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter id="Visual_Web_Tools"> - <?dbhtml filename="Visual_Web_Tools.html"?> - <chapterinfo> - <keywordset> - <keyword>JBoss Developer Studio</keyword> - <keyword>JBDS</keyword> - <keyword>Java</keyword> - <keyword>Web Tools</keyword> - </keywordset> - </chapterinfo> - - <title>Visual Web Tools</title> - - <para>This guide covers the usage of Visual Web Tools in <property>JBoss Developer - Studio</property> and <property>JBoss Tools</property>. The difference between these products is - that JBoss Tools are just a set of Eclipse plugins where JBoss Developer Studio adds the following functionality:</para> - <itemizedlist> - <listitem> - <para>an installer</para> - </listitem> - <listitem> - <para>Eclipse and Web Tools preconfigured</para> - </listitem> - <listitem> - <para>JBoss EAP with JBoss AS and Seam preconfigured</para> - </listitem> - <listitem> - <para>3rd party plugins bundled and configured</para> - </listitem> - <listitem> - <para>access to RHEL and Red Hat Network</para> - </listitem> - <listitem> - <para>access to the JBoss/Red Hat supported software</para> - </listitem> - </itemizedlist> - - <para>For additional information, please visit the JBoss Developer Studio home page at: <ulink - url="http://www.jboss.com/products/devstudio">http://www.jbo... - - <para>In JBoss Tools there is an extensive collection of specialized wizards, editors and views - that can be used in various scenarios while developing Web applications. The following chapters - walk through these features.</para> - - <section id="key_features"> - <title>Key Features of Visual Web Tools</title> - <para>Here is the table of the main features of Visual Web Tools:</para> - - <table> - - <title>Key Functionality for Visual Web Tools</title> - <tgroup cols="3"> - - <colspec colnum="1" align="left" colwidth="2*"/> - <colspec colnum="2" colwidth="4*"/> - <colspec colnum="3" colwidth="2*" align="left" /> - - <thead> - <row> - <entry>Feature</entry> - <entry>Benefit</entry> - <entry>Chapter</entry> - </row> - </thead> - <tbody> - <row> - <entry>Visual Page Editor</entry> - <entry>Powerful and customizable visual page editor. Possibility to develop an application - using any web technology: jsf, seam, struts, jsp, html and others. Developing using three - tabs: visual/source, source and preview. Fast and easy switching between these tabs. - Split screen design of visual and source views. Full and instant synchronization between - source and visual views. Integration with properties and outline views. Graphical toolbar to - add inline styling to any tag.</entry> - <entry> - <xref linkend="visual_page"/> - </entry> - </row> - - - <row> - <entry>Multiple Editors</entry> - <entry>An extensive collection of specialized editors for different file types: properties, TLD, web.xml, tiles, and so on: Graphical Properties Editor, - Graphical TLD Editor, Graphical Web Application File (web.xml) Editor, CSS Editor, JavaScript Editor, XSD Editor, Support for XML Schema.</entry> - <entry> - <xref linkend="more_editors"/> - </entry> - </row> - - - - <row> - <entry>JBoss Tools Palette</entry> - <entry>Organizing various tags by groups, inserting tags into a jsp or xhtml page with one - click, adding custom or 3rd party tag libraries into the palette, easy controlling the number - of tag groups shown on the palette.</entry> - <entry> - <xref linkend="palette"/> - </entry> - </row> - - <row> - <entry>Web Projects View</entry> - <entry>Visualizing and displaying projects by function. Easy selecting of different kinds of - items and dropping them into jsp pages. Using context menus to develop the application. Using - icon shortcuts to create and import JSF and Struts projects. Expanding and inspecting tag - library files. Selecting custom and third-party tag libraries to drag and drop onto the JBoss - Tools Palette.</entry> - <entry> - <xref linkend="web_projects"/> - </entry> - </row> - - <row> - <entry>OpenOn</entry> - <entry>Easy navigation between views and other parts of your projects.</entry> - <entry> - <xref linkend="OpenOnSelection4Hyperlinknavigation"/> - </entry> - </row> - - <row> - <entry>Content Assist</entry> - <entry>Code completion proposals while working with html, java, JavaScript , xml, jsp, xhtml, seam project - and jsf configuration files. Content assist based on project data (dynamic code assist). Code completion - for values from property files, beans attributes and - methods, navigation rule outcomes and jsf variables.</entry> - <entry> - <xref linkend="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"/> - </entry> - </row> - - <row> - <entry>Drag-and-Drop</entry> - <entry>Possibility of inserting any tag onto the page you are editing by just drag-and-droping - it from the palette to this page. Adding any properties, managed bean attributes, navigation - rules, tag library file declarations, jsp files from web projects view by clicking them and - dragging to source code.</entry> - <entry> - <xref linkend="visual_page"/> - <xref linkend="DragAndDrop"/> - </entry> - </row> - - <row> - <entry>RichFaces Support</entry> - <entry>Tight integration between JBDS and <ulink url="http://www.jboss.org/jbossrichfaces">RichFaces</ulin... frameworks. Easy managing RichFaces - components in any web application. Support for RichFaces and Ajax4jsf libraries in JBoss - Tools Palette. Rendering RichFaces components in Visual Page Editor.</entry> - <entry> - <xref linkend="richfaces_support"/> - </entry> - </row> - - <row> - <entry>Flexible Configuration</entry> - <entry>Various features of JBoss Developer Studio can be easily configured via the Preferences screen.</entry> - <entry> - <xref linkend="preferences"/> - </entry> - </row> - - - </tbody> - </tgroup> - </table> - </section> - -<section> - <title>Other relevant resources on the topic</title> - <para>All JBoss Developer Studio/JBoss Tools release documentation you can find at<ulink url="http://docs.jboss.org/tools/">http://docs.jboss.org/too... in the corresponding release directory.</para> - <para>The latest documentation builds are available at <ulink url="http://download.jboss.org/jbosstools/nightly-docs/">htt... -</section> - -</chapter> +<?xml version="1.0" encoding="UTF-8"?> +<chapter id="Visual_Web_Tools"> +<?dbhtml filename="Visual_Web_Tools.html"?> + <chapterinfo> + <keywordset> + <keyword>JBoss Developer Studio</keyword> + + <keyword>JBDS</keyword> + + <keyword>Java</keyword> + + <keyword>Web Tools</keyword> + </keywordset> + </chapterinfo> + <title>Visual Web Tools</title> + <para> + This guide covers the usage of Visual Web Tools in <property>JBoss Developer Studio</property> and <property>JBoss Tools</property>. The difference between these products is that JBoss Tools are just a set of Eclipse plugins where JBoss Developer Studio adds the following functionality: + </para> + + <itemizedlist> + <listitem> + <para> + An installer + </para> + </listitem> + + <listitem> + <para> + Eclipse and Web Tools preconfigured + </para> + </listitem> + + <listitem> + <para> + JBoss EAP with JBoss AS and Seam preconfigured + </para> + </listitem> + + <listitem> + <para> + 3rd party plugins bundled and configured + </para> + </listitem> + + <listitem> + <para> + Access to Red Hat Enterprise Linux and Red Hat Network + </para> + </listitem> + + <listitem> + <para> + Access to the JBoss and Red Hat supported software + </para> + </listitem> + </itemizedlist> + + <para> + For additional information, please visit the <ulink + url="http://www.jboss.com/products/devstudio">JBoss Developer Studio home page</ulink>. + </para> + + <para> + In JBoss Tools there is an extensive collection of specialized wizards, editors and views that can be used in various scenarios while developing Web applications. The following chapters walk through these features. + </para> + + <section id="key_features"> + <title>Key Features of Visual Web Tools</title> + <para> + Here is the table of the main features of Visual Web Tools: + </para> + + <table> + <title>Key Functionality for Visual Web Tools</title> + <tgroup cols="3"> + <colspec colnum="1" align="left" colwidth="2*"/> + + <colspec colnum="2" colwidth="4*"/> + + <colspec colnum="3" colwidth="2*" align="left" /> + + <thead> + <row> + <entry> + Feature + </entry> + + <entry> + Benefit + </entry> + + <entry> + Chapter + </entry> + </row> + </thead> + + <tbody> + <row> + <entry> + Visual Page Editor + </entry> + + <entry> + Powerful and customizable visual page editor that provides the ability to develop an application using any web technology including jsf, seam, struts, jsp, html and others. Development is done using three tabs: visual/source, source and preview. Fast and easy switching between these tabs. Split screen design of visual and source views. Full and instant synchronization between source and visual views. Integration with properties and outline views. Graphical toolbar to add inline styling to any tag. + </entry> + + <entry> + <xref linkend="visual_page"/> + </entry> + </row> + + <row> + <entry> + Multiple Editors + </entry> + + <entry> + An extensive collection of specialized editors for different file types including properties, TLD, web.xml, tiles, and so on. These include Graphical Properties Editor, Graphical TLD Editor, Graphical Web Application File (<filename>web.xml</filename>) Editor, CSS Editor, JavaScript Editor, XSD Editor, and support for XML Schema. + </entry> + + <entry> + <xref linkend="more_editors"/> + </entry> + </row> + + <row> + <entry> + JBoss Tools Palette + </entry> + + <entry> + Organizing various tags by groups, inserting tags into a jsp or xhtml page with one click, adding custom or 3rd party tag libraries into the palette, easy controlling the number of tag groups shown on the palette. + </entry> + + <entry> + <xref linkend="palette"/> + </entry> + </row> + + <row> + <entry> + Web Projects View + </entry> + + <entry> + Visualizing and displaying projects by function. Easy selecting of different kinds of items and dropping them into jsp pages. Using context menus to develop the application. Using icon shortcuts to create and import JSF and Struts projects. Expanding and inspecting tag library files. Selecting custom and third-party tag libraries to drag and drop onto the JBoss Tools Palette. + </entry> + + <entry> + <xref linkend="web_projects"/> + </entry> + </row> + + <row> + <entry> + OpenOn + </entry> + + <entry> + Easy navigation between views and other parts of your projects. + </entry> + + <entry> + <xref linkend="OpenOnSelection4Hyperlinknavigation"/> + </entry> + </row> + + <row> + <entry> + Content Assist + </entry> + + <entry> + Code completion proposals while working with html, java, JavaScript , xml, jsp, xhtml, seam project and jsf configuration files. Content assist based on project data (dynamic code assist). Code completion for values from property files, beans attributes and methods, navigation rule outcomes and jsf variables. + </entry> + + <entry> + <xref linkend="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"/> + </entry> + </row> + + <row> + <entry> + Drag-and-Drop + </entry> + + <entry> + Possibility of inserting any tag onto the page you are editing by just drag-and-droping it from the palette to this page. Adding any properties, managed bean attributes, navigation rules, tag library file declarations, jsp files from web projects view by clicking them and dragging to source code. + </entry> + + <entry> + <xref linkend="visual_page"/> <xref linkend="DragAndDrop"/> + </entry> + </row> + + <row> + <entry> + RichFaces Support + </entry> + + <entry> + Tight integration between JBDS and <ulink url="http://www.jboss.org/jbossrichfaces">RichFaces</ulin... frameworks. Easy managing RichFaces components in any web application. Support for RichFaces and Ajax4jsf libraries in JBoss Tools Palette. Rendering RichFaces components in Visual Page Editor. + </entry> + + <entry> + <xref linkend="richfaces_support"/> + </entry> + </row> + + <row> + <entry> + Flexible Configuration + </entry> + + <entry> + Various features of JBoss Developer Studio can be easily configured via the Preferences screen. + </entry> + + <entry> + <xref linkend="preferences"/> + </entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Other relevant resources on the topic</title> + <para> + All JBoss Developer Studio and JBoss Tools release documentation can be found on the <ulink url="http://docs.redhat.com/docs/en-US/index.html">RedHat Documentation</ulink> website in the corresponding release directory. + </para> + + <para> + The latest documentation builds are available as <ulink url="http://download.jboss.org/jbosstools/nightly-docs/">nig... builds</ulink>. + </para> + </section> +</chapter> Modified: trunk/jsf/docs/userguide/en-US/css_perspective.xml =================================================================== --- trunk/jsf/docs/userguide/en-US/css_perspective.xml 2011-03-15 18:41:32 UTC (rev 29797) +++ trunk/jsf/docs/userguide/en-US/css_perspective.xml 2011-03-15 21:57:49 UTC (rev 29798) @@ -1,247 +1,315 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter id="css_perspective"> - <?dbhtml filename="css_perspective.html"?> - <chapterinfo> - <keywordset> - <keyword>CSS Editing Perspective</keyword> - <keyword>css</keyword> - <keyword>html</keyword> - </keywordset> - </chapterinfo> - <title>CSS Editing Perspective</title> - <para>In this chapter we will discuss CSS Editing Perspective views. - More information about style sheets can be found in - <xref linkend="pages_styling"/> - of Editor chapter. +<?dbhtml filename="css_perspective.html"?> + <chapterinfo> + <keywordset> + <keyword>CSS Editing Perspective</keyword> + + <keyword>css</keyword> + + <keyword>html</keyword> + </keywordset> + </chapterinfo> + <title>CSS Editing Perspective</title> + <para> + In this chapter we will discuss CSS Editing Perspective views. More information about style sheets can be found in <xref linkend="pages_styling"/> of Editor chapter. + </para> + + <para> + The CSS Editing Perspective combines a set of views which allow you to see the structure of your css files, edit them and see the results. To use this perspective you need to choose <menuchoice><guimenuitem>Window</guimenuitem><guimenuitem>Open Perspective</guimenuitem><guimenuitem>CSS Editing</guimenuitem></menuchoice>. All of the views are fully synchronized with each other:the changes being made in one view are reflected in othes at once. + </para> + + <para> + As you know there are three ways of inserting a style sheet: + </para> + + <itemizedlist> + <listitem> + <para> + External style sheet (.css file) + </para> + </listitem> + + <listitem> + <para> + Internal style sheet (using the <emphasis><property>&lt;style&gt;</property></emphasis> tag in the head section of an HTML/XHTML/JSP page) + </para> + </listitem> + + <listitem> + <para> + Inline style (using style attribute) + </para> + </listitem> + </itemizedlist> + + <para> + Using CSS Editing Perspective you can change your style sheet, inserted in any of the possible places described before in three ways: + </para> + + <itemizedlist> + <listitem> + <para> + directly in your Editor + </para> + </listitem> + + <listitem> + <para> + using <xref linkend="CSSPropertiesView"/> + </para> + </listitem> + + <listitem> + <para> + using <xref linkend="PropertiesView"/> + </para> + </listitem> + </itemizedlist> + + <figure> + <title>CSS Editing Perspective</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor.png"/> + </imageobject> + </mediaobject> + </figure> + + <section id="OutlineView"> +<?dbhtml filename="OutlineView.html"?> + <title>Outline view</title> + <para> + Using this view you can easily skip between the selectors described in the source files. See the list of properties in any selector just by clicking the triangle near it. </para> - <para>The CSS Editing Perspective combines a set of views which allow you to see the structure of - your css files, edit them and see the results. - To use this perspective you need to choose <emphasis><property>Window >Open Perspective> CSS Editing </property></emphasis>. - All of the views are fully synchronized with each other:the changes being made in one view are reflected in othes at once.</para> - <para>As you know there are three ways of inserting a style sheet: - </para> + + <figure> + <title>Outline view</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can use the Source viewer with the Outline view to navigate around the file. To do this you should just left click the selector or property you want and it will be automatically highlighted in the source code: + </para> + + <figure> + <title>Navigating around the file</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor2.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="PropertiesView"> +<?dbhtml filename="PropertiesView.html"?> + <title>Properties view</title> + <para> + Properties view provides a full list of properties of a chosen selector. The properties are divided into logic groups for better navigation. + </para> + + <figure> + <title>Properties view</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + With the help of Properties view you have also the possibility to edit the css file by adding/editing/removing properties in the selector. Left click the "<emphasis><property>Value</property></emphasis>" field near the property you want to edit and write the changes in the text field. + </para> + + <figure> + <title>Updating css using Properties view</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor4.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="CSSPropertiesView"> +<?dbhtml filename="CSSPropertiesView.html"?> + <title>CSS Properties view </title> + <para> + CSS Properties view has five tabs: + </para> + <itemizedlist> - <listitem><para>External style sheet (.css file)</para> - </listitem> - <listitem><para>Internal style sheet (using the <emphasis><property>&lt;style&gt;</property></emphasis> tag in the head section of an HTML/XHTML/JSP page)</para> - </listitem> - <listitem><para>Inline style (using style attribute)</para> - </listitem> - </itemizedlist> - <para>Using CSS Editing Perspective you can change your style sheet, - inserted in any of the possible places described before in three ways:</para> + <listitem> + <para> + <xref linkend="text_font"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="background"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="boxes"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="property_sheet"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="edited_properties"/> + </para> + </listitem> + </itemizedlist> + <itemizedlist> - <listitem> - <para>directly in your Editor - </para> - </listitem> - <listitem> - <para>using <xref linkend="CSSPropertiesView"/> - </para> - </listitem> - <listitem> - <para>using <xref linkend="PropertiesView"/> - </para> - </listitem> - </itemizedlist> - - <figure> - <title>CSS Editing Perspective</title> - <mediaobject> + <listitem> + <para id="text_font"> + CSS Text/Font properties define the appearance of text, its font family, boldness, size and the style. + </para> + + <figure> + <title>Text/Font tab</title> + <mediaobject> <imageobject> - <imagedata fileref="images/css_perspective/cssEditor.png"/> + <imagedata fileref="images/css_perspective/cssEditor5.png"/> </imageobject> - </mediaobject> - </figure> - - <section id="OutlineView"> - <?dbhtml filename="OutlineView.html"?> - <title>Outline view</title> - <para>Using this view you can easily skip between the selectors described in the source files. - See the list of properties in any selector just by clicking the triangle near it. - </para> - - <figure> - <title>Outline view</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor1.png"/> - </imageobject> - </mediaobject> + </mediaobject> </figure> - <para>You can use the Source viewer with the Outline view to navigate around the file. - To do this you should just left click the selector or property you want and it will be automatically highlighted in the source code: + + <para> + For example, to define the "<emphasis><property>font-family</property></emphasis>" property you should click <emphasis><property>Choose font family</property></emphasis> button( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor7.png"/> + </imageobject> + </inlinemediaobject> + ) near <emphasis><property>Font Family</property></emphasis> text field and select the fonts you want to use from the list. </para> + <figure> - <title>Navigating around the file</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor2.png"/> - </imageobject> - </mediaobject> + <title>Choose font family</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor6.png"/> + </imageobject> + </mediaobject> </figure> - </section> - - - <section id="PropertiesView"> - <?dbhtml filename="PropertiesView.html"?> - <title>Properties view</title> - <para>Properties view provides a full list of properties of a chosen selector. - The properties are divided into logic groups for better navigation. + + <para> + When you click <emphasis><property>Ok</property></emphasis> the choosen fonts should appear in <emphasis><property>Font Family</property></emphasis> text field and in the sourse css file. To define other properties in CSS <emphasis><property>Text/Font</property></emphasis> tab you should just click button near the corresponding field you want and select the appropriate option in the list. Or if you are absolutely sure of the property's value to use you can just write it in the text field. </para> - - <figure> - <title>Properties view</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor3.png"/> - </imageobject> - </mediaobject> - </figure> - <para>With the help of Properties view you have also the possibility to edit the css file by adding/editing/removing properties in the selector. - Left click the "<emphasis><property>Value</property></emphasis>" field near the property you want to edit and write the changes in the text field. + </listitem> + + <listitem> + <para id="background"> + You should use CSS background properties and <emphasis><property>Background</property></emphasis> tab to define the background effects of an element. </para> - <figure> - <title>Updating css using Properties view</title> + <para id="boxes"> + <emphasis><property>Boxes</property></emphasis> tab is used to define CSS border properties, the box model and dimensions. The CSS border properties allow you to specify the style and color of an element's border. + </para> + + <para> + As well as in Text/Font tab, it's also possible to define the property in two ways: + </para> + + <itemizedlist> + <listitem> + <para> + clicking + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor8.png"/> + </imageobject> + </inlinemediaobject> + and choosing it from the list of options: + <figure> + <title>Defining the property</title> <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor4.png"/> - </imageobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor9.png"/> + </imageobject> </mediaobject> - </figure> + </figure> + </para> + </listitem> - </section> - <section id="CSSPropertiesView"> - <?dbhtml filename="CSSPropertiesView.html"?> - <title>CSS Properties view </title> - <para>CSS Properties view has five tabs: - </para> - <itemizedlist> - <listitem> - <para><xref linkend="text_font"/></para> - </listitem> - <listitem> - <para><xref linkend="background"/></para> - </listitem> - <listitem> - <para><xref linkend="boxes"/></para> - </listitem> - <listitem> - <para><xref linkend="property_sheet"/></para> - </listitem> - <listitem> - <para><xref linkend="edited_properties"/></para> - </listitem> + <listitem> + <para> + writing the property in the appropriate text field + </para> + </listitem> </itemizedlist> - - <itemizedlist> - <listitem> - <para id="text_font">CSS Text/Font properties define the appearance of text, - its font family, boldness, size and the style. - </para> - <figure> - <title>Text/Font tab</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor5.png"/> - </imageobject> - </mediaobject> - </figure> - <para>For example, to define the "<emphasis><property>font-family</property></emphasis>" - property you should click <emphasis><property>Choose font family</property></emphasis> - button( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor7.png"/> - </imageobject> - </inlinemediaobject>) near <emphasis><property>Font Family</property></emphasis> text field - and select the fonts you want to use from the list.</para> - <figure> - <title>Choose font family</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor6.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - When you click <emphasis><property>Ok</property></emphasis> the choosen fonts should appear in <emphasis><property>Font Family</property></emphasis> text field and in the sourse css file. - To define other properties in CSS <emphasis><property>Text/Font</property></emphasis> tab you should just click button near the - corresponding field you want and select the appropriate option in the list. - Or if you are absolutely sure of the property's value to use you can just write it in the text field. - </para> - - </listitem> - <listitem><para id="background"> - You should use CSS background properties and <emphasis><property>Background</property></emphasis> tab to define the background effects of an element. - - </para> - <para id="boxes"><emphasis><property>Boxes</property></emphasis> tab is used to define CSS border properties, - the box model and dimensions. The CSS border properties allow you to specify the style - and color of an element's border. - </para> - <para>As well as in Text/Font tab, it's also possible to define the property in two ways:</para> - <itemizedlist> - <listitem><para>clicking <inlinemediaobject> <imageobject> - <imagedata fileref="images/css_perspective/cssEditor8.png"/> - </imageobject></inlinemediaobject>and choosing it from the list of options: - <figure> - <title>Defining the property</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor9.png"/> - </imageobject> - </mediaobject> - </figure> - </para> - </listitem> - <listitem> - <para> writing the property in the appropriate text field - </para> - </listitem> - </itemizedlist> - </listitem> - <listitem><para id="property_sheet"><emphasis><property>Property Sheet</property></emphasis> tab contains the categorized list of properties. - Like in <xref linkend="PropertiesView"/> it's possible to edit the properties values.</para> - <figure> - <title>Property Sheet tab</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor10.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para id="edited_properties"><emphasis><property>Edited Properties</property></emphasis> tab contains only "overflow-y" property - which determines clipping of the element's content at the top and bottom edges. - </para> - <figure> - <title>Edited Properties tab</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor11.png"/> - </imageobject> - </mediaobject> - </figure> - <para>It's also possible to edit the properties in the tab.</para> - </listitem> - </itemizedlist> - </section> - <section id="CSSPreview"> - <?dbhtml filename="CSSPropertiesView.html"?> - <title>CSS Preview</title> - <para>Using CSS Preview you can see how a selector affects any text.</para> + </listitem> + + <listitem> + <para id="property_sheet"> + <emphasis><property>Property Sheet</property></emphasis> tab contains the categorized list of properties. Like in <xref linkend="PropertiesView"/> it's possible to edit the properties values. + </para> + <figure> - <title>CSS Preview</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/css_perspective/cssEditor12.png"/> - </imageobject> - </mediaobject> + <title>Property Sheet tab</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor10.png"/> + </imageobject> + </mediaobject> </figure> - <para>The preview is also edited by double click.You can write instead of the default text any text you want,including html tags.</para> - </section> - + </listitem> + + <listitem> + <para id="edited_properties"> + <emphasis><property>Edited Properties</property></emphasis> tab contains only "overflow-y" property which determines clipping of the element's content at the top and bottom edges. + </para> + + <figure> + <title>Edited Properties tab</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor11.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + It's also possible to edit the properties in the tab. + </para> + </listitem> + </itemizedlist> + </section> + + <section id="CSSPreview"> +<?dbhtml filename="CSSPropertiesView.html"?> + <title>CSS Preview</title> + <para> + Using CSS Preview you can see how a selector affects any text. + </para> + + <figure> + <title>CSS Preview</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/css_perspective/cssEditor12.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The preview is also edited by double click.You can write instead of the default text any text you want,including html tags. + </para> + </section> </chapter> - Modified: trunk/jsf/docs/userguide/en-US/editors.xml =================================================================== --- trunk/jsf/docs/userguide/en-US/editors.xml 2011-03-15 18:41:32 UTC (rev 29797) +++ trunk/jsf/docs/userguide/en-US/editors.xml 2011-03-15 21:57:49 UTC (rev 29798) @@ -12,13 +12,13 @@ </chapterinfo> <title>Editors</title> <para> - In the JSF Tools Reference Guide and Struts Tools Reference Guide you may have read about the Graphical Editors for JSF and Struts configuration files, Tiles Files, and Struts Validation Files. All these editors have OpenOn (see <xref linkend="OpenOnSelection4Hyperlinknavigation"/>) and Code Assist (see <xref linkend="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"/>) features, which are described in more details in this document. In addition this document will cover the Visual Page Editor (see <xref linkend="visual_page"/>), which provides combined visual and source editing of Web pages, as well as many more editors (see <xref linkend="more_editors"/>) for different types of files. + In the JSF Tools Reference Guide and Struts Tools Reference Guide you may have read about the Graphical Editors for JSF and Struts configuration files, Tiles Files, and Struts Validation Files. All these editors have OpenOn (see <xref linkend="OpenOnSelection4Hyperlinknavigation"/>) and Code Assist (see <xref linkend="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"/>) features, which are described in more detail in this document. In addition, this document will cover the Visual Page Editor (see <xref linkend="visual_page"/>), which provides combined visual and source editing of Web pages, as well as many more editors (see <xref linkend="more_editors"/>) for different types of files. </para> <section id="editors_features"> <title>Editors Features</title> <para> - <property>JBoss Developer Studio</property> has powerful editor features that help you easily navigate within your application and make use of content and code assist no matter what type of project file (<literal>.jsp</literal>, <literal>.xhtml</literal>, <literal>.xml</literal>, <literal>.css</literal> etc.) you are working on. + <property>JBoss Developer Studio</property> has powerful editing features that help you easily navigate within your application and make use of content and code assist no matter what type of project file (<filename>.jsp</filename>, <filename>.xhtml</filename>, <filename>.xml</filename>, <filename>.css</filename> etc.) you are working on. </para> <para> @@ -48,7 +48,7 @@ <section id="OpenOnSelection4Hyperlinknavigation"> <title>OpenOn</title> <para> - OpenOn lets you easily link directly from one resource to another in your project without using the <property>Package Explorer</property> view (project tree). With OpenOn, you can simply use <keycap>F3</keycap> or <keycombo><keycap>Ctrl</keycap><keycap>Click</keycap></keycombo> on a reference to another file and the file will be opened. + OpenOn lets you easily link directly from one resource to another in your project without using the <guilabel>Package Explorer</guilabel> view (project tree). With OpenOn, you can simply use <keycap>F3</keycap> or <keycombo><keycap>Ctrl</keycap><keycap>Click</keycap></keycombo> on a reference to another file and the file will be opened. </para> <para> @@ -90,7 +90,7 @@ <section id="XMLFiles232"> <title>XML Files</title> <para> - Press and hold down the <keycap>Ctrl</keycap> key. As you move the mouse cursor over different file references in the file, they are displayed with an underline. In this state these file references effectively become links, and when they are clicked the appropriate file will open in its own editor. + Press and hold down the <keycap>Ctrl</keycap> key. As you move the mouse cursor over different file references in the file, they are displayed with an underline. In this state these file references effectively become links, and when they are clicked the appropriate file will be opened in its own editor. </para> <para> @@ -104,7 +104,7 @@ </para> <para> - In this example source code of the managed bean <emphasis><property>&quot;User&quot;</property> </emphasis> will be open. + In this example source code of the managed bean <code>User</code> will be open. </para> <figure> @@ -117,7 +117,7 @@ </figure> <para> - This is the result of using OpenOn. + The image below shows the result of using OpenOn. </para> <figure> @@ -165,17 +165,17 @@ <section id="JSPPages223"> <title>JSP/XHTML Pages</title> <para> - OpenOn is also available in JSP and XHTML pages edited in the <property>Visual Page Editor</property>. It will allow you to quickly jump to the reference instead of having to hunt around in the project structure. + OpenOn is also available in <filename>JSP</filename> and <filename>XHTML</filename> pages edited in the <property>Visual Page Editor</property>. It will allow you to quickly jump to the reference instead of having to hunt around in the project structure. </para> <para> - You can use OpenOn for the following JSP/XHTML file entries: + You can use OpenOn for the following <filename>JSP</filename> or <filename>XHTML</filename> file entries: </para> <orderedlist> <listitem> <para> - Imported property files + Imported property files. </para> <figure> @@ -190,7 +190,7 @@ <listitem> <para> - CSS files used in a JSP/XHTML page + CSS files used in a <filename>JSP</filename> or <filename>XHTML</filename> page. </para> <figure> @@ -205,7 +205,7 @@ <listitem> <para> - Managed beans and their properties + Managed beans and their properties. </para> <figure> @@ -220,11 +220,11 @@ <listitem> <para> - Navigation rules in JSP files + Navigation rules in <filename>JSP</filename> files. </para> <para> - For JSP files in a JSF project, you can easily open the navigation rules by applying <property>OpenOn</property> to the JSF tag for the navigation outcome: + For <filename>JSP</filename> files in a JSF project, you can easily open the navigation rules by applying <property>OpenOn</property> to the JSF tag for the navigation outcome: </para> <figure> @@ -239,7 +239,7 @@ <listitem> <para> - Custom Facelets tag libraries in XHTML pages + Custom Facelets tag libraries in <filename>XHTML</filename> pages. </para> <para> @@ -249,7 +249,7 @@ <listitem> <para> - Custom JSF 2.0 components + Custom JSF 2.0 components. </para> <figure> @@ -267,7 +267,7 @@ <section id="cssclasses"> <title>CSS Classes</title> <para> - You can quickly navigate through CSS classes using OpenOn + You can quickly navigate through CSS classes using OpenOn. </para> <figure> @@ -373,7 +373,7 @@ </itemizedlist> <para> - Notice that code completion for EL variables has icons illustrating what they are from. The most of this icons are described in the table below. + Notice that code completion for EL variables have icons illustrating what they are from. These icons are described in the table below. </para> <table> @@ -593,7 +593,7 @@ <itemizedlist> <listitem> <para> - Content Assist for XML, XHTML, JSP and JSF configuration files + Content Assist for <filename>XML</filename>, <filename>XHTML</filename>, <filename>JSP</filename> and <filename>JSF</filename> configuration files </para> </listitem> @@ -619,11 +619,11 @@ <section id="ContentAssistForXMLJSPAndJSFConfigurationFiles865"> <title>Content Assist for XML, JSP and JSF configuration files</title> <para> - At any point when working with any XML, JSP and JSF configuration files Content Assist is available to help you. Simply type <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo> to see what is available. + At any point when working with any XML, JSP and JSF configuration files Content Assist is available to help you. Simply press <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo> to see what options are available. </para> <para> - Content Assist for JSF configuration file: + Content Assist for <filename>JSF</filename> configuration file: </para> <figure> @@ -636,7 +636,7 @@ </figure> <para> - Content Assist for JSF JSP file: + Content Assist for <filename>JSF</filename> <filename>JSP</filename> file: </para> <figure> @@ -649,7 +649,7 @@ </figure> <para> - Content Assist for other JSF XML project files ( <filename>web.xml</filename> shown): + Content Assist for other <filename>JSF</filename> <filename>XML</filename> project files ( <filename>web.xml</filename> shown): </para> <figure> @@ -681,7 +681,7 @@ <section id="ContentAssistBasedOnProjectData86"> <title>Content Assist Based on Project Data</title> <para> - JBoss Developer Studio takes Content Assist to the next level. JBoss Developer Studio will constantly scan your project, and you will be able to insert code into the JSP page from your project including: + JBoss Developer Studio takes Content Assist to the next level. JBoss Developer Studio will constantly scan your project, and you will be able to insert code into the <filename>JSP</filename> page from your project including: </para> <itemizedlist> @@ -717,7 +717,7 @@ </itemizedlist> <para> - The figure below shows how to insert message from a Properties files. You simply put the cursor inside the <emphasis role="italic"><property>&quot;value&quot;</property></emphasis> attribute and press <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo>. JBoss Developer Studio will scan your project and show a list of possible values to insert. + The figure below shows how to insert a message from a Properties file. You simply put the cursor inside the <code>value</code> attribute and press <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo>. JBoss Developer Studio will scan your project and display a list of possible values that can be inserted. </para> <figure> @@ -730,11 +730,11 @@ </figure> <para> - In the following screenshot we are inserting a <emphasis role="italic"> <property>&quot;Managed bean&quot;</property> </emphasis> attribute value. Again, by simply clicking <emphasis><property>Ctrl-Space</property>,</emphasis> JBoss Developer Studio will show a list of all possible values that you can insert. + In the following screenshot we are inserting a <emphasis role="italic"> <property>&quot;Managed bean&quot;</property> </emphasis> attribute value. Again, by simply clicking <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo>, JBoss Developer Studio will show a list of all possible values that can be inserted. </para> <para> - Once you select a Managed bean, it will show you a list of all available attributes for the selected Managed bean (userBean). + Once you select a Managed bean, it will show you a list of all available attributes for the selected Managed bean (<code>userBean</code>). </para> <figure> @@ -747,7 +747,7 @@ </figure> <para> - Code Assist based on project data will also prompt you for navigation rules that exist in your JSF configuration file. + Code Assist based on project data will also prompt you for navigation rules that exist in your <filename>JSF</filename> configuration file. </para> <figure> @@ -760,7 +760,7 @@ </figure> <para> - Code Assist can also provide you with access to the beans located in jar archives. + Code Assist can also provide you with access to the beans located in <filename>JAR</filename> archives. </para> <figure> @@ -773,7 +773,7 @@ </figure> <para> - Moreover <property>Code Assist</property> is able to define <property>Resource Bundles</property> on template pages and gives the proposals on the client page. + Moreover <property>Code Assist</property> is able to define <property>Resource Bundles</property> on template pages and provides the proposals on the client page. </para> <figure> @@ -789,7 +789,7 @@ <section id="ContentAssistWithinJSFGraphicalEditor44"> <title>Content Assist within Tree JSF Editor</title> <para> - JBoss Developer Studio also provides Content Assist when working within the Tree JSF configuration editor. Just click <emphasis> <property>Ctrl-Space</property>. </emphasis> + JBoss Developer Studio also provides Content Assist when working within the Tree JSF configuration editor. Just press <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo>. </para> <figure> @@ -911,7 +911,7 @@ <section id="ContentAssistForStrutsJSPFile07"> <title>Content Assist for Struts JSP File</title> <para> - The image below shows Code Assist being used in a Struts JSP file. + The image below shows Code Assist being used in a Struts <filename>JSP</filename> file. </para> <figure> @@ -943,7 +943,7 @@ </figure> <para> - When the tag is selected, the required attributes, if there any, are already inserted and the cursor is located to the first attribute. At this point you can ask for attribute proposals. + When the tag is selected, the required attributes, if there are any, are already inserted and the cursor is moved to the first attribute. At this point you can ask for attribute proposals. </para> <figure> @@ -1042,14 +1042,14 @@ </figure> <para> - If XHTML file uses custom Facelets components, the Content Assist should also be available for them. For details, see <xref linkend="contentAssistForCustomFacelets"/> later in this guide. + If <filename>XHTML</filename> file uses custom Facelets components, the Content Assist should also be available for them. For details, see <xref linkend="contentAssistForCustomFacelets"/> later in this guide. </para> </section> <section id="ContentAssistForJavaFiles"> <title>Content Assist for Java Files</title> <para> - Various tools tips provide you additional information about Java elements (JavaDocs, source classes, return types, method names, params and etc.) when working with java files. + Various tools tips provide you additional information about Java elements (JavaDocs, source classes, return types, method names, params and etc.) when working with Java files. </para> <figure> @@ -1065,7 +1065,7 @@ <section id="ContentAssistForInsertTag"> <title>Content Assist for Insert Tag Wizard</title> <para> - Content Assist is also available for any attribute value in the <emphasis>Insert Tag</emphasis> wizard. + Content Assist is also available for any attribute value in the <guilabel>Insert Tag</guilabel> wizard. </para> <figure> @@ -1080,14 +1080,14 @@ <section id="AddingDynamicCodeAssistToCustomComponents8745"> <title>Adding dynamic code assist to custom components that were added to JBoss Tools Palette</title> - <para> - Here is what you need to do to add project based code assist to a custom component added in <property>JBoss Developer Studio 2.X</property>: + <!--<para> + Here is what you need to do to add project based code assist to a custom component added in <property>JBoss Developer Studio 2.x</property>: </para> <orderedlist> <listitem> <para> - Create a new xml file in <emphasis> <property>&lt;JBDS_home&gt;studio/eclipse/plugins/org.jboss.tools.common.kb_***/schemas/tld/</property>. </emphasis>For example call it <emphasis> <property> JeniaFaces.xml</property> </emphasis>. The file should be written according to <emphasis> <property>&lt;JBDS_home&gt;/studio/eclipse/plugins/org.jboss.tools.common.kb/kb.jar/org/jboss/tools/common/kb/kb-schema_1.0.dtd</property> </emphasis> + Create a new xml file in <filename>&lt;JBDS_home&gt;studio/eclipse/plugins/org.jboss.tools.common.kb_***/schemas/tld/</filename>. For example, you can name it <filename>JeniaFaces.xml</filename>. The file should be written according to <filename>&lt;JBDS_home&gt;/studio/eclipse/plugins/org.jboss.tools.common.kb/kb.jar/org/jboss/tools/common/kb/kb-schema_1.0.dtd</filename>. </para> </listitem> </orderedlist> @@ -1181,7 +1181,7 @@ <orderedlist> <listitem> <para> - Add information on your xml file in <emphasis> <property>&lt;JBDS_home&gt;/studio/eclipse/plugins/org.jboss.common.kb_***/plugin.xml</property> </emphasis> + Add information on your xml file in <filename>&lt;JBDS_home&gt;/studio/eclipse/plugins/org.jboss.common.kb_***/plugin.xml</filename>. </para> <programlisting role="XML"> @@ -1202,8 +1202,8 @@ </orderedlist> <para> - From <emphasis>JBoss Developer Studio 3.0.0.M1</emphasis> you should not do any of the steps described before, as dynamic code assist to custom components is added automatically. - </para> + From <emphasis>JBoss Developer Studio 3.0.0 and above</emphasis> you should not do any of the steps described before, as dynamic code assist to custom components is added automatically. + </para>--> <para> If you open projects that were created in older studio versions you may see the following message: @@ -1219,13 +1219,13 @@ </figure> <para> - It shows that some features of content assist including this one probably will not work. To fix this problem and turn off the message box execute the following steps: + It warns that some features of content assist probably will not work. To fix the problem and turn off the message box execute the following steps: </para> <itemizedlist> <listitem> <para> - Right click the project in Package Explorer. + Right click the project in the <guilabel>Package Explorer</guilabel> view. </para> </listitem> @@ -1237,7 +1237,7 @@ <listitem> <para> - Configure your project using Add JSF Capabilities wizard and press <property>Finish</property> + Configure your project using the <guilabel>Add JSF Capabilities</guilabel> wizard and click the <guibutton>Finish</guibutton> button </para> </listitem> </itemizedlist> @@ -1247,11 +1247,11 @@ <section id="FullControlOverSourceFiles-SynchronizedSourcAndVisualEditing74"> <title>Synchronized Source and Visual Editing</title> <para> - <property>JBoss Developer Studio</property> offers the ability to edit the source code of a file, as well as providing visual editors for many file types. The source code and visual editors can be viewed and edited at the same time in a split screen view and any changes you make in the source code editor will immediately appear in the visual editor. + <property>JBoss Developer Studio</property> offers the ability to edit the source code of a file, as well as providing visual editors for many file types. The source code and visual editors can be viewed and edited at the same time in a split screen view, and any changes you make in the source code editor will immediately appear in the visual editor. </para> <para> - The JSF configuration file editor has three views: <property>Diagram</property>, <property>Tree</property> and <property>Source</property>. All views are synchronized and you can edit the file in any view. + The JSF configuration file editor has three views: <guilabel>Diagram</guilabel>, <guilabel>Tree</guilabel> and <guilabel>Source</guilabel>. All views are synchronized and you can edit the file in any view. </para> <figure> @@ -1268,7 +1268,7 @@ </para> <para> - Web XML editor is shown. Web XML editor has a graphical view (Tree) and source (Source). + The Web XML editor is shown. The Web XML editor has a graphical view, accessed by the <guilabel>Tree</guilabel> tab, and a source view, accessed by the <guilabel>Source</guilabel> tab. </para> <figure> @@ -1298,15 +1298,15 @@ <section id="visual_page" role="updated"> <title>Visual Page Editor</title> <para> - <property>JBoss Developer Studio</property> comes with a powerful and customizable <property>Visual Page Editor</property> (VPE). You can use the Visual Page Editor to develop an application using any technology such as JSF, Struts, JSP, HTML and more. Double-click on a file in the Package Explorer view to open it in the Visual Editor, or just drag-and-drop it into perspective (the drag-and-drop feature can be also applied to JSP, XHTML or HTML files created locally). + <property>JBoss Developer Studio</property> comes with a powerful and customizable <property>Visual Page Editor</property> (VPE). You can use the Visual Page Editor to develop an application using any technology such as JSF, Struts, JSP, HTML and more. Double-click on a file in the <guilabel>Package Explorer</guilabel> view to open it in the Visual Editor, or just drag-and-drop it into perspective (the drag-and-drop feature can be also applied to <filename>JSP</filename>, <filename>XHTML</filename> or <filename>HTML</filename> files created locally). </para> <para> - As a new JSF 2.0 specification has been released, support of new features is now implemented in the <property>Visual Page Editor</property>. The JSF 2.0 tags like <literal>&lt;h:body&gt;</literal>, <literal>&lt;h:head&gt;</literal>, <literal>&lt;h:outputscript&gt;</literal>, <literal>&lt;h:outputstyle&gt;</literal> are supported in the editor as well as the composite components and expression language resource handling. (See the <ulink url="http://www.ibm.com/developerworks/java/library/j-jsf2fu2/index.... link</ulink> on how to use composite components and <ulink url="http://blogs.sun.com/rlubke/entry/jsf_2_0_new_feature3">... blog post</ulink> on how to handle EL resources). + As a new JSF 2.0 specification has been released, support of new features is now implemented in the <property>Visual Page Editor</property>. The JSF 2.0 tags like <literal>&lt;h:body&gt;</literal>, <literal>&lt;h:head&gt;</literal>, <literal>&lt;h:outputscript&gt;</literal>, <literal>&lt;h:outputstyle&gt;</literal> are supported in the editor, as well as the composite components and expression language resource handling. (See the <ulink url="http://www.ibm.com/developerworks/java/library/j-jsf2fu2/index.... 2 fu, Part 2: Templating and composite components</ulink> for information on how to use composite components and <ulink url="http://blogs.sun.com/rlubke/entry/jsf_2_0_new_feature3">... 2.0 New Feature Preview Series (Part 2.3): Resources</ulink> on how to handle EL resources). </para> <para> - The current VPE version has three tabs: <property>Visual/Source</property>, <property>Source</property> and <property>Preview</property>. To switch between the views you can use tabs at the bottom of the VPE or the shortcut keys <emphasis> <property>Ctrl + PageUp</property> and <property>Ctrl + PageDown</property> </emphasis>. + The current VPE version has three tabs: <property>Visual/Source</property>, <property>Source</property> and <property>Preview</property>. To switch between the views you can use tabs at the bottom of the VPE or the shortcut keys <keycombo><keycap>Ctrl</keycap><keycap>PageUp</keycap></keycombo> and <keycombo><keycap>Ctrl</keycap><keycap>PageDown</keycap></keycombo>. </para> <figure> @@ -1321,7 +1321,7 @@ <section id="visual_source"> <title>Visual/Source View</title> <para> - Using the <property>Visual/Source view</property> you can edit your pages in the Source and Visual modes simultaneously, with instant synchronization between them: + Using the <guilabel>Visual/Source</guilabel> view you can edit your pages in the Source and Visual modes simultaneously, with instant synchronization between them: </para> <figure> @@ -1334,11 +1334,11 @@ </figure> <para> - The view is designed in the form of a split pane with toggle buttons for quickly moving between Source, Visual or Source/Visual modes, as shown on the figure above. + The view is designed in the form of a split pane with toggle buttons for quickly moving between <guilabel>Source</guilabel>, <guilabel>Visual</guilabel> or <guilabel>Source/Visual</guilabel> modes, as shown on the figure above. </para> <para> - One more way to toggle between the various states of the split pane is using the shortcuts <emphasis> <property>Shift + F6</property> </emphasis> for maximizing/restoring the Source part and <emphasis> <property>Shift + Alt + F6</property> </emphasis> for maximizing or restoring the Visual part. + One more way to toggle between the various states of the split pane is using the shortcuts <keycombo><keycap>Shift</keycap><keycap>F6</keycap></keycombo> for maximizing or restoring the <guilabel>Source</guilabel> part and <keycombo><keycap>Shift</keycap><keycap>Alt</keycap><keycap>F6</keycap></keycombo> for maximizing or restoring the <guilabel>Visual</guilabel> part. </para> <note> @@ -1349,7 +1349,7 @@ </note> <para> - It should be pointed out that, no matter what mode you are working in, you get a full integration with the <property>Properties</property> and <property>Outline views</property>: + It should be pointed out that, no matter what mode you are working in, you get a full integration with the <guilabel>Properties</guilabel> and <guilabel>Outline</guilabel> views: </para> <figure> @@ -1362,15 +1362,15 @@ </figure> <para> - The Outline view displays a specific outline of a structured file that is currently open in the editor area, and lists its structural elements. Right-clicking on these elements will open additional options that allow other specific elements to be added in their appropriate positions. + The <guilabel>Outline</guilabel> view displays a specific outline of a structured file that is currently open in the editor area, and lists its structural elements. Right-clicking on these elements will open additional options that allow other specific elements to be added in their appropriate positions. </para> <para> - The Properties view shows the property names and their values for a selected item. The values are editable just select any value and click on the button that will appear to choose a new value. The key combination <property>Ctrl+Z</property> will return the previous value, while <property>Ctrl+Y</property> will return the new value again. The Properties view has additional options and can be set up to display categories and advanced properties. + The <guilabel>Properties</guilabel> view shows the property names and their values for a selected item. The values are editable: just select any value and click on the button that will appear to choose a new value. The key combination <keycombo><keycap>Ctrl</keycap><keycap>Z</keycap></keycombo> will return the previous value, while <keycombo><keycap>Ctrl</keycap><keycap>Y</keycap></keycombo> will return the new value again. The <guilabel>Properties</guilabel> view has additional options and can be set up to display categories and advanced properties. </para> <para> - It&apos;s also possible to use the <xref linkend="palette"/> to insert any tag from the list of tag libraries to the page you are editing with just a click or drag-and-drop. + It is also possible to use the JBoss Tools Palette (see <xref linkend="palette"/>) to insert any tag from the list of tag libraries to the page you are editing with just a click or drag-and-drop. </para> <figure> @@ -1383,11 +1383,11 @@ </figure> <para> - You can insert a tag or component from the palette into either the Source or the Visual part by displaying the context menu and selecting <property>Insert around</property>, <property>Insert before</property>, <property>Insert after</property> or <property>Replace With</property>, pointing to <property>From Palette</property>, picking the type of the tag and finally choosing the tag you want to insert. + You can insert a tag or component from the palette into either the <guilabel>Source</guilabel> or the <guilabel>Visual</guilabel> part by displaying the context menu and selecting <guimenuitem>Insert around</guimenuitem>, <guimenuitem>Insert before</guimenuitem>, <guimenuitem>Insert after</guimenuitem> or <guimenuitem>Replace With</guimenuitem>, pointing to <guimenuitem>From Palette</guimenuitem>, picking the type of the tag and finally choosing the tag you want to insert. </para> <para> - The image below illustrates how you can insert a tag into the Source part. + The image below illustrates how you can insert a tag into the <guilabel>Source</guilabel> part. </para> <figure> @@ -1400,7 +1400,7 @@ </figure> <para> - And this is how a tag is inserted using a context menu in the Visual part. + And this is how a tag is inserted using a context menu in the <guilabel>Visual</guilabel> part. </para> <figure> @@ -1413,7 +1413,7 @@ </figure> <para> - The Visual Page Editor also displays custom tags correctly if they are configured properly. The picture below shows an example how the custom tags <emphasis><property>&quot;pagination&quot;</property> </emphasis> and <emphasis><property>&quot;echo&quot;</property> </emphasis> will be displayed in VPE. + The Visual Page Editor also displays custom tags correctly if they are configured properly. The picture below shows an example how the custom tags <code>pagination</code> and <code>echo</code> will be displayed in VPE. </para> <figure> @@ -1432,26 +1432,23 @@ <itemizedlist> <listitem> <para> - echo.xhtml: + <filename>echo.xhtml</filename>: </para> <programlisting role="XML"> -<![CDATA[ -<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"> +<![CDATA[<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"> <span class="message">#{msg}</span> -</ui:composition> -]]> +</ui:composition>]]> </programlisting> </listitem> <listitem> <para> - paginator.xhtml: + <filename>paginator.xhtml</filename>: </para> <programlisting role="XML"> -<![CDATA[ - <?xml version="1.0" encoding="UTF-8"?> +<![CDATA[<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" @@ -1477,14 +1474,13 @@ </h:panelGrid> <h:inputHidden id="currentPage" value=""/> </ui:component> -</html> -]]> +</html>]]> </programlisting> </listitem> </itemizedlist> <para> - If your custom tags aren&apos;t configured correctly your Visual mode will look like this: + If your custom tags are not configured correctly your Visual mode will look like this: </para> <figure> @@ -1499,7 +1495,7 @@ <section id="comments"> <title>Commenting out Code</title> <para> - <property>VPE</property> supports the ability to add comments in files you are working with (JSP, XHTML, etc.): + <property>VPE</property> supports the ability to add comments in files you are working with (<filename>JSP</filename>, <filename>XHTML</filename>, etc.): </para> <itemizedlist> @@ -1524,7 +1520,7 @@ </para> <para> - Code folding can be enabled by right-clicking on the left margin on the Source part of Visual Page Editor, selecting <property>Folding</property> and checking the <property>Enable Folding</property> checkbox or using the <emphasis> <property>Ctrl+Numpad_Divide</property> </emphasis> shortcut. + Code folding can be enabled by right-clicking on the left margin on the Source part of Visual Page Editor, selecting <property>Folding</property> and checking the <property>Enable Folding</property> checkbox or using the <keycombo><keycap>Ctrl</keycap><keycap>Numpad Divide</keycap></keycombo> shortcut. </para> <para> @@ -1627,7 +1623,7 @@ </figure> <para> - For editing inline styles for DOM elements <property>VPE</property> provides the <property>CSS Dialog</property>. It can be called from <emphasis> <property>style</property> </emphasis> line in the <property>Properties view</property> for a currently selected element. + For editing inline styles for DOM elements <property>VPE</property> provides the <property>CSS Dialog</property>. It can be called from <guilabel> style</guilabel> line in the <guilabel>Properties</guilabel> view for a currently selected element. </para> <figure> @@ -1640,7 +1636,7 @@ </figure> <para id="css_dialog"> - <property>CSS Style Dialog</property> has several tabs where css properties for text, background, borders and others can be specified. A simple preview which is generated at the top of the <property>CSS Style Dialog</property> allows you to see the changes before you apply them. + <guilabel>CSS Style</guilabel> Dialog has several tabs where css properties for text, background, borders and others can be specified. A simple preview which is generated at the top of the <guilabel>CSS Style</guilabel> Dialog allows you to see the changes before you apply them. </para> <figure> @@ -1656,11 +1652,11 @@ <section id="external_stylesheets"> <title>External Stylesheets</title> <para> - The pages you are working with in <property>VPE</property> can use external stylesheets. <property>VPE</property> allows you to create new style classes in existing stylesheets and/or edit them as well. For these purposes <property>Edit Style Class Dialog</property> is provided. + The pages you are working with in <property>VPE</property> can use external stylesheets. <property>VPE</property> allows you to create new style classes in existing stylesheets and/or edit them as well. For these purposes <guilabel>Edit Style Class</guilabel> Dialog is provided. </para> <para> - Select the element for which you need to create or edit style class and press button next to <emphasis> <property>styleClass</property> </emphasis> field in <property>Properties view</property>. + Select the element for which you need to create or edit style class and press button next to <guilabel>styleClass</guilabel> field in <guilabel>Properties</guilabel> view. </para> <figure> @@ -1673,7 +1669,7 @@ </figure> <para> - It&apos;ll pick up the <property>Edit Style Class Dialog</property> which looks like on the figure below: + It&apos;ll pick up the <guilabel>Edit Style Class</guilabel> Dialog which looks like on the figure below: </para> <figure> @@ -1696,7 +1692,7 @@ <imagedata fileref="images/visual_page/visual_page_19.png"/> </imageobject> </inlinemediaobject> - in the top panel or use hot-keys (<property>Shift+Ctrl+C</property>). + in the top panel or use hot-keys (<keycombo><keycap>Shift</keycap><keycap>Ctrl</keycap><keycap>C</keycap></keycombo>). </para> <para> @@ -1713,7 +1709,7 @@ </figure> <para> - Then you can configure style settings switching between the tabs: <emphasis> <property>Text/Font</property>, </emphasis> <emphasis> <property>Background</property>, </emphasis> <emphasis> <property>Boxes</property>, </emphasis> <emphasis> <property>Property Sheet</property>. </emphasis>The list of already existing classes with names beginning with the symbols printed will be displayed on standard "Ctrl+Space" key combination. To add existing styling to the chosen element just point to the necessary one. Each time you select any class it is displayed in the Preview tab. Click on the <emphasis><property>Apply</property> </emphasis> button will apply the changes without closing the window. + Then you can configure style settings switching between the tabs: <guilabel>Text/Font</guilabel>, <guilabel>Background</guilabel>, <guilabel>Boxes</guilabel>, <guilabel>Property Sheet</guilabel>. The list of already existing classes with names beginning with the symbols printed will be displayed on standard <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo> key combination. To add existing styling to the chosen element just point to the necessary one. Each time you select any class it is displayed in the <guilabel>Preview</guilabel> tab. Click on the <guibutton>Apply</guibutton> button will apply the changes without closing the window. </para> <figure> @@ -1726,7 +1722,7 @@ </figure> <para> - The <emphasis> <property>Edited properties</property> </emphasis> tab gives a preview of the properties which are set for the existing style class. You can easily modify them with the help of this wizard. + The <guilabel>Edited properties</guilabel> tab gives a preview of the properties which are set for the existing style class. You can easily modify them with the help of this wizard. </para> <figure> @@ -1739,7 +1735,7 @@ </figure> <para> - If the style class isn&apos;t chosen, the tab doesn&apos;t show any properties. + If the style class isn ot chosen, the tab does not show any properties. </para> <figure> @@ -1752,7 +1748,7 @@ </figure> <para> - The <emphasis> <property>Preview tab</property> </emphasis> is for observing the content of the chosen CSS file. This tab is hidden if no CSS file is chosen. + The <guilabel>Preview</guilabel> tab is for observing the content of the chosen <filename>CSS</filename> file. This tab is hidden if no <filename>CSS</filename> file is chosen. </para> <figure> @@ -1765,7 +1761,7 @@ </figure> <para> - At the top of the <property>CSS Class Dialog</property> you can see a preview box which visualizes the result. To edit the preview you should double click in the box. To leave the focus, use <emphasis> <property>Ctrl + Tab</property>.</emphasis> + At the top of the <guilabel>CSS Class</guilabel> Dialog you can see a preview box which visualizes the result. To edit the preview you should double click in the box. To leave the focus, use <keycombo><keycap>Ctrl</keycap><keycap>Tab</keycap></keycombo>. </para> <figure> @@ -1778,7 +1774,7 @@ </figure> <para> - The dialog for creating a new CSS class, which is called from <emphasis> <property>New > Other... > JBoss Tools Web > CSS Class</property>, </emphasis> looks this way: + The dialog for creating a new CSS class, which is called from <menuchoice><guimenuitem>New</guimenuitem><guimenuitem>Other...</guimenuitem><guimenuitem>JBoss Tools Web</guimenuitem><guimenuitem>CSS Class</guimenuitem></menuchoice>, looks this way: </para> <figure> @@ -1804,7 +1800,7 @@ </figure> <para> - Choose the necessary CSS file and click on the <property>Ok</property> button. + Choose the necessary <filename>CSS</filename> file and click on the <guibutton>Ok</guibutton> button. </para> </section> </section> @@ -1816,7 +1812,7 @@ </para> <para> - To call the <property>Template dialog</property> for a tag, right-click on it in Visual mode and select <emphasis> <property>Setup Visual Template for &lt;tag name&gt;</property> </emphasis> option. + To call the <property>Template dialog</property> for a tag, right-click on it in Visual mode and select <guimenuitem>Setup Visual Template for &lt;tag name&gt;</guimenuitem> option. </para> <figure> @@ -1842,13 +1838,13 @@ </figure> <para> - The <emphasis> <property>Tag Name</property> </emphasis> field is for setting the name of the unknown tag. + The <guilabel>Tag Name</guilabel> field is for setting the name of the unknown tag. </para> <note> <title>Note:</title> <para> - The given field should be filled in according to the pattern: &quot;taglib:tag&quot;. Also make sure you do not surround the name with angle brackets which will cause the validation error (see the figure below). + The given field should be filled in according to the pattern: <code>taglib:tag</code>. Also make sure you do not surround the name with angle brackets which will cause the validation error (see the figure below). </para> </note> @@ -1862,25 +1858,25 @@ </figure> <para> - <emphasis> <property>Tag for Display</property> </emphasis> field in the <property>Template dialog</property> requires specifying a type of tag. It can be SPAN, DIV, TABLE or any other html element. Check <emphasis> <property>Children</property> </emphasis>, if you want to mark a tag as a child element. + <guilabel>Tag for Display</guilabel> field in the <guilabel>Template</guilabel> dialog requires specifying a type of tag. It can be SPAN, DIV, TABLE or any other html element. Check <guilabel>Children</guilabel>, if you want to mark a tag as a child element. </para> <para> - The <emphasis> <property>Value</property> </emphasis> field is for setting a tag value. + The <guilabel>Value</guilabel> field is for setting a tag value. </para> <para> - As for the <emphasis> <property>Style</property> </emphasis> field, you can fill it out manually or make use of the button next to the field to bring the <xref linkend="css_dialog"/> for editing styles. + As for the <guilabel>Style</guilabel> field, you can fill it out manually or make use of the button next to the field to bring the <xref linkend="css_dialog"/> for editing styles. </para> <para> - You can observe all defined templates in the <xref linkend="VisualPageEditor2"/> on the <emphasis> <property>Visual Templates</property> </emphasis> tab which you can quickly access by pressing <xref linkend="AdvancedSettings954"/> ( + You can observe all defined templates in the <xref linkend="VisualPageEditor2"/> on the <guilabel>Visual Templates</guilabel> tab which you can quickly access by pressing <inlinemediaobject> <imageobject> <imagedata fileref="images/visual_page/icon_1.png"/> </imageobject> </inlinemediaobject> - ). + (see <xref linkend="AdvancedSettings954"/>). </para> <figure> @@ -1904,7 +1900,7 @@ </para> <para> - To export all visual templates you defined for unknown tags, navigate to <menuchoice> <guimenuitem> File </guimenuitem> <guimenuitem> Export </guimenuitem> <guimenuitem> Other </guimenuitem> <guimenuitem> Unknown tags templates </guimenuitem> </menuchoice>. Here is what the wizard looks like. + To export all visual templates you defined for unknown tags, navigate to <menuchoice><guimenuitem>File</guimenuitem><guimenuitem>Export</guimenuitem> <guimenuitem>Other</guimenuitem><guimenuitem>Unknown tags templates</guimenuitem></menuchoice>. Here is what the wizard looks like. </para> <figure> @@ -1917,11 +1913,11 @@ </figure> <para> - At this point click <emphasis> <property>Browse</property> </emphasis> to set the path where to save the external XML file with templates and then press <emphasis> <property>Finish</property> </emphasis> to complete the export. + At this point click the <guibutton>Browse</guibutton> button to set the path where to save the external XML file with templates and then click the <guibutton>Finish</guibutton> button to complete the export. </para> <para> - For import, use the similar steps. Follow to <emphasis> <property>File &gt; Import &gt; Other &gt; Unknown tags templates</property> </emphasis> to open the import wizard. Click <emphasis> <property>Browse</property> </emphasis> to point to the XML file which stores the custom tags templates and then hit <emphasis> <property>Finish</property> </emphasis> to complete the import. + For import, use the similar steps. Select <menuchoice><guimenuitem>File</guimenuitem><guimenuitem>Import</guimenuitem><guimenuitem>Other</guimenuitem><guimenuitem>Unknown tags templates</guimenuitem></menuchoice> to open the import wizard. Click the <guibutton>Browse</guibutton> to point to the <filename>XML</filename> file which stores the custom tags templates and then click the <guibutton>Finish</guibutton> button to complete the import. </para> <figure> @@ -2088,7 +2084,7 @@ <section id="vpe_refresh"> <title>Refresh</title> <para> - Clicking on the <emphasis> <property>Refresh</property> </emphasis> button ( + Clicking on the <guibutton>Refresh</guibutton> button ( <inlinemediaobject> <imageobject> <imagedata fileref="images/visual_page/icon_2.png"/> @@ -2101,13 +2097,13 @@ <section id="vpe_page_design_options"> <title>Page Design Options</title> <para> - The <emphasis> <property>Page Design Options</property> </emphasis> button ( + The <guibutton>Page Design Options</guibutton> button ( <inlinemediaobject> <imageobject> <imagedata fileref="images/visual_page/icon_3.png"/> </imageobject> </inlinemediaobject> - ) leads to a window which helps you specify necessary references of the resources. It is represented by a window with 4 tabs. The first one, <emphasis> <property>Actual Run-Time folders</property>, </emphasis> is used to replace absolute and relative path values when generating a preview: + ) leads to a window which helps you specify necessary references of the resources. It is represented by a window with 4 tabs. The first one, <guilabel>Actual Run-Time folders</guilabel>, is used to replace absolute and relative path values when generating a preview: </para> <figure> @@ -2120,7 +2116,7 @@ </figure> <para> - The second tab, <emphasis> <property>Included CSS files</property> </emphasis>, is used to add CSS files to be linked by Visual Page Editor when generating a preview: + The second tab, <guilabel>Included CSS files</guilabel>, is used to add CSS files to be linked by Visual Page Editor when generating a preview: </para> <figure> @@ -2133,7 +2129,7 @@ </figure> <para> - The third one, <emphasis> <property>Included tag libs</property> </emphasis>, can be used to add Taglibs that can be used by the editor for getting appropriate templates to generate a preview: + The third one, <guilabel>Included tag libs</guilabel>, can be used to add Taglibs that can be used by the editor for getting appropriate templates to generate a preview: </para> <figure> @@ -2146,7 +2142,7 @@ </figure> <para id="el_exp_para"> - And finally, the <emphasis> <property>Substituted El expressions</property> </emphasis> tab is used to add El expressions that will be substituted by the editor when generating a preview: + And finally, the <guilabel>Substituted El expressions</guilabel> tab is used to add El expressions that will be substituted by the editor when generating a preview: </para> <figure> @@ -2177,7 +2173,7 @@ </programlisting> <para> - The content of the <emphasis> <property>header.jsp</property> </emphasis> is: + The content of the <filename>header.jsp</filename> is: </para> <programlisting role="XML"> @@ -2187,7 +2183,7 @@ </programlisting> <para> - and <emphasis> <property>main.jsp</property> </emphasis> content is: + and <filename>main.jsp</filename> content is: </para> <programlisting role="XML"> @@ -2196,7 +2192,7 @@ </programlisting> <para> - When you open <emphasis> <property>main.jsp</property> </emphasis> in <property>Visual Page Editor</property>, it will not be able to resolve the image from the header, however it will work fine in runtime. To fix this in design time, click the <emphasis> <property>Page Design Options</property> </emphasis> button and set <emphasis> <property>Actual Run-Time Relative Folder</property> </emphasis> to <emphasis>&apos;projectName &gt; WebContent &gt; pages&apos;</emphasis> and you will see the image appeared. + When you open the <filename>main.jsp</filename> file in <property>Visual Page Editor</property>, it will not be able to resolve the image from the header, however it will work fine in runtime. To fix this in design time, click the <guibutton>Page Design Options</guibutton> button and set <guilabel>Actual Run-Time Relative Folder</guilabel> to <menuchoice><guimenuitem>[Project Name]</guimenuitem><guimenuitem>WebContent</guimenuitem><guimenuitem>pages</guimenuitem></menuchoice> and you will see the image appeared. </para> <para/> @@ -2212,7 +2208,7 @@ </programlisting> <para> - This will work fine in runtime, but the <property>Visual Page Editor</property> doesn&apos;t know what <emphasis>requestContextPath</emphasis> in design time is. In order to see the necessary styles applied in design time your should add a path to your stylesheet in the <property>CSS File Path</property> section. + This will work fine in runtime, but the <property>Visual Page Editor</property> does not know what <code>requestContextPath</code> in design time is. In order to see the necessary styles applied in design time your should add a path to your stylesheet in the <guilabel>CSS File Path</guilabel> section. </para> <para> @@ -2237,7 +2233,7 @@ </figure> <para> - Here both in Source and Visual modes you see the EL expression <emphasis>#{user.name}</emphasis>. When you switch to <property>Preview view</property>, you&apos;ll also see this expression. Now press <emphasis> <property>Page Design Options</property> </emphasis> button and set the value for the <emphasis>&quot;user.name&quot;</emphasis> as <emphasis><property>World</property>.</emphasis> + Here both in Source and Visual modes you see the EL expression <code>#{user.name}</code>. When you switch to <guilabel>Preview</guilabel> view, you will also see this expression. Now press <guibutton>Page Design Options</guibutton> button and set the value for the <guilabel>user.name</guilabel> as <guilabel>World</guilabel>. </para> <figure> @@ -2250,7 +2246,7 @@ </figure> <para> - As a result in Visual mode and Preview view the word <emphasis> <property>World</property> </emphasis> is displayed. + As a result in Visual mode and Preview view the word <guilabel>World</guilabel> is displayed. </para> <figure> @@ -2266,7 +2262,7 @@ <section id="splitting_buttons"> <title>Visual/Source Editors splitting buttons</title> <para> - The <emphasis> <property>Visual/Source Editors splitting buttons</property> </emphasis> provide the possibility to choose one of the four possible layouts for the Visual/Source Editor. + The Visual/Source Editors splitting buttons provide a way to choose one of the four possible layouts for the Visual/Source Editor. </para> <para> @@ -2344,7 +2340,7 @@ <section id="vpe_show_border"> <title>Show Border for Unknown Tags</title> <para> - The option is a self explanatory, i. e. if you want unknown tags to be wrapped in a border in the VPE visual part, just press the <emphasis> <property>Show border for unknown tags</property> </emphasis> button ( + The option is a self explanatory, i. e. if you want unknown tags to be wrapped in a border in the VPE visual part, just press the <guibutton>Show border for unknown tags</guibutton> button ( <inlinemediaobject> <imageobject> <imagedata fileref="images/visual_page/show_border_button.png"/> @@ -2357,7 +2353,7 @@ <section id="vpe_show_nonvisual_tags"> <title>Show Non-visual Tags</title> <para> - <property>Visual Page Editor</property> provides the option for displaying non-visual tags in Visual mode of the editor. To enable it select the <emphasis> <property>Show non-visual tags</property> </emphasis> button ( + <property>Visual Page Editor</property> provides the option for displaying non-visual tags in Visual mode of the editor. To enable it select the <guibutton>Show non-visual tags</guibutton> button ( <inlinemediaobject> <imageobject> <imagedata fileref="images/visual_page/show_nonvisual.png"/> @@ -2380,7 +2376,7 @@ </figure> <para> - You can also switch on this option in the VPE preferences, having clicked on the <emphasis><property>Preferences</property> </emphasis> button ( + You can also switch on this option in the VPE preferences, having clicked on the <guibutton>Preferences</guibutton> button ( <inlinemediaobject> <imageobject> <imagedata fileref="images/visual_page/icon_1.png"/> @@ -2393,7 +2389,7 @@ <section id="vpe_show_selection_bar"> <title>Show Selection Bar</title> <para> - You can find useful one more functionality provided by VPE. At the bottom of the <property>Visual/Source view</property> there is a <property>Selection Tag Bar</property>. It's updated automatically allowing to see tags tree for a current component selected in Visual or Source mode, also it allows to select tags back and forward. + You can find useful one more functionality provided by VPE. At the bottom of the <guilabel>Visual/Source</guilabel> view there is a <property>Selection Tag Bar</property>. It's updated automatically allowing to see tags tree for a current component selected in Visual or Source mode, also it allows to select tags back and forward. </para> <figure> @@ -2406,7 +2402,7 @@ </figure> <para> - If you want to hide the <property>Selection Tag Bar</property>, use the <emphasis> <property>Show Selection Bar</property> </emphasis> button ( + If you want to hide the <property>Selection Tag Bar</property>, use the <guibutton>Show Selection Bar</guibutton> button ( <inlinemediaobject> <imageobject> <imagedata fileref="images/visual_page/show_selection_bar.png"/> @@ -2482,7 +2478,7 @@ <section id="custom_facelets_support"> <title>Support for Custom Facelets Components</title> <para> - <property>Visual Page Editor</property> (starting from 3.0.0.M3 version of <property>JBoss Tools</property>) supports custom Facelets tag libraries both declared in the <literal>web.xml</literal> file (for details, see <ulink url="http://www.ibm.com/developerworks/java/library/j-facelets/#N102... a component</ulink>) and packed into the JAR file. + <property>Visual Page Editor</property> (starting from 3.0.0.M3 version of <property>JBoss Tools</property>) supports custom Facelets tag libraries both declared in the <literal>web.xml</literal> file (for details, see <ulink url="http://www.ibm.com/developerworks/java/library/j-facelets/#N102... a component</ulink>) and packed into the <filename>JAR</filename> file. </para> <note> @@ -2526,7 +2522,7 @@ <section id="contentAssistForCustomFacelets"> <title>Content Assist for Custom Facelets Components</title> <para> - Call the content assist as usual by using <emphasis><property>Ctrl+Space</property> </emphasis> when typing a tag. As proposals you should see custom Facelets tags defined in your Facelets tag library. + Call the content assist as usual by using <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo> when typing a tag. As proposals you should see custom Facelets tags defined in your Facelets tag library. </para> <figure> @@ -2572,7 +2568,7 @@ </para> <para> - <emphasis> <property>Ctrl+Click</property> </emphasis> on the namespace will open the Facelets tag file in a separate window. + <keycombo><keycap>Ctrl</keycap><keycap>Click</keycap></keycombo> on the namespace will open the Facelets tag file in a separate window. </para> <figure> @@ -2585,7 +2581,7 @@ </figure> <para> - <emphasis> <property>Ctrl+Click</property> </emphasis> on any custom Facelets tag declared on the page will do the same. The selected tag will be highlighted in the opened file. + <keycombo><keycap>Ctrl</keycap><keycap>Click</keycap></keycombo> on any custom Facelets tag declared on the page will do the same. The selected tag will be highlighted in the opened file. </para> <figure> @@ -2613,7 +2609,7 @@ <section id="openOnInCustomFaceletsTaglibs"> <title>OpenOn in Custom Facelets Tag File (<literal>*.taglib.xml</literal>)</title> <para> - <emphasis> <property>Ctrl+Click</property> </emphasis> on the path to source of the Facelets tag will open the component in its own editor. + <keycombo><keycap>Ctrl</keycap><keycap>Click</keycap></keycombo> on the path to source of the Facelets tag will open the component in its own editor. </para> <figure> @@ -2635,13 +2631,13 @@ </para> <para> - The Visual Page Editor requires the library libstdc++.so.5. This library is contained in the compat-libstdc++-33.i386 package. + The Visual Page Editor requires the library <filename>libstdc++.so.5</filename>. This library is contained in the <filename>compat-libstdc++-33.i386</filename> package. </para> <note> <title>Note</title> <para> - Starting from JBoss Tools 3.1.0.M4 the libstdc++.so.5 library isn't required. + Starting from JBoss Tools 3.1.0.M4 the <filename>libstdc++.so.5</filename> library isn't required. </para> </note> @@ -2659,7 +2655,7 @@ <listitem> <para> - On any other rpm based distributions download libstdc++.so.5 and run the following command: + On any other rpm based distributions download <filename>libstdc++.so.5</filename> and run the following command: </para> <programlisting role="JAVA"> @@ -2685,25 +2681,25 @@ </para> <para> - If it doesn't help and you use Fedora Core Linux and Eclipse Version: 3.4.1,the issue can be produced because libswt-xulrunner-gtk-3449.so file doesn't present in eclipse-swt-3.4.1-5.fc10.x86_64.rpm/eclipse/plugins/org.eclipse.swt.gtk.linux.x86_64_3.4.1.v3449c.jar.To add this file to eclipse you should: + If it doesn't help and you use Fedora Core Linux and Eclipse Version: 3.4.1,the issue can be produced because libswt-xulrunner-gtk-3449.so file doesn't present in <filename>eclipse-swt-3.4.1-5.fc10.x86_64.rpm/eclipse/plugins/org.eclipse.swt.gtk.linux.x86_64_3.4.1.v3449c.jar</filename>. To add this file to eclipse you should: </para> <itemizedlist> <listitem> <para> - Decompress eclipse/plugins/org.eclipse.swt.gtk.linux.x86_3.4.1.v3449c.jar form eclipse-SDK-3.4.1-linux-gtk-x86_64.tar.gz + Decompress <filename>eclipse/plugins/org.eclipse.swt.gtk.linux.x86_3.4.1.v3449c.jar</filename> form <filename>eclipse-SDK-3.4.1-linux-gtk-x86_64.tar.gz</filename> </para> </listitem> <listitem> <para> - Copy <property>libswt-xulrunner-gtk-3449.so</property> file to your Fedora Eclipse location. + Copy <filename>libswt-xulrunner-gtk-3449.so</filename> file to your Fedora Eclipse location. </para> </listitem> <listitem> <para> - Open the file eclipse.ini,which can be found in your Fedora Eclipse location and add the following line: + Open the file <filename>eclipse.ini</filename>, which can be found in your Fedora Eclipse location and add the following line: </para> <programlisting role="JAVA"> @@ -2761,7 +2757,7 @@ <section id="more_editors"> <title>More Editors</title> <para> - Besides Visual Page Editor JBDS is supplied with a huge range of various editors for different file types: properties, TLD, web.xml, tiles and so on. + Besides Visual Page Editor JBDS is supplied with a huge range of various editors for different file types: properties, TLD, <filename>web.xml</filename>, tiles and so on. </para> <section id="GraphicalPropertiesEditor"> @@ -2914,11 +2910,11 @@ <section id="GraphicalWebApplicationFileEditor"> <title>Graphical Web Application File (web.xml) Editor</title> <para> - The deployment descriptor <emphasis> <property>web.xml</property> </emphasis> file is intended for describing the servlets, container-managed security constraints and various deployment properties specific for your Web Application. + The deployment descriptor <filename>web.xml</filename> file is intended for describing the servlets, container-managed security constraints and various deployment properties specific for your Web Application. </para> <para> - To edit the deployment descriptor <property>JBoss Developer Studio</property> provides its own <property>web.xml editor</property> that comes with the same features you will find in all other <property>JBDS</property> editors: + To edit the deployment descriptor <property>JBoss Developer Studio</property> provides its own <filename>web.xml editor</filename> that comes with the same features you will find in all other <property>JBDS</property> editors: </para> <itemizedlist> @@ -2938,7 +2934,7 @@ <section id="TreeView1"> <title>Tree View</title> <para> - Switch to the <property>Tree view</property> if you want to edit <emphasis> <property>web.xml</property> </emphasis> in a graphical mode. All elements that <emphasis> <property>web.xml</property> </emphasis> could include are located in the left area of the editor in a tree format. Click a node on the left to display and edit its properties that will appear in the right-hand area. + Switch to the <property>Tree view</property> if you want to edit <filename>web.xml</filename> in a graphical mode. All elements that <filename>web.xml</filename> could include are located in the left area of the editor in a tree format. Click a node on the left to display and edit its properties that will appear in the right-hand area. </para> <figure> @@ -2967,7 +2963,7 @@ <section id="SourceView2"> <title>Source View</title> <para> - Switch to the <property>Source viewer </property>to edit the web.xml file by hand at any time: + Switch to the <property>Source viewer </property>to edit the <filename>web.xml</filename> file by hand at any time: </para> <figure> @@ -2983,7 +2979,7 @@ <section id="ContentAssist"> <title>Content Assist</title> <para> - Content assist is available in the Source viewer. Simply click <emphasis> <property>CTRL-Space</property> </emphasis> anywhere in the file. + Content assist is available in the Source viewer. Simply click <keycombo><keycap>CTRL</keycap><keycap>Space</keycap></keycombo> anywhere in the file. </para> <figure> @@ -3126,7 +3122,7 @@ </para> <para> - To create a new XSD file, right-click a folder in the Package Explorer view, select <emphasis> <property>New &gt; Other...</property> </emphasis> from the context menu and then select <emphasis> <property>XML &gt; XML Schema</property> </emphasis> in the dialog box. + To create a new XSD file, right-click a folder in the Package Explorer view, select <menuchoice><guimenuitem>New</guimenuitem><guimenuitem>Other...</guimenuitem></menuchoice> from the context menu and then select <menuchoice><guimenuitem>XML</guimenuitem><guimenuitem>XML Schema</guimenuitem></menuchoice> in the dialog box. </para> <figure> Modified: trunk/jsf/docs/userguide/en-US/palette.xml =================================================================== --- trunk/jsf/docs/userguide/en-US/palette.xml 2011-03-15 18:41:32 UTC (rev 29797) +++ trunk/jsf/docs/userguide/en-US/palette.xml 2011-03-15 21:57:49 UTC (rev 29798) @@ -1,568 +1,651 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter id="palette"> - <?dbhtml filename="palette.html"?> - <chapterinfo> - <keywordset> - <keyword>Jboss Tools palette</keyword> - <keyword>tags</keyword> - <keyword>JSP page</keyword> - </keywordset> - </chapterinfo> - <title>JBoss Tools Palette</title> - <para>This chapter will introduce you to the functionality provided by <property>JBoss Tools - Palette</property>. The Palette allows you to quickly and easily create your JSP or JSF - pages. Now you can do it more faster without additional knowledge.</para> - <para>The <property>JBoss Tools Palette</property> allows you to:</para> - <itemizedlist> - <listitem> - <para>Insert tags into a JSP or JSF page with one click</para> - </listitem> - <listitem> - <para>Add custom and 3rd party tags</para> - </listitem> - </itemizedlist> - <para>The JBoss Tools Palette contains a developer's project tag libraries and provides - possibility to add any tag libraries to it. Also you can choose a necessary one from the - list of already existing tag libraries:</para> - <itemizedlist> - <listitem> - <para>HTML</para> - </listitem> - <listitem> - <para>JBoss</para> - </listitem> - <listitem> - <para>JSF</para> - </listitem> - <listitem> - <para>JSTL</para> - </listitem> - <listitem> - <para>MyFaces</para> - </listitem> - <listitem> - <para>Oracle ADF Faces</para> - </listitem> - <listitem> - <para>Struts</para> - </listitem> - <listitem> - <para>XHTML</para> - </listitem> - </itemizedlist> - <figure> - <title>Default View of The JBoss Tools Palette</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_1.png"/> - </imageobject> - </mediaobject> - </figure> - <para> By default <property>JBoss Tools Palette</property> is not displayed. If you want to use it select - <emphasis><property>Window &gt; Show View Other... &gt; JBoss Tools Web &gt; JBoss Tools - Palette</property></emphasis> from the menu bar. </para> - <para>The standard <property>Eclipse Palette</property> is displayed by default in both Web Development and Seam - perspectives. Now the standard <property>Eclipse Palette</property> is featured with all <property>JBoss Tools Palette</property> - options and capabilities. </para> - <para>To open the standard <property>Eclipse Palette</property> navigate to <emphasis><property>Window-&gt;Show - View-&gt;Others-&gt;General-&gt;Palette</property></emphasis>. </para> - <para>The differences between the two palettes are as follows:</para> - <itemizedlist> - <listitem> - <para>The standard <property>Eclipse Palette</property> is blank by default. Content of the palette - is available only if Visual Page Editor is open and active, while JBoss Tools - Palette always contains a predefined set of components.</para> - </listitem> - <listitem> - <para>The Expanded/Collapsed state of components in the standard Eclipse Palette is - not global as in JBoss Tools Palette. State is associated with an instance - of Visual Page Editor. It means that the state can be different for various - files and each new file opened in Visual Page Editor will have the default - state of Palette with all components collapsed. </para> - </listitem> - </itemizedlist> - - <section id="PaletteOptions"> - <?dbhtml filename="PaletteOptions.html"?> - <title>Palette Options</title> - <para>To facilitate your work, you can configure the Palette in your own way by selecting - the corresponding icon on the Palette toolbar.</para> - <para>There is a possibility to configure the JBoss Tools Palette:</para> - <itemizedlist> - <listitem> - <para> to <property>edit the palette</property> content by adding, removing or - changing the palette elements</para> - </listitem> - <listitem> - <para> to <property>show/hide</property> groups, subgroups</para> - </listitem> - <listitem> - <para>to <property>import</property> groups, subgroups</para> - </listitem> - </itemizedlist> - <figure> - <title>Palette Buttons</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_9.png"/> - </imageobject> - </mediaobject> - </figure> - <section id="PaletteEditor"> - <?dbhtml filename="PaletteEditor.html"?> - <title>Palette Editor</title> - <para>JBoss Tools Palette contains existing libraries of tags, thus the - <property>Palette editor</property> is intended to work with them or create your - new one as well.</para> - <para>To open the editor, click on the <emphasis> - <property>Palette Editor</property> - </emphasis> icon(<inlinemediaobject> <imageobject> - <imagedata fileref="images/palette/palette_7.png"/> - </imageobject></inlinemediaobject>). - </para> - <para>The window has two parts. There is a reflected grouped list of components on the - left side of the palette editor. Each group is divided into multiple groups, every - of which is a tag library. The right side of the palette editor is an editing window - where it&apos;s possible to change values of group or tag library attributes - that you&apos;ve chosen on the left part of the window. </para> - <para>It can also be done by right click and using <emphasis> - <property>Edit…</property> - </emphasis> option.</para> - <literallayout/> - <para> For example, <property>JSF</property> group consists of - <property>Core</property>, <property>Facelets</property>, <property>HTML</property> - tag libraries and the attributes as <property>name</property>, - <property>description</property> and <property>hidden</property> which are available - for editing: </para> - <figure> - <title>Tag Libraries of the JSF Group</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_24.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The Palette Editor provides the following possibilities when working with existing - tags or icons:</para> - <itemizedlist> - <listitem> - <para>to work with a set of icons</para> - <para><emphasis> - <property>Icons</property> - </emphasis> is the root folder for the icon sets. The first step is creating - the icon set. Right click on the <emphasis> - <property>Icons</property> - </emphasis> folder and select <emphasis> - <property>Create &gt; Create Set...</property> - </emphasis></para> - <para>Set the value of the name in the <emphasis> - <property>Add Icons</property> - </emphasis> window and click <emphasis> - <property>Finish</property> - </emphasis> button. A new element will appear in the list.</para> - <figure> - <title>Creating a Set of Icons</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_17.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Also you can delete the set. Right click on the set of icons that you wish - to remove and chose the <emphasis> - <property>Delete</property> - </emphasis> option from the pop-up menu or click the <emphasis> - <property>Delete</property> - </emphasis> keyboard button.</para> - </listitem> - <listitem> - <para>to edit icons in the chosen set</para> - <para>When the set of icons is created, new icons can be imported to it. Choose - the required set and select the option <emphasis> - <property>Create &gt; Import Icon... </property> - </emphasis> from the pop-up menu that appears after you right-click on a - folder.</para> - <figure> - <title>Creating Icons</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_18.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Set the name of the icon and the path and click <emphasis> - <property>Finish</property> - </emphasis> button.</para> - </listitem> - <listitem> - <para>to work with a group of tag libraries</para> - <para>The first step in work with the editor is creating a group of libraries. - It&apos;s very easy to do, right mouse button click on the <emphasis> - <property>Palette</property> - </emphasis> folder and select <emphasis> - <property>Create &gt; Create Group…</property> - </emphasis></para> - <para>Set a name of a group in the <property>Create Group</property> window and - click <emphasis> - <property>OK</property> - </emphasis> button. A new element will appear at the end of the list.</para> - <figure> - <title>Creating a Group of Tag Libraries</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_19.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You are allowed to edit or delete a group as well. If you&apos;d like - to change attributes of a group, use the right editing window of the palette - editor or the <emphasis> - <property>Edit...</property> - </emphasis> option, like it was mentioned before. In order to remove the - group, right click on the group that you wish to remove and choose the <emphasis> - <property>Delete</property> - </emphasis> option or click the <emphasis> - <property>Delete</property> - </emphasis> keyboard button.</para> - <important> - <title>Important:</title> - <para>The removal option is enabled only for custom folders.</para> - </important> - </listitem> - <listitem> - <para>to work with a tag library</para> - <para>The group maintains a list of tag libraries. If you&apos;d like to - create your own library, click right mouse button on the group and choose <emphasis> - <property>Create Group…</property> - </emphasis> option.</para> - <figure> - <title>Creating a tag library</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_20.png"/> - </imageobject> - </mediaobject> - </figure> - <para>After setting the attribute name and the path of the icon, click <emphasis> - <property>Ok</property> - </emphasis> button.</para> - <note> - <title>Note:</title> - <para>If you do not choose an icon the default one will be assigned.</para> - </note> - <para>You are allowed to edit or delete the tag library, as well. If - you&apos;d like to change attributes of the library or choose another - icon, use the right editing window of the palette editor or the <emphasis> - <property>Edit...</property> - </emphasis> option. In order to remove the tag library, right click on the - library that you wish to remove and chose the <emphasis> - <property>Delete</property> - </emphasis> option or click the <emphasis> - <property>Delete</property> - </emphasis> keyboard button.</para> - <important> - <title>Important:</title> - <para>The removal option is enabled only for custom tag libraries.</para> - </important> - </listitem> - <listitem> - <para>to work with a tag element</para> - <para>When the library folder is created, new tags can be added to it. Choose - the required library and select the option <emphasis> - <property>Create > Create Macro…</property> - </emphasis> from the pop-up menu that appears after you right-click on a - folder.</para> - <figure> - <title>Creating a tag element</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_21.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the <property>Add Palette Macro</property> window you can configure - the tag element. Attribute <emphasis> - <property>Name</property> - </emphasis> is mandatory to fill and it will be the name of the tag element. - Other settings are optional. You can choose the icon and set the <emphasis> - <property>Start Text</property> - </emphasis> and the <emphasis> - <property>End Text</property> - </emphasis> for your tag element. If your tag text is too long, use the <emphasis> - <property>Change...</property> - </emphasis> button to see it all. For <emphasis> - <property>start text</property> - </emphasis> and <emphasis> - <property>end text</property> - </emphasis> there is a possibility to control the cursor position by using - "|" symbol.</para> - <figure> - <title>Parameters of the Palette element</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_23.png"/> - </imageobject> - </mediaobject> - </figure> - <para>After all the attributes are set, click <emphasis> - <property>Finish</property> - </emphasis> button.</para> - <note> - <title>Note:</title> - <para>If you do not choose an icon the default one will be assigned.</para> - </note> - <para>You are also allowed to edit or delete the tag. If you&apos;d like to - change the attributes of the tag or choose another icon for it, use the - right editing window of the palette editor or the <emphasis> - <property>Edit...</property> - </emphasis> option from the pop-up menu. In order to remove the tag, right - click on the tag that you wish to remove and chose the <emphasis> - <property>Delete</property> - </emphasis> option or click the <emphasis> - <property>Delete</property> - </emphasis> keyboard button.</para> - <important> - <title>Important:</title> - <para>The removal option is enabled only for custom tags. JBoss Palette tags - can not be removed but can be modified.</para> - </important> - </listitem> - - </itemizedlist> - - <para>If you have changed any object in the tree view and you don't like the final result you can always use the <emphasis><property>Restore Defaults</property></emphasis> button. Click on it will restore defaults for the object selected and for its children elements. Please remember that the button will only restore data for objects defined in the default palette. If selected object is created by you, the button will be disabled. Child objects added by you will not be removed.</para> - <para>When updating JBoss Tools the palette content is not updated.</para> - </section> - <section id="show_hide"> - <?dbhtml filename="Show/Hide.html"?> - <title>Show/Hide</title> - <para><emphasis> - <property>Show/Hide</property> - </emphasis> is a very useful feature that allows you to control the number of tag - groups that are shown on the palette.</para> - <itemizedlist> - <listitem> - <para>Click <emphasis> - <property>Show/Hide</property> - </emphasis> button(<inlinemediaobject> <imageobject> - <imagedata fileref="images/palette/palette_10.png"/> - </imageobject></inlinemediaobject>), at the top right side of the JBoss Tools Palette.</para> - </listitem> - </itemizedlist> - - <itemizedlist> - <listitem> - <para>In the dialog Show/Hide Drawers check the groups the libraries of which - you want to be shown on the palette:</para> - </listitem> - </itemizedlist> - <figure> - <title>Show/Hide Drawers</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_11.png"/> - </imageobject> - </mediaobject> - </figure> - <para>If libraries are not displayed in the palette, check whether they are selected. - Click the plus sign to expand the libraries of the group and make sure that a tick - is put next to the wanted libraries.</para> - <!-- <para>(When you deactivate the group(s), the JBoss Palette remembers your last chose. - The libraries… )</para> - --> - <itemizedlist> - <listitem> - <para>Click <emphasis><property>OK</property>.</emphasis> The new groups will - now be shown on the palette:</para> - </listitem> - </itemizedlist> - <figure> - <title>New Added Groups</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_12.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The names of the elements are compound. The first part is the group name and the - second is the library name.</para> - </section> - <section id="Import"> - <?dbhtml filename="Import.html"?> - <title>Import</title> - <para>The Import button lets you add a custom or 3rd party tag library to JBoss Tools - Palette. Find out more information on how to add particular tags see the <xref - linkend="ImportButton521"/> section. - <!--<link linkend="CreatingAndWorkingCustomCapability">Learn how to import</link>. --></para> - </section> - </section> - <section id="UsingThePaletteIncludingOneClickTagInsertion"> - <?dbhtml filename="UsingThePaletteIncludingOneClickTagInsertion.html"?> - <title>Using the Palette</title> - <section id="InsertingTagsIntoAJSPFile"> - <?dbhtml filename="InsertingTagsIntoAJSPFile.html"?> - <title>Inserting Tags into a JSP File</title> - <para>A new tag can be added into any text file including jsp, htm, html and xhtml.</para> - <para>Let&apos;s do it. Open your JSP file and place the cursor in a place where - you&apos;d like to add a tag and then click that tag in the palette. In the - <property>Insert Tag</property> window that appears, you can set the value of<emphasis> - <property>general</property> - </emphasis> and <emphasis> - <property>advanced</property> - </emphasis> attributes of the tag that you choose.</para> - <figure> - <title>Inserting Tag</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_25.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the example below the <emphasis> - <property>commandButton</property> - </emphasis> tag has been inserted.</para> - <figure> - <title>Inserting Tag</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_2.png" scale="80"/> - </imageobject> - </mediaobject> - </figure> - - <note> - <title>Tip:</title> - <para>if you place the cursor over any tag, a balloon hint is shown with all the - <emphasis role="italic"> - <property>&quot;tag&quot;</property> - </emphasis> attributes.</para> - </note> - <para>The cursor position after adding a tag into a file is specified by - &quot;|&quot; symbol in the tag template on the right in the Palette Editor - window. </para> - <figure> - <title>Palette Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_15.png"/> - </imageobject> - </mediaobject> - </figure> - <para> Above you can see where the cursor position for <emphasis> - <property>HTML &gt; Form &gt; input</property> - </emphasis> is set. Thus after adding this tag into your file the cursor will be in - the attribute &quot;type&quot;. Then, you can straight use the combination - of buttons <property>Ctrl + Space</property> to inquire about a prompting. </para> - <figure> - <title>Cursor position</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_16.png" scale="50"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="AddingCustomJSFTagsToTheRedHatPalette7433"> - <?dbhtml filename="AddingCustomJSFTagsToTheJBossToolsPalette.html"?> - <title>Adding Custom JSF Tags to the JBoss Tools Palette</title> - - <para>There are two ways to add any custom (including custom Facelets libraries) or 3rd party tag library to the - <property>JBoss Tools Palette</property>:</para> - <itemizedlist> - <listitem> - <para>Drag-and-drop from the Web Projects view</para> - </listitem> - <listitem> - <para>The Import button on the JBoss Tools Palette</para> - </listitem> - </itemizedlist> - <para>Before you add your custom component library, you need to make sure it is - included in your project. You need to either place the <emphasis role="italic"> - <property>&quot;.tld&quot;</property> - </emphasis> file or the <emphasis role="italic"> - <property>&quot;.jar&quot;</property> - </emphasis> that includes your tag library under the lib folder in your project. - Or you can just add <emphasis> <property>&quot;.tld&quot;</property> - </emphasis>or <emphasis> - <property>&quot;.jar&quot;</property></emphasis> file to the classpath and the library will be added to the Tag Library List in Web Projects View.</para> - <section id="Drag_and_Drop65332"> - <?dbhtml filename="DragAndDrop.html"?> - <title>Drag-and-Drop</title> - <para>Switch to the Web Projects view and expand the Tag Libraries folder. If the - view is not active, select <emphasis> - <property>Window > Show View > Web Projects</property> - </emphasis> from the menu bar.</para> - <figure> - <title>Web Projects View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_3.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Also make sure that the JBoss Tools Palette is open. Select the tag library - that you want to add and simply drag-and-drop it on to the JBoss Tools Palette.</para> - <para>You will see the following dialog window. As you can see JBoss Developer - Studio takes care of all the details. Chosen <emphasis> - <property>TLD file</property> - </emphasis>, <emphasis> - <property>name</property> - </emphasis> and <emphasis> - <property>prefix</property> - </emphasis> of the library and <emphasis> - <property>Library URL</property> - </emphasis> are detected thus just need to set the <emphasis> - <property>Group</property> - </emphasis> name to which you wish to place this tag library. You can either add - this tag library to an existing Group or just create a new one.</para> - <figure> - <title>Import Tags From TLD File Form</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_4.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Once you are finished, you will see the new tag library added to the JBoss - Tools Palette.</para> - <figure> - <title>JBoss Tools Palette with New Tag Library</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_5.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ImportButton521"> - <?dbhtml filename="ImportButton.html"?> - <title>Import Button</title> - <para>The same you can do with <emphasis> - <property>Import</property> - </emphasis> button(<inlinemediaobject> <imageobject> - <imagedata fileref="images/palette/palette_6.png"/> - </imageobject></inlinemediaobject>).You can see this button at the top right side of the JBoss Tools Palette. - </para> - <para>By clicking on the <emphasis> - <property>Import button</property> - </emphasis> you will see the Import Tag window a similar like in the <xref - linkend="Drag_and_Drop65332"/> method. Set the name and - prefix of the library and Library URL. Also you need to set the Group name to - which you&apos;d like to add your tag library. And like in the previous - method you can add it to an existing Group or create a new one. On this Import - Tag form you can use <emphasis> - <property>Browse...</property> - </emphasis>button to locate the tag library that you want to add:</para> - <figure> - <title>Select TLD File</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/palette/palette_8.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - </section> - -</chapter> +<?xml version='1.0' encoding='UTF-8'?> +<chapter id="palette"> +<?dbhtml filename="palette.html"?> + <chapterinfo> + <keywordset> + <keyword>Jboss Tools palette</keyword> + + <keyword>tags</keyword> + + <keyword>JSP page</keyword> + </keywordset> + </chapterinfo> + <title>JBoss Tools Palette</title> + <para> + This chapter will introduce you to the functionality provided by <property>JBoss Tools Palette</property>. The Palette allows you to quickly and easily create your JSP or JSF pages. Now you can do it more faster without additional knowledge. + </para> + + <para> + The <property>JBoss Tools Palette</property> allows you to: + </para> + + <itemizedlist> + <listitem> + <para> + Insert tags into a JSP or JSF page with one click + </para> + </listitem> + + <listitem> + <para> + Add custom and 3rd party tags + </para> + </listitem> + </itemizedlist> + + <para> + The JBoss Tools Palette contains a developer's project tag libraries and provides possibility to add any tag libraries to it. Also you can choose a necessary one from the list of already existing tag libraries: + </para> + + <itemizedlist> + <listitem> + <para> + HTML + </para> + </listitem> + + <listitem> + <para> + JBoss + </para> + </listitem> + + <listitem> + <para> + JSF + </para> + </listitem> + + <listitem> + <para> + JSTL + </para> + </listitem> + + <listitem> + <para> + MyFaces + </para> + </listitem> + + <listitem> + <para> + Oracle ADF Faces + </para> + </listitem> + + <listitem> + <para> + Struts + </para> + </listitem> + + <listitem> + <para> + XHTML + </para> + </listitem> + </itemizedlist> + + <figure> + <title>Default View of The JBoss Tools Palette</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + By default <property>JBoss Tools Palette</property> is not displayed. If you want to use it select <menuchoice><guimenuitem>Window</guimenuitem><guimenuitem>Show View Other...</guimenuitem><guimenuitem>JBoss Tools Web</guimenuitem><guimenuitem>JBoss Tools Palette</guimenuitem></menuchoice> from the menu bar. + </para> + + <para> + The standard <property>Eclipse Palette</property> is displayed by default in both Web Development and Seam perspectives. Now the standard <property>Eclipse Palette</property> is featured with all <property>JBoss Tools Palette</property> options and capabilities. + </para> + + <para> + To open the standard <property>Eclipse Palette</property> navigate to <menuchoice><guimenuitem>Window</guimenuitem><guimenuitem>Show View</guimenuitem><guimenuitem>Others</guimenuitem><guimenuitem>General</guimenuitem><guimenuitem>Palette</guimenuitem></menuchoice>. + </para> + + <para> + The differences between the two palettes are as follows: + </para> + + <itemizedlist> + <listitem> + <para> + The standard <property>Eclipse Palette</property> is blank by default. Content of the palette is available only if Visual Page Editor is open and active, while JBoss Tools Palette always contains a predefined set of components. + </para> + </listitem> + + <listitem> + <para> + The Expanded/Collapsed state of components in the standard Eclipse Palette is not global as in JBoss Tools Palette. State is associated with an instance of Visual Page Editor. It means that the state can be different for various files and each new file opened in Visual Page Editor will have the default state of Palette with all components collapsed. + </para> + </listitem> + </itemizedlist> + + <section id="PaletteOptions"> +<?dbhtml filename="PaletteOptions.html"?> + <title>Palette Options</title> + <para> + To facilitate your work, you can configure the Palette in your own way by selecting the corresponding icon on the Palette toolbar. + </para> + + <para> + There is a possibility to configure the JBoss Tools Palette: + </para> + + <itemizedlist> + <listitem> + <para> + to <property>edit the palette</property> content by adding, removing or changing the palette elements + </para> + </listitem> + + <listitem> + <para> + to <property>show/hide</property> groups, subgroups + </para> + </listitem> + + <listitem> + <para> + to <property>import</property> groups, subgroups + </para> + </listitem> + </itemizedlist> + + <figure> + <title>Palette Buttons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_9.png"/> + </imageobject> + </mediaobject> + </figure> + + <section id="PaletteEditor"> +<?dbhtml filename="PaletteEditor.html"?> + <title>Palette Editor</title> + <para> + JBoss Tools Palette contains existing libraries of tags, thus the <property>Palette editor</property> is intended to work with them or create your new one as well. + </para> + + <para> + To open the editor, click on the <emphasis> <property>Palette Editor</property> </emphasis> icon( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_7.png"/> + </imageobject> + </inlinemediaobject> + ). + </para> + + <para> + The window has two parts. There is a reflected grouped list of components on the left side of the palette editor. Each group is divided into multiple groups, every of which is a tag library. The right side of the palette editor is an editing window where it&apos;s possible to change values of group or tag library attributes that you&apos;ve chosen on the left part of the window. + </para> + + <para> + It can also be done by right click and using <emphasis> <property>Edit…</property> </emphasis> option. + </para> + + <literallayout/> + + <para> + For example, <property>JSF</property> group consists of <property>Core</property>, <property>Facelets</property>, <property>HTML</property> tag libraries and the attributes as <property>name</property>, <property>description</property> and <property>hidden</property> which are available for editing: + </para> + + <figure> + <title>Tag Libraries of the JSF Group</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_24.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The Palette Editor provides the following possibilities when working with existing tags or icons: + </para> + + <itemizedlist> + <listitem> + <para> + to work with a set of icons + </para> + + <para> + <emphasis> <property>Icons</property> </emphasis> is the root folder for the icon sets. The first step is creating the icon set. Right click on the <emphasis> <property>Icons</property> </emphasis> folder and select <menuchoice><guimenuitem>Create</guimenuitem><guimenuitem>Create Set...</guimenuitem></menuchoice>. + </para> + + <para> + Set the value of the name in the <emphasis> <property>Add Icons</property> </emphasis> window and click the <guibutton>Finish</guibutton> button. A new element will appear in the list. + </para> + + <figure> + <title>Creating a Set of Icons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_17.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Also you can delete the set. Right click on the set of icons that you wish to remove and chose the <emphasis> <property>Delete</property> </emphasis> option from the pop-up menu or click the <emphasis> <property>Delete</property> </emphasis> keyboard button. + </para> + </listitem> + + <listitem> + <para> + to edit icons in the chosen set + </para> + + <para> + When the set of icons is created, new icons can be imported to it. Choose the required set and select the option <menuchoice><guimenuitem>Create</guimenuitem><guimenuitem>Import Icon...</guimenuitem></menuchoice> from the pop-up menu that appears after you right-click on a folder. + </para> + + <figure> + <title>Creating Icons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_18.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Set the name of the icon and the path and click the <guibutton>Finish</guibutton> button. + </para> + </listitem> + + <listitem> + <para> + to work with a group of tag libraries + </para> + + <para> + The first step in work with the editor is creating a group of libraries. It&apos;s very easy to do, right mouse button click on the <emphasis> <property>Palette</property> </emphasis> folder and select <menuchoice><guimenuitem>Create</guimenuitem><guimenuitem>Create Group…</guimenuitem></menuchoice> + </para> + + <para> + Set a name of a group in the <property>Create Group</property> window and click the <guibutton>OK</guibutton> button. A new element will appear at the end of the list. + </para> + + <figure> + <title>Creating a Group of Tag Libraries</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_19.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You are allowed to edit or delete a group as well. If you&apos;d like to change attributes of a group, use the right editing window of the palette editor or the <emphasis> <property>Edit...</property> </emphasis> option, like it was mentioned before. In order to remove the group, right click on the group that you wish to remove and choose the <emphasis> <property>Delete</property> </emphasis> option or click the <emphasis> <property>Delete</property> </emphasis> keyboard button. + </para> + + <important> + <title>Important:</title> + <para> + The removal option is enabled only for custom folders. + </para> + </important> + </listitem> + + <listitem> + <para> + to work with a tag library + </para> + + <para> + The group maintains a list of tag libraries. If you&apos;d like to create your own library, click right mouse button on the group and choose <emphasis> <property>Create Group…</property> </emphasis> option. + </para> + + <figure> + <title>Creating a tag library</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_20.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + After setting the attribute name and the path of the icon, click the <guibutton>Ok</guibutton> button. + </para> + + <note> + <title>Note:</title> + <para> + If you do not choose an icon the default one will be assigned. + </para> + </note> + + <para> + You are allowed to edit or delete the tag library, as well. If you&apos;d like to change attributes of the library or choose another icon, use the right editing window of the palette editor or the <emphasis> <property>Edit...</property> </emphasis> option. In order to remove the tag library, right click on the library that you wish to remove and chose the <emphasis> <property>Delete</property> </emphasis> option or click the <emphasis> <property>Delete</property> </emphasis> keyboard button. + </para> + + <important> + <title>Important:</title> + <para> + The removal option is enabled only for custom tag libraries. + </para> + </important> + </listitem> + + <listitem> + <para> + to work with a tag element + </para> + + <para> + When the library folder is created, new tags can be added to it. Choose the required library and select the option <menuchoice><guimenuitem>Create</guimenuitem><guimenuitem>Create Macro…</guimenuitem></menuchoice> from the pop-up menu that appears after you right-click on a folder. + </para> + + <figure> + <title>Creating a tag element</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_21.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + In the <property>Add Palette Macro</property> window you can configure the tag element. Attribute <emphasis> <property>Name</property> </emphasis> is mandatory to fill and it will be the name of the tag element. Other settings are optional. You can choose the icon and set the <emphasis> <property>Start Text</property> </emphasis> and the <emphasis> <property>End Text</property> </emphasis> for your tag element. If your tag text is too long, use the <emphasis> <property>Change...</property> </emphasis> button to see it all. For <emphasis> <property>start text</property> </emphasis> and <emphasis> <property>end text</property> </emphasis> there is a possibility to control the cursor position by using "|" symbol. + </para> + + <figure> + <title>Parameters of the Palette element</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_23.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + After all the attributes are set, click <emphasis> <property>Finish</property> </emphasis> button. + </para> + + <note> + <title>Note:</title> + <para> + If you do not choose an icon the default one will be assigned. + </para> + </note> + + <para> + You are also allowed to edit or delete the tag. If you&apos;d like to change the attributes of the tag or choose another icon for it, use the right editing window of the palette editor or the <emphasis> <property>Edit...</property> </emphasis> option from the pop-up menu. In order to remove the tag, right click on the tag that you wish to remove and chose the <emphasis> <property>Delete</property> </emphasis> option or click the <emphasis> <property>Delete</property> </emphasis> keyboard button. + </para> + + <important> + <title>Important:</title> + <para> + The removal option is enabled only for custom tags. JBoss Palette tags can not be removed but can be modified. + </para> + </important> + </listitem> + </itemizedlist> + + <para> + If you have changed any object in the tree view and you don't like the final result you can always use the <emphasis><property>Restore Defaults</property></emphasis> button. Click on it will restore defaults for the object selected and for its children elements. Please remember that the button will only restore data for objects defined in the default palette. If selected object is created by you, the button will be disabled. Child objects added by you will not be removed. + </para> + + <para> + When updating JBoss Tools the palette content is not updated. + </para> + </section> + + <section id="show_hide"> +<?dbhtml filename="Show/Hide.html"?> + <title>Show/Hide</title> + <para> + <emphasis> <property>Show/Hide</property> </emphasis> is a very useful feature that allows you to control the number of tag groups that are shown on the palette. + </para> + + <itemizedlist> + <listitem> + <para> + Click <emphasis> <property>Show/Hide</property> </emphasis> button( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_10.png"/> + </imageobject> + </inlinemediaobject> + ), at the top right side of the JBoss Tools Palette. + </para> + </listitem> + </itemizedlist> + + <itemizedlist> + <listitem> + <para> + In the dialog Show/Hide Drawers check the groups the libraries of which you want to be shown on the palette: + </para> + </listitem> + </itemizedlist> + + <figure> + <title>Show/Hide Drawers</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_11.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + If libraries are not displayed in the palette, check whether they are selected. Click the plus sign to expand the libraries of the group and make sure that a tick is put next to the wanted libraries. + </para> +<!-- <para>(When you deactivate the group(s), the JBoss Palette remembers your last chose. + The libraries… )</para> + --> + <itemizedlist> + <listitem> + <para> + Click <emphasis><property>OK</property>.</emphasis> The new groups will now be shown on the palette: + </para> + </listitem> + </itemizedlist> + + <figure> + <title>New Added Groups</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_12.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The names of the elements are compound. The first part is the group name and the second is the library name. + </para> + </section> + + <section id="Import"> +<?dbhtml filename="Import.html"?> + <title>Import</title> + <para> + The Import button lets you add a custom or 3rd party tag library to JBoss Tools Palette. Find out more information on how to add particular tags see the <xref + linkend="ImportButton521"/> section. +<!--<link linkend="CreatingAndWorkingCustomCapability">Learn how to import</link>. --> + </para> + </section> + </section> + + <section id="UsingThePaletteIncludingOneClickTagInsertion"> +<?dbhtml filename="UsingThePaletteIncludingOneClickTagInsertion.html"?> + <title>Using the Palette</title> + <section id="InsertingTagsIntoAJSPFile"> +<?dbhtml filename="InsertingTagsIntoAJSPFile.html"?> + <title>Inserting Tags into a JSP File</title> + <para> + A new tag can be added into any text file including jsp, htm, html and xhtml. + </para> + + <para> + Let&apos;s do it. Open your JSP file and place the cursor in a place where you&apos;d like to add a tag and then click that tag in the palette. In the <property>Insert Tag</property> window that appears, you can set the value of<emphasis> <property>general</property> </emphasis> and <emphasis> <property>advanced</property> </emphasis> attributes of the tag that you choose. + </para> + + <figure> + <title>Inserting Tag</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_25.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + In the example below the <emphasis> <property>commandButton</property> </emphasis> tag has been inserted. + </para> + + <figure> + <title>Inserting Tag</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_2.png" scale="80"/> + </imageobject> + </mediaobject> + </figure> + + <note> + <title>Tip:</title> + <para> + if you place the cursor over any tag, a balloon hint is shown with all the <emphasis role="italic"> <property>&quot;tag&quot;</property> </emphasis> attributes. + </para> + </note> + + <para> + The cursor position after adding a tag into a file is specified by &quot;|&quot; symbol in the tag template on the right in the Palette Editor window. + </para> + + <figure> + <title>Palette Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_15.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Above you can see where the cursor position for <menuchoice><guimenuitem>HTML</guimenuitem><guimenuitem>Form</guimenuitem><guimenuitem>input</guimenuitem></menuchoice> is set. Thus after adding this tag into your file the cursor will be in the attribute &quot;type&quot;. Then, you can straight use the combination of buttons <keycombo><keycap>Ctrl</keycap><keycap>Space</keycap></keycombo> to inquire about a prompting. + </para> + + <figure> + <title>Cursor position</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_16.png" scale="50"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="AddingCustomJSFTagsToTheRedHatPalette7433"> +<?dbhtml filename="AddingCustomJSFTagsToTheJBossToolsPalette.html"?> + <title>Adding Custom JSF Tags to the JBoss Tools Palette</title> + <para> + There are two ways to add any custom (including custom Facelets libraries) or 3rd party tag library to the <property>JBoss Tools Palette</property>: + </para> + + <itemizedlist> + <listitem> + <para> + Drag-and-drop from the Web Projects view + </para> + </listitem> + + <listitem> + <para> + The Import button on the JBoss Tools Palette + </para> + </listitem> + </itemizedlist> + + <para> + Before you add your custom component library, you need to make sure it is included in your project. You need to either place the <emphasis role="italic"> <property>&quot;.tld&quot;</property> </emphasis> file or the <emphasis role="italic"> <property>&quot;.jar&quot;</property> </emphasis> that includes your tag library under the lib folder in your project. Or you can just add <emphasis> <property>&quot;.tld&quot;</property> </emphasis>or <emphasis> <property>&quot;.jar&quot;</property></emphasis> file to the classpath and the library will be added to the Tag Library List in Web Projects View. + </para> + + <section id="Drag_and_Drop65332"> +<?dbhtml filename="DragAndDrop.html"?> + <title>Drag-and-Drop</title> + <para> + Switch to the Web Projects view and expand the Tag Libraries folder. If the view is not active, select <menuchoice><guimenuitem>Window</guimenuitem><guimenuitem>Show View</guimenuitem><guimenuitem>Web Projects</guimenuitem></menuchoice> from the menu bar. + </para> + + <figure> + <title>Web Projects View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Also make sure that the JBoss Tools Palette is open. Select the tag library that you want to add and simply drag-and-drop it on to the JBoss Tools Palette. + </para> + + <para> + You will see the following dialog window. As you can see JBoss Developer Studio takes care of all the details. Chosen <emphasis> <property>TLD file</property> </emphasis>, <emphasis> <property>name</property> </emphasis> and <emphasis> <property>prefix</property> </emphasis> of the library and <emphasis> <property>Library URL</property> </emphasis> are detected thus just need to set the <emphasis> <property>Group</property> </emphasis> name to which you wish to place this tag library. You can either add this tag library to an existing Group or just create a new one. + </para> + + <figure> + <title>Import Tags From TLD File Form</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_4.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Once you are finished, you will see the new tag library added to the JBoss Tools Palette. + </para> + + <figure> + <title>JBoss Tools Palette with New Tag Library</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_5.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="ImportButton521"> +<?dbhtml filename="ImportButton.html"?> + <title>Import Button</title> + <para> + The same you can do with <emphasis> <property>Import</property> </emphasis> button( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_6.png"/> + </imageobject> + </inlinemediaobject> + ).You can see this button at the top right side of the JBoss Tools Palette. + </para> + + <para> + By clicking on the <emphasis> <property>Import button</property> </emphasis> you will see the Import Tag window a similar like in the <xref + linkend="Drag_and_Drop65332"/> method. Set the name and prefix of the library and Library URL. Also you need to set the Group name to which you&apos;d like to add your tag library. And like in the previous method you can add it to an existing Group or create a new one. On this Import Tag form you can use <emphasis> <property>Browse...</property> </emphasis>button to locate the tag library that you want to add: + </para> + + <figure> + <title>Select TLD File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_8.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + </section> +</chapter> Modified: trunk/jsf/docs/userguide/en-US/spring_tools.xml =================================================================== --- trunk/jsf/docs/userguide/en-US/spring_tools.xml 2011-03-15 18:41:32 UTC (rev 29797) +++ trunk/jsf/docs/userguide/en-US/spring_tools.xml 2011-03-15 21:57:49 UTC (rev 29798) @@ -1,27 +1,60 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter id="springTools"> - <?dbhtml filename="springTools.html"?> - <title>Spring Tools</title> - - <para>JBoss Developer Studio is bundled with <ulink url="http://springide.org/project">Spring IDE</ulink> for Eclipse. - Visit Spring IDE site for the latest versions and documentation.</para> - - - <section> - <title><ulink url="http://springide.org/project/wiki/SpringideGuide">Spring IDE guide</ulink></title> - - <para><ulink url="http://springide.org/project">Spring IDE</ulink> is a graphical user interface for the configuration files used by the <ulink url="http://www.springframework.org/">Spring Framework</ulink>. It's built as a set of plugins for the Eclipse platform.</para> - - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#AddProjectNatu... Spring Project Nature</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#CreateNewProje... New Spring Project</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#AddProjectRefe... References To Other Spring Projects</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#AddBeansConfig... Spring Beans Config Files</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#CreateBeansCon... Spring Beans Config Sets</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#OpenSpringExpl... Spring Explorer</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#ValidateBeansC... Spring Beans Config</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#OpenBeansGraph... Spring Beans Graph</ulink></title><para/></section> - <section><title><ulink url="http://springide.org/project/wiki/SpringideGuide#SearchBeans&qu... Spring Beans</ulink></title><para/></section> - - </section> - - </chapter> +<?xml version="1.0" encoding="UTF-8"?> +<chapter id="springTools"> +<?dbhtml filename="springTools.html"?> + <title>Spring Tools</title> + <para> + JBoss Developer Studio is bundled with the <ulink url="http://springide.org/project">Spring IDE</ulink> for Eclipse. Visit Spring IDE site for the latest versions and documentation. + </para> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide">Spring IDE guide</ulink></title> + <para> + The <ulink url="http://springide.org/project">Spring IDE</ulink> is a graphical user interface for the configuration files used by the <ulink url="http://www.springframework.org/">Spring Framework</ulink>. It is built as a set of plugins for the Eclipse platform. + </para> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#AddProjectNatu... Spring Project Nature</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#CreateNewProje... New Spring Project</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#AddProjectRefe... References To Other Spring Projects</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#AddBeansConfig... Spring Beans Config Files</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#CreateBeansCon... Spring Beans Config Sets</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#OpenSpringExpl... Spring Explorer</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#ValidateBeansC... Spring Beans Config</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#OpenBeansGraph... Spring Beans Graph</ulink></title> + <para/> + </section> + + <section> + <title><ulink url="http://springide.org/project/wiki/SpringideGuide#SearchBeans&qu... Spring Beans</ulink></title> + <para/> + </section> + </section> +</chapter>