Author: SergeySmirnov Date: 2007-05-03 22:21:51 -0400 (Thu, 03 May 2007) New Revision: 645 Modified: trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/modalPanel/usage.xhtml Log: additions to demo Modified: trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml =================================================================== --- trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml 2007-05-04 01:39:17 UTC (rev 644) +++ trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/dropDownMenu/usage.xhtml 2007-05-04 02:21:51 UTC (rev 645) @@ -12,36 +12,33 @@ .optionList { height:30px; } - .vertical-menu .rich-menu-item-hover,.vertical-menu .rich-menu-group-hover { + .Avertical-menu .rich-menu-item-hover,.Avertical-menu .rich-menu-group-hover { background-image:none; - background-color: transparent !important; + background-color: #{a4jSkin.additionalBackgroundColor}; } - + </style> - <p>Description + <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> -Output: <h:outputText id="out" value="#{paintData.text}" /> + <rich:toolBar> - <rich:dropDownMenu value="File"> + <rich:dropDownMenu showDelay="0" hideDelay="1000" value="File"> <rich:menuItem width="40px" mode="ajax" value="Open" action="open"/> <rich:menuSeparator id="menuSeparator11"/> <rich:menuItem mode="none" onclick="document.location.href='http://www.exadel.com'"> <h:outputLink value="http://www.exadel.com">output Link</h:outputLink> </rich:menuItem> - <rich:menuItem> - <h:inputText style="z-index:100000" value="#{paintData.text}"> - <a4j:support event="onkeyup" reRender="out" /> - </h:inputText> - </rich:menuItem> </rich:dropDownMenu> - <rich:dropDownMenu showDelay="100" hideDelay="100"> + + <rich:dropDownMenu showDelay="0" hideDelay="1000"> <f:facet name="label"> - <h:panelGrid columns="2" style="vertical-align:middle"> + <h:panelGrid cellpadding="0" cellspacing="0" columns="2" style="vertical-align:middle"> <h:graphicImage value="/richfaces/toolBar/images/palette_edit.gif"/> <h:outputText value="Options" /> </h:panelGrid> @@ -71,11 +68,31 @@ </rich:menuGroup> </rich:dropDownMenu> </rich:toolBar> - <rich:spacer height="20" /> + </h:form> + </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 + defined with 'event' attribute.</p> + <p>Drop Down Menu can contains set of Menu Items, Menu Groups and Menu Separators. + Group plays the role of label for secondary levels on the menu. Separator is represented with + horizontal lines between the items or groups. Item is a active element that might produce + Ajax or non-Ajax requests. The submittion mode is defined with 'submitMode' attribute that has + three possible options - "server", "ajax" or "none". Mode "none" does not produce any request, but + allows developers to provide own functionality inside the menu item. + </p> + + <div class="sample-container"> + <h:form> + <h:panelGrid class="vertical-menu" style="background-color:#{a4jSkin.additionalBackgroundColor}" 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" /> + <rich:menuItem value="Suboption1-2"> + <f:facet name="icon"> + <h:graphicImage id="print2" 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"> @@ -95,8 +112,8 @@ </rich:dropDownMenu> </h:panelGrid> - - </h:form> + </h:form> + </div> </ui:define> Modified: trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/modalPanel/usage.xhtml =================================================================== --- trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/modalPanel/usage.xhtml 2007-05-04 01:39:17 UTC (rev 644) +++ trunk/richfaces-samples/richfaces-demo/src/main/webapp/richfaces/modalPanel/usage.xhtml 2007-05-04 02:21:51 UTC (rev 645) @@ -23,7 +23,6 @@ Richfaces.showModalPanel('mp',{width:450, top:200})</a></p> <div class="sample-container"> - <button onclick="var pos=getRightTop(this);alert(pos.left);Richfaces.showModalPanel('mp',{top:pos.top, left:pos.left})">Show on the Right</button> <rich:modalPanel id="mp" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">