You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by 周恩 <ej...@hotmail.com> on 2011/04/20 10:15:08 UTC
Can anybody show me some sample about t:dataScroller with f:ajax?
Can anybody show me some sample about t:dataScroller with f:ajax?
I want to provide t:dataTable and t:dataScroller with f:ajax!
Thanks a lot for any reply!
Below is some code with no f:ajax for t:dataScroller, just same as the file listCustomers.xhtml.
-------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:t="http://myfaces.apache.org/tomahawk">
<h:head>
<f:loadBundle basename="com.zhouen.sample.view.bundle.messages" var="msgs"/>
<h:outputStylesheet name="style.css" library="css"/>
<h:outputStylesheet name="skin.css" library="css"/>
<h:outputScript name="script.js" library="js"/>
<title>
<h:outputText value="#{msgs.application} - #{msgs.title_customer_list}"/>
</title>
</h:head>
<h:body>
<ui:include src="/inc/header.xhtml"/>
<center>
<h:panelGrid columns="1">
<h:outputText value="#{msgs.title_customer_list}" styleClass="title" />
<h:commandButton id="preCreateAction" value="#{msgs.title_customer_create}" styleClass="button" action="#{customerController.preCreateAction}"/>
</h:panelGrid>
<h:form styleClass="normalForm">
<h:panelGroup id="customers">
<t:dataTable id = "customersData"
styleClass = "dataTable"
headerClass = "dataTable_header"
footerClass = "dataTable_footer"
rowClasses = "dataTable_rows_odd, dataTable_rows_even"
var = "customer"
value = "#{customerController.customerBeans}"
binding = "#{customerController.row}"
preserveDataModel = "true"
rows = "15"
rowId = "#{customer.customerId}"
sortColumn = "#{customerController.sort}"
sortAscending = "#{customerController.ascending}"
preserveSort = "true">
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="customerId" columnName="customerId" arrow="true">
<h:outputText value="#{msgs.customer_customerId}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:commandLink id="customerId_" action="#{customerController.viewAction}">
<h:outputText value="#{customer.customerId}"/>
</h:commandLink>
</t:column>
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="customerTypeId" columnName="customerTypeId" arrow="true">
<h:outputText value="#{msgs.customer_customerTypeId}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="customerTypeId_" value="#{customer.customertype.name}"/>
</t:column>
<t:column width="25%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="name" columnName="name" arrow="true">
<h:outputText value="#{msgs.customer_name}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="name_" value="#{customer.name}"/>
</t:column>
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="phone" columnName="phone" arrow="true">
<h:outputText value="#{msgs.customer_phone}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="phone_" value="#{customer.phone}"/>
</t:column>
<t:column width="15%">
<f:facet name="header">
<f:ajax excute="@this" render="@form">
<t:commandSortHeader id="remark" columnName="remark" arrow="true">
<h:outputText value="#{msgs.customer_remark}"/>
</t:commandSortHeader>
</f:ajax>
</f:facet>
<h:outputText id="remark_" value="#{customer.remark}"/>
</t:column>
<t:column width="15%">
<f:facet name="header">
<h:outputText id="label_operation" value="#{msgs.label_operation}"/>
</f:facet>
<h:panelGroup>
<h:commandButton value="#{msgs.label_view}" styleClass="button" action="#{customerController.viewAction}"/>
<h:outputText value=" "/>
<h:commandButton value="#{msgs.label_edit}" styleClass="button" action="#{customerController.preEditAction}"/>
<h:outputText value=" "/>
<h:commandButton value="#{msgs.label_delete}" styleClass="button" action="#{customerController.deleteAction}" onclick="return confirm('#{msgs.info_delete}');">
<f:ajax excute="@this" render="@form" />
</h:commandButton>
</h:panelGroup>
</t:column>
</t:dataTable>
<h:panelGrid columns="1" styleClass="dataTable_scroller" columnClasses="dataTable_scroller_column">
<t:dataScroller id = "customerScroll"
for = "customersData"
fastStep = "10"
pageCountVar = "pageCount"
pageIndexVar = "pageIndex"
styleClass = "scroller"
paginator = "true"
paginatorMaxPages = "9"
paginatorTableClass = "paginator"
paginatorActiveColumnStyle = "font-weight: bold;"
actionListener = "#{customerController.scrollerAction}"
>
<f:facet name="first">
<t:graphicImage library="images" name="arrow-first.gif" alt="#{msgs.dataScroller_first}" border="1"/>
</f:facet>
<f:facet name="last">
<t:graphicImage library="images" name="arrow-last.gif" alt="#{msgs.dataScroller_last}" border="1"/>
</f:facet>
<f:facet name="previous">
<t:graphicImage library="images" name="arrow-previous.gif" alt="#{msgs.dataScroller_previous}" border="1"/>
</f:facet>
<f:facet name="next">
<t:graphicImage library="images" name="arrow-next.gif" alt="#{msgs.dataScroller_next}" border="1"/>
</f:facet>
<f:facet name="fastforward">
<t:graphicImage library="images" name="arrow-ff.gif" alt="#{msgs.dataScroller_fastforward}" border="1"/>
</f:facet>
<f:facet name="fastrewind">
<t:graphicImage library="images" name="arrow-fr.gif" alt="#{msgs.dataScroller_fastrewind}" border="1"/>
</f:facet>
</t:dataScroller>
<t:dataScroller id = "customerScroll_pages"
for = "customersData"
rowsCountVar = "rowsCount"
displayedRowsCountVar = "displayedRowsCountVar"
firstRowIndexVar = "firstRowIndex"
lastRowIndexVar = "lastRowIndex"
pageCountVar = "pageCount"
pageIndexVar = "pageIndex"
>
<h:outputFormat value="#{msgs.dataScroller_pages}" styleClass="output">
<f:param value="#{rowsCount}"/>
<f:param value="#{displayedRowsCountVar}"/>
<f:param value="#{firstRowIndex}"/>
<f:param value="#{lastRowIndex}"/>
<f:param value="#{pageIndex}"/>
<f:param value="#{pageCount}"/>
</h:outputFormat>
</t:dataScroller>
</h:panelGrid>
</h:panelGroup>
</h:form>
</center>
<ui:include src="/inc/footer.xhtml"/>
</h:body>
</html>
Re: Can anybody show me some sample about t:dataScroller with f:ajax?
Posted by Leonardo Uribe <lu...@gmail.com>.
Hi
Try this:
http://svn.apache.org/repos/asf/myfaces/tomahawk/trunk/examples/simple20/src/main/webapp/dataScrollerAjax.xhtml
Maybe this one could be interesting too:
http://svn.apache.org/repos/asf/myfaces/tomahawk/trunk/examples/simple20/src/main/webapp/masterDetailAjax.xhtml
regards,
Leonardo Uribe
2011/4/20 周恩 <ej...@hotmail.com>
> Can anybody show me some sample about t:dataScroller with f:ajax?
>
> I want to provide t:dataTable and t:dataScroller with f:ajax!
>
> Thanks a lot for any reply!
>
>
> Below is some code with no f:ajax for t:dataScroller, just same as the
> file listCustomers.xhtml.
>
>
> -------------------------------------------------------------------------------------------------------
> <?xml version="1.0" encoding="UTF-8"?>
> <!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:f="http://java.sun.com/jsf/core"
> xmlns:h="http://java.sun.com/jsf/html"
> xmlns:ui="http://java.sun.com/jsf/facelets"
> xmlns:t="http://myfaces.apache.org/tomahawk">
> <h:head>
>
> <f:loadBundle basename="com.zhouen.sample.view.bundle.messages"
> var="msgs"/>
> <h:outputStylesheet name="style.css" library="css"/>
> <h:outputStylesheet name="skin.css" library="css"/>
> <h:outputScript name="script.js" library="js"/>
>
> <title>
> <h:outputText value="#{msgs.application} -
> #{msgs.title_customer_list}"/>
> </title>
> </h:head>
> <h:body>
> <ui:include src="/inc/header.xhtml"/>
> <center>
>
> <h:panelGrid columns="1">
> <h:outputText value="#{msgs.title_customer_list}" styleClass="title" />
> <h:commandButton id="preCreateAction"
> value="#{msgs.title_customer_create}" styleClass="button"
> action="#{customerController.preCreateAction}"/>
> </h:panelGrid>
>
> <h:form styleClass="normalForm">
>
> <h:panelGroup id="customers">
> <t:dataTable id = "customersData"
> &nbs p; styleClass = "dataTable"
> headerClass = "dataTable_header"
> footerClass = "dataTable_footer"
> rowClasses = "dataTable_rows_odd,
> dataTable_rows_even"
> var   ; = "customer"
> value =
> "#{customerController.customerBeans}"
> binding = "#{customerController.row}"
>
> preserveDataModel = "true"
> &nb sp; rows = "15"
> rowId =
> "#{customer.customerId}"
> sortColumn =
> "#{customerController.sort}"
> sortAscending = "#{cus
> tomerController.ascending}"
> preserveSort = "true">
>
> <t:column width="15%">
> <f:facet name="header">
> <f:ajax excute="@this" render="@form">
> <t:commandSortHeader id="customerId"
> columnName="customerId" arrow="true">
> <h:outputText value="#{msgs.customer_customerId}"/>
>
> </t:commandSortHeader>
> </f:ajax>
> </f:facet>
> <h:commandLink id="customerId_"
> action="#{customerController.viewAction}">
> <h:outputText value="#{customer.customerId}"/>
> </h:commandLink>
> </t:column>
>
> <t:column width= "15%">
> <f:facet name="header">
> <f:ajax excute="@this" render="@form">
> <t:commandSortHeader id="customerTypeId"
> columnName="customerTypeId" arrow="true">
> <h:outputText value="#{msgs.customer_customerTypeId}"/>
> </t:commandSortHeader>
> </f:ajax>
> </f:facet>
> & lt;h:outputText id="customerTypeId_" value="#{
> customer.customertype.name}"/>
> </t:column>
>
> <t:column width="25%">
> <f:facet name="header">
> <f:ajax excute="@this" render="@form">
> <t:commandSortHeader id="name" columnName="name"
> arrow="true">
> <h:outputText value="#{msgs.customer_name}"/>
> </t:commandSortHeade r>
> </f:ajax>
> </f:facet>
> <h:outputText id="name_" value="#{customer.name}"/>
> </t:column>
>
> <t:column width="15%">
> <f:facet name="header">
> <f:ajax excute="@this" render="@form">
> <t:commandSortHeader id="phone" columnName="phone"
> arrow="true">
> &n bsp; <h:outputText value="#{msgs.customer_phone}"/>
> </t:commandSortHeader>
> </f:ajax>
> </f:facet>
> <h:outputText id="phone_" value="#{customer.phone}"/>
> </t:column>
>
> <t:column width="15%">
> <f:facet name="header">
> <f:ajax excute="@this" render="@form">
> <t:commandSortHeader id="remark" columnName="remark"
> arrow="true">
> <h:outputText value="#{msgs.customer_remark}"/>
> </t:commandSortHeader>
> </f:ajax>
> </f:facet>
> <h:outputText id="remark_" value="#{customer.remark}"/>
> </t:column>
>
> & nbsp; <t:column width="15%">
> <f:facet name="header">
> <h:outputText id="label_operation"
> value="#{msgs.label_operation}"/>
> </f:facet>
> <h:panelGroup>
> <h:commandButton value="#{msgs.label_view}"
> styleClass="button" action="#{customerController.viewAction}"/>
> <h:outputText value=" "/>
> &n bsp; <h:commandButton value="#{msgs.label_edit}"
> styleClass="button" action="#{customerController.preEditAction}"/>
> <h:outputText value=" "/>
> <h:commandButton value="#{msgs.label_delete}"
> styleClass="button" action="#{customerController.deleteAction}"
> onclick="return confirm('#{msgs.info_delete}');">
> <f:ajax excute="@this" render="@form" />
> </h:commandButton>
> </h:panelGroup>
> </t:column >
> </t:dataTable>
>
> <h:panelGrid columns="1" styleClass="dataTable_scroller"
> columnClasses="dataTable_scroller_column">
> <t:dataScroller id = "customerScroll"
> for = "customersData"
> fastStep &nbs p; = "10"
> pageCountVar = "pageCount"
> pageIndexVar = "pageIndex"
> styleClass = "scroller"
> paginator = "true"
> paginatorMaxPage s = "9"
> paginatorTableClass = "paginator"
> paginatorActiveColumnStyle = "font-weight: bold;"
> actionListener =
> "#{customerController.scrollerAction}"
> >
> <f:facet name="first">
> <t:graphicImage library="images" na me="arrow-first.gif"
> alt="#{msgs.dataScroller_first}" border="1"/>
> </f:facet>
> <f:facet name="last">
> <t:graphicImage library="images" name="arrow-last.gif"
> alt="#{msgs.dataScroller_last}" border="1"/>
> </f:facet>
> <f:facet name="previous">
> <t:graphicImage library="images"
> name="arrow-previous.gif" alt="#{msgs.dataScroller_previous}" border="1"/>
> &n bsp; </f:facet>
> <f:facet name="next">
> <t:graphicImage library="images" name="arrow-next.gif"
> alt="#{msgs.dataScroller_next}" border="1"/>
> </f:facet>
> <f:facet name="fastforward">
> <t:graphicImage library="images" name="arrow-ff.gif"
> alt="#{msgs.dataScroller_fastforward}" border="1"/>
> </f:fac et>
> <f:facet name="fastrewind">
> <t:graphicImage library="images" name="arrow-fr.gif"
> alt="#{msgs.dataScroller_fastrewind}" border="1"/>
> </f:facet>
> </t:dataScroller>
>
> <t:dataScroller id = "customerScroll_pages"
> for = "customersData"
> & nbsp; rowsCountVar = "rowsCount"
> displayedRowsCountVar = "displayedRowsCountVar"
> firstRowIndexVar = "firstRowIndex"
> lastRowIndexVar = "lastRowIndex"
> pageCountVar = "pageCount"
> pageIndexVar = "pageIndex"
> & nbsp; >
> <h:outputFormat value="#{msgs.dataScroller_pages}"
> styleClass="output">
> <f:param value="#{rowsCount}"/>
> <f:param value="#{displayedRowsCountVar}"/>
> <f:param value="#{firstRowIndex}"/>
> <f:param value="#{lastRowIndex}"/>
> <f:param value="#{pageIndex}"/>
> &nbs p; <f:param value="#{pageCount}"/>
> </h:outputFormat>
> </t:dataScroller>
> </h:panelGrid>
>
> </h:panelGroup>
>
> </h:form>
> </center>
>
> <ui:include src="/inc/footer.xhtml"/>
> </h:body>
> </html>
>