[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