Author: ilya_shaikovsky Date: 2010-05-25 04:45:36 -0400 (Tue, 25 May 2010) New Revision: 17226 Added: root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/tableStyling.xhtml Modified: root/examples/richfaces-showcase/trunk/pom.xml root/examples/richfaces-showcase/trunk/src/main/java/org/richfaces/demo/tables/data/carstore/InventoryVendorList.java root/examples/richfaces-showcase/trunk/src/main/resources/org/richfaces/demo/data/common/navigation.xml root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/component-sample.xhtml root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/simpleTable.xhtml root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/extendedDataTable/simpleTable.xhtml Log: https://jira.jboss.org/browse/RF-8298 Modified: root/examples/richfaces-showcase/trunk/pom.xml =================================================================== --- root/examples/richfaces-showcase/trunk/pom.xml 2010-05-25 08:02:50 UTC (rev 17225) +++ root/examples/richfaces-showcase/trunk/pom.xml 2010-05-25 08:45:36 UTC (rev 17226) @@ -47,6 +47,11 @@ <artifactId>tables-ui</artifactId> <version>4.0.0-SNAPSHOT</version> </dependency> + <dependency> + <groupId>org.richfaces.ui-sandbox</groupId> + <artifactId>datascroller-ui</artifactId> + <version>4.0.0-SNAPSHOT</version> + </dependency> </dependencies> <build> Modified: root/examples/richfaces-showcase/trunk/src/main/java/org/richfaces/demo/tables/data/carstore/InventoryVendorList.java =================================================================== --- root/examples/richfaces-showcase/trunk/src/main/java/org/richfaces/demo/tables/data/carstore/InventoryVendorList.java 2010-05-25 08:02:50 UTC (rev 17225) +++ root/examples/richfaces-showcase/trunk/src/main/java/org/richfaces/demo/tables/data/carstore/InventoryVendorList.java 2010-05-25 08:45:36 UTC (rev 17226) @@ -6,11 +6,19 @@ public class InventoryVendorList { private String vendor; private List<InventoryVendorItem> vendorItems; - + + public long getCount() { + if (vendorItems != null) { + return vendorItems.size(); + } else { + return 0; + } + } + public InventoryVendorList() { vendorItems = new ArrayList<InventoryVendorItem>(); } - + public String getVendor() { return vendor; } Modified: root/examples/richfaces-showcase/trunk/src/main/resources/org/richfaces/demo/data/common/navigation.xml =================================================================== --- root/examples/richfaces-showcase/trunk/src/main/resources/org/richfaces/demo/data/common/navigation.xml 2010-05-25 08:02:50 UTC (rev 17225) +++ root/examples/richfaces-showcase/trunk/src/main/resources/org/richfaces/demo/data/common/navigation.xml 2010-05-25 08:45:36 UTC (rev 17226) @@ -182,6 +182,15 @@ <name>Data Table Basic</name> </sample> <sample> + <id>tableStyling</id> + <name>Data Table Styling</name> + <description> + <!-- TODO: rowClass should appears at this sample after completion --> + <!-- TODO: rowClasses should be used instead of jQuerry selectors after will works --> + <!-- TODO: onrowmouseover, onrowmouseout - should be used instead of jQuery selector --> + </description> + </sample> + <sample> <id>tableSorting</id> <name>Data Table Sorting</name> </sample> Modified: root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/component-sample.xhtml =================================================================== --- root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/component-sample.xhtml 2010-05-25 08:02:50 UTC (rev 17225) +++ root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/component-sample.xhtml 2010-05-25 08:45:36 UTC (rev 17226) @@ -10,6 +10,7 @@ <f:metadata> <f:viewParam name="sample" value="#{demoNavigator.sample}" /> <f:viewParam name="demo" value="#{demoNavigator.demo}" /> + <f:viewParam name="skin" value="#{skinBean.skin}"/> </f:metadata> </ui:define> <ui:define name="body"> Modified: root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/simpleTable.xhtml =================================================================== --- root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/simpleTable.xhtml 2010-05-25 08:02:50 UTC (rev 17225) +++ root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/simpleTable.xhtml 2010-05-25 08:45:36 UTC (rev 17226) @@ -4,9 +4,16 @@ xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" - xmlns:tbl="http://richfaces.org/rich"> + xmlns:tbl="http://richfaces.org/rich" + xmlns:ds="http://richfaces.org/datascroller"> <ui:composition> +<p>This sample shows simple master-detail table implemented using<b> rich:dataTable</b> and<b> rich:subtable</b> components</p> +<p>There is one feature which is completely new for 4.x - subtables now could be collapsed/expanded by using +new component <b>rich:tableToggleControl</b></p> +<p>subTable's could be collapsed/expanded in different modes defined via subTable expandMode attribute +- "<i>client</i>", "<i>ajax</i>" and "<i>server</i>"</p> +<p>Also the developer could get control on states of subTables using its <b>expanded</b> attribute.</p> <h:form> <tbl:dataTable value="#{carsBean.inventoryVendorLists}" var="list"> <f:facet name="header"> @@ -36,8 +43,16 @@ </f:facet> <tbl:column colspan="6"> <h:outputText value="#{list.vendor}" /> + <tbl:toggleControl for="sbtbl"> + <f:facet name="expand"> + <a href="#">(show details)</a> + </f:facet> + <f:facet name="collapse"> + <a href="#">(hide details)</a> + </f:facet> + </tbl:toggleControl> </tbl:column> - <tbl:subTable value="#{list.vendorItems}" var="item"> + <tbl:subTable value="#{list.vendorItems}" var="item" id="sbtbl" expandMode="client"> <tbl:column> <h:outputText value="#{item.model}" /> </tbl:column> @@ -56,6 +71,9 @@ <tbl:column> <h:outputText value="#{item.daysLive}" /> </tbl:column> + <f:facet name="footer"> + <h:outputText value="Total of #{list.vendor} Cars: #{list.count}" /> + </f:facet> </tbl:subTable> </tbl:dataTable> </h:form> Added: root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/tableStyling.xhtml =================================================================== --- root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/tableStyling.xhtml (rev 0) +++ root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/dataTable/tableStyling.xhtml 2010-05-25 08:45:36 UTC (rev 17226) @@ -0,0 +1,84 @@ +<!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:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:a4j="http://richfaces.org/a4j" + xmlns:tbl="http://richfaces.org/rich" + xmlns:fn="http://java.sun.com/jsp/jstl/functions"> + +<ui:composition> +<style> +.stable tr:nth-child(even){ + background-color: #FCFFFE; +} +.stable tr:nth-child(odd){ + background-color: #ECF3FE; +} +.active-row{ + background-color: #FFEBDA !important; + cursor:pointer; +} +</style> + <p>This sample shows simple table styling. The table appears in zebra-style and has + highlighting of hovered row.</p> + <h:form id="form"> + <tbl:dataTable value="#{carsBean.allInventoryItems}" var="car" + id="table" rows="20" rowClasses = "odd-row, even-row" styleClass="stable"> + <tbl:column accept="#{carsFiteringBean.acceptVendor}"> + <f:facet name="header"> + <h:panelGroup> + <h:outputText value="Vendor " /> + <h:selectOneMenu value="#{carsFilteringBean.vendorFilter}"> + <f:selectItems value="#{carsBean.vendorOptions}" /> + <a4j:ajax render="form:table" execute="@this" event="change"/> + </h:selectOneMenu> + </h:panelGroup> + </f:facet> + <h:outputText value="#{car.vendor}" /> + </tbl:column> + <tbl:column> + <f:facet name="header"> + <h:outputText value="Model" /> + </f:facet> + <h:outputText value="#{car.model}" /> + </tbl:column> + <tbl:column> + <f:facet name="header"> + <h:outputText value="Price" /> + </f:facet> + <h:outputText value="#{car.price}" /> + </tbl:column> + <tbl:column filter="#{carsFilteringBean.mileageFilterImpl}"> + <f:facet name="header"> + <h:panelGroup> + <h:outputText value="Mileage &lt; " /> + <h:inputText value="#{carsFilteringBean.mileageFilter}"> + <f:convertNumber groupingUsed="true"/> + <f:validateLongRange maximum="500000"/> + <a4j:ajax event="blur" render="form:table" execute="@this" /> + </h:inputText> + </h:panelGroup> + </f:facet> + <h:outputText value="#{car.mileage}" /> + </tbl:column> + <tbl:column + filterExpression="#{fn:containsIgnoreCase(car.vin,carFilteringBean.vinFilter)}"> + <f:facet name="header"> + <h:panelGroup> + <h:outputText value="VIN " /> + <h:inputText value="#{carFilteringBean.vinFilter}"> + <a4j:ajax event="blur" render="form:table" execute="@this" /> + </h:inputText> + </h:panelGroup> + </f:facet> + <h:outputText value="#{car.vin}" /> + </tbl:column> + </tbl:dataTable> + </h:form> + <script> + $('.stable tr').mouseover(function(){$(this).addClass('active-row')}); + $('.stable tr').mouseout(function(){$(this).removeClass('active-row')}); +</script> +</ui:composition> +</html> \ No newline at end of file Modified: root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/extendedDataTable/simpleTable.xhtml =================================================================== --- root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/extendedDataTable/simpleTable.xhtml 2010-05-25 08:02:50 UTC (rev 17225) +++ root/examples/richfaces-showcase/trunk/src/main/webapp/richfaces/extendedDataTable/simpleTable.xhtml 2010-05-25 08:45:36 UTC (rev 17226) @@ -9,7 +9,7 @@ <ui:composition> <h:form> <tbl:extendedDataTable value="#{carsBean.allInventoryItems}" var="car" - id="table" frozenColumns="2" style="height:300px; width:500px;"> + id="table" frozenColumns="2" style="height:300px; width:500px;" rowClasses="qwe, qe"> <f:facet name="header"> <h:outputText value="Cars marketplace" /> </f:facet>