[richfaces-svn-commits] JBoss Rich Faces SVN: r2233 - in trunk/samples/richfaces-demo/src/main: webapp/richfaces and 22 other directories.

Author: SergeySmirnov Date: 2007-08-13 19:45:36 -0400 (Mon, 13 Aug 2007) New Revision: 2233 Removed: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxListener/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataFilterSlider/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTableScroller/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dragSupport/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/gmap/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSlider/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSpinner/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/style/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/suggestionBox/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/tabPanel/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/togglePanel/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolBar/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/tree/source/ Modified: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/commandLink/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataFilterSlider/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/extended-data-model.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTableScroller/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/dragSupport/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSlider/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSpinner/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/panel/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/suggestionBox/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/support/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolBar/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/tree/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml Log: demo update. ref to sources Modified: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java =================================================================== --- trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java 2007-08-13 23:45:36 UTC (rev 2233) @@ -19,7 +19,7 @@ } public List getVehicles() { if (vehicles==null) { - vehicles = Vehicle.allVehicles(100); + vehicles = Vehicle.allVehicles(15); return vehicles; } else { return vehicles; Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -19,7 +19,7 @@ http://jboss.com/index.html?module=bb&amp;op=viewforum&amp;f=261&... </p> </div> - <rich:effect event="load" for="window" type="Appear" params="id:'coming',duration:1.0,from:0.1,to:1.0" /> + <rich:effect event="load" for="window" type="Appear" params="targetId:'coming',duration:1.0,from:0.4,to:1.0" /> </ui:define> </ui:composition> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/commandLink/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/commandLink/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/commandLink/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -35,9 +35,6 @@ </p> </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for the given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/commandLink/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataFilterSlider/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataFilterSlider/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataFilterSlider/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -8,11 +8,6 @@ <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <style> - .rich-table-firstrow .rich-table-cell{ - border-top-width:0px; - } - </style> <p>The Slider component can be used to filter any UIData object or can be used independently to send its values to the backing bean. It @@ -20,96 +15,12 @@ previous and new values as a "sliderEvent" to the backing bean.</p> <div class="sample-container"> - <a4j:form id="form1" - reRender="list-body" ajaxSubmit="true" ignoreDupResponses="true" - requestDelay="500"> + <ui:include src="/richfaces/dataFilterSlider/examples/filterData.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/dataFilterSlider/examples/filterData.xhtml"/> + </ui:include> - <a4j:region id="stat1"> - - <a4j:outputPanel id="slider-body"> - - <rich:dataFilterSlider sliderListener="#{dfsBean.doSlide}" - binding="#{inventoryList.dataFilterSlider}" for="carList" - forValRef="inventoryList.carInventory" filterBy="getMileage" - manualInput="true" onSlide="true" onChange="true" - storeResults="true" trackStyleClass="track" width="200px" - styleClass="slider-container" startRange="10000" endRange="60000" - increment="10000" rangeStyleClass="range" trailer="true" - trailerStyleClass="trailer" handleStyleClass="handle" - handleValue="1" id="slider_1"></rich:dataFilterSlider> - - </a4j:outputPanel> - - <rich:spacer height="15" /> - - <a4j:outputPanel id="list-body"> - <h:dataTable id="carIndex" rows="10" - binding="#{inventoryList.carMakeIndexUIData}" - value="#{inventoryList.carMakeIndex}" var="category" - styleClass="list-table1" columnClasses="column-index" - rowClasses="list-row3"> - - <h:column> - <a4j:commandLink actionListener="#{inventoryList.filterCarList}" - reRender="carList"> - <h:outputText value="#{category}" /> - <f:attribute name="filterRule" value="showTable" /> - - </a4j:commandLink> - </h:column> - - </h:dataTable> - <rich:spacer height="15" /> - - <rich:dataTable width="300" id="carList" rows="10" - value="#{inventoryList.carInventory}" var="category"> - <f:facet name="header"> - <rich:columnGroup> - <h:column> - <h:outputText styleClass="headerText" value="Make" /> - </h:column> - <h:column> - <h:outputText styleClass="headerText" value="Model" /> - </h:column> - <h:column> - <h:outputText styleClass="headerText" value="Price" /> - </h:column> - <h:column> - <h:outputText styleClass="headerText" value="Mileage" /> - </h:column> - </rich:columnGroup> - </f:facet> - - <h:column> - <h:outputText value="#{category.make}" /> - </h:column> - <h:column> - <h:outputText value="#{category.model}" /> - </h:column> - <h:column> - <h:outputText value="#{category.price}" /> - </h:column> - <h:column> - <h:outputText value="#{category.mileage}" /> - </h:column> - - </rich:dataTable> - - </a4j:outputPanel> - - <rich:spacer height="15" /> - - - </a4j:region> - - </a4j:form> </div> </ui:define> - <ui:define name="sources"> - Here is fragment of page sources for given example: - <iframe - src="${facesContext.externalContext.requestContextPath}/richfaces/dataFilterSlider/source/usage.html" - class="source_frame" /> - </ui:define> </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/extended-data-model.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/extended-data-model.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/extended-data-model.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -10,63 +10,20 @@ <p>Some explanation how to use ExtendedDataModel will be here </p> <div class="sample-container" > - <rich:messages /> - <h:form> - <rich:datascroller for="auction" maxPages="5"/> - <rich:spacer height="30" /> - <rich:dataTable id="auction" value="#{auctionDataModel}" var="item" rows="25"> - <rich:column> - <f:facet name="header"> - <h:outputText value="Description"/> - </f:facet> - <h:outputText value="#{item.description}"/> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Highest Bid"/> - </f:facet> - <h:outputText id="highestBid" value="#{item.highestBid}"> - <f:convertNumber pattern="$#,##0.00"/> - </h:outputText> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Qty Avialable"/> - </f:facet> - <h:outputText value="#{item.qtyAvialable}"/> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Your Bid"/> - </f:facet> - <h:inputText id="bid" value="#{item.bid}"> - <f:convertNumber /> - </h:inputText> - <a4j:commandLink action="#{item.placeBid}" value="Bid!" reRender="bid,qty,amount,highestBid" /> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Your Qty"/> - </f:facet> - <h:inputText id="qty" value="#{item.qtyRequested}"> - <f:convertNumber /> - </h:inputText> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Amount"/> - </f:facet> - <h:outputText id="amount" value="#{item.amount}" > - <f:convertNumber pattern="$#,##0.00"/> - </h:outputText> - </rich:column> - </rich:dataTable> - </h:form> + + <ui:include src="/richfaces/dataTable/examples/extendedDataModel.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/dataTable/examples/extendedDataModel.xhtml"/> + <ui:param name="openlabel" value="View Page Source" /> + </ui:include> +<!-- + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces-demo/WEB-INF/src/org/richfaces/datatable/ExpenseReport.java"/> + <ui:param name="openlabel" value="View Page Source" /> + </ui:include> + --> </div> </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for the given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/dataTable/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTable/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -19,93 +19,14 @@ <div class="sample-container" > - <rich:dataTable - onRowMouseOver="this.style.backgroundColor='#F1F1F1'" - onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" - cellpadding="0" cellspacing="0" - width="700" border="0" var="record" value="#{report.expReport.records}"> - - <f:facet name="header"> - <rich:columnGroup> - <rich:column rowspan="2"> - <rich:spacer /> - </rich:column> - <rich:column colspan="3"> - <h:outputText value="Expenses" /> - </rich:column> - <rich:column rowspan="2"> - <h:outputText value="subtotals" /> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="Meals" /> - </rich:column> - <rich:column> - <h:outputText value="Hotels" /> - </rich:column> - <rich:column> - <h:outputText value="Transport" /> - </rich:column> - </rich:columnGroup> - </f:facet> - - <rich:column colspan="5"> - <h:outputText value="#{record.city}" /></rich:column> - - - <rich:subTable - onRowMouseOver="this.style.backgroundColor='#F8F8F8'" - onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" - var="expense" value="#{record.items}"> - <rich:column> - <h:outputText value="#{expense.day}"></h:outputText> - <f:facet name="footer"> - <rich:spacer /> - </f:facet> - </rich:column> - <rich:column> - <h:outputText value="#{expense.meals}"><f:convertNumber pattern="$####.00" /></h:outputText> - <f:facet name="footer"> - <h:outputText value="#{record.totalMeals}"><f:convertNumber pattern="$####.00" /></h:outputText> - </f:facet> - </rich:column> - <rich:column> - <h:outputText value="#{expense.hotels}"><f:convertNumber pattern="$####.00" /></h:outputText> - <f:facet name="footer"> - <h:outputText value="#{record.totalHotels}"><f:convertNumber pattern="$####.00" /></h:outputText> - </f:facet> - </rich:column> - <rich:column> - <h:outputText value="#{expense.transport}"><f:convertNumber pattern="$####.00" /></h:outputText> - <f:facet name="footer"> - <h:outputText value="#{record.totalTransport}"><f:convertNumber pattern="$####.00" /></h:outputText> - </f:facet> - </rich:column> - <rich:column> - <rich:spacer></rich:spacer> - <f:facet name="footer"> - <h:outputText value="#{record.total}"><f:convertNumber pattern="$####.00" /></h:outputText> - </f:facet> - </rich:column> - - </rich:subTable> - - <f:facet name="footer"> - - <rich:columnGroup> - <rich:column>Totals</rich:column> - <rich:column><h:outputText value="#{report.expReport.totalMeals}"><f:convertNumber pattern="$####.00" /></h:outputText></rich:column> - <rich:column><h:outputText value="#{report.expReport.totalHotels}"><f:convertNumber pattern="$####.00" /></h:outputText></rich:column> - <rich:column><h:outputText value="#{report.expReport.totalTransport}"><f:convertNumber pattern="$####.00" /></h:outputText></rich:column> - <rich:column><h:outputText value="#{report.expReport.grandTotal}"><f:convertNumber pattern="$####.00" /></h:outputText></rich:column> - </rich:columnGroup> - </f:facet> - - </rich:dataTable> + + <ui:include src="/richfaces/dataTable/examples/report.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/dataTable/examples/report.xhtml"/> + </ui:include> + </div> </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for the given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/dataTable/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTableScroller/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTableScroller/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dataTableScroller/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -7,62 +7,18 @@ xmlns:rich="http://richfaces.ajax4jsf.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <style> - .col { - width:100px; - } - </style> + <p>The component is designed to provide the functionality of table pagination using AJAX requests.</p> <div class="sample-container"> - <h:form> - <rich:datascroller align="left" for="carList" maxPages="20" /> - <rich:spacer height="30" /> - <rich:dataTable width="483" id="carList" rows="10" columnClasses="col" - value="#{dataTableScrollerBean.allCars}" var="category"> - <f:facet name="header"> - <rich:columnGroup> - <h:column> - <h:outputText styleClass="headerText" value="Make" /> - </h:column> - <h:column> - <h:outputText styleClass="headerText" value="Model" /> - </h:column> - <h:column> - <h:outputText styleClass="headerText" value="Price" /> - </h:column> - <h:column> - <h:outputText styleClass="headerText" value="Mileage" /> - </h:column> - </rich:columnGroup> - </f:facet> - - <h:column> - <h:outputText value="#{category.make}" /> - </h:column> - <h:column> - <h:outputText value="#{category.model}" /> - </h:column> - <h:column> - <h:outputText value="#{category.price}" /> - </h:column> - <h:column> - <h:outputText value="#{category.mileage}" /> - </h:column> - - - - </rich:dataTable> - </h:form> + <ui:include src="/richfaces/dataTableScroller/examples/simpleScroller.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/dataTableScroller/examples/simpleScroller.xhtml"/> + <ui:param name="openlabel" value="View Page Source" /> + </ui:include> </div> </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for the given example: - <iframe - src="${facesContext.externalContext.requestContextPath}/richfaces/dataTableScroller/source/usage.html" - class="source_frame" /> - </ui:define> </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/dragSupport/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/dragSupport/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dragSupport/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -7,17 +7,7 @@ xmlns:rich="http://richfaces.ajax4jsf.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <style> - .panelc { - width:25%; - vertical-align:top; - height:300px; - } - - .dropTargetPanel { - width: 90%; - } - </style> + <p>The Richfaces Drag-n-Drop component suite includes three components: dragSupport, dropSupport and dragIndicator.</p> @@ -46,108 +36,22 @@ future.</i> </p> - <div class="sample-container"> <p>The following example demonstrates the drag-n-drop functionality on practice. The left list contains the examples of Ajax frameworks. Do you know them? The demo helps you to sort them. Drag one and drag over the headers of three panels. If the draggable framework is suitable for a certain framework family, it will be accepted. Otherwise, the drag indicator shows the "reject" icon.</p> + + <div class="sample-container"> + <ui:include src="/richfaces/dragSupport/examples/dnd.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/dragSupport/examples/dnd.xhtml"/> + <ui:param name="openlabel" value="View Page Source" /> + </ui:include> - <rich:dragIndicator id="indicator"></rich:dragIndicator> + </div> - <h:form id="form"> - <h:panelGrid columnClasses="panelc" columns="4" width="100%"> - - <rich:panel style="width:100px"> - <f:facet name="header"> - <h:outputText value="Source List" /> - </f:facet> - <h:dataTable id="src" columns="1" value="#{dndBean.frameworks}" - var="fm" > - - <h:column> - <a4j:outputPanel style="border:1px solid gray;padding:2px;" - layout="block"> - <rich:dragSupport dragIndicator=":indicator" - dragType="#{fm.family}" dragValue="#{fm}"> - <rich:dndParam name="label" value="#{fm.name}" /> - </rich:dragSupport> - <h:outputText value="#{fm.name}"></h:outputText> - </a4j:outputPanel> - </h:column> - - </h:dataTable> - </rich:panel> - - <rich:panel styleClass="dropTargetPanel"> - <f:facet name="header"> - <h:outputText value="PHP Frameworks" /> - </f:facet> - <rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP" - dropListener="#{eventBean.processDrop}" reRender="phptable, src"> - </rich:dropSupport> - - <h:dataTable id="phptable" columns="1" value="#{dndBean.containerPHP}" var="fm"> - <h:column> - <h:outputText value="#{fm.name}"></h:outputText> - </h:column> - </h:dataTable> - - - </rich:panel> - - <rich:panel styleClass="dropTargetPanel"> - <f:facet name="header"> - <h:outputText value=".NET Frameworks" /> - </f:facet> - <rich:dropSupport id="dnet" acceptedTypes="DNET" dropValue="DNET" - dropListener="#{eventBean.processDrop}" reRender="dnettable, src"> - </rich:dropSupport> - - <h:dataTable id="dnettable" columns="1" value="#{dndBean.containerDNET}" var="fm"> - <h:column> - <h:outputText value="#{fm.name}"></h:outputText> - </h:column> - </h:dataTable> - - - </rich:panel> - - <rich:panel styleClass="dropTargetPanel"> - <f:facet name="header"> - <h:outputText value="ColdFusion Frameworks" /> - </f:facet> - <rich:dropSupport id="cf" acceptedTypes="CF" dropValue="CF" - dropListener="#{eventBean.processDrop}" reRender="cftable, src"> - </rich:dropSupport> - - <h:dataTable id="cftable" columns="1" value="#{dndBean.containerCF}" var="fm"> - <h:column> - <h:outputText value="#{fm.name}"></h:outputText> - </h:column> - </h:dataTable> - - - </rich:panel> - - - - - </h:panelGrid> - <a4j:commandButton action="#{dndBean.reset}" value="Start Over" - reRender="src,phptable,cftable,dnettable" /> - </h:form> - <a4j:outputPanel ajaxRendered="true"> - <h:messages></h:messages> - </a4j:outputPanel></div> - - </ui:define> - <ui:define name="sources"> - Here is fragment of page sources for given example: - <iframe - src="${facesContext.externalContext.requestContextPath}/richfaces/dragSupport/source/usage.html" - class="source_frame" /> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -8,75 +8,19 @@ <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <style> - .optionList { - height:22px; - } - .vertical-menu-cell { - padding:0px 4px 0px 4px; - } + - </style> - <p>RichFaces Drop Down menu is a component that allows orginize the hierarchical menu similar to one that almost every desktop application have. </p> - <a4j:log hotkey="M" /> - - + <div class="sample-container"> - <h:form> - <rich:toolBar> - <rich:dropDownMenu value="File"> - - <rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}"> - </rich:menuItem> - <rich:menuItem submitMode="ajax" value="Open" action="#{ddmenu.doOpen}"/> - <rich:menuGroup value="Save As..."> - <rich:menuItem submitMode="ajax" value="Text File" action="#{ddmenu.doSaveText}"/> - <rich:menuItem submitMode="ajax" value="PDF File" action="#{ddmenu.doPDF}"/> - </rich:menuGroup> - <rich:menuItem submitMode="ajax" value="Close" action="#{ddmenu.doClose}"/> - <rich:menuSeparator id="menuSeparator11"/> - <rich:menuItem submitMode="ajax" value="Exit" action="#{ddmenu.doExit}"/> - - </rich:dropDownMenu> - - <rich:dropDownMenu> + <ui:include src="/richfaces/dropDownMenu/examples/topmenu.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/dropDownMenu/examples/topmenu.xhtml"/> + </ui:include> - <f:facet name="label"> - <h:panelGrid cellpadding="0" cellspacing="0" columns="2" style="vertical-align:middle"> - <h:graphicImage value="/richfaces/toolBar/images/yellow_lamp.gif"/> - <h:outputText value="Links" /> - </h:panelGrid> - </f:facet> - - <rich:menuItem submitMode="none" onclick="document.location.href='http://labs.jboss.com/jbossrich... - <f:facet name="icon"> - <h:graphicImage value="/richfaces/toolBar/images/webapp_welcome.gif" /> - </f:facet> - <h:outputLink value="http://labs.jboss.com/jbossrichfaces/"> - <h:outputText value="RichFaces Home Page"></h:outputText> - </h:outputLink> - </rich:menuItem> - - <rich:menuItem submitMode="none" onclick="document.location.href='http://jboss.com/index.html?mod... - <f:facet name="icon"> - <h:graphicImage value="/richfaces/toolBar/images/timer_task.gif" /> - </f:facet> - <h:outputLink value="http://jboss.com/index.html?module=bb&amp;op=viewforum&am... - <h:outputText value="RichFaces Forum"></h:outputText> - </h:outputLink> - </rich:menuItem> - - </rich:dropDownMenu> - </rich:toolBar> - </h:form> - <a4j:outputPanel ajaxRendered="true"> - <h:outputText value="Current Selection: "></h:outputText> - <h:outputText style="font-weight:bold" value="#{ddmenu.current}"></h:outputText> - </a4j:outputPanel> </div> <p>The drop down menu has label that always appears on the page and invisible panel that appears by particular client side event (onmouseover, onclick etc). The event is @@ -92,43 +36,15 @@ </p> <div class="sample-container"> - <h:form> - <h:panelGrid class="vertical-menu-cell" columnClasses="optionList" columns="1" cellspacing="0" cellpadding="0"> - <rich:dropDownMenu style="border:1px solid #{a4jSkin.panelBorderColor}" value="Option1" direction="bottom-right" jointPoint="tr"> - <rich:menuItem value="Suboption1-1" /> - <rich:menuItem value="Suboption1-2"> - <f:facet name="icon"> - <h:graphicImage value="/richfaces/toolBar/images/print.gif" /> - </f:facet> - - </rich:menuItem> - <rich:menuItem value="Suboption1-3" /> - </rich:dropDownMenu> - <rich:dropDownMenu style="border:1px solid #{a4jSkin.panelBorderColor}" value="Option2" direction="bottom-right" jointPoint="tr"> - <rich:menuItem value="Suboption2-1" /> - <rich:menuItem value="Suboption2-2" /> - <rich:menuGroup value="Group2" direction="#{bean.groupDirection}"> - <rich:menuItem value="SuboptionG2-2-1" /> - <rich:menuItem value="SuboptionG2-2-2" /> - </rich:menuGroup> - - <rich:menuItem value="Suboption2-3" /> - </rich:dropDownMenu> - <rich:dropDownMenu style="border:1px solid #{a4jSkin.panelBorderColor}" value="Option3" direction="bottom-right" jointPoint="tr"> - <rich:menuItem value="Suboption3-1" /> - <rich:menuItem value="Suboption3-2" /> - <rich:menuItem value="Suboption3-3" /> - </rich:dropDownMenu> - - </h:panelGrid> - </h:form> + <ui:include src="/richfaces/dropDownMenu/examples/sidemenu.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/dropDownMenu/examples/sidemenu.xhtml"/> + </ui:include> + </div> </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for the given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/dropDownMenu/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -7,12 +7,7 @@ xmlns:rich="http://richfaces.ajax4jsf.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - - <style> - .optionList { - height:30px; - } - </style> + <p>The Richfaces Gmap component is a wrapper for standard Google Map widgets. You can use the whole set of @@ -26,56 +21,13 @@ component that allows to invoke the server side data and return it in a JSON format. </p> - - <h:panelGrid columns="2"> - <rich:gmap gmapVar="map" zoom="#{gmBean.zoom}" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}" /> - - <h:panelGroup> - <rich:tabPanel switchType="ajax" width="350" height="400"> - <rich:tab label="Using Google Map API"> - <h:panelGrid columns="2" columnClasses="optionList"> - <h:outputText value="Controls:" /> - <h:panelGroup> - <a href="javascript: void 0" onclick="map.hideControls()">Hide</a> - <a href="javascript: void 0" onclick="map.showControls()">Show</a><br/> - </h:panelGroup> - - <h:outputText value="Zoom:" /> - <rich:inputNumberSlider id="zoom" showInput="false" minValue="1" maxValue="18" - value="#{gmBean.zoom}" onchange="map.setZoom(this.value)"/> - - - <h:outputText value="Map Type:" /> - <h:panelGroup> - <a href="javascript: void 0" onclick="map.setMapType(G_NORMAL_MAP)">Normal</a> - <a href="javascript: void 0" onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a> - <a href="javascript: void 0" onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a><br/> - </h:panelGroup> - - </h:panelGrid> - </rich:tab> + <ui:include src="/richfaces/gmap/examples/mapUsage.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/gmap/examples/mapUsage.xhtml"/> + <ui:param name="openlable" value="View page Source"/> + </ui:include> - <rich:tab label="Using Ajax with JSON"> - <rich:dataGrid var="place" value="#{gmBean.point}" columns="2" > - <h:graphicImage onclick="showPlace('#{place.id}')" style="cursor:pointer" value="resource://#{place.pic}" /> - </rich:dataGrid> - - </rich:tab> - - - </rich:tabPanel> - </h:panelGroup> - </h:panelGrid> - <h:form> - <a4j:jsFunction name="showPlace" data="#{gmBean.currentPlace}" reRender=":zoom" - oncomplete="map.setCenter(new GLatLng(data.lat, data.lng),data.zoom)"> - <a4j:actionparam name="id" assignTo="#{gmBean.currentId}"></a4j:actionparam> - </a4j:jsFunction> - </h:form> </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for the given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/gmap/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSlider/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSlider/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSlider/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -10,22 +10,13 @@ <p> InputNumberSlider is highly customizable components used to define numeric input in a given range. User can use slider or just type in input field. </p> - <p> - Here is an example of default inputNumberSlider: - <rich:inputNumberSlider value="50"/> - </p> - <p> - Here is "minimalistic" input: - <rich:inputNumberSlider value="50" showInput="false" enableManualInput="false" showBoundaryValues="false" showToolTip="false"/> - </p> - <p> - Another variation of input: - <rich:inputNumberSlider value="500" width="500" maxValue="1000" step="50" showToolTip="false" /> - </p> + <div class="sample-container" > + <ui:include src="/richfaces/inputNumberSlider/examples/sliderUsage.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/inputNumberSlider/examples/sliderUsage.xhtml"/> + </ui:include> + </div> </ui:define> - <ui:define name="sources"> - Here is fragment of page sources for given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/inputNumberSlider/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSpinner/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSpinner/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/inputNumberSpinner/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -10,18 +10,12 @@ <p> InputNumberSpinner is a highly customizable component used to define numeric input in a given range. A user can use a spinner control or just type in an input field. </p> - <p> - Here is an example of default inputNumberSpinner: - <rich:inputNumberSpinner value="50"/> - </p> - <p> - Here is one more inputNumberSpinner: - <rich:inputNumberSpinner value="50" step="10"/> - </p> + <div class="sample-container" > + <ui:include src="/richfaces/inputNumberSpinner/examples/spinnerUsage.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/inputNumberSpinner/examples/spinnerUsage.xhtml"/> + </ui:include> + </div> </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for a given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/inputNumberSpinner/source/usage.html" class="source_frame"/> - </ui:define> </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/panel/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/panel/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/panel/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -66,11 +66,6 @@ </ui:define> - <ui:define name="sources"> - <p> - Here is fragment of page sources for given example: - </p> - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/panel/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/suggestionBox/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/suggestionBox/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/suggestionBox/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -22,104 +22,13 @@ or clicked from the suggested list.</p> <div class="sample-container"> - <h:form id="suggestionbox_form"> - - - <h:outputText - value="Simple richfaces Suggestion Box test web application." - style="font: 18px;font-weight: bold;" /> - <br /> - <br /> - - <h:panelGrid columns="3" border="0" style="border: 1px solid black;"> - <f:verbatim>Suggestion Box will suggest you town names if it's started with the "a" or - "A" letter</f:verbatim> - - <f:facet name="header"> - <f:verbatim>Input With Suggestion Feature</f:verbatim> - </f:facet> - - - <f:verbatim>&#160;</f:verbatim> - - <h:inputText value="#{suggestionBox.property}" id="text" /> - <rich:suggestionbox id="suggestionBoxId" for="text" tokens=",[" - rules="#{suggestionBox.rules}" - suggestionAction="#{suggestionBox.autocomplete}" var="result" - fetchValue="#{result.text}" rows="#{suggestionBox.intRows}" - first="#{suggestionBox.intFirst}" - minChars="#{suggestionBox.minchars}" - shadowOpacity="#{suggestionBox.shadowOpacity}" - border="#{suggestionBox.border}" width="#{suggestionBox.width}" - height="#{suggestionBox.height}" - shadowDepth="#{suggestionBox.shadowDepth}" - cellpadding="#{suggestionBox.cellpadding}"> - <h:column> - <h:outputText value="#{result.text}" /> - </h:column> - </rich:suggestionbox> - </h:panelGrid> - - <br /> - <br /> - - <h:panelGrid columns="2" border="0" style="border: 1px solid black;"> - - <h:outputText value="Border" /> - - <rich:inputNumberSlider minValue="1" maxValue="5" - value="#{suggestionBox.border}"> - <a4j:support event="onchange" reRender="suggestionBoxId" /> - </rich:inputNumberSlider> - - <h:outputText value="Width" /> - - <rich:inputNumberSlider minValue="150" maxValue="350" step="50" - value="#{suggestionBox.width}"> - <a4j:support event="onchange" reRender="suggestionBoxId" /> - </rich:inputNumberSlider> - - - <h:outputText value="Height" /> - - <rich:inputNumberSlider minValue="100" maxValue="300" step="50" - value="#{suggestionBox.height}"> - <a4j:support event="onchange" reRender="suggestionBoxId" /> - </rich:inputNumberSlider> - - <h:outputText value="Shadow Depth" /> - - <rich:inputNumberSlider minValue="3" maxValue="6" - value="#{suggestionBox.shadowDepth}"> - <a4j:support event="onchange" reRender="suggestionBoxId" /> - </rich:inputNumberSlider> - - - <h:outputText value="Shadow Opacity" /> - - <rich:inputNumberSlider minValue="1" maxValue="9" - value="#{suggestionBox.shadowOpacity}"> - <a4j:support event="onchange" reRender="suggestionBoxId" /> - </rich:inputNumberSlider> - - <h:outputText value="Cellpadding" /> - - <rich:inputNumberSlider minValue="1" maxValue="20" - value="#{suggestionBox.cellpadding}"> - <a4j:support event="onchange" reRender="suggestionBoxId" /> - </rich:inputNumberSlider> - - - </h:panelGrid> - </h:form> + <ui:include src="/richfaces/suggestionBox/examples/custom.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/suggestionBox/examples/custom.xhtml"/> + </ui:include> </div> </ui:define> - <ui:define name="sources"> - Here is fragment of page sources for given example: - <iframe - src="${facesContext.externalContext.requestContextPath}/richfaces/suggestionBox/source/usage.html" - class="source_frame" /> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/support/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/support/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/support/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -64,9 +64,6 @@ </ui:define> - <ui:define name="sources"> - Here is a fragment of page sources for the given example: - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/support/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolBar/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolBar/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolBar/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -7,151 +7,46 @@ xmlns:rich="http://richfaces.ajax4jsf.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <style> - .barsearch { - height:14px; - width:100px; - } - .barsearchbutton { - border-width:1px; - background-color:#{a4jSkin.generalBackgroundColor}; - } - </style> - <p> - Toolbar is a horizontal-oriented panel that you can you for different - purpose such as top level menu, information panel, tools-like menu and so on.<br /> - The following example shows how the panelBar might look like: - </p> - - <div class="sample-container" > - <rich:toolBar height="26" itemSeparator="grid"> - <rich:toolBarGroup> - <h:graphicImage value="/richfaces/toolBar/images/new.gif"></h:graphicImage> - <h:graphicImage value="/richfaces/toolBar/images/webapp_welcome.gif"></h:graphicImage> - <h:graphicImage value="/richfaces/toolBar/images/palette_edit.gif"></h:graphicImage> - </rich:toolBarGroup> - <rich:toolBarGroup> - <h:graphicImage value="/richfaces/toolBar/images/print_edit.gif"></h:graphicImage> - <h:graphicImage value="/richfaces/toolBar/images/print.gif"></h:graphicImage> - <h:graphicImage value="/richfaces/toolBar/images/print_preview.gif"></h:graphicImage> - </rich:toolBarGroup> - <rich:toolBarGroup location="right"> - <h:graphicImage value="/richfaces/toolBar/images/yellow_lamp.gif"></h:graphicImage> - <h:graphicImage value="/richfaces/toolBar/images/timer_task.gif"></h:graphicImage> - </rich:toolBarGroup> - </rich:toolBar> + <p> + Toolbar is a horizontal-oriented panel that you can you for different + purpose such as top level menu, information panel, tools-like menu and so on.<br /> + The following example shows how the panelBar might look like: + </p> + + <div class="sample-container" > + <ui:include src="/richfaces/toolBar/examples/iconBar.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/toolBar/examples/iconBar.xhtml"/> + </ui:include> + </div> + + <div class="sample-container" > + <ui:include src="/richfaces/toolBar/examples/menus.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/toolBar/examples/menus.xhtml"/> + </ui:include> + + </div> + + + <p> + The items on the toolBar can be grouped with ability to define the separator + between the different group and between the member of the same group. The + "location" attribute set to "right" put the group to the right side of the panel. - </div> + </p> + <div class="sample-container" > + + <ui:include src="/richfaces/toolBar/examples/separators.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/toolBar/examples/separators.xhtml"/> + </ui:include> + - <div class="sample-container" > - <h:form> - <rich:toolBar height="34" itemSeparator="line"> - <rich:toolBarGroup> - <h:graphicImage id="edit" value="/richfaces/toolBar/images/print_edit.gif"></h:graphicImage> - <h:outputLabel value="Edit" for="edit"></h:outputLabel> - </rich:toolBarGroup> - <rich:toolBarGroup> - <h:graphicImage id="print" value="/richfaces/toolBar/images/print.gif"></h:graphicImage> - <h:outputLabel value="Print" for="edit"></h:outputLabel> - </rich:toolBarGroup> - <rich:toolBarGroup> - <h:graphicImage id="preview" value="/richfaces/toolBar/images/print_preview.gif"></h:graphicImage> - <h:outputLabel value="Preview" for="preview"></h:outputLabel> - </rich:toolBarGroup> - <rich:toolBarGroup location="right"> - <h:inputText styleClass="barsearch" /> - <h:commandButton styleClass="barsearchbutton" onclick="return false;" value="Search" /> - </rich:toolBarGroup> - </rich:toolBar> - </h:form> - </div> - - - <p> - The items on the toolBar can be grouped with ability to define the separator - between the different group and between the member of the same group. The - "location" attribute set to "right" put the group to the right side of the panel. - - </p> - <div class="sample-container" > - <h:form> - <h:panelGrid columns="2" width="100%"> - <rich:panel> - <h:panelGrid columns="8"> - <h:outputText value="Group Separator:" /> - <a4j:commandLink value="Line" reRender="bar"> - <a4j:actionparam name="gs" value="line" assignTo="#{tbBean.groupSeparator}" /> - </a4j:commandLink> - - <a4j:commandLink value="Grid" reRender="bar"> - <a4j:actionparam name="gs" value="grid" assignTo="#{tbBean.groupSeparator}" /> - </a4j:commandLink> - - <a4j:commandLink value="Disc" reRender="bar"> - <a4j:actionparam name="gs" value="disc" assignTo="#{tbBean.groupSeparator}" /> - </a4j:commandLink> - - <a4j:commandLink value="Square" reRender="bar"> - <a4j:actionparam name="gs" value="square" assignTo="#{tbBean.groupSeparator}" /> - </a4j:commandLink> - - <a4j:commandLink value="None" reRender="bar"> - <a4j:actionparam name="gs" value="none" assignTo="#{tbBean.groupSeparator}" /> - </a4j:commandLink> - </h:panelGrid> - </rich:panel> - <rich:panel> - <h:panelGrid columns="8"> - <h:outputText value="Group Item Separator:" /> - <a4j:commandLink value="Line" reRender="bar"> - <a4j:actionparam name="gs" value="line" assignTo="#{tbBean.groupItemSeparator}" /> - </a4j:commandLink> - - <a4j:commandLink value="Grid" reRender="bar"> - <a4j:actionparam name="gs" value="grid" assignTo="#{tbBean.groupItemSeparator}" /> - </a4j:commandLink> + </div> - <a4j:commandLink value="Disc" reRender="bar"> - <a4j:actionparam name="gs" value="disc" assignTo="#{tbBean.groupItemSeparator}" /> - </a4j:commandLink> - - <a4j:commandLink value="Square" reRender="bar"> - <a4j:actionparam name="gs" value="square" assignTo="#{tbBean.groupItemSeparator}" /> - </a4j:commandLink> - - <a4j:commandLink value="None" reRender="bar"> - <a4j:actionparam name="gs" value="none" assignTo="#{tbBean.groupItemSeparator}" /> - </a4j:commandLink> - </h:panelGrid> - </rich:panel> - </h:panelGrid> - </h:form> - - <rich:toolBar id="bar" height="30" itemSeparator="#{tbBean.groupSeparator}"> - <rich:toolBarGroup itemSeparator="#{tbBean.groupItemSeparator}"> - <h:outputText value="Group1.1"></h:outputText> - <h:outputText value="Group1.2"></h:outputText> - <h:outputText value="Group1.3"></h:outputText> - </rich:toolBarGroup> - <rich:toolBarGroup itemSeparator="#{tbBean.groupItemSeparator}"> - <h:outputText value="Group2.1"></h:outputText> - <h:outputText value="Group2.2"></h:outputText> - </rich:toolBarGroup> - <rich:toolBarGroup location="right" itemSeparator="#{tbBean.groupItemSeparator}"> - <h:outputText value="Group3.1"></h:outputText> - <h:outputText value="Group3.2"></h:outputText> - </rich:toolBarGroup> - </rich:toolBar> - - </div> - </ui:define> - <ui:define name="sources"> - <p> - Here is fragment of page sources for given example: - </p> - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/toolBar/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -7,23 +7,7 @@ xmlns:rich="http://richfaces.ajax4jsf.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <style> - .tooltip { - background-color:#{a4jSkin.generalBackgroundColor}; - border-width:3px; - padding:10px; - } - .tooltip-text { - width:350px; - height:75px; - cursor:arrow; - border-width:2px; - text-align:center; - } - .tooltipData { - font-weight: bold; - } - </style> + <p> ToolTip is a little non-modal pop-up that may be used to display additional information, that normally hidden.<br/> @@ -37,71 +21,14 @@ </ul> <div class="sample-container" > - <h:panelGrid columns="2"> - <rich:panel id="sample1" styleClass="tooltip-text"> - <rich:toolTip> - <span style="white-space:nowrap"> - This tool-tip content was <strong>pre-rendered</strong> to the page.<br/> - The look of this tool-tip is 100% defined by skin. - </span> - </rich:toolTip> - <p> - Here you can see <b>default client-side</b> tool-tip - </p> - </rich:panel> - <rich:panel id="sample2" styleClass="tooltip-text"> - <rich:toolTip followMouse="true" direction="top-right" delay="500" styleClass="tooltip" style="width:250px"> - <span> - This tool-tip content also <strong>pre-rendered</strong> to the page. - However, the look of this tool-tip is customized by styleClass attribute. - </span> - </rich:toolTip> - <p> - This tool-tip will <b>follow mouse</b>. Also this tool-tip has a <b>delay 0.5 sec</b>, so be patient! - </p> - </rich:panel> - <h:form> - <rich:panel id="sample3" styleClass="tooltip-text"> - <rich:toolTip direction="top-right" mode="ajax" styleClass="tooltip" layout="block"> - <f:facet name="defaultContent"> - <strong>Wait...</strong> - </f:facet> - <span >This tool-tip content was <strong>rendered on server</strong> </span> - <h:panelGrid columns="2"> - <h:outputText value="tooltips requested:" /> - <h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" /> - </h:panelGrid> - </rich:toolTip> - <p> - This tool-tip rendered on server <b>in separate request</b>. - </p> - </rich:panel> - </h:form> - <h:form> - <rich:panel id="sample4" styleClass="tooltip-text"> - <rich:toolTip event="onclick" direction="bottom-left" mode="ajax" styleClass="tooltip" layout="block"> - <f:facet name="defaultContent"> - <strong>Wait...</strong> - </f:facet> - <span >This tool-tip content was <strong>rendered on server</strong> </span> - <h:panelGrid columns="2"> - <h:outputText value="tooltips requested:" /> - <h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" /> - </h:panelGrid> - </rich:toolTip> - <p> - This tool-tip will be <b>activated on mouse click</b>. It also has a <b>bottom-left</b> position. - </p> - </rich:panel> - </h:form> - </h:panelGrid> + + <ui:include src="/richfaces/toolTip/examples/tooltipUsage.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/toolTip/examples/tooltipUsage.xhtml"/> + </ui:include> + </div> </ui:define> - <ui:define name="sources"> - <p> - Here is fragment of page sources for given example: - </p> - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/toolBar/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/use-with-data-table.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -7,97 +7,16 @@ xmlns:rich="http://richfaces.ajax4jsf.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <style> - .tooltip { - background-color:#{a4jSkin.generalBackgroundColor}; - border-width:3px; - padding:10px; - } - .tooltipData { - font-weight: bold; - } - </style> - <p> - This little example show how ToolTip may be used in DataTable - </p> - <div class="sample-container"> - <h:form> - <h:outputText value="This tooltip rendered on server in separate request" id="tt3"> - <rich:toolTip direction="top-right" mode="ajax" verticalOffset="5" zorder="200" styleClass="tooltip" layout="block"> - <f:facet name="defaultContent"> - <strong>Wait...</strong> - </f:facet> - <span>This tooltip content was <strong>rendered</strong> on server </span> - <h:panelGrid columns="2"> - <h:outputText value="tooltips requested:" /> - <h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" /> - <h:outputText value="last request:" /> - <h:outputText value="#{toolTipData.tooltipDate}" styleClass="tooltipData" > - <f:convertDateTime pattern="mm:ss.SSS"/> - </h:outputText> - </h:panelGrid> - </rich:toolTip> - </h:outputText> - <rich:dataTable value="#{toolTipData.vehicles}" var="vehicle" rowKeyVar="row"> - <rich:column> - <f:facet name="header"> - <h:outputText value="##"/> - </f:facet> - <h:outputText value="#{row+1}" /> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Make"/> - </f:facet> - <h:outputText id="make" value="#{vehicle.make}" > - <rich:toolTip direction="top-right" mode="ajax" delay="50000" styleClass="tooltip" immediate="true" layout="block"> - <a4j:actionparam name="key" value="#{row}" assignTo="#{toolTipData.currentVehicleIndex}" /> - <f:facet name="defaultContent"> - <strong>Wait please, content is loading...</strong> - </f:facet> - <span>Vehicle details:</span> - <h:panelGrid columns="2"> - <h:outputText value="make:" /> - <h:outputText value="#{vehicle.make}" styleClass="tooltipData" /> - <h:outputText value="model:" /> - <h:outputText value="#{vehicle.model}" styleClass="tooltipData" /> - <h:outputText value="year:" /> - <h:outputText value="#{vehicle.year}" styleClass="tooltipData" /> - <h:outputText value="milage:" /> - <h:outputText value="#{vehicle.milage}" styleClass="tooltipData" /> - <h:outputText value="zip:" /> - <h:outputText value="#{vehicle.zip}" styleClass="tooltipData" /> - <h:outputText value="vin:" /> - <h:outputText value="#{vehicle.vin}" styleClass="tooltipData" /> - <h:outputText value="listed:" /> - <h:outputText value="#{vehicle.listed}" styleClass="tooltipData" > - <f:convertDateTime dateStyle="short"/> - </h:outputText> - </h:panelGrid> - </rich:toolTip> - </h:outputText> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Model"/> - </f:facet> - <h:outputText value="#{vehicle.model}" /> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Year"/> - </f:facet> - <h:outputText value="#{vehicle.year}" /> - </rich:column> - </rich:dataTable> - </h:form> - </div> + <p> + This little example shows how ToolTip may be used in DataTable + </p> + <div class="sample-container"> + <ui:include src="/richfaces/toolTip/examples/withTable.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/toolTip/examples/withTable.xhtml"/> + </ui:include> + </div> </ui:define> - <ui:define name="sources"> - <p> - Here is fragment of page sources for given example: - </p> - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/toolBar/source/usage.html" class="source_frame"/> - </ui:define> + </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/tree/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/tree/usage.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/tree/usage.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -11,74 +11,33 @@ Tree is a component that renders tree control on the page.<br/> The most important tree features are: </p> - <ul> - <li>Native support for Ajax operations</li> - <li>Support for "ajax", "client" and "server" switch types</li> - <li>Built-in drag/drop capabilities</li> - <li>Flexible look</li> - </ul> - <h:form> + <ul> + <li>Native support for Ajax operations</li> + <li>Support for "ajax", "client" and "server" switch types</li> + <li>Built-in drag/drop capabilities</li> + <li>Flexible look</li> + </ul> <div class="sample-container" > - <p>This tree uses "ajax" switch type, note that for collapse/expand operations it will be Ajax request to the server. You may see short delay in this case.</p> - <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> - <rich:treeNode type="library"> - <h:outputText value="#{item.type}" /> - </rich:treeNode> - <rich:treeNode type="artist"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - <rich:treeNode type="song"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - </rich:tree> + <ui:include src="/richfaces/tree/examples/ajaxTree.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/tree/examples/ajaxTree.xhtml"/> + </ui:include> </div> <div class="sample-container" > - <p>This is exactly the same tree, but now it uses "client" switch type. Note, that all nodes actually rendered up-front and expand/collapse now do not requre server call</p> - <rich:tree switchType="client" style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> - <rich:treeNode type="library"> - <h:outputText value="#{item.type}" /> - </rich:treeNode> - <rich:treeNode type="artist"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - <rich:treeNode type="song"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - </rich:tree> + <ui:include src="/richfaces/tree/examples/clientTree.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/tree/examples/clientTree.xhtml"/> + </ui:include> </div> <div class="sample-container" > - <p>This is again same tree, but now it uses "server" switch type. Full page content will be reloaded at every click.</p> - <rich:tree switchType="server" style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> - <rich:treeNode type="library"> - <h:outputText value="#{item.type}" /> - </rich:treeNode> - <rich:treeNode type="artist"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - <rich:treeNode type="song"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - </rich:tree> + <ui:include src="/richfaces/tree/examples/serverTree.xhtml"/> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/tree/examples/serverTree.xhtml"/> + </ui:include> </div> - </h:form> <p> Note how tree switched on "client" does not "remember" it state when whole page is reloaded. At the same time "ajax" tree remember it state without any additional code. </p> </ui:define> - <ui:define name="sources"> - <p> - Here is fragment of page sources for given example: - </p> - <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/tree/source/usage.html" class="source_frame"/> - </ui:define> </ui:composition> </html> Modified: trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml 2007-08-13 20:08:41 UTC (rev 2232) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml 2007-08-13 23:45:36 UTC (rev 2233) @@ -54,6 +54,7 @@ .viewsourcehidelink { text-align:right; + cursor:pointer; display:block; background-color:#E6F3F7; }