Author: mcaspers Date: 2011-03-15 00:00:12 -0400 (Tue, 15 Mar 2011) New Revision: 29778 Modified: trunk/jsf/docs/userguide/en-US/editors.xml Log: "General editing and screenshot updates" Modified: trunk/jsf/docs/userguide/en-US/editors.xml =================================================================== --- trunk/jsf/docs/userguide/en-US/editors.xml 2011-03-14 23:06:40 UTC (rev 29777) +++ trunk/jsf/docs/userguide/en-US/editors.xml 2011-03-15 04:00:12 UTC (rev 29778) @@ -1,2627 +1,3272 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter id="jbds_editors" role="updated"> - <?dbhtml filename="editors.html"?> - <chapterinfo> - <keywordset> - <keyword>JBoss Developer Studio</keyword> - <keyword>JBDS</keyword> - <keyword>Editor</keyword> - </keywordset> - </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 - <xref linkend="OpenOnSelection4Hyperlinknavigation"/> and - <xref linkend="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"/> - features, which are described in more details in this document. In addition this document will cover the - <xref linkend="visual_page"/>, which provides combined visual and - source editing of Web pages, as well as many <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.</para> - <para>The mentioned features are the following:</para> - <itemizedlist> - <listitem> - <para><xref linkend="OpenOnSelection4Hyperlinknavigation"/></para> - </listitem> - <listitem> - <para><xref linkend="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"/></para> - </listitem> - <listitem> - <para><xref linkend="FullControlOverSourceFiles-SynchronizedSourcAndVisualEditing74"/></para> - </listitem> - </itemizedlist> - <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 <emphasis> - <property>F3</property> - </emphasis> or <emphasis> - <property>Ctrl+Click</property> - </emphasis> on a reference to another file and the file will be opened.</para> - <para>OpenOn is available for:</para> - <itemizedlist> - <listitem> - <para> - <xref linkend="XMLFiles232"/> - </para> - </listitem> - <listitem> - <para> - <xref linkend="JSPPages223"/> - </para> - </listitem> - <listitem> - <para>Java files</para> - </listitem> - <listitem> - <para> - <xref linkend="cssclasses"/> - </para> - </listitem> - <listitem> - <para> - <xref linkend="openonelvariables"/> - </para> - </listitem> - </itemizedlist> - <section id="XMLFiles232"> - <title>XML Files</title> - <para>Press and hold down the <emphasis><property>Ctrl</property></emphasis> key. As you move the mouse cursor over different file references in the file, they display 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.</para> - <para>Use the OpenOn functionality for the next entries defined in XML file:</para> - <orderedlist> - <listitem> - <para>Managed beans</para> - <para>In this example source code of the managed bean <emphasis><property - >&quot;User&quot;</property></emphasis> will be open.</para> - <figure> - <title>Opening a Managed Bean</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_1.png"/> - </imageobject> - </mediaobject> - </figure> - <para>This is the result of using OpenOn.</para> - <figure> - <title>Opened Managed Bean</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_2.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para>Beans properties</para> - <figure> - <title>OpenOn for the Bean Property</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_3.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para>JSP file references</para> - <figure> - <title>OpenOn for JSP Page</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_4.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - </orderedlist> - </section> - <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.</para> - <para>You can use OpenOn for the following JSP/XHTML file entries:</para> - <orderedlist> - <listitem> - <para>Imported property files</para> - <figure> - <title>OpenOn for Property File Imported to the JSP Page</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_5.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para>CSS files used in a JSP/XHTML page</para> - <figure> - <title>OpenOn With CSS File</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_6.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para>Managed beans and their properties</para> - <figure> - <title>OpenOn With Managed Beans</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_7.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para>Navigation rules in JSP 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:</para> - <figure> - <title>OpenOn with JSF Tag</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_8.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para>Custom Facelets tag libraries in XHTML pages</para> - <para>For details, see <xref linkend="openOnForCustomFacelets"/> later in this - guide.</para> - </listitem> - <listitem> - <para>Custom JSF 2.0 components</para> - <figure> - <title>OpenOn with JSF 2.0 Component</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_openon_jsf2_components.png" - /> - </imageobject> - </mediaobject> - </figure> - </listitem> - </orderedlist> - </section> - <section id="cssclasses"> - <title>CSS Classes</title> - <para>You can quickly navigate through CSS classes using OpenOn</para> - <figure> - <title>OpenOn With CSS Class</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_38.png"/> - </imageobject> - </mediaobject> - </figure> - <para>OpenOn is also implemented for css classes added by a complex link.</para> - <figure> - <title>OpenOn With CSS Class added by a complex link</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_39.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="openonelvariables"> - <title>OpenOn for EL variables</title> - <para>OpenOn can be used for paths to files set with EL variable.</para> - <figure> - <title>OpenOn for paths to files set with EL variable</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_openon_el.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - <section id="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"> - <title>Content Assist</title> - <para><property>Content assist</property> is available when working with:</para> - <itemizedlist> - <listitem> - <para> - <ulink url="../../seam/html_single/index.html#ContentAssist">Seam project - files</ulink> - </para> - </listitem> - <listitem> - <para> - <xref linkend="JSFProjectFiles3087"/> - </para> - </listitem> - <listitem> - <para> - <xref linkend="StrutsProjectFile46s3"/> - </para> - </listitem> - <listitem> - <para> - <xref linkend="JSPPages434"/> - </para> - </listitem> - <listitem> - <para> - <xref linkend="ContentAssistForXHTMLPages"/> - </para> - </listitem> - <listitem> - <para> - <xref linkend="ContentAssistForJavaFiles"/> - </para> - </listitem> - <listitem> - <para> - <xref linkend="ContentAssistForRF"/> - </para> - </listitem> - <listitem> - <para> - <ulink url="../../esb_ref_guide/html_single/index.html#ESBContentAssist">ESB - XML files</ulink> - </para> - </listitem> - <listitem> - <para> - <xref linkend="ContentAssistForInsertTag"/> - </para> - </listitem> - </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.</para> - <table> - <title>Content assist icons</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>Icon </entry> - <entry>Type </entry> - <entry>Context </entry> - </row> - </thead> - <tbody> - <row> - <entry> - <para><inlinemediaobject><imageobject> - <imagedata - fileref="images/editors_features/icons_enumaration.png" - /> - </imageobject> - </inlinemediaobject> - </para> - </entry> - <entry> - <para>Enumeration </para> - </entry> - <entry> - <para>Used to show items which exist in the predefined set of - equivalent proposals. </para> - </entry> - </row> - <row> - <entry> - <para><inlinemediaobject><imageobject> - <imagedata - fileref="images/editors_features/icons_seam_el.png" - /> - </imageobject> - </inlinemediaobject> - </para> - </entry> - <entry> - <para>Seam Proposal</para> - </entry> - <entry> - <para>Used to show Seam Context variables, its properties and - methods. </para> - </entry> - </row> - <row> - <entry> - <para><inlinemediaobject><imageobject> - <imagedata - fileref="images/editors_features/icons_jsf_el.png"/> - </imageobject> - </inlinemediaobject> - </para> - </entry> - <entry> - <para>JSF EL </para> - </entry> - <entry> - <para>Used to show Managed Beans, Managed Bean Properties, Managed - Bean Methods, Constants, Resource Bundles, Resource Bundle - Properties. </para> - </entry> - </row> - <row> - <entry> - <para><inlinemediaobject><imageobject> - <imagedata - fileref="images/editors_features/icons_jsf_actions.png" - /> - </imageobject> - </inlinemediaobject> - </para> - </entry> - <entry> - <para>JSF Action </para> - </entry> - <entry> - <para>Used to show navigation rules defined in the <property - >faces-config.xml</property> . </para> - </entry> - </row> - <row> - <entry> - <para><inlinemediaobject><imageobject> - <imagedata - fileref="images/editors_features/icons_message_bundles.png" - /> - </imageobject> - </inlinemediaobject> - </para> - </entry> - <entry> - <para>Message Bundle</para> - </entry> - <entry> - <para>Used to show <property>Messages Resources</property> items. - </para> - </entry> - </row> - <row> - <entry> - <para><inlinemediaobject><imageobject> - <imagedata - fileref="images/editors_features/icons_resource_paths.png" - /> - </imageobject> - </inlinemediaobject> - </para> - </entry> - <entry> - <para>Resource path </para> - </entry> - <entry> - <para>Used to show paths which are accessible from the cursor place. - </para> - </entry> - </row> - </tbody> - </tgroup> - </table> - <figure> - <title>JSF Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_8d.png"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Seam Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_8c.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The ranking and sorting are available in EL code completions.</para> - <para>As you can see, together with proposals content assist also provides descriptions - of selected tags or attributes.</para> - <figure> - <title>Tag description</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_11a.png"/> - </imageobject> - </mediaobject> - </figure> - <section id="JSFProjectFiles3087"> - <title>JSF Project Files</title> - <para>When working with JSF project in JBoss Developer Studio, you can use various - <property>Content Assist features</property> while developing:</para> - <itemizedlist> - <listitem> - <para>Content Assist for XML, XHTML, JSP and JSF configuration files</para> - </listitem> - <listitem> - <para>Content Assist for Composite Components</para> - </listitem> - <listitem> - <para>Content Assist based on project data</para> - </listitem> - <listitem> - <para>Content Assist with graphical JSF editor</para> - </listitem> - </itemizedlist> - <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 <emphasis> - <property>Ctrl-Space</property> - </emphasis> to see what is available.</para> - <para>Content Assist for JSF configuration file:</para> - <figure> - <title>Content Assist in JSF Configuration File</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_9.png" - scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>Content Assist for JSF JSP file:</para> - <figure> - <title>Content Assist in JSP File</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_10.png" - scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>Content Assist for other JSF XML project files (web.xml shown):</para> - <figure> - <title>Content Assist in web.xml File</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_11.png" - scale="85"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ContentAssistforCompositeComponents"> - <title>Content Assist for Composite Components</title> - <para>Content assist functionality is also available for composite components. - On the screen is shown content assist for a composite component file - <property>&quot;tag.xhtml&quot;</property> within a JSF 1.2 project with - facelets</para> - <figure> - <title>Content Assist for Composite Components</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_ca_composite_component.png" - scale="85"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ContentAssistBasedOnProjectData86"> - <title>Content Assist Based on Project Data</title> - <para>JBoss Developer Studio takes Content Assist to the next level. Studio will - constantly scan your project and you will be able to insert code into the - JSP page from your project that includes:</para> - <itemizedlist> - <listitem> - <para>Values from Property files</para> - </listitem> - <listitem> - <para><emphasis role="italic"> - <property>&quot;Managed beans&quot;</property> - </emphasis> attributes and methods</para> - </listitem> - <listitem> - <para>Navigation Rule Outcomes</para> - </listitem> - <listitem> - <para>JSF variables (context, request etc...)</para> - </listitem> - <listitem> - <para>Resource Bundles from template page</para> - </listitem> - </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 <emphasis> - <property>Ctrl-Space</property>. </emphasis> JBoss Developer Studio will - scan your project and show a list of possible values to insert.</para> - <figure> - <title>Inserting Message</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_12.png" - /> - </imageobject> - </mediaobject> - </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.</para> - <para>Once you select a Managed bean, it will show you a list of all available - attributes for the selected Managed bean (userBean).</para> - <figure> - <title>Attributes List</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_13.png" - /> - </imageobject> - </mediaobject> - </figure> - <para>Code Assist based on project data will also prompt you for navigation - rules that exist in your JSF configuration file.</para> - <figure> - <title>Code Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_14.png" - /> - </imageobject> - </mediaobject> - </figure> - <para>Code Assist can also provide you with access to the beans located in jar - archives.</para> - <figure> - <title>Code Assist: accessing beans in jar archives</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_14_a.png"/> - </imageobject> - </mediaobject> - </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. </para> - <figure> - <title>Code Assist: Message Bundles proposals from template page</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_14_b.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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></para> - <figure> - <title>Content Assist in Tree JSF Configuration Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_15.png" - scale="85"/> - </imageobject> - </mediaobject> - </figure> - <!-- - - <para>If a field contains right class name and you click a link near the - field you will come to the file with this class otherwise a new Java - Class dialog will be shown:</para> - <figure> - <title>New Java Class</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_16.png"/> - </imageobject> - </mediaobject> - </figure> - <para>If you entered an incorrect name in the field error markers will be - shown for field labels and tree items:</para> - <figure> - <title>Error Markers</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_17.png"/> - </imageobject> - </mediaobject> - </figure> - <itemizedlist> - <listitem> - <para>To add a new property to a managed bean expand <emphasis> - <property>Managed Beans</property> - </emphasis> and select <emphasis role="bold"> - <property>&lt;name_of_bean&gt;</property> - </emphasis></para> - </listitem> - <listitem> - <para>Click <emphasis> - <property>Add</property> - </emphasis> button in the Properties panel</para> - </listitem> - <listitem> - <para>In the dialog Add Property define a new property. From here - also you can generate setters and getters methods:</para> - </listitem> - </itemizedlist> - <figure> - <title>Create New Property</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_18.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Here you can also add an additional navigation rule to the - faces-config.xml file.</para> - <itemizedlist> - <listitem> - <para>Select <emphasis> - <property>Navigation Rules</property> - </emphasis></para> - </listitem> - <listitem> - <para>Click <emphasis> - <property>Add</property> - </emphasis> button</para> - </listitem> - <listitem> - <para>In the dialog <emphasis> - <property>Add Rule</property> - </emphasis> define a view and give a name to the rule. Click - Finish:</para> - </listitem> - </itemizedlist> - <figure> - <title>Add New Navigation Rule</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_19.png"/> - </imageobject> - </mediaobject> - </figure> - - --> - </section> - </section> - <section id="StrutsProjectFile46s3"> - <title>Struts Project Files</title> - <para>Content Assist features are available when you work with Struts - projects.</para> - <section id="ContentAssistForStrutsConfigurationFile75"> - <title>Content Assist for Struts Configuration File</title> - <para>Content Assist helps you edit Struts Configuration files.</para> - <figure> - <title>Struts Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_20.png" - /> - </imageobject> - </mediaobject> - </figure> - </section> - <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.</para> - <figure> - <title>Struts JSP Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_21.png" - scale="75"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - <section id="JSPPages434"> - <title>JSP Pages</title> - <section id="ContentAssistForJSFTags96"> - <title>Content Assist for JSF Tags</title> - <para>JBDS provides full code completion for JSF tags:</para> - <figure> - <title>JSF Tags Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_22.png" - scale="85"/> - </imageobject> - </mediaobject> - </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.</para> - <figure> - <title>Attributes Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_23.png" - scale="75"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ContentAssistForJSTLTags6332"> - <title>Content Assist for JSTL Tags</title> - <figure> - <title>JSTL Tags Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_24.png" - scale="75"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ContentAssistForHTMLTags7454"> - <title>Content Assist for HTML Tags</title> - <para>Content assist for HTML tags works in the same manner as the JSF tags:</para> - <figure> - <title>HTML Tags Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_25.png" - scale="60"/> - </imageobject> - </mediaobject> - </figure> - <para>Content Assist can also be used for HTML tag attributes:</para> - <figure> - <title>HTML Tags Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_26.png" - scale="60"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ContentAssistForJavaScriptTags67433"> - <title>Content Assist for JavaScript Tags</title> - <figure> - <title>JavaScript Tags Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_27.png" - scale="75"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ContentAssistForEL"> - <title>Content Assist for EL expressions</title> - <para><property>Content Assist</property> also provides expression language - (JSF EL) support. It is used in web application pages to access the - <property>JavaBeans</property> components in the page bean and in other - beans associated with the web application, such as the session bean and the - application bean.</para> - <figure> - <title>EL Content Assist</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/editors_features/editors_features_27b.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - <section id="ContentAssistForXHTMLPages"> - <title>Content Assist for XHTML Pages</title> - <para>The code completion for the Seam components in a Seam project shows the - proposals marked with Seam icon.</para> - <figure> - <title>Content Assist for Seam Components in the XHTML Page</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/contentAssistXHTMLpages1.png"/> - </imageobject> - </mediaobject> - </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.</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.</para> - <figure> - <title>Content assist for JavaDoc</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_33.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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.</para> - <figure> - <title>Content Assist for Insert Tag Wizard</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/editors_features_27a.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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> - <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></para> - </listitem> - </orderedlist> - <para>Follow these steps to set what is available for code assist:</para> - <itemizedlist> - <listitem> - <para>Adds code assist for JSF pre-defined objects, such as - <code>value=&quot;#{param}&quot;</code> :</para> - </listitem> - </itemizedlist> - <programlisting role="XML"><![CDATA[<AttributeType ...> - <proposal type="jsfVariables"/> -</AttributeType> -]]></programlisting> - <itemizedlist> - <listitem> - <para>Add a bundle resource (property file) <property>code - assist</property>:</para> - </listitem> - </itemizedlist> - <programlisting role="XML"><![CDATA[<AttributeType ...> - <proposal type="bundleProperty"/> -</AttributeType> -]]></programlisting> - <itemizedlist> - <listitem> - <para>Add a managed bean property <property>code assist</property>:</para> - </listitem> - </itemizedlist> - <programlisting role="XML"><![CDATA[<AttributeType ...> - <proposal type="beanProperty"/> -</AttributeType> -]]></programlisting> - <itemizedlist> - <listitem> - <para>Add a managed bean property, specifying a type:</para> - </listitem> - </itemizedlist> - <programlisting role="XML"><![CDATA[<AttributeType ...> - <proposal type="beanProperty"> - <param name="type" value="java.lang.Boolean"/> - </proposal> -</AttributeType> -]]></programlisting> - <itemizedlist> - <listitem> - <para>Add a managed bean method with a signature:</para> - </listitem> - </itemizedlist> - <programlisting role="XML"><![CDATA[<AttributeType ...> - <proposal type="beanMethodBySignature"> - <param name="paramType" value="javax.faces.context.FacesContext"/> - <param name="paramType" value="javax.faces.component.UIComponent"/> - <param name="paramType" value="java.lang.Object"/> - <param name="returnType" value="void"/> - </proposal> -</AttributeType> -]]></programlisting> - <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></para> - <programlisting role="XML"><![CDATA[ - <tld - jsf="true" - name="Jenia Faces" - schema-location="schemas/tld/myJSF.xml" - uri="http://www.jenia.org/jsf/dataTools"/>]]> - </programlisting> - </listitem> - <listitem> - <para>Restart Eclipse. You should now have code assist for the - component.</para> - </listitem> - </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> - <para>If you open projects that were created in older studio versions you may see the following message:</para> - <figure> - <title>Missing Natures Message</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/message.png"/> - </imageobject> - </mediaobject> - </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:</para> - <itemizedlist> - <listitem> - <para>Right click the project in Package Explorer.</para> - </listitem> - <listitem> - <para>Select - <menuchoice> - <guimenuitem>Configure</guimenuitem> - <guimenuitem>Add JSF Capabilities</guimenuitem> - </menuchoice> - from the context menu.</para> - </listitem> - <listitem> - <para>Configure your project using Add JSF Capabilities wizard and press - <property>Finish</property></para> - </listitem> - </itemizedlist> - </section> - </section> - <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.</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.</para> - <figure> - <title>Three Views are Synchronized</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_32.png" - scale="75"/> - </imageobject> - </mediaobject> - </figure> - <para>The same is true of all other <property>JBoss Developer Studio</property> - editors.</para> - <para>Web XML editor is shown. Web XML editor has a graphical view (Tree) and source - (Source).</para> - <figure> - <title>Two Views are Synchronized</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_35.png" - scale="75"/> - </imageobject> - </mediaobject> - </figure> - <para>The <property>JBoss Developer Studio</property> TLD file editor is shown below in Tree view. - At any point you can edit the source by switching to the Source view.</para> - <figure> - <title>Two Views are Synchronized</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editors_features/editors_features_37.png" - scale="75"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - <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).</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). </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>.</para> - <figure> - <title>Visual Page Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_1.png" scale="95"/> - </imageobject> - </mediaobject> - </figure> - <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:</para> - <figure> - <title>Visual/Source View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_2.png" scale="95"/> - </imageobject> - </mediaobject> - </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.</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.</para> - <note> - <title>Tip:</title> - <para>When editing large documents hiding the Visual part will speed up the - editing.</para> - </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>:</para> - <figure> - <title>Integration with Properties and Outline Views</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_3.png" scale="55"/> - </imageobject> - </mediaobject> - </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.</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. </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.</para> - <figure> - <title>Inserting Tag From the Palette</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_4.png"/> - </imageobject> - </mediaobject> - </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. </para> - <para>The image below illustrates how you can insert a tag into the Source part.</para> - <figure> - <title>Inserting a tag into the Source part </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_23a.png"/> - </imageobject> - </mediaobject> - </figure> - <para>And this is how a tag is inserted using a context menu in the Visual part.</para> - <figure> - <title>Inserting a tag into the Visual part</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_23b.png"/> - </imageobject> - </mediaobject> - </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. </para> - <figure> - <title>Custom Tags in the VPE</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_4d.png"/> - </imageobject> - </mediaobject> - </figure> - <para> The listings of the custom tag implementations will help to demonstrate how VPE works. </para> - <itemizedlist> - <listitem> - <para>echo.xhtml: </para> - <programlisting role="XML"><![CDATA[ -<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"> - <span class="message">#{msg}</span> -</ui:composition> -]]></programlisting> - </listitem> - <listitem> - <para>paginator.xhtml:</para> - <programlisting role="XML"><![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" - xmlns:ui="http://java.sun.com/jsf/facelets" - xmlns:h="http://java.sun.com/jsf/html" - xmlns:f="http://java.sun.com/jsf/core"> -<ui:component> -<!-- h:inputHidden id="currentPage" replace, because if on page two fields, -two elements with equal id has been used, but should be used only one --> - <h:panelGrid style="margin-right:auto;margin-left:auto;" columns="4"> - <h:commandButton value="&lt;&lt;" type="submit" - onclick="document.getElementById('currentPage').value=0" > - </h:commandButton> - <h:commandButton value="&lt;" type="submit" - onclick="document.getElementById('currentPage').value=#{user.currentPage-user.rowsPerPage}"> - </h:commandButton> - <h:commandButton value="&gt;" type="submit" - onclick="document.getElementById('currentPage').value=#{user.currentPage+user.rowsPerPage}"> - </h:commandButton> - <h:commandButton value="&gt;&gt;" type="submit" - onclick="document.getElementById('currentPage').value=#{user.numberOfItems - user.rowsPerPage}"> - </h:commandButton> - </h:panelGrid> - <h:inputHidden id="currentPage" value=""/> -</ui:component> -</html> -]]></programlisting> - </listitem> - </itemizedlist> - <para> If your custom tags aren&apos;t configured correctly your Visual mode will look - like this: </para> - <figure> - <title>Wrong configured Custom Tags in the VPE</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_4e.png"/> - </imageobject> - </mediaobject> - </figure> - <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.):</para> - <itemizedlist> - <listitem> - <para>HTML comments (<code>&lt;!-- --&gt;</code>) which are output to the - client </para> - </listitem> - <listitem> - <para>JSP comments (<code> &lt;%-- --%&gt; - </code>) which are not output to the client as part of the JSP page - output</para> - </listitem> - </itemizedlist> - </section> - <section id="codefolding"> - <title>Using Code Folding</title> - <para> - <property>Visual Page Editor</property> lets you collapse (hide) and expand - (show) sections of your code to make it easier to navigate and read. </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.</para> - <para>When the code folding is enabled a minus sing ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_23c.png"/> - </imageobject> - </inlinemediaobject> ) will appear on the left margin of the editor next to each - opening block tag. </para> - <figure> - <title>Enabled Code Folding </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_24a.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Click the minus sign to collapse a block tag.</para> - <para>When the minus sing is clicked on the appropriate tag collapses and a plus - sing ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_23d.png"/> - </imageobject> - </inlinemediaobject> ) is displayed on the left margin as well as a gray - rectangle two dots ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_23e.png"/> - </imageobject> - </inlinemediaobject> ) appears after opening and closing tags. </para> - <figure> - <title>Collapsed Code</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_24b.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="JSPsyntaxvalidation84"> - <title>JSP Syntax Validation</title> - <para>When working in JBoss Tools JSP editor you are constantly provided with - feedback and contextual error checking as you type.</para> - </section> - <section id="taglib_versions_support"> - <title>Support for custom TagLibs and Taglib versions</title> - <para>VPE templates support custom tag libs, e.g. Seam Mail facelet taglib, - RichFaces taglibs or any other created by you.</para> - <para>VPE templates also provide a support for various versions of tag libraries. It - means that the <property>VPE</property> takes control over those components - which have different parameters or preview according to the framework version - (like seam 1.2 and seam 2.0, or JSF 1.1 and JSF 1.2).</para> - <para>For example, <code> &lt;s:decorate&gt; - </code> element in seam has different parameters in versions 1.2 and 2.0 as well - as <code>&lt;h:outputLink&gt;</code> JSF element has different preview in - versions 1.1 and 1.2.</para> - </section> - </section> - <section id="pages_styling"> - <title>Pages Styling</title> - <para>Most web pages use the cascading style sheets (CSS) to control the way they look. - With <property>Visual Page Editor</property> you can easily stylize your pages. In - this section we are going to introduce you to a powerful mechanism that <property - >VPE</property> provides for a complete control over pages styling. More helpful - information on work with CSS files can be found in <xref linkend="css_perspective"/> - </para> - <section id="inline_styling"> - <title>Inline Style Editing</title> - <para>In the Visual part of the <property>VPE</property> there is a graphical - toolbar, use it to add inline styling to JSF and Struts tags on your page. The - toolbar can be hidden with the help of the special button ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/formatting_bar_icon.png"/> - </imageobject> - </inlinemediaobject>) on the VPE toolbar.</para> - <figure> - <title>Text Formatting</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_5.png"/> - </imageobject> - </mediaobject> - </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.</para> - <figure> - <title>Call the CSS Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_6.png"/> - </imageobject> - </mediaobject> - </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.</para> - <figure> - <title>CSS Style Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_7.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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.</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>.</para> - <figure> - <title>Calling the Edit Style Class Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_17.png"/> - </imageobject> - </mediaobject> - </figure> - <para>It&apos;ll pick up the <property>Edit Style Class Dialog</property> which - looks like on the figure below:</para> - <figure> - <title>Edit Style Class Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_18.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Choose a style class from the variants provided and click on the <property - >Ok</property> button to apply the changes.</para> - <para>To open a CSS dialog based on the active CSS file click on <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_19.png"/> - </imageobject> - </inlinemediaobject> in the top panel or use hot-keys (<property - >Shift+Ctrl+C</property>). </para> - <para>To create a new CSS class for the file click on the <property>Add CSS - Class</property> button, write its name in the field appeared and click on - the <property>Ok</property> button:</para> - <figure> - <title>Add CSS Class</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_20_b.png"/> - </imageobject> - </mediaobject> - </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.</para> - <figure> - <title>Style Class Selection</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_20.png"/> - </imageobject> - </mediaobject> - </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.</para> - <figure> - <title>Edited Properties</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_21.png"/> - </imageobject> - </mediaobject> - </figure> - <para>If the style class isn&apos;t chosen, the tab doesn&apos;t show any - properties.</para> - <figure> - <title>Edited Properties when the style class isn't chosen</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/edited_properties.png"/> - </imageobject> - </mediaobject> - </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.</para> - <figure> - <title>Preview Tab</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/preview_tab.png"/> - </imageobject> - </mediaobject> - </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></para> - <figure> - <title>Editing the Preview</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/preview_box.png"/> - </imageobject> - </mediaobject> - </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:</para> - <figure> - <title>New CSS Class Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_22.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Click on the <property>Browse</property> button to open a dialog to select the - CSS file to create a CSS class for:</para> - <figure> - <title>CSS File Selection</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_22_b.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Choose the necessary CSS file and click on the <property>Ok</property> - button.</para> - </section> - </section> - <section id="vpe_templating"> - <title>Visual Templates for Unknown Tags</title> - <para>The VPE also makes it possible to create visual templates for unknown tags.</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.</para> - <figure> - <title>Calling Template Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_7a.png"/> - </imageobject> - </mediaobject> - </figure> - <para id="template_dialog">Here is what the <property>Template dialog</property> looks - like.</para> - <figure> - <title>Template Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_7b.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The <emphasis> - <property>Tag Name</property></emphasis> 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).</para> - </note> - <figure> - <title>Validation Error in the Template Dialog</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/validation_error.png"/> - </imageobject> - </mediaobject> - </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.</para> - <para>The <emphasis> - <property>Value</property> - </emphasis> 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.</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"/> ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/icon_1.png"/> - </imageobject> - </inlinemediaobject> ).</para> - <figure> - <title>Templates Tab of the VPE Preferences Page</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_7c.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Here it&apos;s possible to add a new and edit or remove any listed in the table - template.</para> - </section> - - <section id="templates_export_import"> - <title>Export/Import of the Templates for Unknown Tags</title> - <para>If you have a number of custom tags for which you have defined visual templates, you may need to share - the templates definitions with other team members. In this case you can use export/import functionality for unknown tag templates.</para> - - <para>To export all visual templates you defined for unknown tags, navigate to <emphasis> - <property>File &gt; Export &gt; Other &gt; Unknown tags templates</property>.</emphasis> Here is what the wizard looks like.</para> - - <figure> - <title>Export of Unknown Tags Templates</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/export_template.png"/> - </imageobject> - </mediaobject> - </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.</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. - </para> - - <figure> - <title>Import of Custom Tags Templates</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/import_template.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - - - <section id="AdvancedSettings954"> - <title>VPE Toolbar</title> - <para>The Visual Page Editor toolbar includes the next buttons: </para> - <itemizedlist> - <listitem> - <para><xref linkend="vpe_preferences"/> ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/icon_1.png"/> - </imageobject> - </inlinemediaobject> )</para> - </listitem> - <listitem> - <para><xref linkend="vpe_refresh"/> ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/icon_2.png"/> - </imageobject> - </inlinemediaobject> )</para> - </listitem> - <listitem> - <para><xref linkend="vpe_page_design_options"/> ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/icon_3.png"/> - </imageobject> - </inlinemediaobject> ) </para> - </listitem> - <listitem> - <para><xref linkend="splitting_buttons"/> ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/source_top.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para><xref linkend="vpe_show_border"/> ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/show_border_button.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para><xref linkend="vpe_show_nonvisual_tags"/> ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/show_nonvisual.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para><xref linkend="vpe_show_selection_bar"/> ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/show_selection_bar.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para><xref linkend="inline_styling"/> ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/formatting_bar_icon.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para>Show bundle's messages as EL expressions ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/show_bundles_mess_button.png" - /> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - </itemizedlist> - <figure> - <title>Buttons on the VPE Toolbar</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_8.png"/> - </imageobject> - </mediaobject> - </figure> - <section id="vpe_preferences"> - <title>Preferences</title> - <para>The <emphasis> - <property>Preferences</property> - </emphasis> button ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/icon_1.png"/> - </imageobject> - </inlinemediaobject> ) provides a quick access to the <property>Visual Page - Editor</property> preferences.</para> - <figure> - <title>Visual Page Editor Preferences Window</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_9.png"/> - </imageobject> - </mediaobject> - </figure> - <para>This page provides a number of options associated with the editor - representation. The more detailed description on each one you can find in the - <property>&quot;JBoss Tools Preferences&quot;</property> chapter under <xref - linkend="VisualPageEditor2"/>.</para> - </section> - <section id="vpe_refresh"> - <title>Refresh</title> - <para>Clicking on the <emphasis> - <property>Refresh</property> - </emphasis> button ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/icon_2.png"/> - </imageobject> - </inlinemediaobject> ) refreshes the displayed information.</para> - </section> - <section id="vpe_page_design_options"> - <title>Page Design Options</title> - <para>The <emphasis> - <property>Page Design Options</property> - </emphasis> 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: </para> - <figure> - <title>Page Design Options: Actual Run-Time folders</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_10.png"/> - </imageobject> - </mediaobject> - </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:</para> - <figure> - <title>Page Design Options: Included CSS files</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_10_2.png"/> - </imageobject> - </mediaobject> - </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:</para> - <figure> - <title>Page Design Options: Included tag libs</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_10_3.png"/> - </imageobject> - </mediaobject> - </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:</para> - <figure> - <title>Page Design Options: Substituted El expressions</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_10_4.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The first two tabs of the window let you define actual runtime folders. The - example below will help you understand how this can be done.</para> - <para>Suppose you have the following project structure:</para> - <programlisting role="XML"><![CDATA[WebContent/ - pages/ - img/ - a.gif - header.jsp - main.jsp - ]]></programlisting> - <para>The content of the <emphasis> - <property>header.jsp</property> - </emphasis> is:</para> - <programlisting role="XML"><![CDATA[My Header -<img src="img/a.gif"/> -]]></programlisting> - <para>and <emphasis> - <property>main.jsp</property> - </emphasis> content is:</para> - <programlisting role="XML"><![CDATA[<jsp:include page="pages/header.jsp" /> -]]></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.</para> - <para/> - <para>Let&apos; consider an example for other tabs. For instance, the definition of - your CSS on the page is the next:</para> - <programlisting role="XML"><![CDATA[<link rel="stylesheet" type="text/css" - href="#{facesContext.externalContext.requestContextPath}/style.css"/> -]]></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.</para> - <para>The next <property>URI</property> section lets you add URI taglibs so that the - editor knows where to find the tag libraries.</para> - <para>And the last <property>Substituted EL expressions</property> section is - provided to specify the values for specific EL variables. It can be useful for a - preview generation.</para> - <para>As an example look at the figure below:</para> - <figure> - <title>EL Expression</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_12.png"/> - </imageobject> - </mediaobject> - </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></para> - <figure> - <title>Setting the Value for the EL Expression</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_13.png"/> - </imageobject> - </mediaobject> - </figure> - <para>As a result in Visual mode and Preview view the word <emphasis> - <property>World</property> - </emphasis> is displayed.</para> - <figure> - <title>The EL Expression Value</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_14.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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. </para> - <para>The available layouts and corresponding buttons are as follows: <itemizedlist> - <listitem> - <para>Vertical Source on top(<inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/source_top.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para>Vertical Visual on top ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/source_bottom.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para>Horizontal Source to the left ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/source_left.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - <listitem> - <para>Horizontal Visual to the left ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/source_right.png"/> - </imageobject> - </inlinemediaobject>)</para> - </listitem> - </itemizedlist><figure> - <title>Visual Page Editor Before Layout Changing </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_24.png"/> - </imageobject> - </mediaobject> - </figure> Note, at the current view there is only <emphasis> - <property> one</property></emphasis> button, that proposes the possibility - to change it in order the Source and the View are moved <emphasis> - <property>in a clockwise direction</property></emphasis>. <figure> - <title>Visual Page Editor After Layout Changing </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_25.png"/> - </imageobject> - </mediaobject> - </figure></para> - </section> - <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 ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/show_border_button.png"/> - </imageobject> - </inlinemediaobject>) on the toolbar.</para> - </section> - <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 ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/show_nonvisual.png"/> - </imageobject> - </inlinemediaobject>) on the VPE toolbar.</para> - <para>On the figure you can see non-visual elements with gray dashed borders.</para> - <figure> - <title>Non-visual Tag in the VPE</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_4b.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You can also switch on this option in the VPE preferences, having clicked on - the <emphasis><property>Preferences</property> - </emphasis> button (<inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/icon_1.png"/> - </imageobject> - </inlinemediaobject>).</para> - </section> - <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.</para> - <figure> - <title>Selection Tag Bar</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_15.png"/> - </imageobject> - </mediaobject> - </figure> - <para>If you want to hide the <property>Selection Tag Bar</property>, use the - <emphasis> - <property>Show Selection Bar</property></emphasis> button ( - <inlinemediaobject> - <imageobject> - <imagedata fileref="images/visual_page/show_selection_bar.png"/> - </imageobject> - </inlinemediaobject>) on the VPE toolbar.</para> - </section> - </section> - <section id="page_preview"> - <title>Page Preview</title> - <para><property>VPE</property> comes with design-time preview feature which is available - for:</para> - <itemizedlist> - <listitem> - <para>Struts Pages</para> - </listitem> - <listitem> - <para>JSF Pages</para> - </listitem> - <listitem> - <para>Seam Pages</para> - </listitem> - </itemizedlist> - <para><property>Preview view</property> is read-only, it shows how the page will look - like in a browser.</para> - <figure> - <title>Preview View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_16.png"/> - </imageobject> - </mediaobject> - </figure> - <!--para>You can even - attach your stylesheet to the preview.</para--> - </section> - <section id="vpe_errors"> - <title>Error Messages</title> - <para><property>Visual Page Editor</property> provide a user friendly and effective - <property>error</property> messages, which should make solving problems easier. - <property>Error</property> message contains a reference to the problem and its - description. Also in <property>Error</property> area you can find a link to - <property>Visual Page Editor</property> forum and <property>Details</property> - button whick is used to see a error trace. </para> - <para>If the error occurs while editor loading, error message will contain information - about of what might have caused the error ( a missing library or errors in source - code).</para> - <figure> - <title>Visual Page Error Message</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/visual_page_16a.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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.</para> - <note> - <title>Tip:</title> - <para>In case of Facelets tag library packed in <literal>.jar</literal>, remember to - put <literal>*.taglib.xml</literal> in right place: <literal - >[filename].jar/META-INF/*.taglib.xml</literal></para> - </note> - <para><property>Visual Page Editor</property> recognizes the tags from the custom - Facelets tag library and correctly renders them both in source and visual view of - the editor.</para> - <figure> - <title>Custom Facelets Tags in the VPE</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/customFacelets1.png"/> - </imageobject> - </mediaobject> - </figure> - <para>While editing an XHTML file that uses a custom Facelets components you can always - make use of the following editor&apos;s features:</para> - <itemizedlist> - <listitem> - <para><xref linkend="contentAssistForCustomFacelets"/></para> - </listitem> - <listitem> - <para><xref linkend="openOnForCustomFacelets"/></para> - </listitem> - </itemizedlist> - <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.</para> - <figure> - <title>Content Assist for Custom Facelets Tags</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/customFacelets2.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="openOnForCustomFacelets"> - <title>OpenOn for Custom Facelets Components</title> - <para>While developing using Facelets you can make use of:</para> - <itemizedlist> - <listitem> - <para><xref linkend="openOnInXHTML"/></para> - </listitem> - <listitem> - <para><xref linkend="openOnInCustomFaceletsTaglibs"/></para> - </listitem> - </itemizedlist> - <section id="openOnInXHTML"> - <title>OpenOn in XHTML Files That Use Custom Facelets Components</title> - <para>OpenOn functionality in XHTML files is available in two views of the - <property>Visual Page Editor</property>:</para> - <orderedlist> - <listitem> - <para>Source view</para> - <para><emphasis><property>Ctrl+Click</property></emphasis> on the - namespace will open the Facelets tag file in a separate - window.</para> - <figure> - <title>Opening a Custom Facelets Tag File</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/customFacelets3.png" - /> - </imageobject> - </mediaobject> - </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.</para> - <figure> - <title>Opening a Custom Facelets Tag File</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/customFacelets4.png" - /> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para>Visual view</para> - <para>In the visual view of the <property>VPE</property>, double-click a - custom component and the Facelets tag file (<literal - >*.taglib.xml</literal>) where it is declared will be - opened.</para> - </listitem> - </orderedlist> - </section> - <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.</para> - <figure> - <title>Opening a Custom Facelets Component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/visual_page/customFacelets5.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - </section> - <section id="SetupnotesforLinu895x"> - <title>Setup notes for Linux</title> - <para>Linux users who are going to use earlier versions of JBoss Tools then 3.1.0.M4 may - need to do the following to get the <property>Visual Page Editor</property> to work - correctly on their machines.</para> - <para> The Visual Page Editor requires the library libstdc++.so.5. This library is - contained in the compat-libstdc++-33.i386 package.</para> - <note> - <title>Note</title> - <para> Starting from JBoss Tools 3.1.0.M4 the libstdc++.so.5 library isn't - required.</para> - </note> - <itemizedlist> - <listitem> - <para>To install this package on Fedora Core or Red Hat Enterprise Linux run the - following command:</para> - <programlisting role="JAVA"><![CDATA[yum install compat-libstdc++-33.i386 -]]></programlisting> - </listitem> - <listitem> - <para>On any other rpm based distributions download libstdc++.so.5 and run the - following command:</para> - <programlisting role="JAVA"><![CDATA[rpm -Uvh compat-libstdc++-33.i386 -]]></programlisting> - </listitem> - <listitem> - <para>On Debian based distributions run the following command: </para> - <programlisting role="JAVA"><![CDATA[apt-get install compat-libstdc++-33.i386 -]]></programlisting> - </listitem> - </itemizedlist> - <para> In case you have the library installed and you still have issue with starting the - Visual Page Editor then close all browser views/editors and leave one visual page - editor open and restart eclipse. This should force a load of the right XULRunner - viewer.</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: </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</para> - </listitem> - <listitem> - <para>Copy <property>libswt-xulrunner-gtk-3449.so</property> 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: </para> - <programlisting role="JAVA"><![CDATA[-Dswt.library.path=/usr/lib/eclipse -]]></programlisting> - <para>where <code>/usr/lib/eclipse</code> is the path to your eclipse - folder.</para> - </listitem> - </itemizedlist> - </section> - <!-- <section id="CreateLookAndFeel(Design-timeMetadate)ForAnyCustomJSFComponents41"> -<?dbhtml filename="CreateLookAndFeel(Design-timeMetadate)ForAnyCustomJSFComponents.html"?> -<title>JSP Visual Page Editor - Design Time Look and Feel for Custom Components</title> - -<itemizedlist> -<listitem><ulink url="http://www.jboss.org/404.html">Template definition for design-time representation of custom tags</ulink> (pdf) -<para></para> - <note> - <title>Note:</title> - <para>The templates files are now saved in <emphasis>&lt;RedHatDeveloperStudio&gt;\eclipse\plugins\com.exadel.vpe_1.1.1\plugin.xml</emphasis>. The PDF files show the old location.</para> - </note> -<para></para></listitem> - -<listitem><ulink url="http://www.jboss.org/404.html">Steps to Create Plug-in</ulink> (pdf)</listitem> -<listitem><ulink url="index.html">How to use create(..) method</ulink> (pdf)</listitem> -<listitem>API -<itemizedlist> -<listitem><ulink url="http://www.jboss.org/404.html">VpeAbstractTemplate</... -<listitem><ulink url="http://www.jboss.org/404.html">VpeTemplate</ulink>... -<listitem><ulink url="http://www.jboss.org/404.html">Download</ulink> examples. The examples.zip file contains two - applications. The first application transforms the JSP source tag into visual tag (HTML). This application - is an Eclipse plug-in. Import as an Eclipse project. The second application is a Web applications which - uses the custom component (project with JSF Nature).</listitem> -</itemizedlist> -<para>Please send us an email to <ulink url="mailto:support@exadel.com">support@exadel.com</ulink> if you have - questions about this feature.</para> -</section> - - -<section id="HTML401Suppor421t"> -<?dbhtml filename="HTML4.01Support.html"?> -<title>HTML 4.01 Support</title> -</section> - -<section id="JSP2.0JSTL1.0And1.1Suppor52t"> -<?dbhtml filename="JSP2.0JSTL1.0And1.1Support.html"?> -<title>JSP 2.0, JSTL 1.0/1.1 support</title> -</section> ---> - </section> - <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.</para> - <section id="GraphicalPropertiesEditor"> - <title>Graphical Properties Editor</title> - <para><property>The Properties editor</property> allows you to work in two different - modes and also supports unicode characters.</para> - <para>To create a new properties file in the Package Explorer view, select <emphasis> - <property>New > Properties File</property> - </emphasis> from the right-click context menu on the folder where you want to create - the file.</para> - <figure> - <title>Selecting Properties File</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_1.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You can edit the file using a table-oriented &quot;Properties&quot; viewer:</para> - <figure> - <title>&quot;Properties&quot; Viewer</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You can also use a Source viewer for editing the file:</para> - <figure> - <title>Source Viewer</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_3.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="GraphicalTLDEditor"> - <title>Graphical TLD Editor</title> - <para><property>The TLD editor</property> comes with same features you will find in all - other JBoss Developer Studio editors:</para> - <itemizedlist> - <listitem> - <para>Graphical and source edit modes</para> - </listitem> - <listitem> - <para>Validation and error checking</para> - </listitem> - </itemizedlist> - <section id="TreeView2"> - <title>Tree view</title> - <figure> - <title>Tree View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_4.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="SourceView1"> - <title>Source view</title> - <para>You can easily switch from Tree to Source by selecting the Source tab at the - bottom of the editor.</para> - <figure> - <title>Source View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_5.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You can easily add a <property>new tag</property>:</para> - <figure> - <title>Adding a New TLD Tag</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_6.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>You can also easily add a <property>new attribute</property> to an existing - tag:</para> - <figure> - <title>Adding a New Attribute to TLD tag</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_7.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>Content assist is available when editing the file using the Source - viewer:</para> - <figure> - <title>TLD Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_8.png" scale="65"/> - </imageobject> - </mediaobject> - </figure> - <para>In the Source viewer, if at any point a tag is incorrect or incomplete, an - error will be indicated next to the line and also in the Problems view - below.</para> - <figure> - <title>Error Reporting</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_9.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - <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.</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:</para> - <itemizedlist> - <listitem> - <para>Graphical and source edit modes</para> - </listitem> - <listitem> - <para>Validation and error checking</para> - </listitem> - </itemizedlist> - <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.</para> - <figure> - <title>Tree View for editing web.xml in a graphical mode</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_10.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You can add any new elements right in the <property>Tree - viewer</property>:</para> - <figure> - <title>Adding New Elements in Web XML Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_11.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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:</para> - <figure> - <title>Web XML Source View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_12.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <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.</para> - <figure> - <title>Web XML Content Assist</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_13.png" scale="85" - /> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="ErrorCheckingAndValidation"> - <title>Errors Checking and Validation</title> - <para>If errors occur anywhere in the file, small red dots will appear next to the - lines where the errors occurred. Also note that the file is marked by a small x - in the Package Explorer view.</para> - <figure> - <title>Errors Reporting</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_14.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - </section> - <section id="CSSEditor"> - <title>CSS Editor</title> - <para>The <property>CSS editor</property> comes with the same features you will find in - all other JBoss Developer Studio editors.</para> - <itemizedlist> - <listitem> - <para>Content assist</para> - </listitem> - <listitem> - <para>Validation and error checking</para> - </listitem> - </itemizedlist> - <para>With the CSS (Cascading Style Sheet) editor, you can take advantage of code - prompting:</para> - <figure> - <title>CSS Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_41.png"/> - </imageobject> - </mediaobject> - </figure> - <!-- <para>You can also use the Outline view next to the editor to navigate through the CSS - file:</para> - - <figure> - <title>Outline View</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_42.png"/> - </imageobject> - </mediaobject> - </figure> - --> - <para>And you can also use the Properties view next to the editor to edit existing - stylesheet declaration properties:</para> - <figure> - <title>Properties View in CSS Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_43.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>To make you work on CSS files more comfortable, CSS perspective is available, read - more about it in <xref linkend="css_perspective"/></para> - </section> - <section id="JavaScriptEditor"> - <title>JavaScript Editor</title> - <para>The <property>JavaScript editor</property> is a Source viewer in which you can use - code assist:</para> - <figure> - <title>JavaScript Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_44.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You can also use the <property>JavaScript editor</property> with the Outline view - to navigate around the file:</para> - <figure> - <title>JavaScript Editor with the Outline view</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_45.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - </section> - <!-- <section id="ImageViewer"> - - <title>Image Viewer</title> - <para>This simple image viewer allows you to view GIF and JPEG files individually in a - separate window:</para> - - <figure> - <title>Image Viewer</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_46.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> --> - <section id="XSDEditor"> - <title>XSD Editor</title> - <para>JBoss Developer Studio comes with an <property>XSD Editor</property> for XML - Schema files. This editor comes from the Web Tools Project (WTP) (see <ulink - url="http://www.eclipse.org/webtools/testtutorials/gettingstarted/Ge... - >WTP Getting Started</ulink>).</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.</para> - <figure> - <title>Creating New XSD file</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_47.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The XSD Editor includes two viewers for working on the file, a Design viewer and a - Source viewer:</para> - <figure> - <title>Source Viewer in XSD Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_48.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>In the Design viewer you can drill down on an element by double-clicking on - it:</para> - <figure> - <title>Design Viewer in XSD Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_49.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>Various edit options are available when you right-click an element in the - diagram:</para> - <figure> - <title>Edit Options in XSD Editor Context Menu.</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_50.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - <para>You can also use the Properties view to edit a selected element:</para> - <figure> - <title>Properties View in XSD Editor</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_51.png"/> - </imageobject> - </mediaobject> - </figure> - <para>You can also use a Source viewer for the file. In this viewer, along with direct - editing of the source code, you can also edit the file by using the Properties view - on the right:</para> - <figure> - <title>Using Source Viewer and Properties View together for source code - editing</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_52.png" scale="85"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="SupportforXMLSchema"> - <title>Support for XML Schema</title> - <para>JBoss Developer Studio fully supports XML files based on schemas as well as - DTDs:</para> - <figure> - <title>XML File </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/more_editors/more_editors_53.png"/> - </imageobject> - </mediaobject> - </figure> - <note> - <title>Note:</title> - <para>In case you want to use your own DTD or XML Schema make sure that this DTD or - XML Schema is not listed in XML Catalog. If it is, you can't work with your DTD - and XML Schema and JBoss Tool which uses this DTD or XML Schema. More - information about XML Catalog you can find in <ulink - url="http://help.eclipse.org/galileo/index.jsp?topic=/org.eclipse.ws... - >Eclipse Documentation</ulink> and on <ulink - url="http://www.eclipse.org/webtools/community/tutorials/XMLCatalog/... - >XML Catalog Tutorial page</ulink>. </para> - </note> - </section> - </section> -</chapter> +<?xml version='1.0' encoding='UTF-8'?> +<chapter id="jbds_editors" role="updated"> +<?dbhtml filename="editors.html"?> + <chapterinfo> + <keywordset> + <keyword>JBoss Developer Studio</keyword> + + <keyword>JBDS</keyword> + + <keyword>Editor</keyword> + </keywordset> + </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. + </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. + </para> + + <para> + The mentioned features are the following: + </para> + + <itemizedlist> + <listitem> + <para> + <xref linkend="OpenOnSelection4Hyperlinknavigation"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="FullControlOverSourceFiles-SynchronizedSourcAndVisualEditing74"/> + </para> + </listitem> + </itemizedlist> + + <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. + </para> + + <para> + OpenOn is available for: + </para> + + <itemizedlist> + <listitem> + <para> + <xref linkend="XMLFiles232"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="JSPPages223"/> + </para> + </listitem> + + <listitem> + <para> + Java files + </para> + </listitem> + + <listitem> + <para> + <xref linkend="cssclasses"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="openonelvariables"/> + </para> + </listitem> + </itemizedlist> + + <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. + </para> + + <para> + Use the OpenOn functionality for the next entries defined in XML file: + </para> + + <orderedlist> + <listitem> + <para> + Managed beans + </para> + + <para> + In this example source code of the managed bean <emphasis><property>&quot;User&quot;</property> </emphasis> will be open. + </para> + + <figure> + <title>Opening a Managed Bean</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + This is the result of using OpenOn. + </para> + + <figure> + <title>Opened Managed Bean</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_2.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para> + Beans properties + </para> + + <figure> + <title>OpenOn for the Bean Property</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_3.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para> + JSP file references + </para> + + <figure> + <title>OpenOn for JSP Page</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_4.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + </orderedlist> + </section> + + <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. + </para> + + <para> + You can use OpenOn for the following JSP/XHTML file entries: + </para> + + <orderedlist> + <listitem> + <para> + Imported property files + </para> + + <figure> + <title>OpenOn for Property File Imported to the JSP Page</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_5.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para> + CSS files used in a JSP/XHTML page + </para> + + <figure> + <title>OpenOn With CSS File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_6.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para> + Managed beans and their properties + </para> + + <figure> + <title>OpenOn With Managed Beans</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_7.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para> + Navigation rules in JSP 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: + </para> + + <figure> + <title>OpenOn with JSF Tag</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_8.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para> + Custom Facelets tag libraries in XHTML pages + </para> + + <para> + For details, see <xref linkend="openOnForCustomFacelets"/> later in this guide. + </para> + </listitem> + + <listitem> + <para> + Custom JSF 2.0 components + </para> + + <figure> + <title>OpenOn with JSF 2.0 Component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_openon_jsf2_components.png" /> + </imageobject> + </mediaobject> + </figure> + </listitem> + </orderedlist> + </section> + + <section id="cssclasses"> + <title>CSS Classes</title> + <para> + You can quickly navigate through CSS classes using OpenOn + </para> + + <figure> + <title>OpenOn With CSS Class</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_38.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + OpenOn is also implemented for css classes added by a complex link. + </para> + + <figure> + <title>OpenOn With CSS Class added by a complex link</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_39.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="openonelvariables"> + <title>OpenOn for EL variables</title> + <para> + OpenOn can be used for paths to files set with EL variable. + </para> + + <figure> + <title>OpenOn for paths to files set with EL variable</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_openon_el.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + + <section id="CodeAssistAndDynamicCodeAssist42BasedOnProjectData"> + <title>Content Assist</title> + <para> + <property>Content assist</property> is available when working with: + </para> + + <itemizedlist> + <listitem> + <para> + <ulink url="../../seam/html_single/index.html#ContentAssist">Seam project files</ulink> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="JSFProjectFiles3087"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="StrutsProjectFile46s3"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="JSPPages434"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="ContentAssistForXHTMLPages"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="ContentAssistForJavaFiles"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="ContentAssistForRF"/> + </para> + </listitem> + + <listitem> + <para> + <ulink url="../../esb_ref_guide/html_single/index.html#ESBContentAssist">ESB XML files</ulink> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="ContentAssistForInsertTag"/> + </para> + </listitem> + </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. + </para> + + <table> + <title>Content assist icons</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> + Icon + </entry> + + <entry> + Type + </entry> + + <entry> + Context + </entry> + </row> + </thead> + + <tbody> + <row> + <entry> + <para> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/editors_features/icons_enumaration.png" /> + </imageobject> + </inlinemediaobject> + </para> + </entry> + + <entry> + <para> + Enumeration + </para> + </entry> + + <entry> + <para> + Used to show items which exist in the predefined set of equivalent proposals. + </para> + </entry> + </row> + + <row> + <entry> + <para> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/editors_features/icons_seam_el.png" /> + </imageobject> + </inlinemediaobject> + </para> + </entry> + + <entry> + <para> + Seam Proposal + </para> + </entry> + + <entry> + <para> + Used to show Seam Context variables, its properties and methods. + </para> + </entry> + </row> + + <row> + <entry> + <para> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/editors_features/icons_jsf_el.png"/> + </imageobject> + </inlinemediaobject> + </para> + </entry> + + <entry> + <para> + JSF EL + </para> + </entry> + + <entry> + <para> + Used to show Managed Beans, Managed Bean Properties, Managed Bean Methods, Constants, Resource Bundles, Resource Bundle Properties. + </para> + </entry> + </row> + + <row> + <entry> + <para> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/editors_features/icons_jsf_actions.png" /> + </imageobject> + </inlinemediaobject> + </para> + </entry> + + <entry> + <para> + JSF Action + </para> + </entry> + + <entry> + <para> + Used to show navigation rules defined in the <property>faces-config.xml</property> . + </para> + </entry> + </row> + + <row> + <entry> + <para> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/editors_features/icons_message_bundles.png" /> + </imageobject> + </inlinemediaobject> + </para> + </entry> + + <entry> + <para> + Message Bundle + </para> + </entry> + + <entry> + <para> + Used to show <property>Messages Resources</property> items. + </para> + </entry> + </row> + + <row> + <entry> + <para> + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/editors_features/icons_resource_paths.png" /> + </imageobject> + </inlinemediaobject> + </para> + </entry> + + <entry> + <para> + Resource path + </para> + </entry> + + <entry> + <para> + Used to show paths which are accessible from the cursor place. + </para> + </entry> + </row> + </tbody> + </tgroup> + </table> + + <figure> + <title>JSF Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_8d.png"/> + </imageobject> + </mediaobject> + </figure> + + <figure> + <title>Seam Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_8c.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The ranking and sorting are available in EL code completions. + </para> + + <para> + As you can see, in addition to proposals, content assist also provides descriptions of selected tags or attributes. + </para> + + <figure> + <title>Tag description</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_11a.png"/> + </imageobject> + </mediaobject> + </figure> + + <section id="JSFProjectFiles3087"> + <title>JSF Project Files</title> + <para> + When working with a JSF project in JBoss Developer Studio, you can use various <property>Content Assist features</property> while developing: + </para> + + <itemizedlist> + <listitem> + <para> + Content Assist for XML, XHTML, JSP and JSF configuration files + </para> + </listitem> + + <listitem> + <para> + Content Assist for Composite Components + </para> + </listitem> + + <listitem> + <para> + Content Assist based on project data + </para> + </listitem> + + <listitem> + <para> + Content Assist with graphical JSF editor + </para> + </listitem> + </itemizedlist> + + <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. + </para> + + <para> + Content Assist for JSF configuration file: + </para> + + <figure> + <title>Content Assist in JSF Configuration File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_9.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Content Assist for JSF JSP file: + </para> + + <figure> + <title>Content Assist in JSP File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_10.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Content Assist for other JSF XML project files ( + <filename> + web.xml + </filename> + shown): + </para> + + <figure> + <title>Content Assist in web.xml File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_11.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="ContentAssistforCompositeComponents"> + <title>Content Assist for Composite Components</title> + <para> + Content assist functionality is also available for composite components. The image below shows content assist used with a composite component file + <filename> + tag.xhtml + </filename> + within a JSF 1.2 project with facelets. + </para> + + <figure> + <title>Content Assist for Composite Components</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_ca_composite_component.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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: + </para> + + <itemizedlist> + <listitem> + <para> + Values from Property files + </para> + </listitem> + + <listitem> + <para> + <emphasis role="italic"> <property>&quot;Managed beans&quot;</property> </emphasis> attributes and methods + </para> + </listitem> + + <listitem> + <para> + Navigation Rule Outcomes + </para> + </listitem> + + <listitem> + <para> + JSF variables (context, request etc...) + </para> + </listitem> + + <listitem> + <para> + Resource Bundles from template page + </para> + </listitem> + </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. + </para> + + <figure> + <title>Inserting Message</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_12.png" /> + </imageobject> + </mediaobject> + </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. + </para> + + <para> + Once you select a Managed bean, it will show you a list of all available attributes for the selected Managed bean (userBean). + </para> + + <figure> + <title>Attributes List</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_13.png" /> + </imageobject> + </mediaobject> + </figure> + + <para> + Code Assist based on project data will also prompt you for navigation rules that exist in your JSF configuration file. + </para> + + <figure> + <title>Code Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_14.png" /> + </imageobject> + </mediaobject> + </figure> + + <para> + Code Assist can also provide you with access to the beans located in jar archives. + </para> + + <figure> + <title>Code Assist: accessing beans in jar archives</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_14_a.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Code Assist: Message Bundles proposals from template page</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_14_b.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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> + </para> + + <figure> + <title>Content Assist in Tree JSF Configuration Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_15.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> +<!-- + + <para>If a field contains right class name and you click a link near the + field you will come to the file with this class otherwise a new Java + Class dialog will be shown:</para> + <figure> + <title>New Java Class</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/editors_features/editors_features_16.png"/> + </imageobject> + </mediaobject> + </figure> + <para>If you entered an incorrect name in the field error markers will be + shown for field labels and tree items:</para> + <figure> + <title>Error Markers</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/editors_features/editors_features_17.png"/> + </imageobject> + </mediaobject> + </figure> + <itemizedlist> + <listitem> + <para>To add a new property to a managed bean expand <emphasis> + <property>Managed Beans</property> + </emphasis> and select <emphasis role="bold"> + <property>&lt;name_of_bean&gt;</property> + </emphasis></para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Add</property> + </emphasis> button in the Properties panel</para> + </listitem> + <listitem> + <para>In the dialog Add Property define a new property. From here + also you can generate setters and getters methods:</para> + </listitem> + </itemizedlist> + <figure> + <title>Create New Property</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/editors_features/editors_features_18.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Here you can also add an additional navigation rule to the + faces-config.xml file.</para> + <itemizedlist> + <listitem> + <para>Select <emphasis> + <property>Navigation Rules</property> + </emphasis></para> + </listitem> + <listitem> + <para>Click <emphasis> + <property>Add</property> + </emphasis> button</para> + </listitem> + <listitem> + <para>In the dialog <emphasis> + <property>Add Rule</property> + </emphasis> define a view and give a name to the rule. Click + Finish:</para> + </listitem> + </itemizedlist> + <figure> + <title>Add New Navigation Rule</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/editors_features/editors_features_19.png"/> + </imageobject> + </mediaobject> + </figure> + + --> + </section> + </section> + + <section id="StrutsProjectFile46s3"> + <title>Struts Project Files</title> + <para> + Content Assist features are available when you work with Struts projects. + </para> + + <section id="ContentAssistForStrutsConfigurationFile75"> + <title>Content Assist for Struts Configuration File</title> + <para> + Content Assist helps you edit Struts Configuration files. + </para> + + <figure> + <title>Struts Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_20.png" /> + </imageobject> + </mediaobject> + </figure> + </section> + + <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. + </para> + + <figure> + <title>Struts JSP Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_21.png" scale="75"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + + <section id="JSPPages434"> + <title>JSP Pages</title> + <section id="ContentAssistForJSFTags96"> + <title>Content Assist for JSF Tags</title> + <para> + JBDS provides full code completion for JSF tags: + </para> + + <figure> + <title>JSF Tags Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_22.png" scale="85"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Attributes Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_23.png" scale="75"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="ContentAssistForJSTLTags6332"> + <title>Content Assist for JSTL Tags</title> + <figure> + <title>JSTL Tags Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_24.png" scale="75"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="ContentAssistForHTMLTags7454"> + <title>Content Assist for HTML Tags</title> + <para> + Content assist for HTML tags works in the same manner as the JSF tags: + </para> + + <figure> + <title>HTML Tags Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_25.png" scale="60"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Content Assist can also be used for HTML tag attributes: + </para> + + <figure> + <title>HTML Tags Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_26.png" scale="60"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="ContentAssistForJavaScriptTags67433"> + <title>Content Assist for JavaScript Tags</title> + <figure> + <title>JavaScript Tags Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_27.png" scale="75"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="ContentAssistForEL"> + <title>Content Assist for EL expressions</title> + <para> + <property>Content Assist</property> also provides expression language (JSF EL) support. It is used in web application pages to access the <property>JavaBeans</property> components in the page bean and in other beans associated with the web application, such as the session bean and the application bean. + </para> + + <figure> + <title>EL Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_27b.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + + <section id="ContentAssistForXHTMLPages"> + <title>Content Assist for XHTML Pages</title> + <para> + The code completion for the Seam components in a Seam project shows the proposals marked with Seam icon. + </para> + + <figure> + <title>Content Assist for Seam Components in the XHTML Page</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/contentAssistXHTMLpages1.png"/> + </imageobject> + </mediaobject> + </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. + </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. + </para> + + <figure> + <title>Content assist for JavaDoc</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_33.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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. + </para> + + <figure> + <title>Content Assist for Insert Tag Wizard</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/editors_features_27a.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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> + + <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> + </para> + </listitem> + </orderedlist> + + <para> + Follow these steps to set what is available for code assist: + </para> + + <itemizedlist> + <listitem> + <para> + Adds code assist for JSF pre-defined objects, such as + <code> + value=&quot;#{param}&quot; + </code> + : + </para> + </listitem> + </itemizedlist> + + <programlisting role="XML"> +<![CDATA[<AttributeType ...> + <proposal type="jsfVariables"/> +</AttributeType> +]]> + </programlisting> + + <itemizedlist> + <listitem> + <para> + Add a bundle resource (property file) <property>code assist</property>: + </para> + </listitem> + </itemizedlist> + + <programlisting role="XML"> +<![CDATA[<AttributeType ...> + <proposal type="bundleProperty"/> +</AttributeType> +]]> + </programlisting> + + <itemizedlist> + <listitem> + <para> + Add a managed bean property <property>code assist</property>: + </para> + </listitem> + </itemizedlist> + + <programlisting role="XML"> +<![CDATA[<AttributeType ...> + <proposal type="beanProperty"/> +</AttributeType> +]]> + </programlisting> + + <itemizedlist> + <listitem> + <para> + Add a managed bean property, specifying a type: + </para> + </listitem> + </itemizedlist> + + <programlisting role="XML"> +<![CDATA[<AttributeType ...> + <proposal type="beanProperty"> + <param name="type" value="java.lang.Boolean"/> + </proposal> +</AttributeType> +]]> + </programlisting> + + <itemizedlist> + <listitem> + <para> + Add a managed bean method with a signature: + </para> + </listitem> + </itemizedlist> + + <programlisting role="XML"> +<![CDATA[<AttributeType ...> + <proposal type="beanMethodBySignature"> + <param name="paramType" value="javax.faces.context.FacesContext"/> + <param name="paramType" value="javax.faces.component.UIComponent"/> + <param name="paramType" value="java.lang.Object"/> + <param name="returnType" value="void"/> + </proposal> +</AttributeType> +]]> + </programlisting> + + <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> + </para> + + <programlisting role="XML"> +<![CDATA[ + <tld + jsf="true" + name="Jenia Faces" + schema-location="schemas/tld/myJSF.xml" + uri="http://www.jenia.org/jsf/dataTools"/>]]> + </programlisting> + </listitem> + + <listitem> + <para> + Restart Eclipse. You should now have code assist for the component. + </para> + </listitem> + </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> + + <para> + If you open projects that were created in older studio versions you may see the following message: + </para> + + <figure> + <title>Missing Natures Message</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/message.png"/> + </imageobject> + </mediaobject> + </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: + </para> + + <itemizedlist> + <listitem> + <para> + Right click the project in Package Explorer. + </para> + </listitem> + + <listitem> + <para> + Select + <menuchoice> + <guimenuitem> + Configure + </guimenuitem> + + <guimenuitem> + Add JSF Capabilities + </guimenuitem> + </menuchoice> + from the context menu. + </para> + </listitem> + + <listitem> + <para> + Configure your project using Add JSF Capabilities wizard and press <property>Finish</property> + </para> + </listitem> + </itemizedlist> + </section> + </section> + + <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. + </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. + </para> + + <figure> + <title>Three Views are Synchronized</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_32.png" scale="75"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The same is true of all other <property>JBoss Developer Studio</property> editors. + </para> + + <para> + Web XML editor is shown. Web XML editor has a graphical view (Tree) and source (Source). + </para> + + <figure> + <title>Two Views are Synchronized</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_35.png" scale="75"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The <property>JBoss Developer Studio</property> TLD file editor is shown below in Tree view. At any point you can edit the source by switching to the Source view. + </para> + + <figure> + <title>Two Views are Synchronized</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editors_features/editors_features_37.png" scale="75"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + + <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). + </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). + </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>. + </para> + + <figure> + <title>Visual Page Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_1.png" scale="95"/> + </imageobject> + </mediaobject> + </figure> + + <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: + </para> + + <figure> + <title>Visual/Source View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_2.png" scale="95"/> + </imageobject> + </mediaobject> + </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. + </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. + </para> + + <note> + <title>Tip:</title> + <para> + When editing large documents hiding the Visual part will speed up the editing. + </para> + </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>: + </para> + + <figure> + <title>Integration with Properties and Outline Views</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_3.png" scale="55"/> + </imageobject> + </mediaobject> + </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. + </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. + </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. + </para> + + <figure> + <title>Inserting Tag From the Palette</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_4.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <para> + The image below illustrates how you can insert a tag into the Source part. + </para> + + <figure> + <title>Inserting a tag into the Source part </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_23a.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + And this is how a tag is inserted using a context menu in the Visual part. + </para> + + <figure> + <title>Inserting a tag into the Visual part</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_23b.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Custom Tags in the VPE</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_4d.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The listings of the custom tag implementations will help to demonstrate how VPE works. + </para> + + <itemizedlist> + <listitem> + <para> + echo.xhtml: + </para> + + <programlisting role="XML"> +<![CDATA[ +<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"> + <span class="message">#{msg}</span> +</ui:composition> +]]> + </programlisting> + </listitem> + + <listitem> + <para> + paginator.xhtml: + </para> + + <programlisting role="XML"> +<![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" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core"> +<ui:component> +<!-- h:inputHidden id="currentPage" replace, because if on page two fields, +two elements with equal id has been used, but should be used only one --> + <h:panelGrid style="margin-right:auto;margin-left:auto;" columns="4"> + <h:commandButton value="&lt;&lt;" type="submit" + onclick="document.getElementById('currentPage').value=0" > + </h:commandButton> + <h:commandButton value="&lt;" type="submit" + onclick="document.getElementById('currentPage').value=#{user.currentPage-user.rowsPerPage}"> + </h:commandButton> + <h:commandButton value="&gt;" type="submit" + onclick="document.getElementById('currentPage').value=#{user.currentPage+user.rowsPerPage}"> + </h:commandButton> + <h:commandButton value="&gt;&gt;" type="submit" + onclick="document.getElementById('currentPage').value=#{user.numberOfItems - user.rowsPerPage}"> + </h:commandButton> + </h:panelGrid> + <h:inputHidden id="currentPage" value=""/> +</ui:component> +</html> +]]> + </programlisting> + </listitem> + </itemizedlist> + + <para> + If your custom tags aren&apos;t configured correctly your Visual mode will look like this: + </para> + + <figure> + <title>Wrong configured Custom Tags in the VPE</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_4e.png"/> + </imageobject> + </mediaobject> + </figure> + + <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.): + </para> + + <itemizedlist> + <listitem> + <para> + HTML comments ( + <code> + &lt;!-- --&gt; + </code> + ) which are output to the client + </para> + </listitem> + + <listitem> + <para> + JSP comments ( + <code> + &lt;%-- --%&gt; + </code> + ) which are not output to the client as part of the JSP page output + </para> + </listitem> + </itemizedlist> + </section> + + <section id="codefolding"> + <title>Using Code Folding</title> + <para> + <property>Visual Page Editor</property> lets you collapse (hide) and expand (show) sections of your code to make it easier to navigate and read. + </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. + </para> + + <para> + When the code folding is enabled a minus sing ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_23c.png"/> + </imageobject> + </inlinemediaobject> + ) will appear on the left margin of the editor next to each opening block tag. + </para> + + <figure> + <title>Enabled Code Folding </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_24a.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Click the minus sign to collapse a block tag. + </para> + + <para> + When the minus sing is clicked on the appropriate tag collapses and a plus sing ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_23d.png"/> + </imageobject> + </inlinemediaobject> + ) is displayed on the left margin as well as a gray rectangle two dots ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_23e.png"/> + </imageobject> + </inlinemediaobject> + ) appears after opening and closing tags. + </para> + + <figure> + <title>Collapsed Code</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_24b.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="JSPsyntaxvalidation84"> + <title>JSP Syntax Validation</title> + <para> + When working in JBoss Tools JSP editor you are constantly provided with feedback and contextual error checking as you type. + </para> + </section> + + <section id="taglib_versions_support"> + <title>Support for custom TagLibs and Taglib versions</title> + <para> + VPE templates support custom tag libs, e.g. Seam Mail facelet taglib, RichFaces taglibs or any other created by you. + </para> + + <para> + VPE templates also provide a support for various versions of tag libraries. It means that the <property>VPE</property> takes control over those components which have different parameters or preview according to the framework version (like seam 1.2 and seam 2.0, or JSF 1.1 and JSF 1.2). + </para> + + <para> + For example, + <code> + &lt;s:decorate&gt; + </code> + element in seam has different parameters in versions 1.2 and 2.0 as well as + <code> + &lt;h:outputLink&gt; + </code> + JSF element has different preview in versions 1.1 and 1.2. + </para> + </section> + </section> + + <section id="pages_styling"> + <title>Pages Styling</title> + <para> + Most web pages use the cascading style sheets (CSS) to control the way they look. With <property>Visual Page Editor</property> you can easily stylize your pages. In this section we are going to introduce you to a powerful mechanism that <property>VPE</property> provides for a complete control over pages styling. More helpful information on work with CSS files can be found in <xref linkend="css_perspective"/> + </para> + + <section id="inline_styling"> + <title>Inline Style Editing</title> + <para> + In the Visual part of the <property>VPE</property> there is a graphical toolbar, use it to add inline styling to JSF and Struts tags on your page. The toolbar can be hidden with the help of the special button ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/formatting_bar_icon.png"/> + </imageobject> + </inlinemediaobject> + ) on the VPE toolbar. + </para> + + <figure> + <title>Text Formatting</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_5.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Call the CSS Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_6.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>CSS Style Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_7.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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. + </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>. + </para> + + <figure> + <title>Calling the Edit Style Class Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_17.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + It&apos;ll pick up the <property>Edit Style Class Dialog</property> which looks like on the figure below: + </para> + + <figure> + <title>Edit Style Class Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_18.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Choose a style class from the variants provided and click on the <property>Ok</property> button to apply the changes. + </para> + + <para> + To open a CSS dialog based on the active CSS file click on + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_19.png"/> + </imageobject> + </inlinemediaobject> + in the top panel or use hot-keys (<property>Shift+Ctrl+C</property>). + </para> + + <para> + To create a new CSS class for the file click on the <property>Add CSS Class</property> button, write its name in the field appeared and click on the <property>Ok</property> button: + </para> + + <figure> + <title>Add CSS Class</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_20_b.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Style Class Selection</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_20.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Edited Properties</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_21.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + If the style class isn&apos;t chosen, the tab doesn&apos;t show any properties. + </para> + + <figure> + <title>Edited Properties when the style class isn't chosen</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/edited_properties.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Preview Tab</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/preview_tab.png"/> + </imageobject> + </mediaobject> + </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> + </para> + + <figure> + <title>Editing the Preview</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/preview_box.png"/> + </imageobject> + </mediaobject> + </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: + </para> + + <figure> + <title>New CSS Class Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_22.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Click on the <property>Browse</property> button to open a dialog to select the CSS file to create a CSS class for: + </para> + + <figure> + <title>CSS File Selection</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_22_b.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Choose the necessary CSS file and click on the <property>Ok</property> button. + </para> + </section> + </section> + + <section id="vpe_templating"> + <title>Visual Templates for Unknown Tags</title> + <para> + The VPE also makes it possible to create visual templates for unknown tags. + </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. + </para> + + <figure> + <title>Calling Template Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_7a.png"/> + </imageobject> + </mediaobject> + </figure> + + <para id="template_dialog"> + Here is what the <property>Template dialog</property> looks like. + </para> + + <figure> + <title>Template Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_7b.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The <emphasis> <property>Tag Name</property> </emphasis> 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). + </para> + </note> + + <figure> + <title>Validation Error in the Template Dialog</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/validation_error.png"/> + </imageobject> + </mediaobject> + </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. + </para> + + <para> + The <emphasis> <property>Value</property> </emphasis> 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. + </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"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/icon_1.png"/> + </imageobject> + </inlinemediaobject> + ). + </para> + + <figure> + <title>Templates Tab of the VPE Preferences Page</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_7c.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Here it&apos;s possible to add a new and edit or remove any listed in the table template. + </para> + </section> + + <section id="templates_export_import"> + <title>Export/Import of the Templates for Unknown Tags</title> + <para> + If you have a number of custom tags for which you have defined visual templates, you may need to share the templates definitions with other team members. In this case you can use export/import functionality for unknown tag templates. + </para> + + <para> + To export all visual templates you defined for unknown tags, navigate to <emphasis> <property>File &gt; Export &gt; Other &gt; Unknown tags templates</property>.</emphasis> Here is what the wizard looks like. + </para> + + <figure> + <title>Export of Unknown Tags Templates</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/export_template.png"/> + </imageobject> + </mediaobject> + </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. + </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. + </para> + + <figure> + <title>Import of Custom Tags Templates</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/import_template.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="AdvancedSettings954"> + <title>VPE Toolbar</title> + <para> + The Visual Page Editor toolbar includes the next buttons: + </para> + + <itemizedlist> + <listitem> + <para> + <xref linkend="vpe_preferences"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/icon_1.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + <xref linkend="vpe_refresh"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/icon_2.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + <xref linkend="vpe_page_design_options"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/icon_3.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + <xref linkend="splitting_buttons"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/source_top.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + <xref linkend="vpe_show_border"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/show_border_button.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + <xref linkend="vpe_show_nonvisual_tags"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/show_nonvisual.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + <xref linkend="vpe_show_selection_bar"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/show_selection_bar.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + <xref linkend="inline_styling"/> ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/formatting_bar_icon.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + Show bundle's messages as EL expressions ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/show_bundles_mess_button.png" /> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + </itemizedlist> + + <figure> + <title>Buttons on the VPE Toolbar</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_8.png"/> + </imageobject> + </mediaobject> + </figure> + + <section id="vpe_preferences"> + <title>Preferences</title> + <para> + The <emphasis> <property>Preferences</property> </emphasis> button ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/icon_1.png"/> + </imageobject> + </inlinemediaobject> + ) provides a quick access to the <property>Visual Page Editor</property> preferences. + </para> + + <figure> + <title>Visual Page Editor Preferences Window</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_9.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + This page provides a number of options associated with the editor representation. The more detailed description on each one you can find in the <property>&quot;JBoss Tools Preferences&quot;</property> chapter under <xref linkend="VisualPageEditor2"/>. + </para> + </section> + + <section id="vpe_refresh"> + <title>Refresh</title> + <para> + Clicking on the <emphasis> <property>Refresh</property> </emphasis> button ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/icon_2.png"/> + </imageobject> + </inlinemediaobject> + ) refreshes the displayed information. + </para> + </section> + + <section id="vpe_page_design_options"> + <title>Page Design Options</title> + <para> + The <emphasis> <property>Page Design Options</property> </emphasis> 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: + </para> + + <figure> + <title>Page Design Options: Actual Run-Time folders</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_10.png"/> + </imageobject> + </mediaobject> + </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: + </para> + + <figure> + <title>Page Design Options: Included CSS files</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_10_2.png"/> + </imageobject> + </mediaobject> + </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: + </para> + + <figure> + <title>Page Design Options: Included tag libs</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_10_3.png"/> + </imageobject> + </mediaobject> + </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: + </para> + + <figure> + <title>Page Design Options: Substituted El expressions</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_10_4.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The first two tabs of the window let you define actual runtime folders. The example below will help you understand how this can be done. + </para> + + <para> + Suppose you have the following project structure: + </para> + + <programlisting role="XML"> +<![CDATA[WebContent/ + pages/ + img/ + a.gif + header.jsp + main.jsp + ]]> + </programlisting> + + <para> + The content of the <emphasis> <property>header.jsp</property> </emphasis> is: + </para> + + <programlisting role="XML"> +<![CDATA[My Header +<img src="img/a.gif"/> +]]> + </programlisting> + + <para> + and <emphasis> <property>main.jsp</property> </emphasis> content is: + </para> + + <programlisting role="XML"> +<![CDATA[<jsp:include page="pages/header.jsp" /> +]]> + </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. + </para> + + <para/> + + <para> + Let&apos; consider an example for other tabs. For instance, the definition of your CSS on the page is the next: + </para> + + <programlisting role="XML"> +<![CDATA[<link rel="stylesheet" type="text/css" + href="#{facesContext.externalContext.requestContextPath}/style.css"/> +]]> + </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. + </para> + + <para> + The next <property>URI</property> section lets you add URI taglibs so that the editor knows where to find the tag libraries. + </para> + + <para> + And the last <property>Substituted EL expressions</property> section is provided to specify the values for specific EL variables. It can be useful for a preview generation. + </para> + + <para> + As an example look at the figure below: + </para> + + <figure> + <title>EL Expression</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_12.png"/> + </imageobject> + </mediaobject> + </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> + </para> + + <figure> + <title>Setting the Value for the EL Expression</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_13.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + As a result in Visual mode and Preview view the word <emphasis> <property>World</property> </emphasis> is displayed. + </para> + + <figure> + <title>The EL Expression Value</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_14.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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. + </para> + + <para> + The available layouts and corresponding buttons are as follows: + <itemizedlist> + <listitem> + <para> + Vertical Source on top( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/source_top.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + Vertical Visual on top ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/source_bottom.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + Horizontal Source to the left ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/source_left.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + + <listitem> + <para> + Horizontal Visual to the left ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/source_right.png"/> + </imageobject> + </inlinemediaobject> + ) + </para> + </listitem> + </itemizedlist> + + <figure> + <title>Visual Page Editor Before Layout Changing </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_24.png"/> + </imageobject> + </mediaobject> + </figure> + Note, at the current view there is only <emphasis> <property> one</property> </emphasis> button, that proposes the possibility to change it in order the Source and the View are moved <emphasis> <property>in a clockwise direction</property> </emphasis>. + <figure> + <title>Visual Page Editor After Layout Changing </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_25.png"/> + </imageobject> + </mediaobject> + </figure> + </para> + </section> + + <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 ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/show_border_button.png"/> + </imageobject> + </inlinemediaobject> + ) on the toolbar. + </para> + </section> + + <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 ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/show_nonvisual.png"/> + </imageobject> + </inlinemediaobject> + ) on the VPE toolbar. + </para> + + <para> + On the figure you can see non-visual elements with gray dashed borders. + </para> + + <figure> + <title>Non-visual Tag in the VPE</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_4b.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can also switch on this option in the VPE preferences, having clicked on the <emphasis><property>Preferences</property> </emphasis> button ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/icon_1.png"/> + </imageobject> + </inlinemediaobject> + ). + </para> + </section> + + <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. + </para> + + <figure> + <title>Selection Tag Bar</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_15.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + If you want to hide the <property>Selection Tag Bar</property>, use the <emphasis> <property>Show Selection Bar</property> </emphasis> button ( + <inlinemediaobject> + <imageobject> + <imagedata fileref="images/visual_page/show_selection_bar.png"/> + </imageobject> + </inlinemediaobject> + ) on the VPE toolbar. + </para> + </section> + </section> + + <section id="page_preview"> + <title>Page Preview</title> + <para> + <property>VPE</property> comes with design-time preview feature which is available for: + </para> + + <itemizedlist> + <listitem> + <para> + Struts Pages + </para> + </listitem> + + <listitem> + <para> + JSF Pages + </para> + </listitem> + + <listitem> + <para> + Seam Pages + </para> + </listitem> + </itemizedlist> + + <para> + <property>Preview view</property> is read-only, it shows how the page will look like in a browser. + </para> + + <figure> + <title>Preview View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_16.png"/> + </imageobject> + </mediaobject> + </figure> +<!--para>You can even + attach your stylesheet to the preview.</para--> + </section> + + <section id="vpe_errors"> + <title>Error Messages</title> + <para> + <property>Visual Page Editor</property> provide a user friendly and effective <property>error</property> messages, which should make solving problems easier. <property>Error</property> message contains a reference to the problem and its description. Also in <property>Error</property> area you can find a link to <property>Visual Page Editor</property> forum and <property>Details</property> button whick is used to see a error trace. + </para> + + <para> + If the error occurs while editor loading, error message will contain information about of what might have caused the error ( a missing library or errors in source code). + </para> + + <figure> + <title>Visual Page Error Message</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/visual_page_16a.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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. + </para> + + <note> + <title>Tip:</title> + <para> + In case of Facelets tag library packed in <literal>.jar</literal>, remember to put <literal>*.taglib.xml</literal> in right place: <literal>[filename].jar/META-INF/*.taglib.xml</literal> + </para> + </note> + + <para> + <property>Visual Page Editor</property> recognizes the tags from the custom Facelets tag library and correctly renders them both in source and visual view of the editor. + </para> + + <figure> + <title>Custom Facelets Tags in the VPE</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/customFacelets1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + While editing an XHTML file that uses a custom Facelets components you can always make use of the following editor&apos;s features: + </para> + + <itemizedlist> + <listitem> + <para> + <xref linkend="contentAssistForCustomFacelets"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="openOnForCustomFacelets"/> + </para> + </listitem> + </itemizedlist> + + <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. + </para> + + <figure> + <title>Content Assist for Custom Facelets Tags</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/customFacelets2.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="openOnForCustomFacelets"> + <title>OpenOn for Custom Facelets Components</title> + <para> + While developing using Facelets you can make use of: + </para> + + <itemizedlist> + <listitem> + <para> + <xref linkend="openOnInXHTML"/> + </para> + </listitem> + + <listitem> + <para> + <xref linkend="openOnInCustomFaceletsTaglibs"/> + </para> + </listitem> + </itemizedlist> + + <section id="openOnInXHTML"> + <title>OpenOn in XHTML Files That Use Custom Facelets Components</title> + <para> + OpenOn functionality in XHTML files is available in two views of the <property>Visual Page Editor</property>: + </para> + + <orderedlist> + <listitem> + <para> + Source view + </para> + + <para> + <emphasis> <property>Ctrl+Click</property> </emphasis> on the namespace will open the Facelets tag file in a separate window. + </para> + + <figure> + <title>Opening a Custom Facelets Tag File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/customFacelets3.png" /> + </imageobject> + </mediaobject> + </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. + </para> + + <figure> + <title>Opening a Custom Facelets Tag File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/customFacelets4.png" /> + </imageobject> + </mediaobject> + </figure> + </listitem> + + <listitem> + <para> + Visual view + </para> + + <para> + In the visual view of the <property>VPE</property>, double-click a custom component and the Facelets tag file (<literal>*.taglib.xml</literal>) where it is declared will be opened. + </para> + </listitem> + </orderedlist> + </section> + + <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. + </para> + + <figure> + <title>Opening a Custom Facelets Component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/visual_page/customFacelets5.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + </section> + + <section id="SetupnotesforLinu895x"> + <title>Setup notes for Linux</title> + <para> + Linux users who are going to use earlier versions of JBoss Tools then 3.1.0.M4 may need to do the following to get the <property>Visual Page Editor</property> to work correctly on their machines. + </para> + + <para> + The Visual Page Editor requires the library libstdc++.so.5. This library is contained in the compat-libstdc++-33.i386 package. + </para> + + <note> + <title>Note</title> + <para> + Starting from JBoss Tools 3.1.0.M4 the libstdc++.so.5 library isn't required. + </para> + </note> + + <itemizedlist> + <listitem> + <para> + To install this package on Fedora Core or Red Hat Enterprise Linux run the following command: + </para> + + <programlisting role="JAVA"> +<![CDATA[yum install compat-libstdc++-33.i386 +]]> + </programlisting> + </listitem> + + <listitem> + <para> + On any other rpm based distributions download libstdc++.so.5 and run the following command: + </para> + + <programlisting role="JAVA"> +<![CDATA[rpm -Uvh compat-libstdc++-33.i386 +]]> + </programlisting> + </listitem> + + <listitem> + <para> + On Debian based distributions run the following command: + </para> + + <programlisting role="JAVA"> +<![CDATA[apt-get install compat-libstdc++-33.i386 +]]> + </programlisting> + </listitem> + </itemizedlist> + + <para> + In case you have the library installed and you still have issue with starting the Visual Page Editor then close all browser views/editors and leave one visual page editor open and restart eclipse. This should force a load of the right XULRunner viewer. + </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: + </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 + </para> + </listitem> + + <listitem> + <para> + Copy <property>libswt-xulrunner-gtk-3449.so</property> 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: + </para> + + <programlisting role="JAVA"> +<![CDATA[-Dswt.library.path=/usr/lib/eclipse +]]> + </programlisting> + + <para> + where + <code> + /usr/lib/eclipse + </code> + is the path to your eclipse folder. + </para> + </listitem> + </itemizedlist> + </section> +<!-- <section id="CreateLookAndFeel(Design-timeMetadate)ForAnyCustomJSFComponents41"> +<?dbhtml filename="CreateLookAndFeel(Design-timeMetadate)ForAnyCustomJSFComponents.html"?> +<title>JSP Visual Page Editor - Design Time Look and Feel for Custom Components</title> + +<itemizedlist> +<listitem><ulink url="http://www.jboss.org/404.html">Template definition for design-time representation of custom tags</ulink> (pdf) +<para></para> + <note> + <title>Note:</title> + <para>The templates files are now saved in <emphasis>&lt;RedHatDeveloperStudio&gt;\eclipse\plugins\com.exadel.vpe_1.1.1\plugin.xml</emphasis>. The PDF files show the old location.</para> + </note> +<para></para></listitem> + +<listitem><ulink url="http://www.jboss.org/404.html">Steps to Create Plug-in</ulink> (pdf)</listitem> +<listitem><ulink url="index.html">How to use create(..) method</ulink> (pdf)</listitem> +<listitem>API +<itemizedlist> +<listitem><ulink url="http://www.jboss.org/404.html">VpeAbstractTemplate</... +<listitem><ulink url="http://www.jboss.org/404.html">VpeTemplate</ulink>... +<listitem><ulink url="http://www.jboss.org/404.html">Download</ulink> examples. The examples.zip file contains two + applications. The first application transforms the JSP source tag into visual tag (HTML). This application + is an Eclipse plug-in. Import as an Eclipse project. The second application is a Web applications which + uses the custom component (project with JSF Nature).</listitem> +</itemizedlist> +<para>Please send us an email to <ulink url="mailto:support@exadel.com">support@exadel.com</ulink> if you have + questions about this feature.</para> +</section> + + +<section id="HTML401Suppor421t"> +<?dbhtml filename="HTML4.01Support.html"?> +<title>HTML 4.01 Support</title> +</section> + +<section id="JSP2.0JSTL1.0And1.1Suppor52t"> +<?dbhtml filename="JSP2.0JSTL1.0And1.1Support.html"?> +<title>JSP 2.0, JSTL 1.0/1.1 support</title> +</section> +--> + </section> + + <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. + </para> + + <section id="GraphicalPropertiesEditor"> + <title>Graphical Properties Editor</title> + <para> + <property>The Properties editor</property> allows you to work in two different modes and also supports unicode characters. + </para> + + <para> + To create a new properties file in the Package Explorer view, select <emphasis> <property>New > Properties File</property> </emphasis> from the right-click context menu on the folder where you want to create the file. + </para> + + <figure> + <title>Selecting Properties File</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can edit the file using a table-oriented &quot;Properties&quot; viewer: + </para> + + <figure> + <title>&quot;Properties&quot; Viewer</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can also use a Source viewer for editing the file: + </para> + + <figure> + <title>Source Viewer</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_3.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="GraphicalTLDEditor"> + <title>Graphical TLD Editor</title> + <para> + <property>The TLD editor</property> comes with same features you will find in all other JBoss Developer Studio editors: + </para> + + <itemizedlist> + <listitem> + <para> + Graphical and source edit modes + </para> + </listitem> + + <listitem> + <para> + Validation and error checking + </para> + </listitem> + </itemizedlist> + + <section id="TreeView2"> + <title>Tree view</title> + <figure> + <title>Tree View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_4.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="SourceView1"> + <title>Source view</title> + <para> + You can easily switch from Tree to Source by selecting the Source tab at the bottom of the editor. + </para> + + <figure> + <title>Source View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_5.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can easily add a <property>new tag</property>: + </para> + + <figure> + <title>Adding a New TLD Tag</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_6.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can also easily add a <property>new attribute</property> to an existing tag: + </para> + + <figure> + <title>Adding a New Attribute to TLD tag</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_7.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Content assist is available when editing the file using the Source viewer: + </para> + + <figure> + <title>TLD Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_8.png" scale="65"/> + </imageobject> + </mediaobject> + </figure> + + <para> + In the Source viewer, if at any point a tag is incorrect or incomplete, an error will be indicated next to the line and also in the Problems view below. + </para> + + <figure> + <title>Error Reporting</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_9.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + + <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. + </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: + </para> + + <itemizedlist> + <listitem> + <para> + Graphical and source edit modes + </para> + </listitem> + + <listitem> + <para> + Validation and error checking + </para> + </listitem> + </itemizedlist> + + <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. + </para> + + <figure> + <title>Tree View for editing web.xml in a graphical mode</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_10.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can add any new elements right in the <property>Tree viewer</property>: + </para> + + <figure> + <title>Adding New Elements in Web XML Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_11.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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: + </para> + + <figure> + <title>Web XML Source View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_12.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <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. + </para> + + <figure> + <title>Web XML Content Assist</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_13.png" scale="85" /> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="ErrorCheckingAndValidation"> + <title>Errors Checking and Validation</title> + <para> + If errors occur anywhere in the file, small red dots will appear next to the lines where the errors occurred. Also note that the file is marked by a small x in the Package Explorer view. + </para> + + <figure> + <title>Errors Reporting</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_14.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + </section> + + <section id="CSSEditor"> + <title>CSS Editor</title> + <para> + The <property>CSS editor</property> comes with the same features you will find in all other JBoss Developer Studio editors. + </para> + + <itemizedlist> + <listitem> + <para> + Content assist + </para> + </listitem> + + <listitem> + <para> + Validation and error checking + </para> + </listitem> + </itemizedlist> + + <para> + With the CSS (Cascading Style Sheet) editor, you can take advantage of code prompting: + </para> + + <figure> + <title>CSS Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_41.png"/> + </imageobject> + </mediaobject> + </figure> +<!-- <para>You can also use the Outline view next to the editor to navigate through the CSS + file:</para> + + <figure> + <title>Outline View</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_42.png"/> + </imageobject> + </mediaobject> + </figure> + --> + <para> + And you can also use the Properties view next to the editor to edit existing stylesheet declaration properties: + </para> + + <figure> + <title>Properties View in CSS Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_43.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + To make you work on CSS files more comfortable, CSS perspective is available, read more about it in <xref linkend="css_perspective"/> + </para> + </section> + + <section id="JavaScriptEditor"> + <title>JavaScript Editor</title> + <para> + The <property>JavaScript editor</property> is a Source viewer in which you can use code assist: + </para> + + <figure> + <title>JavaScript Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_44.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can also use the <property>JavaScript editor</property> with the Outline view to navigate around the file: + </para> + + <figure> + <title>JavaScript Editor with the Outline view</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_45.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + </section> +<!-- <section id="ImageViewer"> + + <title>Image Viewer</title> + <para>This simple image viewer allows you to view GIF and JPEG files individually in a + separate window:</para> + + <figure> + <title>Image Viewer</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_46.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> --> + <section id="XSDEditor"> + <title>XSD Editor</title> + <para> + JBoss Developer Studio comes with an <property>XSD Editor</property> for XML Schema files. This editor comes from the Web Tools Project (WTP) (see <ulink url="http://www.eclipse.org/webtools/testtutorials/gettingstarted/Ge... Getting Started</ulink>). + </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. + </para> + + <figure> + <title>Creating New XSD file</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_47.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The XSD Editor includes two viewers for working on the file, a Design viewer and a Source viewer: + </para> + + <figure> + <title>Source Viewer in XSD Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_48.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + In the Design viewer you can drill down on an element by double-clicking on it: + </para> + + <figure> + <title>Design Viewer in XSD Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_49.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + Various edit options are available when you right-click an element in the diagram: + </para> + + <figure> + <title>Edit Options in XSD Editor Context Menu.</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_50.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can also use the Properties view to edit a selected element: + </para> + + <figure> + <title>Properties View in XSD Editor</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_51.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + You can also use a Source viewer for the file. In this viewer, along with direct editing of the source code, you can also edit the file by using the Properties view on the right: + </para> + + <figure> + <title>Using Source Viewer and Properties View together for source code editing</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_52.png" scale="85"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <section id="SupportforXMLSchema"> + <title>Support for XML Schema</title> + <para> + JBoss Developer Studio fully supports XML files based on schemas as well as DTDs: + </para> + + <figure> + <title>XML File </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/more_editors/more_editors_53.png"/> + </imageobject> + </mediaobject> + </figure> + + <note> + <title>Note:</title> + <para> + In case you want to use your own DTD or XML Schema make sure that this DTD or XML Schema is not listed in XML Catalog. If it is, you can't work with your DTD and XML Schema and JBoss Tool which uses this DTD or XML Schema. More information about XML Catalog you can find in <ulink url="http://help.eclipse.org/galileo/index.jsp?topic=/org.eclipse.ws... Documentation</ulink> and on <ulink url="http://www.eclipse.org/webtools/community/tutorials/XMLCatalog/... Catalog Tutorial page</ulink>. + </para> + </note> + </section> + </section> +</chapter>