4:32 a.m.
Author: ilya_shaikovsky
Date: 2011-02-03 05:32:14 -0500 (Thu, 03 Feb 2011)
New Revision: 21411
Added:
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/login-sample.xhtml
Modified:
trunk/examples/richfaces-showcase/src/main/resources/org/richfaces/demo/data/common/navigation.xml
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dropDownMenu/samples/topMenu-sample.xhtml
Log:
new demo for popup.
Modified:
trunk/examples/richfaces-showcase/src/main/resources/org/richfaces/demo/data/common/navigation.xml
===================================================================
---
trunk/examples/richfaces-showcase/src/main/resources/org/richfaces/demo/data/common/navigation.xml 2011-02-03
09:54:05 UTC (rev 21410)
+++
trunk/examples/richfaces-showcase/src/main/resources/org/richfaces/demo/data/common/navigation.xml 2011-02-03
10:32:14 UTC (rev 21411)
@@ -417,7 +417,7 @@
</sample>
</samples>
</demo>
- <demo>
+ <demo new="true">
<id>popup</id>
<name>rich:popupPanel</name>
<samples>
@@ -429,6 +429,10 @@
<id>modalPopup</id>
<name>Modal panel example</name>
</sample>
+ <sample new="true">
+ <id>login</id>
+ <name>Login panel positioning</name>
+ </sample>
</samples>
</demo>
<demo>
Modified:
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dropDownMenu/samples/topMenu-sample.xhtml
===================================================================
---
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dropDownMenu/samples/topMenu-sample.xhtml 2011-02-03
09:54:05 UTC (rev 21410)
+++
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dropDownMenu/samples/topMenu-sample.xhtml 2011-02-03
10:32:14 UTC (rev 21411)
@@ -75,17 +75,6 @@
</h:outputLink>
</rich:menuItem>
</rich:dropDownMenu>
- <rich:toolbarGroup location="right">
- <rich:dropDownMenu label="Search" direction="bottomLeft"
- jointPoint="bottomRight" styleClass="search"
mode="client">
- <rich:menuItem>
- <h:inputText value="" id="searchinput" />
- <button type="button">Search</button>
- </rich:menuItem>
- <rich:menuItem label="Enter your search criteria here"
- disabled="true"></rich:menuItem>
- </rich:dropDownMenu>
- </rich:toolbarGroup>
</rich:toolbar>
</h:form>
Added: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml
===================================================================
--- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml
(rev 0)
+++
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml 2011-02-03
10:32:14 UTC (rev 21411)
@@ -0,0 +1,46 @@
+<!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:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:ui="http://java.sun.com/jsf/facelets">
+
+<ui:composition>
+ <p>In RichFaces 3.3.x many developers used <b>rich:dropDownMenu</b>
+ component for creation of Search/Login popups attached to toolbars. And
+ there were two reasons for that:</p>
+ <ul>
+ <li>Simplicity of usage. No script positioning required.
+ rich:dropDownMenu performs popup positioning on its own and simply
+ customizable by using <b>jointPoint</b> and <b>direction</b>
+ attributes.</li>
+ <li>RichFaces 3.3.x has no lightweight popup panel and
<b>rich:modalPanel</b>
+ usage for such cases required workarounds in order to make it
+ non-modal</li>
+ </ul>
+ <p>But that approach has some disadvantages as well:</p>
+ <ul>
+ <li><b>rich:dropDownMenu</b> component was added with additional
+ JavaScript code for inputs processing inside the
<b>rich:menuItem</b>'s.
+ That not really native task for menu so that code was really
+ superfluous from simple menus point of view.</li>
+ <li>Developer still has to work on styling of menu item removing
+ hover effects and making it looks like panel rather than menuItem</li>
+ </ul>
+ <p>RichFaces 4.x provides clean api for popup panel and added
+ non-modal state, so for now it's really easier and looking more native
+ to use modal panel for such tasks. Below you could see two samples:</p>
+ <ui:include src="#{demoNavigator.sampleIncludeURI}" />
+ <ui:include src="/templates/includes/source-view.xhtml">
+ <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}"
/>
+ <ui:param name="sourceType" value="xhtml" />
+ <ui:param name="openLabel" value="View Source" />
+ <ui:param name="hideLabel" value="Hide Source" />
+ </ui:include>
+ <p>rich:popup panel allows you to pass next options to show method:
+ <b>min and max width and height</b>, actual <b>width and
height</b>, <b>top
+ and left</b> positions for the panel. So with <b>rich:hashParam</b>
it's
+ really simple to build declarative call for the panel which uses
+ dynamic properties.</p>
+</ui:composition>
+
+</html>
\ No newline at end of file
Added:
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/login-sample.xhtml
===================================================================
---
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/login-sample.xhtml
(rev 0)
+++
trunk/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/login-sample.xhtml 2011-02-03
10:32:14 UTC (rev 21411)
@@ -0,0 +1,62 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:rich="http://richfaces.org/rich">
+ <h3>Login panel attachment:</h3>
+
+ <rich:toolbar height="26px">
+ <h:outputLink value="#" id="ll">
+ <rich:componentControl event="click" operation="show"
target="lp">
+ <a4j:param name="event" value="event"
noEscape="true" />
+ <rich:hashParam>
+ <a4j:param noEscape="true" name="top"
+ value="jQuery(#{rich:element('ll')}.parentNode).offset().top +
jQuery(#{rich:element('ll')}.parentNode).height()" />
+ <a4j:param noEscape="true" name="left"
+ value="jQuery(#{rich:element('ll')}.parentNode).offset().left"
/>
+ </rich:hashParam>
+ </rich:componentControl>
+ Login</h:outputLink>
+ </rich:toolbar>
+ <rich:popupPanel id="lp" autosized="true"
modal="false"
+ moveable="false" resizeable="false">
+ <h:panelGrid columns="2">
+ <h:outputText value="Login" />
+ <h:inputText />
+ <h:outputText value="Password" />
+ <h:inputText />
+ </h:panelGrid>
+ <h:outputLink
+ onclick="#{rich:component('lp')}.hide(event); return false;"
+ value="#">Login</h:outputLink>
+ </rich:popupPanel>
+
+ <h3>Search panel right-side attachment:</h3>
+ <rich:toolbar height="26px" id="tb">
+ <rich:toolbarGroup location="right">
+ <h:outputLink value="#">
+ <rich:componentControl event="click" operation="show"
target="ls">
+ <a4j:param name="event" value="event"
noEscape="true" />
+ <rich:hashParam>
+ <a4j:param noEscape="true" name="top"
+ value="jQuery(#{rich:element('tb')}).offset().top +
jQuery(#{rich:element('tb')}).height()" />
+ <a4j:param noEscape="true" name="left"
+ value="jQuery(#{rich:element('tb')}).offset().left +
jQuery(#{rich:element('tb')}).width() -
#{rich:component('ls')}.width()" />
+ </rich:hashParam>
+ </rich:componentControl>
+ Search</h:outputLink>
+ </rich:toolbarGroup>
+ </rich:toolbar>
+ <rich:popupPanel header="Enter Search Terms" id="ls"
autosized="true" modal="false"
+ moveable="false" resizeable="false">
+ <h:panelGrid columns="3">
+ <h:outputText value="Search:" />
+ <h:inputText />
+ <h:outputLink
+ onclick="#{rich:component('ls')}.hide(event); return false;"
+ value="#">Search</h:outputLink>
+ </h:panelGrid>
+ </rich:popupPanel>
+</ui:composition>
\ No newline at end of file