[richfaces-svn-commits] JBoss Rich Faces SVN: r5347 - in trunk/samples/richfaces-demo/src/main/webapp/richfaces: contextMenu and 1 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Mon Jan 14 07:35:07 EST 2008
Author: sergeyhalipov
Date: 2008-01-14 07:35:07 -0500 (Mon, 14 Jan 2008)
New Revision: 5347
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml
Log:
http://jira.jboss.com/jira/browse/RF-1901
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/example/menu.xhtml 2008-01-14 12:35:07 UTC (rev 5347)
@@ -0,0 +1,42 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:rich="http://richfaces.org/rich">
+ <style>
+ .cent{
+ text-align:center;
+ }
+ .rich-menu-item{
+ text-align:left;
+ }
+ .rich-menu-group{
+ text-align:left;
+ }
+</style>
+ <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" 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
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/contextMenu/usage.xhtml 2008-01-14 12:35:07 UTC (rev 5347)
@@ -0,0 +1,86 @@
+<!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:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:rich="http://richfaces.org/rich">
+ <ui:composition template="/templates/component-sample.xhtml">
+ <ui:define name="sample">
+
+ <p>RichFaces Context menu is a component that allows to organize the hierarchical context menus
+ similar to one that almost every desktop application has.
+ </p>
+ <p>Context Menu can contain a set of Menu Items, Menu Groups and Menu Separators.
+ Usage of these components are similar to usage in RichFaces Drop Down Menu.
+ </p>
+ <p><b>Example:</b>To call the menu - perform the right click on the picture</p>
+ <div class="sample-container">
+
+ <ui:include src="/richfaces/contextMenu/example/menu.xhtml"/>
+ <ui:include src="/templates/include/sourceview.xhtml">
+ <ui:param name="sourcepath" value="/richfaces/contextMenu/example/menu.xhtml"/>
+ </ui:include>
+
+ </div>
+ <p>
+ In this example menu is just defined as nested to <b>panelGroup</b> with "picture" Id.
+ You should be careful with such definitions, because on the client menu component
+ searches for the DOM element with the client Id of the parent component on the server.
+ If the component doesn't encode id on the client, it will be not found by the menu and menu
+ will be attached to its closest parent in a DOM tree. For example you should not define the menu as a child
+ for images components.
+ </p>
+ <p>Context menu itself is an invisible panel
+ that appears after a particular client side event (onmouseover, onclick etc) occured on a parent component.
+ The event is defined with an <b>event</b> attribute.</p>
+ <p>
+ <i><b>Note:</b> As you can see from the first example the component could use "oncontextmenu" event to call the Menu on right click event.
+ But in this case the component should be called via <b>componentControl</b> component (as it is shown at the second example) rather than using a4j:support style.
+ If a4j:support style is used then many of the components don't encode this event and also in case of support-like definition the component will not work properly.
+ </i>
+ </p>
+ <p>
+ Other usefull attributes are:
+ <ul>
+ <li>
+ <b>disableDefaultMenu</b> - if it is true, the event defined on the menu
+ will not be handled by other client handlers except context menu handler. You
+ may see on the first example that a standard browser menu isn't called
+ after right click.
+ </li>
+ <li>
+ <b>attached</b> - if it is true, the menu is attached to parent component. In other case
+ it should be called via JS API (using componentControl)
+ </li>
+ </ul>
+ </p>
+ <p>
+ Unlike dropDownMenu, contextMenu has no representation element, and has strong right-click
+ support.
+ </p>
+ <p>
+ And the main difference from drop down menu is that a context menu could be defined once on the page
+ and used by different components. Single instance of the menu will be created and shared between the components.
+ </p>
+ <p>
+ To customize shared menu for every component, macrosubstitutions could be used.
+ <b>ComponentControl</b> component could be used to call the instance of the menu for
+ the particular component. <b>f:param</b> components could be used to add parameters to menu.
+ </p>
+ <p>
+ <b>Example:</b> To call the menu - click any car row.
+ </p>
+ <ui:include src="/richfaces/componentControl/examples/cmenuusage.xhtml" />
+ <ui:include src="/templates/include/sourceview.xhtml">
+ <ui:param name="sourcepath" value="/richfaces/componentControl/examples/cmenuusage.xhtml"/>
+ </ui:include>
+ <p>
+ Pay your attention to the source code. Inside the table you may see component control that calls the menu.
+ Menu recreated after every call on the client and new <b>{car}</b> and <b>{model}</b> values are inserted into the menu.
+ </p>
+ <p>Look through componentControl demo page for more information.</p>
+ </ui:define>
+
+ </ui:composition>
+</html>
More information about the richfaces-svn-commits
mailing list