From jbosstools-commits at lists.jboss.org Thu Sep 25 11:20:16 2008 Content-Type: multipart/mixed; boundary="===============5657528464545735868==" MIME-Version: 1.0 From: jbosstools-commits at lists.jboss.org To: jbosstools-commits at lists.jboss.org Subject: [jbosstools-commits] JBoss Tools SVN: r10485 - trunk/jsf/docs/userguide/en/modules. Date: Thu, 25 Sep 2008 11:20:16 -0400 Message-ID: --===============5657528464545735868== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: ochikvina Date: 2008-09-25 11:20:15 -0400 (Thu, 25 Sep 2008) New Revision: 10485 Modified: trunk/jsf/docs/userguide/en/modules/editors.xml Log: https://jira.jboss.org/jira/browse/JBDS-423 - adding new 'Templating' secti= on; Modified: trunk/jsf/docs/userguide/en/modules/editors.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/jsf/docs/userguide/en/modules/editors.xml 2008-09-25 15:15:04 UTC= (rev 10484) +++ trunk/jsf/docs/userguide/en/modules/editors.xml 2008-09-25 15:20:15 UTC= (rev 10485) @@ -761,9 +761,9 @@ Visual Page Editor (VPE). You can use= the Visual Page Editor to develop an application using any technology: JSF, Struts, JSP,= HTML and others. = - Current VPE version has three tabs: Visual/Source<= /property>, Source and - Preview. To switch between the views = you can use tabs at the - bottom of the VPE or the shortcuts + Current VPE version has three tabs: Visual/Source<= /property>, + Source and Preview. To switch between the + views you can use tabs at the bottom of the VPE or the shortcu= ts Ctrl + PageUp/Ctrl + PageDown. =
@@ -867,10 +867,10 @@
= - CSS Dialog has four tabs where = css properties for text, - background, borders and others can be specified. A sim= ple preview which is - generated at the bottom of the CSS Dialog allows you to see - the changes before you apply them. + CSS Dialog ha= s four tabs where css + properties for text, background, borders and others ca= n be specified. A simple + preview which is generated at the bottom of the CSS Dialog + allows you to see the changes before you apply them. =
CSS Dialog @@ -881,18 +881,79 @@
+ +
+ Templating + + The VPE also makes it possible to create templates f= or unknown tags. + + To call the Template dialog for= a tag, right-click on it + in Visual mode and select + Template + option. + +
+ Calling Template Dialog + + + + + +
+ = + Here is what the Template dialog looks like. + = +
+ Template Dialog + + + + + +
+ = + + Tag for Display + field in the Template dialog requires + specifying a type of tag. It can be SPAN, DIV, TABLE o= r any other html element. + Here it's also possible to mark weather the tag i= s children or not (by checking + Children), whether= it contains an IMG tag (by checking + Icon) and + specify a value for it. + + What comes to the + Style field, you can f= ill it out manually or make use of the button + next to the field to bring the CSS Dialog for + editing styles. + + You can observe all defined templates in the VPE Preferences on the Templates tab which= you can quickly access by + pressing Prefere= nces button. + = +
+ Templates Tab of the VPE Preferences Page</titl= e> + <mediaobject> + <imageobject> + <imagedata fileref=3D"images/visual_page/visua= l_page_7c.png"/> + </imageobject> + </mediaobject> + </figure> + = + <para>Here it's possible to edit or remove any listed= in the table template.</para> + = + </section> </section> - = + <section id=3D"AdvancedSettings954"> - = + <title>Advanced Settings - = + In the left vertical pane of the Visual part there are t= hree buttons: - Preferences, + Preferences, Refresh and Page Design Options. - = +
Buttons on the Visual Part of VPE @@ -901,14 +962,14 @@
- = + - Preferences - button provides a quick access to Visual Page + Preferences + button provides a quick access to Visual Page Editor preferences. - = +
Visual Page Editor Preferences Window</titl= e> <mediaobject> @@ -918,17 +979,17 @@ </mediaobject> </figure> </listitem> - = + <listitem> <para>Clicking on <emphasis> - <property>Refresh</property> - </emphasis> button you refresh the displayed informati= on.</para> + <property>Refresh</property> + </emphasis> button you refresh the displayed infor= mation.</para> </listitem> - = + <listitem> <para><emphasis> - <property>Page Design Options</property> - </emphasis> button leads to window which helps you to = specify necessary + <property>Page Design Options</property> + </emphasis> button leads to window which helps you= to specify necessary references to resources. Here is what this window = looks like.</para> <figure> <title>Page Design Options @@ -938,16 +999,15 @@
- = + This dialog lets you set resources which are usu= ally only resolved in runtime. Let's look at what functionality it = proposes. - = + The first two sections of the window let you def= ine actual runtime - folders. The example below will help you to clarif= y how this can be - used. - = + folders. The example below will help you to clarif= y how this can be used. + Suppose you have the following project structure= : - = + - = + The content of the - header.jsp - is: + header.jsp + is: ]]> and - main.jsp - content is: + main.jsp + content is: ]]> When you open - main.jsp - in Visual Page Editor= , 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 + main.jsp + in Visual Page Editor, 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 Page Design Options button and set Actual Run-Time Relative Folder - to 'projectName > We= bContent - > pages' and you will see t= he image - appeared. + to 'projectName > We= bContent > + pages' and you will see the im= age appeared. - = - In the bottom part of the wi= ndow you can set a path to included css - files, tag libs and substituted EL expressions. + + In the bottom part of the win= dow you can set a path to + included css files, tag libs and substituted EL ex= pressions.
Bottom Part of the Page Design Options</tit= le> <mediaobject> @@ -990,27 +1049,26 @@ </imageobject> </mediaobject> </figure> - = - <para>Let' consider an example. For instance, the= definition of - your CSS on the page is the next:</para> - = + + <para>Let' consider an example. For instance, the= definition of your + CSS on the page is the next:</para> + <programlisting role=3D"XML"><![CDATA[<link rel=3D"sty= lesheet" type=3D"text/css" = href=3D"#{facesContext.externalContext.requestContextPath}/style.css"/> ]]></programlisting> - = + <para>This will work fine in runtime, but the <propert= y>Visual Page Editor</property> doesn'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 y= ou add URI taglibs so - that the editor knows where to find the tag librar= ies.</para> - = - <para>And the last <property>Substituted EL expression= s</property> section - is provided to specify the values for specific EL = variables. It can be - useful for a preview generation.</para> + <emphasis>requestContextPath</emphasis> in design = time is. In order to see + the necessary styles applied in design time your s= hould add a path to your + stylesheet in the <property>CSS File Path</propert= y> section.</para> + + <para>The next <property>URI</property> section lets y= ou add URI taglibs so that + the editor knows where to find the tag libraries.<= /para> + + <para>And the last <property>Substituted EL expression= s</property> section is + provided to specify the values for specific EL var= iables. It can be useful + for a preview generation.</para> <para>As an example look at the figure below:</para> <figure> <title>EL Expression @@ -1020,16 +1078,15 @@
- = + Here bath in Source and Visual modes you see the= EL expression - #{user.name}. When you switch= to - Preview view, you'll als= o see this - expression. Now press + #{user.name}. When you sw= itch to Preview + view, you'll also see this exp= ression. Now press Page Design Options button and set the value for the #{user.name} as World. - = +
Setting the Value for the EL Expression</ti= tle> <mediaobject> @@ -1038,10 +1095,10 @@ </imageobject> </mediaobject> </figure> - = + <para>As a result in Visual mode and Preview view the = word <emphasis> - <property>World</property> - </emphasis> is displayed.</para> + <property>World</property> + </emphasis> is displayed.</para> <figure> <title>The EL Expression Value @@ -1051,14 +1108,14 @@
- = + - = - You can find useful one more functionality provided by V= PE. At the bottom of - the Visual/Source view there is a Selection Tag - Bar. It allows to see tags tree for a curre= nt component selected - in Visual or Source mode. - = + + You can find useful one more functionality provided by V= PE. At the bottom of the + Visual/Source view there is a Selection Tag + Bar. It allows to see tags tree for a current c= omponent selected in + Visual or Source mode. +
Selection Tag Bar @@ -1067,13 +1124,13 @@
- = - If you want to hide the Selection Tag Bar, use the button - in the form of a red cross on the lower right side. To res= et it again you should - check the proper option in the VPE - Preferences. + + If you want to hide the Selection Tag Bar, use the button in + the form of a red cross on the lower right side. To reset = it again you should check + the proper option in the VPE + Preferences.
- = +
Page Preview = --===============5657528464545735868==--