Author: ochikvina Date: 2007-11-15 10:43:57 -0500 (Thu, 15 Nov 2007) New Revision: 4923 Modified: trunk/jsf/docs/userguide/en/modules/palette.xml Log: http://jira.jboss.com/jira/browse/RHDS-301 - fixing bugs in chapter 5 Modified: trunk/jsf/docs/userguide/en/modules/palette.xml =================================================================== --- trunk/jsf/docs/userguide/en/modules/palette.xml 2007-11-15 15:42:45 UTC (rev 4922) +++ trunk/jsf/docs/userguide/en/modules/palette.xml 2007-11-15 15:43:57 UTC (rev 4923) @@ -1,231 +1,434 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter id="palette" xreflabel="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>The <property>JBoss Tools Palette</property> contains all your project tag libraries and allows you to:</para> + <chapterinfo> + <keywordset> + <keyword>Jboss Tools palette</keyword> + <keyword>tags</keyword> + <keyword>JSP page</keyword> + </keywordset> + </chapterinfo> + <title>JBoss Tools Palette</title> + <para>The <property>JBoss Tools Palette</property> allows you to:</para> -<itemizedlist> -<listitem><para>Insert tags into a JSP page with one click</para></listitem> -<listitem><para>Add custom and 3rd party tags. <link linkend="AddingCustomJSFTagsToTheRedHatPalette7433">How to add</link></para></listitem> -</itemizedlist> + <itemizedlist> + <listitem> + <para>Insert tags into a JSP page with one click</para> + </listitem> + <listitem> + <para>Add custom and 3rd party tags.</para> + </listitem> + </itemizedlist> -<para>In this chapter we will also show you how to configure options for the palette.</para> + <para>The <property>JBoss Tools Palette</property> also provides possibility to add any tag + libraries to it. Or you can choose a necessary one from the list of already existent 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>Pallete Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/palette_editor.png"/> + </imageobject> + </mediaobject> + </figure> + <section id="UsingThePalette(IncludingOne-ClickTagInsertion)"> -<?dbhtml filename="UsingThePalette(IncludingOne-ClickTagInsertion).html"?> -<title>Using the Palette (Including One-Click Tag Insertion)</title> -<section id="RedHatPalette"> - <?dbhtml filename="JBossToolsPalette.html"?> - <title>JBoss Tools Palette</title> + <?dbhtml filename="UsingThePalette(IncludingOne-ClickTagInsertion).html"?> + <title>Using the Palette</title> + <section id="RedHatPalette"> + <?dbhtml filename="JBossToolsPalette.html"?> + <title>JBoss Tools Palette</title> - + <para> In the Palette Editor window(Figure 5.1. &quot;Palette Editor&quot;) we can see that every + group contains its own subgroups. For example, JSF includes Core, Facelets, HTML. + So, in the Palette every group has the next view: &lt;Group name&gt; + &lt;Subgroup name&gt;. </para> -<para>The palette becomes active when you open any JSP page. If you can&apos;t see the palette, select <emphasis><property>Window &gt; Show View Other... &gt; JBoos Tools Web &gt; JBoss Tools Palette</property></emphasis> from the menu bar.</para> + <figure> + <title>JBoss Tools Palette</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_1.png"/> + </imageobject> + </mediaobject> + </figure> -<para>The palette shown lists various tags organized by groups. You can see JSF, JSTL and Struts tag groups. By default there are four groups in the <property>Palette</property>.</para> -<figure> -<title>JBoss Tools Palette</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_1.png"/> - </imageobject> -</mediaobject> -</figure> -</section> -<section id="InsertingTagsIntoAJSPFile"> -<?dbhtml filename="InsertingTagsIntoAJSPFile.html"?> -<title>Inserting Tags into a JSP File</title> + <para>By default the Palette is represented in Web Development Perspective with four + groups(Figure 5.2. &quot;JBoss Tools Palette&quot;). If you can&apos;t see it, select <emphasis> + <property>Window &gt; Show View Other... &gt; JBoos Tools Web &gt; + JBoss Tools Palette</property> + </emphasis> from the menu bar.</para> -<para>To insert a new tag is very simple. Place the cursor in the JSP page where you want to add a tag and -then click the tag in the palette. In the example below, the commandButton tag has been inserted. Notice also that if you place the cursor over any tag, a balloon tip is shown with all the <emphasis role="italic"><property>&quot;tag&quot;</property></emphasis> attributes.</para> -<figure> -<title>Inserting Tag</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_2.png"/> - </imageobject> -</mediaobject> -</figure> -</section> + <para>By using <property>Show/Hide</property> button you can add any predefined group of + tag libraries. It&apos;s also possible to create your own group. </para> -<section id="AddingCustomJSFTagsToTheRedHatPalette7433"> -<?dbhtml filename="AddingCustomJSFTagsToTheJBossToolsPalette.html"?> -<title>Adding Custom JSF Tags to the JBoss Tools Palette</title> + </section> -<para>There are two ways to add any custom 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> + <section id="InsertingTagsIntoAJSPFile"> + <?dbhtml filename="InsertingTagsIntoAJSPFile.html"?> + <title>Inserting Tags into a JSP File</title> -<para>Before you can add your custom component library, you need to make sure it is included in your project. - 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. - Restart RHDS.</para> - <para>The best way to add any custom library is by using the <link linkend="AddingCustomCapabilityFeaturesTemplates">Custom Capability feature</link>. It is also possible to just copy the Jar file directly under project <emphasis>WEB-INF/lib</emphasis> directory.</para> - </section> - <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 not active, select - <emphasis><property>Window > Show View > Web Projects</property></emphasis> from the menu bar.</para> + <para>A new tag can be added into any text file including jsp, xhtml и htm(l).</para> + <para>It&apos;s very simple to do this. Place the cursor in the JSP page where you + want to add a tag and then click the tag in the palette. In the example below, the + commandButton tag has been inserted. Notice also that if you place the cursor over + any tag, a balloon tip is shown with all the <emphasis role="italic"> + <property>&quot;tag&quot;</property> + </emphasis> attributes.</para> -<figure> -<title>Web Projects View</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_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 Red Hat Developer Studio takes care of all the details. - You just need to set the Group name to which to add 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/pallete_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>Inserting Tag</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_2.png"/> + </imageobject> + </mediaobject> + </figure> + <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/PaletteEditor2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> Above you can see where the cursor position for HTML/Form/input is set. So, 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>JBoss Tools Palette with New Tag Library</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_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.</para> -<figure> -<title>Import Button</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_6.png"/> - </imageobject> -</mediaobject> -</figure> -<para>On this screen you can select <emphasis><property>Browse</property></emphasis> to locate the tag library that you want to add.</para> -<figure> -<title>Import Tags From TLD File Form</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_7.png"/> - </imageobject> -</mediaobject> -</figure> -<para>Now select the TLD file you want to be edited:</para> -<figure> -<title>Select TLD File</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_8.png"/> - </imageobject> -</mediaobject> -</figure> -</section> -</section> + <figure> + <title>Cursor position</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/Cursor_position.png"/> + </imageobject> + </mediaobject> + </figure> -<section id="PaletteOptions"> -<?dbhtml filename="PaletteOptions.html"?> -<title>Palette Options</title> + </section> -<para>There are a number of ways you can configure JBoss Tools Palette options. There are three buttons at the top right corner:</para> + <section id="AddingCustomJSFTagsToTheRedHatPalette7433"> + <?dbhtml filename="AddingCustomJSFTagsToTheJBossToolsPalette.html"?> + <title>Adding Custom JSF Tags to the JBoss Tools Palette</title> -<itemizedlist> -<listitem><para>Palette Editor</para></listitem> -<listitem><para>Show/Hide</para></listitem> -<listitem><para>Import</para></listitem> -</itemizedlist> -<figure> -<title>Palette Buttons</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_9.png"/> - </imageobject> -</mediaobject> -</figure> -<section id="PaletteEditor"> -<?dbhtml filename="PaletteEditor.html"?> -<title>Palette Editor</title> + <para>There are two ways to add any custom 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>This allows you to edit the tags on the palette.</para> -<section id="Show/Hide"> -<?dbhtml filename="Show/Hide.html"?> -<title>Show/Hide</title> + <para>Before you can add your custom component library, you need to make sure it is + included in your project. 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. + </para> + </section> -<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</para></listitem> -</itemizedlist> -<figure> -<title>Show/Hide Button</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_10.png"/> - </imageobject> -</mediaobject> -</figure> + <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 + not active, select <emphasis> + <property>Window > Show View > Web Projects</property> + </emphasis> from the menu bar.</para> -<itemizedlist> -<listitem><para>In the dialog Show/Hide Drawers check the groups you want to be shown on the palette:</para></listitem> -</itemizedlist> -<figure> -<title>Show/Hide Drawers</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_11.png"/> - </imageobject> -</mediaobject> -</figure> -<itemizedlist> -<listitem><para>Click <emphasis><property>OK</property></emphasis>. The new groups will now be displayed on the palette:</para></listitem> -</itemizedlist> -<figure> -<title>New Added Groups</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_12.png"/> - </imageobject> -</mediaobject> -</figure> -</section> -<section id="Import"> -<?dbhtml filename="Import.html"?> -<title>Import</title> + <figure> + <title>Web Projects View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_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 Red Hat Developer Studio + takes care of all the details. You just need to set the Group name to which to add + 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/pallete_4.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Once you are finished, you will see the new tag library added to the JBoss Tools + Palette.</para> -<para>The Import button lets you add a custom or 3rd party tag library to <property>JBoss Tools Palette</property>. See <link linkend="ImportButton521">here</link> how to add. -<!--<link linkend="CreatingAndWorkingCustomCapability">Learn how to import</link>. --></para> + <figure> + <title>JBoss Tools Palette with New Tag Library</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_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.</para> + <figure> + <title>Import Button</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_6.png"/> + </imageobject> + </mediaobject> + </figure> + <para>On this screen you can select <emphasis> + <property>Browse</property> + </emphasis> to locate the tag library that you want to add.</para> + <figure> + <title>Import Tags From TLD File Form</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_7.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Now select the TLD file you want to be added:</para> + <figure> + <title>Select TLD File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_8.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> -</section> -</section> + <section id="PaletteOptions"> + <?dbhtml filename="PaletteOptions.html"?> + <title>Palette Options</title> -</section> -<section id="RichFacesSupport"> -<?dbhtml filename="RichFacesSupport.html"?> -<title>Rich Faces Support</title> -<para>Red Hat Developer Studio comes with a tight integration with <emphasis><property>Rich Faces</property></emphasis> component framework. After installing RHDS Rich Faces components as well as <emphasis><property>Ajax4jsf</property></emphasis> ones are already on the <property>JBoss Tools Palette</property>:</para> -<figure> -<title>Rich Faces Components</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/palette/pallete_13.png"/> - </imageobject> -</mediaobject> -</figure> -</section> + <para>There is possibility to configure the <property>JBoss Tools Palette</property>:</para> -</chapter> \ No newline at end of file + <itemizedlist> + <listitem> + <para> to edit the palette content by adding, removing or changing the palette + elements</para> + </listitem> + <listitem> + <para> to show/hide groups, subgroups</para> + </listitem> + <listitem> + <para>to import groups, subgroups</para> + </listitem> + </itemizedlist> + + <figure> + <title>Palette Buttons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_9.png"/> + </imageobject> + </mediaobject> + </figure> + <section id="PaletteEditor"> + <?dbhtml filename="PaletteEditor.html"?> + <title>Palette Editor</title> + + <para>To edit the Pallete view use <property>Edit</property> button. The Palette + Editor provides following possibilities: <itemizedlist> + <listitem> + <para>to work with set of icons.</para> + <figure> + <title>Creating a set of icons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/PaletteEditor3.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + + <listitem> + <para>to edit icons in the chosen set</para> + <figure> + <title>Editing icons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/PaletteEditor4.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para>to edit a group</para> + <figure> + <title>Editing a group</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/PaletteEditor5.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para>to edit a subgroup</para> + <figure> + <title>Editing a subgroup</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/PaletteEditor6.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para>to edit a subgroup content</para> + <figure> + <title>Editing a subgroup content</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/PaletteEditor7.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para>to edit a palette element or macro</para> + <figure> + <title>Editing a palette element </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/PaletteEditor8.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Parameters of the Palette element are put into the table on the right. + Table cells are provided with editors and modal dialogue windows for + choosing necessary icons. For &apos;start text&apos; and &apos;end text&apos;(or macro) there is + possibility to control the cursor position by using &quot;|&quot; symbol. </para> + <figure> + <title>Parameters of the Palette element</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/PaletteEditor9.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + + </itemizedlist> + </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</para> + </listitem> + </itemizedlist> + <figure> + <title>Show/Hide Button</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_10.png"/> + </imageobject> + </mediaobject> + </figure> + + <itemizedlist> + <listitem> + <para>In the dialog Show/Hide Drawers check the groups you want to be shown on + the palette:</para> + </listitem> + </itemizedlist> + <figure> + <title>Show/Hide Drawers</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_11.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>Click <emphasis> + <property>OK</property> + </emphasis>. The new groups will now be displayed on the palette:</para> + </listitem> + </itemizedlist> + <figure> + <title>New Added Groups</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_12.png"/> + </imageobject> + </mediaobject> + </figure> + </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 + <property>JBoss Tools Palette</property>. See <link linkend="ImportButton521" + >here</link> how to add. + <!--<link linkend="CreatingAndWorkingCustomCapability">Learn how to import</link>. --></para> + + </section> + </section> + + <section id="RichFacesSupport"> + <?dbhtml filename="RichFacesSupport.html"?> + <title>Rich Faces Support</title> + <para>Red Hat Developer Studio comes with a tight integration with <emphasis> + <property>Rich Faces</property> + </emphasis> component framework. After installing RHDS Rich Faces components as well as <emphasis> + <property>Ajax4jsf</property> + </emphasis> ones are already on the <property>JBoss Tools Palette</property>:</para> + <figure> + <title>Rich Faces Components</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/palette/pallete_13.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + +</chapter>