From richfaces-svn-commits at lists.jboss.org Tue Nov 27 11:30:43 2007 Content-Type: multipart/mixed; boundary="===============0111225516656738086==" 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: r4289 - trunk/docs/userguide/en/src/main/docbook/included. Date: Tue, 27 Nov 2007 11:25:02 -0500 Message-ID: --===============0111225516656738086== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: artdaw Date: 2007-11-27 11:25:02 -0500 (Tue, 27 Nov 2007) New Revision: 4289 Modified: trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml Log: Fix Details of Usage or 'selection' attribute of scrollableDataTable. Add s= creenshot for example. Modified: trunk/docs/userguide/en/src/main/docbook/included/scrollableDataT= able.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/scrollableDataTable.x= ml 2007-11-27 15:57:04 UTC (rev 4288) +++ trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.x= ml 2007-11-27 16:25:02 UTC (rev 4289) @@ -67,50 +67,42 @@ ... ]]> - = -
+ +
Details of Usage - - The component represents on a page as a scrollable table with some fixed = (non-scrollable) rows (header, footer) and columns. - Columns of the table are optionally resizable. Resizing is available usin= g "drag and drop" of the column vertical borders. - There is possibility to expand or collapse the columns through JS API on = the client side. - User can define the number of the fixed columns from the left side using= attribute "frozenColCount" that will not be scrolled - via horizontal scroll. - - - There is possibility to increase component performance using attribute "hideWhenScrolling". - If attribute value is 'true' data will be hidden during scrolling. = - - = - - It's possible to select the whole row with onclick on the row or some set= of rows. Selection is optional and availability of such feature - is defined on the component. - There are two ways to select a few rows: - - Just clicking the columns one by one. - Clicking some row with the SHIFT button hold. - In this case all the rows starting from last selected up to clicked shoul= d be selected. - - - = - - The columns provides the possibility of expanding/collapsing on the clien= t side through the next JS API: - = - - doCollapse(columnId) - Performs the collapse action for the c= olumn with the corresponding id - + The component represents on a page as a scrollable table with s= ome fixed (non-scrollable) + rows (header, footer) and columns. Columns of the table are optional= ly resizable. Resizing is + available using "drag and drop" of the column vertical borders. Ther= e is possibility to expand + or collapse the columns through JS API on the client side. User can = define the number of the + fixed columns from the left side using attribute + "frozenColCount" + that will not be scrolled via horizontal scroll. + There is possibility to increase component performance using at= tribute + "hideWhenScrolling" + . If attribute value is 'true' data will be hidden during= scrolling. = - It's possible to sort the table content after clicks on the header. The f= eature is optional. - Every column should be pointed to the comparator method that will be used= for sorting the table. - = - In case the <rich:scrollableDataTable> is alre= ady sorted by some - column and the header of this column has been clicked again - the sorting= will be - reversed. - + It's possible to select the whole row with onclick on the row o= r some set of rows. + Selection is optional and availability of such feature is defined on= the component. There are + two ways to select a few rows: + Just clicking the columns one by one. + Clicking some row with the SHIFT button hold. In this ca= se all the rows starting + from last selected up to clicked should be selected. + + = - + The columns provides the possibility of expanding/collapsing on= the client side through + the next JS API: + doCollapse(columnId) - Performs the collapse action for = the column with the + corresponding id + It's possible to sort the table content after clicks= on the header. The + feature is optional. Every column should be pointed to the comparato= r method that will be used + for sorting the table. In case the + <rich:scrollableDataTable> is already sor= ted by some column + and the header of this column has been clicked again - the sorting w= ill be reversed. + + The typical variant of using: - + - = @@ -132,18 +123,28 @@ ... ]]> - In order to get the row data when using one and multi= -selection rows mode the access to the selected rows is required= . = - In this case you can use the "selectio= n" attribute. = - This attribute is a reference to object to the instace of or= g.richfaces.model.selection.Selection interface, containing current = selection. - It's only necessary to work up a selection in a particular way= and to get data. -Simple code is placed below. - Example: - The + "selection" + attribute allows to get the row data when using one and multi-selection + rows mode. + This attribute is a reference to object to the instace of + org.richfaces.model.selection.Selection inter= face, containing current + collection of objects selected by user. + In the following example when user submits the form current coll= ection of objects selected + by user is placed in the object's property. Then on complete action = the + <rich:modalPanel> + with selected data will be shown. + + Example: + + + + - @@ -156,82 +157,86 @@ + + + + + + + + + + X + + + + + + + + + + + + + + + + +...]]> + This is a result: +
+ The <emphasis>"selection"</emphasis> attribute usag= e + + + + + +
= - -... -]]> - In order to build this application, you can create a managed be= an like this one. = - Function takeSelection() fills the array 'selectedCars': = with the data, got from the selection. - Example: = - selectedCars =3D new ArrayList(); = - = - ... - = - public SimpleSelection getSelection() { - return selection; - } - = - public String takeSelection() { - getSelectedCars().clear(); - Iterator iterator =3D getSelection().getKeys(); - while (iterator.hasNext()){ - SimpleRowKey key =3D iterator.next(); - getSelectedCars().add(getAllCars().get(key.intValue())); - } - return null; - } + The + <rich:scrollableDataTable> + component has the following extra attributes for event p= rocessing on the client: + onselectionchange + oncomplete + onRowClick + onRowDblClick + onRowMouseUp + onRowMouseDown + + +
= - public ArrayList getSelectedCars() { - return selectedCars; - } -... -]]> - -Finally, the component has the following extra attributes for event proces= sing on the client: - - onselectionchange - oncomplete - onRowClick - onRowDblClick - onRowMouseUp - onRowMouseDown - - - = -
- =
Look-and-Feel Customization - = + For skinnability implementation, the components use a - style class redefinition method. - - Default style classes are mapped on + style class redefinition method. + Default style classes are mapped on skin parameters. - = + There are two ways to redefine the appearance of all - <rich:scrollableDataTable> - components at once: - = + <rich:scrollableDataTable> + components at once: + Redefine the corresponding skin parameters - = + Add to your style sheets - style classes - used by a - <rich:scrollableDataTable> - component + style classes + used by a + <rich:scrollableDataTable> + component
- = +
Skin Parameters Redefinition @@ -259,7 +264,7 @@
- = + Skin parameters for header rows and cells @@ -274,7 +279,7 @@ headerBackgroundColor background-color - = + headerTextColor color @@ -303,10 +308,10 @@ tableBorderColor border-right-color - + -
- = + + Skin parameters for footer rows and cells @@ -315,7 +320,7 @@ Skin parameters CSS properties - + tableSubfooterBackgroundColor @@ -329,7 +334,7 @@ generalSizeFont font-size - = + tableBorderColor border-right-color @@ -344,8 +349,8 @@ -
- = + + Skin parameters for column cells @@ -367,7 +372,7 @@
- = + Skin parameters for active rows @@ -385,7 +390,7 @@
- = + Skin parameters for selected rows @@ -400,164 +405,163 @@ additionalBackgroundColor background-color - +
- = +
- = +
Definition of Custom Style Classes - = + On the screenshot there are classes names that define styles for= component elements. - = +
Classes names - = +
- = + Classes names that define a component appearance - = + Class name - = + Description - = + rich-sdt - = + Defines styles for a component appearance - = +
- = + Classes names that define footer and header elements - = + Class name - = + Description - = + - = + rich-sdt-header-cell - = + Defines styles for header cells - = + rich-sdt-header-raw - = + Defines styles for a header raw - = + rich-sdt-column-cell - = + Defines styles for column cells rich-sdt-footer-cell - = + Defines styles for footer cells - = + rich-sdt-footer-raw - = + Defines styles for a footer raw rich-sdt-hsep - = + Defines styles for header separators - = +
- = + Classes names that define different states - = + Class name - = + Description - = + - = + rich-sdt-row-active - = + Defines styles for an active row - = + rich-sdt-row-selected - = + Defines styles for a selected row - = + rich-sdt-column-sort-up - = + Defines styles for ascending sorted column - = + rich-sdt-column-sort-down - = + Defines styles for descending sorted column
- = + In order to redefine styles for all - <rich:scrollableDataTable> - components on a page using CSS, it's enough to create= classes with the + <rich:scrollableDataTable> + components on a page using CSS, it's enough to crea= te classes with the same names and define necessary properties in them. - = + To change styles of particular - <rich:scrollableDataTable> - components, define your own style classes in the correspon= ding - <rich:scrollableDataTable> - attributes. + <rich:scrollableDataTable> + components, define your own style classes in the corresp= onding + <rich:scrollableDataTable> + attributes.
- = +
Relevant Resources Links - Here - you can see the example of <ric= h:scrollableDataTable>s usage. - How to use one and multi-selection rows mode see on the = - RichFaces Users Forum - - = -
= + Here you can see the example of + <rich:scrollableDataTable> + usage. + --===============0111225516656738086==--