使用 RichFaces 开发网页内的模态窗口 (Modal Panel)

红薯 发布于 2010/06/11 09:30
阅读 2K+
收藏 2

这是一个 5 分钟的教程,教你创建一个网页的模态窗口,该教程使用了 RichFaces 的 a4j:include 和 rich:modalPanel。

1. 开始页面 (start.xhtml)

<h:form>
<a4j:commandLink oncomplete="#{rich:component('panel')}.show();"
	 value="Open"
	 reRender="panel"/>
</h:form>
 
<h:panelGrid id="result">
   <h:outputText value="#{bean.color}" />
   <h:outputText value="#{bean.number}" style="COLOR: #{bean.color}"/>
</h:panelGrid>
 
<rich:modalPanel id="panel">
   <f:facet name="header">Wizard</f:facet>
   <f:facet name="controls">
	<a href="#" onclick="#{rich:component('panel')}.hide();">Close</a>
   </f:facet>
   <h:form id="form">
	<h:panelGrid>
		<a4j:include viewId="#{bean.view}" />
	</h:panelGrid>
   </h:form>
</rich:modalPanel>
2. 第一个向导页(/wizard/page1.xhtml)
<h:panelGrid xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:a4j="http://richfaces.org/a4j"
     xmlns:rich="http://richfaces.org/rich"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:ui="http://java.sun.com/jsf/facelets">
 
   <h:selectOneRadio value="#{bean.color}" >
	<f:selectItem itemLabel="Red" itemValue="Red"/>
	<f:selectItem itemLabel="Green" itemValue="Green"/>
	<f:selectItem itemLabel="Orange" itemValue="Orange"/>
   </h:selectOneRadio>
   <a4j:commandLink value="Next page" action="next"/>
</h:panelGrid>
3. 第二个向导页 (/wizard/page2.xhtml)
<h:panelGrid xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
 
   <rich:inputNumberSlider value="#{bean.number}"
	 minValue="0" maxValue="100"
	 enableManualInput="false"/>
   <a4j:commandLink value="Close and Save" 
	onclick="#{rich:component('panel')}.hide();"
	action="#{bean.reset}"
	reRender="result"/>
</h:panelGrid>
4. JSF 配置文件
<managed-bean>
  <managed-bean-name>bean</managed-bean-name>
  <managed-bean-class>test.Bean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
 </managed-bean>
 <navigation-rule>
  <from-view-id>/wizard/page1.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>next</from-outcome>
   <to-view-id>/wizard/page2.xhtml</to-view-id>
  </navigation-case>
</navigation-rule>
5. Managed Bean
@KeepAlive
public class Bean {
   private String view = "/wizard/page1.xhtml";
   private Integer number;
   private String color;
 
   // getters and setters for each property
 
   public void reset (){
	this.view = "/wizard/page1.xhtml";
   }
}

6. 执行效果

First page inside modal panel:

Second page inside modal panel:

Result (after closing the modal panel):

 

 

 

 

加载中
0
穿越星辰
穿越星辰

看到这些标签头就大

返回顶部
顶部