Author: ilya_shaikovsky Date: 2007-12-11 09:52:25 -0500 (Tue, 11 Dec 2007) New Revision: 4712 Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/cmenuusage.xhtml branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/control.xhtml branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/usage.xhtml branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/listShuttle/examples/toolBarCustomization.xhtml branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/orderingList/example/playlist.xhtml Log: Review and updates to release. Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/cmenuusage.xhtml =================================================================== --- branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/cmenuusage.xhtml 2007-12-11 14:40:53 UTC (rev 4711) +++ branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/cmenuusage.xhtml 2007-12-11 14:52:25 UTC (rev 4712) @@ -48,7 +48,7 @@ <h:outputText value="#{car.price}" /> </rich:column> - <rich:componentControl event="onRowClick" for=":subview:form:menu" operation="doShow"> + <rich:componentControl event="onRowClick" for=":subview:form:menu" operation="show"> <f:param value="#{car.model}" name="model"/> <f:param value="#{car.make}" name="car"/> </rich:componentControl> Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/control.xhtml =================================================================== --- branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/control.xhtml 2007-12-11 14:40:53 UTC (rev 4711) +++ branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/examples/control.xhtml 2007-12-11 14:52:25 UTC (rev 4712) @@ -9,18 +9,20 @@ vertical-align:top; } </style> - <p>RichFaces Component Control is a component that allows to manage any components - with their client side JS API. + <p>RichFaces Component Control is a universal component that allows to call JS API functions on the + components after defined events. </p> <p> In this simple example <b>componentControl</b> components used to open and close modal panel. The component attached to links and just calls "show" and "hide" functions on Modal Panel. </p> - <ui:include src="/richfaces/componentControl/examples/mpusage.xhtml" /> - <rich:separator/> + <div class="sample-container"> + <ui:include src="/richfaces/componentControl/examples/mpusage.xhtml" /> + <rich:spacer height="20"/> <ui:include src="/templates/include/sourceview.xhtml"> <ui:param name="sourcepath" value="/richfaces/componentControl/examples/mpusage.xhtml"/> </ui:include> + </div> <p> <b>Main component attributes:</b> <ul> @@ -28,7 +30,13 @@ <li><b>attachTo</b> - specifies client identifier of the component or id of the existing DOM element that is a source for given event. If <b>attachTo</b> is not defined, the event is attached on the server to the closest in the component tree parent component.</li> - <li><b>event</b> - The event that is used to trigger the <b>operation</b> on the target component </li> + <li><b>event</b> - The event that is used to trigger the <b>operation</b> on the target component + <br/><i><b>Note:</b> the component could use "oncontextmenu" event to call the JS API on right click event. + But in this case this component should be defined through <b>for</b> attribute rather than using a4j:support style, + because many of the components doesn't encodes this event and in case of support-like definition - the component will not work properly. + </i> + + </li> <li><b>operation</b> - name of the javascript function that will be invoked on target component. The API method is attached to the 'component' property of the root DOM element that represents the target component. The function has two parameters - <b>event</b> and <b>params</b>.</li> @@ -57,9 +65,11 @@ Click at any table row to see the context menu that generated individually for every row using parameters. </p> - <ui:include src="/richfaces/componentControl/examples/cmenuusage.xhtml" /> - <rich:separator/> + <div class="sample-container"> + <ui:include src="/richfaces/componentControl/examples/cmenuusage.xhtml" /> + <rich:spacer height="20"/> <ui:include src="/templates/include/sourceview.xhtml"> <ui:param name="sourcepath" value="/richfaces/componentControl/examples/cmenuusage.xhtml"/> </ui:include> + </div> </ui:composition> \ No newline at end of file Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/usage.xhtml =================================================================== --- branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/usage.xhtml 2007-12-11 14:40:53 UTC (rev 4711) +++ branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/componentControl/usage.xhtml 2007-12-11 14:52:25 UTC (rev 4712) @@ -8,12 +8,8 @@ <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> - <div class="sample-container"> - <ui:include src="/richfaces/componentControl/examples/control.xhtml"/> - </div> - </ui:define> </ui:composition> Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml =================================================================== --- branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml 2007-12-11 14:40:53 UTC (rev 4711) +++ branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml 2007-12-11 14:52:25 UTC (rev 4712) @@ -8,24 +8,35 @@ .cent{ text-align:center; } + .rich-menu-item{ + text-align:left; + } + .rich-menu-group{ + text-align:left; + } </style> - <h:panelGrid columns="1" columnClasses="cent,cent,cent,cent" cellspacing="10px"> + <h:panelGrid columns="1" columnClasses="cent"> <h:outputText value="Perform right-click on the picture to call the menu" style="font-weight:bold" id="label"/> <h:panelGroup id="picture"> <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" id="pic"/> - <rich:contextMenu event="oncontextmenu" attached="true"> - <rich:menuItem value="Enlarge"></rich:menuItem> - <rich:menuItem value="Open in new window"></rich:menuItem> - <rich:menuGroup value="Save"> - <rich:menuItem value="Download image"></rich:menuItem> - <rich:menuItem value="Copy to clipboard"></rich:menuItem> - <rich:menuItem value="Copy image adress"></rich:menuItem> - </rich:menuGroup> + <rich:contextMenu event="oncontextmenu" attached="true" submitMode="none"> + <rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"></rich:menuItem> + <rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"></rich:menuItem> </rich:contextMenu> </h:panelGroup> </h:panelGrid> + <script type="text/javascript"> + function enlarge(){ + document.getElementById('pic').width=document.getElementById('pic').width*1.1; + document.getElementById('pic').height=document.getElementById('pic').height*1.1; + } + function decrease(){ + document.getElementById('pic').width=document.getElementById('pic').width*0.9; + document.getElementById('pic').height=document.getElementById('pic').height*0.9; + } + </script> </ui:composition> \ No newline at end of file Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml =================================================================== --- branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml 2007-12-11 14:40:53 UTC (rev 4711) +++ branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml 2007-12-11 14:52:25 UTC (rev 4712) @@ -37,6 +37,12 @@ that appears after a particular client side event (onmouseover, onclick etc) occured on parent component. The event is defined with an <b>event</b> attribute.</p> <p> + <i><b>Note:</b> As you can see from first example the component could use "oncontextmenu" event to call the Menu on right click event. + But in this case this component should be called through <b>componentControl</b> component(as it shown at second example) rather than using a4j:support style, + because many of the components doesn't encodes this event and in case of support-like definition - the component will not work properly. + </i> + </p> + <p> Other usefull attributes are: <ul> <li> Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/listShuttle/examples/toolBarCustomization.xhtml =================================================================== --- branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/listShuttle/examples/toolBarCustomization.xhtml 2007-12-11 14:40:53 UTC (rev 4711) +++ branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/listShuttle/examples/toolBarCustomization.xhtml 2007-12-11 14:52:25 UTC (rev 4712) @@ -14,12 +14,13 @@ </c:forEach> </rich:toolBar> <rich:spacer height="20"></rich:spacer> - - <rich:listShuttle sourceValue="#{toolBar.freeItems}" targetValue="#{toolBar.items}" var="items" listHeight="300px" sourceCaptionLabel="Available Items" targetCaptionLabel="Currently Active Items" converter="listShuttleconverter"> + + <rich:listShuttle sourceValue="#{toolBar.freeItems}" + targetValue="#{toolBar.items}" var="items" listHeight="300" listWidth="300" + sourceCaptionLabel="Available Items" + targetCaptionLabel="Currently Active Items" + converter="listShuttleconverter"> <rich:column> - <f:facet name="header"> - <h:outputText value="Items List"></h:outputText> - </f:facet> <h:outputText value="#{items.label}"></h:outputText> </rich:column> <a4j:support event="onorderchanged" reRender="toolBar"></a4j:support> @@ -27,7 +28,7 @@ <rich:spacer height="20"></rich:spacer> - <h:commandButton value="Update Toolbar" reRender="toolBar"/> + <h:commandButton value="Update Toolbar" reRender="toolBar" /> <rich:messages></rich:messages> - </h:form> -</ui:composition> \ No newline at end of file + </h:form> +</ui:composition> Modified: branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/orderingList/example/playlist.xhtml =================================================================== --- branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/orderingList/example/playlist.xhtml 2007-12-11 14:40:53 UTC (rev 4711) +++ branches/3.1.x/samples/richfaces-demo/src/main/webapp/richfaces/orderingList/example/playlist.xhtml 2007-12-11 14:52:25 UTC (rev 4712) @@ -9,18 +9,18 @@ text-align:center; } </style> - <rich:orderingList value="#{library.libraryAsList}" var="lib" listHeight="300px"> - <rich:column> + <rich:orderingList value="#{library.libraryAsList}" var="lib" listHeight="300" listWidth="350"> + <rich:column width="300"> <f:facet name="header"> Song Name - </f:facet> + </f:facet> <h:outputText value="#{lib.title}"></h:outputText> </rich:column> <rich:column> <f:facet name="header"> - Album Title + Artist Name </f:facet> - <h:outputText value="#{lib.album.title}"></h:outputText> + <h:outputText value="#{lib.album.artist.name}"></h:outputText> </rich:column> </rich:orderingList> </ui:composition> \ No newline at end of file