From jbosstools-commits at lists.jboss.org Thu Oct 15 03:51:32 2009 Content-Type: multipart/mixed; boundary="===============6331747067535158699==" MIME-Version: 1.0 From: jbosstools-commits at lists.jboss.org To: jbosstools-commits at lists.jboss.org Subject: [jbosstools-commits] JBoss Tools SVN: r18102 - trunk/jsf/docs/userguide/en/modules. Date: Thu, 15 Oct 2009 03:51:32 -0400 Message-ID: <200910150751.n9F7pWl0008530@svn01.web.mwc.hst.phx2.redhat.com> --===============6331747067535158699== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: ochikvina Date: 2009-10-15 03:51:32 -0400 (Thu, 15 Oct 2009) New Revision: 18102 Modified: trunk/jsf/docs/userguide/en/modules/editors.xml Log: https://jira.jboss.org/jira/browse/JBDS-878 - renaming and restructuring th= e 'Advanced options' section (now 'VPE toolbar'), updating the screens and = the description according to the new buttons added to the VPE toolbar; 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 2009-10-15 07:46:21 UTC= (rev 18101) +++ trunk/jsf/docs/userguide/en/modules/editors.xml 2009-10-15 07:51:32 UTC= (rev 18102) @@ -863,52 +863,7 @@ - - - Visual Page Editor provides the opt= ion for displaying - non-visual tags in Visual mode of the editor. To enable th= is option expand the - submenu in the top left corner of the Visual part and sele= ct - Show Non-visual tags.<= /para> - -
- Enabling the Option for Showing Non-visual Tags</ti= tle> - <mediaobject> - <imageobject> - <imagedata fileref=3D"images/visual_page/visual_pa= ge_4a.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>On the figure you can see non-visual elements with gray = dashed borders.</para> - - <figure> - <title>Non-visual Tag in the VPE - - - - - -
- - To disable this option again expand the same submenu and= select - Hide Non-visual tags.<= /para> - -
- Non-visual Tag in the VPE - - - - - -
- - You can also switch on this option in the VPE preference= s, having clicked on the Preferences - button - ( - - - - ). + = Visual Page Editor also displays custom tags correctly i= f they are configured properly. The picture below shows an example how custom tags "pagination" and = "echo" will be displayed in VPE. @@ -927,10 +882,10 @@ echo.xhtml: = - #{msg}</span> - - ]]> = + + #{msg} + +]]> = = paginator.xhtml: = @@ -1085,8 +1040,12 @@ = In the Visual part of the VPE t= here is a graphical toolbar, use it to add inline styling to JSF and Strut= s tags on your page. The - toolbar can be hidden by selecting the - Hide Text Formatting = option in the submenu on the left pane. + toolbar can be hidden with the help of the special but= ton ( = + + + + + ) on the VPE toolbar. =
Text Formatting @@ -1345,73 +1304,104 @@ =
= - Advanced Settings + VPE Toolbar = - In the left vertical pane of the Visual part there are f= our buttons: - Preferences - ( - - - - - - ), + The Visual Page Editor toolbar includes the next buttons= : = - = - = - = - - Refresh - - ( - - - - - - ) - , - Page Design Options ( = - - - - - - ) - and some of the next buttons: - - Vertical Source on top ( = - - - - - ), - - Vertical Visual on top ( = - - - - - ), - - Horizontal Source to the left ( = - - - - - ), - - Horizontal Visual to the left ( = - - - - - ), - depending on the current Visual/Source layout - . - + + Preference= s + ( + + + + + + ) + + = + Refresh + ( + + + + + + ) + + = + Pa= ge Design Options + ( = + + + + + + ) + + + = + + the button to swi= tch the current Visual/Source layout + ( = + + + + + ) + + = + + Show border for unk= nown tags + ( = + + + + + ) + + = + + Show non-vi= sual tags + ( = + + + + + ) + + = + + Show selecti= on bar + ( = + + + + + ) + + = + + Show text formatting= bar + ( = + + + + + ) + + = + + Show bundle's messages as EL expressions ( = + + + + + ) + + + =
- Buttons on the Visual Part of VPE + Buttons on the VPE Toolbar @@ -1419,293 +1409,345 @@
= - - - - Preferences - button - ( - - - - - - ) - provides a quick access to Visual Page - Editor preferences. - -
- Visual Page Editor Preferences Window</titl= e> - <mediaobject> - <imageobject> - <imagedata fileref=3D"images/visual_page/v= isual_page_9.png"/> - </imageobject> - </mediaobject> - </figure> - = - <para>This page provides a number of options associated w= ith the editor representation. = - The more detailed description on each one you can find in the <prope= rty>"JBoss Tools Preferences"</property> chapter = - under <link linkend=3D"VisualPageEditor2">Visual Page Editor</link>.= </para> - = - </listitem> - <listitem> = - <para>Clicking on <emphasis> - <property>Refresh</property> - </emphasis> button = - ( - <inlinemediaobject> - <imageobject> - <imagedata fileref=3D"images/visual_page/i= con_2.png"/> - </imageobject> - </inlinemediaobject> - ) = - you refresh the displayed information.</para> - </listitem> - - <listitem> - <para><emphasis> - <property>Page Design Options</property> - </emphasis> button = - ( = - <inlinemediaobject> - <imageobject> - <imagedata fileref=3D"images/visual_page/i= con_3.png"/> - </imageobject> - </inlinemediaobject> - ) = - leads to a window which helps you specify necessa= ry - 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 relati= ve path values when - generating a preview: </para> - <figure> - <title>Page Design Options: Actual Run-Time folder= s - - - - - -
- - - The second tab, - Included CSS files - , is used to add CSS files to be linked= by Visual Page Editor - when generating a preview: - -
- Page Design Options: Included CSS files</ti= tle> - <mediaobject> - <imageobject> - <imagedata fileref=3D"images/visual_page/v= isual_page_10_2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>The third one, <emphasis> - <property>Included tag libs</property></emphas= is>, can be used to add Taglibs that can be used by the editor for - getting appropriate templates to generate a previe= w:</para> - - <figure> - <title>Page Design Options: Included tag libs</tit= le> - <mediaobject> - <imageobject> - <imagedata fileref=3D"images/visual_page/v= isual_page_10_3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para id=3D"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 express= ions - - - - - -
- - - The first two tabs of the window let you define = actual runtime folders. - The example below will help you understand how thi= s can be done. - - Suppose you have the following project structure= : - - + Preferences + = + The + Preferences + button + ( + + + + + + ) + provides a quick access to the Visual Page + Editor preferences. + = +
+ Visual Page Editor Preferences Window + + + + + +
+ = + This page provides a number of options associated with the editor = representation. = + The more detailed description on each one you can find in the "JBoss Tools Preferences" chapter = + under Visual Page Editor. +
+ = +
+ Refresh + = + Clicking on the + Refresh + button = + ( + + + + + + ) = + refreshes the displayed information. +
+ = +
+ Page Design Options + = + The + Page Design Options + button = + ( = + + + + + + ) = + leads to a window which helps you specify necessary + references of the resources. It is represented by a window with 4 ta= bs. The + first one, + Actual Run-Time folders, + is used to replace absolute and relative path values when + generating a preview: +
+ Page Design Options: Actual Run-Time folders + + + + + +
+ = + = + The second tab, + Included CSS files + , is used to add CSS files to be linked by Visual Page Edi= tor + when generating a preview: + = +
+ Page Design Options: Included CSS files + + + + + +
+ = + The third one, + Included tag libs, can be used to ad= d Taglibs that can be used by the editor for + getting appropriate templates to generate a preview: + = +
+ Page Design Options: Included tag libs + + + + + +
+ = + And finally, the + Substituted El expressions + tab is used to add El expressions that will be substitute= d by + the editor when generating a preview: + = +
+ Page Design Options: Substituted El expressions + + + + + +
+ = + = + 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. + = + Suppose you have the following project structure: + = + - - The content of the - header.jsp - is: - The content of the + header.jsp + is: + ]]> - and - main.jsp - content is: - + and + 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 - Page Design Options - button and set - Actual Run-Time Relative Folder - to 'projectName > We= bContent > - pages' and you will see the im= age appeared. - - - Let' consider an example for other tabs. Fo= r instance, the - definition of your CSS on the page is the next: - - When you open + main.jsp + in Visual Page Editor, it will not b= e 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 > WebContent > + pages' and you will see the image appeared. + + = + Let' consider an example for other tabs. For instance, the + definition of your CSS on the page is the next: + = + ]]> + = + This will work fine in runtime, but the Visual Page + Editor doesn't know what + requestContextPath in design time is. In order = to + see the necessary styles applied in design time your should add a pa= th to + your stylesheet in the CSS File Path section. + = + The next URI section lets you add URI tagl= ibs so that + the editor knows where to find the tag libraries. + = + And the last Substituted EL expressions se= ction is + provided to specify the values for specific EL variables. It can be = useful + for a preview generation. + As an example look at the figure below: +
+ EL Expression + + + + + +
+ = + Here bath in Source and Visual modes you see the EL expression + #{user.name}. When you switch to Prev= iew + view, you'll also see this expression. Now press + Page Design Options + button and set the value for the + "user.name" as + World. + = +
+ Setting the Value for the EL Expression + + + + + +
+ = + As a result in Visual mode and Preview view the word + World + is displayed. +
+ The EL Expression Value + + + + + +
+
= - This will work fine in runtime, but the Visual Page - Editor doesn't know what - requestContextPath in des= ign time is. In order to - see the necessary styles applied in design time yo= ur should add a path to - your stylesheet in the CSS File Path section. - - The next URI section lets y= ou add URI taglibs so that - the editor knows where to find the tag libraries.<= /para> - - And the last Substituted EL expression= s section is - provided to specify the values for specific EL var= iables. It can be useful - for a preview generation. - As an example look at the figure below: -
- EL Expression - - - - - -
- - Here bath in Source and Visual modes you see the= EL expression - #{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> - <imageobject> - <imagedata fileref=3D"images/visual_page/v= isual_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 - - - - - -
- - - - Visual/Source Editors splitting buttons<= /property> - provide the possibility to choose one of the four = possible layouts for the Visual/Source Editor. - - = - = - The available layouts and corresponding buttons = are as follows: - - Vertical Source on top( - - - - ) - Vertical Visual on top ( - - - - ) - Horizontal Source to the left ( <= inlinemediaobject> - - - - ) - Horizontal Visual to the left ( - - - - ) - = - -
- Visual Page Editor Before Layout Changing <= /title> - <mediaobject> - <imageobject> - <imagedata fileref=3D"images/visual_page/v= isual_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=3D"images/visual_page/v= isual_page_25.png"/> - </imageobject> - </mediaobject> - </figure> - </para> - </listitem> - </itemizedlist> - - <para>You can find useful one more functionality provided by V= PE. At the bottom of the - <property>Visual/Source view</property> there is a <pr= operty>Selection Tag - Bar</property>. It allows to see tags tree for a curre= nt component selected in - Visual or Source mode.</para> - - <figure> - <title>Selection Tag Bar - - - - - -
- - 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 - Show Selection Bar option= in the submenu on the left pane. +
+ Visual/Source Editors splitting buttons + = + The + Visual/Source Editors splitting buttons + provide the possibility to choose one of the four possible layouts = for the Visual/Source Editor. + + = + = + The available layouts and corresponding buttons are as follows: + + Vertical Source on top( + + + + ) + Vertical Visual on top ( + + + + ) + Horizontal Source to the left ( + + + + ) + Horizontal Visual to the left ( + + + + ) + = + +
+ Visual Page Editor Before Layout Changing + + + + + +
+ Note, at the current view there is only + one button, that proposes the poss= ibility to change it in order the Source and the View are moved + in a clockwise direction. = +
+ Visual Page Editor After Layout Changing + + + + + +
+ +
= -
- Show the Selection Tag Bar - - - - - -
+
+ Show Border for Unknown Tags + = + The option is a self explanatory, i. e. if you want unknown tag= s to be wrapped in a border in the VPE visual part, just press the = + + Show border for unknown tags button + ( = + + + + + ) on the toolbar. +
+ = +
+ Show Non-visual Tags + = + Visual Page Editor provides the option for= displaying + non-visual tags in Visual mode of the editor. To enable it select th= e + Show non-visual tags button ( = + + + + + ) on the VPE toolbar. + = + On the figure you can see non-visual elements with gray dashed = borders. + = +
+ Non-visual Tag in the VPE + + + + + +
+ = + You can also switch on this option in the VPE preferences, hav= ing clicked on the Preferences + button + ( + + + + ). +
+ = +
+ Show Selection Bar + = + You can find useful one more functionality provided by VPE= . At the bottom of the + Visual/Source view there is a Se= lection Tag + Bar. It allows to see tags tree for a current compo= nent selected in + Visual or Source mode. + = +
+ Selection Tag Bar + + + + + +
+ = + If you want to hide the Selection Tag Bar, use + the + Show Selection Bar button ( = + + + + + ) on the VPE toolbar. +
=
--===============6331747067535158699==--