From richfaces-svn-commits at lists.jboss.org Fri Mar 28 16:21:39 2008 Content-Type: multipart/mixed; boundary="===============6782531837715936453==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r7390 - trunk/docs/userguide/en/src/main/docbook/included. Date: Fri, 28 Mar 2008 16:21:38 -0400 Message-ID: --===============6782531837715936453== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: msorokin Date: 2008-03-28 16:21:38 -0400 (Fri, 28 Mar 2008) New Revision: 7390 Added: trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml Modified: trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml Log: http://jira.jboss.com/jira/browse/RF-1226 Component is added with descriptions for details of usage InplaceInput corrected Modified: trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.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/docs/userguide/en/src/main/docbook/included/inplaceInput.xml 2008= -03-28 20:14:23 UTC (rev 7389) +++ trunk/docs/userguide/en/src/main/docbook/included/inplaceInput.xml 2008= -03-28 20:21:38 UTC (rev 7390) @@ -290,7 +290,7 @@ "oneditactivated" , = "onviewactivation" = and = - " onviewactivated" = + " onviewactivated" = attributes provide a possibility to assign JavaScript code on = edit state activation, on = edit state activated,on = Added: trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc= .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/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xm= l (rev 0) +++ trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xm= l 2008-03-28 20:21:38 UTC (rev 7390) @@ -0,0 +1,34 @@ + +
+ + + + + +
+ Description + The + <rich:inplaceSelect> + is used for creation select based inputs: it shows the= value as text in one state and enables editing the value, providing a list= of options in another state + = +
+ <emphasis role=3D"bold"><property><rich:inplaceSelec= t></property></emphasis> component + = + + = + + +
+
+
+ Key Features = + + Option to display "save", "cancel&quo= t; buttons as icons + Option to display "save", "cancel&quo= t; buttons as standard buttons + Possibility to assign an JavaScript action on state= change + Switching between&= lt;rich:inplaceSelect> components using "Tab&= quot; key + Resizable select field + Full skinability + = +
+
\ No newline at end of file Added: trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.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/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml = (rev 0) +++ trunk/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml 200= 8-03-28 20:21:38 UTC (rev 7390) @@ -0,0 +1,759 @@ + +
+ + + rich:inplaceSelect + inplaceSelect + + + + Component identification parameters + = + + + + Name + Value + + + + + component-type + org.richfaces.inplaceInput + + + + component-family + org.richfaces.inplaceInput + + + renderer-type + org.richfaces.renderkit.inplaceInputRenderer + + + tag-class + org.richfaces.taglib.inplaceInputTag + + + +
+
+ Creating the Component with a Page Tag + Here is a simple example of how the component can be used on= a page: + + Example: + + + = + + + + + +...]]> +
+
+ Creating the Component Dynamically Using Java + + Example: + + +
+ = + = + + = + = + +
+ Details of Usage + = + = + The <rich:inplaceSelec= t> component has three functional states, which = are: = + + = + = + + View state displays the current val= ue as text; + = + + + Edit state displays a list with opti= ons; = + + + + Changed state displays the value of= the selected option as text = + + + + = + = + = + = + The = + "value" = + attribute displays the value as an outputtext. = + The attribute is defined when some option in the list is selecte= d. = + = + + = + = + = + You can form he list of the options: using + <f:selectItem> and = + <f:selectItems> + Please see the example below + = + = + = + + + + Example: + = + + + + + +...]]> = + = + + The "value" attribut= e gets = + some value when an option in the select-box in clicked on (the default ac= tion). = + = + = + = + Nowever, if you want the end user to confirm the data saving explicitly y= ou can: = + + + Use a "showControls" attribute, which makes "save" and "cancel&qu= ot; buttons (displayed as icons) appear next to the input field; + + Please see the example + + Example: + = + = + + + + + +...]]> = + = + + = + = + + Use standard buttons by means of the controlsfacet + + Please see the example + + Example: + = + = + + + + + + + + + +...]]> = + = + + = + = + = + + Note: + + The controlsfacet als= o implies using showcontrols = + attribute and it has to be defined as "true". + = + + = + = + + + Redefinition of the + "save" and "cancel" icons can be performed usi= ng = + "saveControlIcon" + and = + "cancelControlIcon" + attributes r. You need to define the path to where your images = are located. = + + + Example: + = + = + = + = + + + + + ...]]> = + = + + + You can also position the controls relatively to the input field, = by means of = + " controlsHorizontalPosition" = + " controlsVerticalPosition " + attributes. + = + The = + " controlsHorizontalPosition" attribute has = + "left", "right"= and "center" definitions. = + = + The = + " controlsVerticalPosition " + attribute has "bottom", &= quot;center" and "top" defin= itions. + + + + + Example: + = + = + + + + + + + + + +...]]> = + + + Another useful attribute is = + "openOnEdit". = + It allows you to make the drop-down box with options appear once &= quot;edit" state activated. = + + + + + + + + + The = + "editEvent" = = + attribute provides an option to assign an JavaScript action that i= nitiates the change of the state from + view + to = + edit. = + = + = + The default value is "click". = + = + + = + = + = + + Note: + + Do not use "on" prefix applying event action. E.g. use= "click" instead of "onClick", use "mouseover"= ; instead of "onMouseOver". = + + + + = + The = + "selectOnEdit"= = + (with possible values "true", "false") gives y= ou an = + option to make the text in the input area selected right after the= change from = + view state to edit occur= s. = + = + + + The = + " inputWidth"= , = + " minInputWidth" , and = + " maxInputWidth" = + attributes are provided to specify the width, minimal width and ma= ximal width for the input element respectively. = + = + = + + + The = + " oneditactivation" , = + "oneditactivated" , = + "onviewactivation" = + and = + " onviewactivated" attributes + provide a possibility to assign JavaScript code on = + edit state activation, on = + edit state activated,on = + view state activation and on = + view state activated respectively. = + = +
+ + + + = +
+ JavaScript API + = + JavaScript API + + + + Function + Description + = + + + + + + edit() + changes the state to edit + = + + + cancel() + changes its state to the previous one before = editing (changed or view) + = + + = + + save() + the component hanges the state to the previou= s one before editing (changed or view) + + + save() + the component changes its state to changed w= ith a new value + + + save() + the component changes its state to changed wit= h a new value + + + getValue() + gets the current value + + = + + setValue(newValue) + sets the current value + + = + + +
+
+ = + = + = + = +
+ Look-and-Feel Customization + For skinnability implementation, the components use a + style class redefinition method. + Default style classes are mapped on + skin parameters. + + There are two ways to redefine the appearance of all + <rich:inplaceSelect> + components at once: = + + Redefine the corresponding skin parameters + Add to your style sheets style classes used by a + <rich:inplaceSelect> + component + + +
+ = + + + = + = + + = + + + +
+ Relevant Resources Links + + Here + you can see the example of + <rich:inplaceIput> + usage and sources for the given example. +
+
\ No newline at end of file --===============6782531837715936453==--