richfaces 的信息揭示（尽可能多的方式） _Web前端

richfaces 的信息提示（尽可能多的方式）
大家如果有什么好的方法，分享出来哦

jsf 本身很强大，很多功能都实现了，程序员只需要调用它的组件，BUT虽然jsf有很多组件，有时的确不满足当前需求，比如信息提示，下面列出最常用的3种。
1）直接alert (简单了吧，嘿嘿)
2）用模态窗口来输出信息 (这个有点难)
3）在页面的一个专门的div用ajax来输出信息

jsf从后台传给前台的信息有两种方式，在本文中用第二种方式
a）先把信息设置到jsf的Bean中，再在jsf页面中用el取出来就是
b）用jsf的message组件
后台

FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("保存成功"));

页面

<rich:messages ></rich:messages>

好了，现在开始用richfaces来实现信息提示
通过自己的理解加g.cn 加 baidu.com 其实richfaces里用alert是最难的，所以把alert放在最后吧，倒是2），3）实现起来比较方便
1）先来模态窗口

首先是userBean

@ManagedBean(name = "userBean")
@SessionScoped
public class UserBean implements Serializable {
	private String name;
	private String password;
	
	public void login(ActionEvent event){
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(name + " login 成功"));
	}
	
	public String getName() {
		return name;
	}

	public void setName(String newValue) {
		name = newValue;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String newValue) {
		password = newValue;
	}
}

然后是页面

   <body>
	<rich:modalPanel id="messagePanel" width="350" height="100" >
        <f:facet name="header">
            <h:panelGroup>
                <h:outputText value="Modal Panel"></h:outputText>
            </h:panelGroup>
        </f:facet>
        <f:facet name="controls">
            <h:panelGroup>
                <h:graphicImage value="/images/close.png" styleClass="hidelink" id="hidelink"/>
                <rich:componentControl for="messagePanel" attachTo="hidelink" operation="hide" event="onclick"/>
            </h:panelGroup>
        </f:facet>
				<h:panelGroup >
					<rich:messages ></rich:messages>
				</h:panelGroup>									
    </rich:modalPanel> 	   
      <h:form>
         <h3>Please enter your name and password.</h3>   
         <table>
            <tr>
               <td>Name:</td>
               <td><h:inputText value="#{userBean.name}"/></td>
            </tr>
            <tr>
               <td>Password:</td>
            </tr>
         </table>
         <p><a4j:commandButton value="Login" actionListener="#{userBean.login}" reRender="messagePanel" oncomplete="#{rich:component('messagePanel')}.show()"></a4j:commandButton></p>
      </h:form>
   </body>

效果图如下

but如果每个按钮都写oncomplete="#{rich:component('messagePanel')}.show()"成这样就太复杂了所以就有了升级版

   <body>
   <h:panelGroup id="messageGroup" >
		<rich:modalPanel id="messagePanel" width="350" height="100" showWhenRendered="true" rendered="#{!empty facesContext.maximumSeverity}"> 
	        <f:facet name="header">
	            <h:panelGroup>
	                <h:outputText value="Modal Panel"></h:outputText>
	            </h:panelGroup>
	        </f:facet>
	        <f:facet name="controls">
	            <h:panelGroup>
	                <h:graphicImage value="/images/close.png" styleClass="hidelink" id="hidelink"/>
	                <rich:componentControl for="messagePanel" attachTo="hidelink" operation="hide" event="onclick"/>
	            </h:panelGroup>
	        </f:facet>
					<h:panelGroup >
						<rich:messages ></rich:messages>
					</h:panelGroup>									
	    </rich:modalPanel> 	 
    </h:panelGroup>  
      <h:form>
         <h3>Please enter your name and password.</h3>   
         <table>
            <tr>
               <td>Name:</td>
               <td><h:inputText value="#{userBean.name}"/></td>
            </tr>
            <tr>
               <td>Password:</td>
            </tr>
         </table>
         <p><a4j:commandButton value="Login" actionListener="#{userBean.login}" reRender="messageGroup" ></a4j:commandButton></p>
      </h:form>
   </body>

2)专门的div用ajax来输出信息,这个在richfaces里简直是太简单了

   <body>
      <h:form>
         <h3>Please enter your name and password.</h3>   
         <table>
            <tr>
               <td>Name:</td>
               <td><h:inputText value="#{userBean.name}"/></td>
            </tr>
            <tr>
               <td>Password:</td>
            </tr>
         </table>
         <p><a4j:commandButton value="ajaxLogin" actionListener="#{userBean.login}"  ></a4j:commandButton></p>
         <h:panelGroup >
			<rich:messages ></rich:messages>
		</h:panelGroup>		
      </h:form>
   </body>

效果图为

先就写到这吧有时间了再写

1 楼 ella110727 2011-07-28

挺清楚的。可是FacesContext这个方法没法调用呢？why?

2 楼 li2005 2011-08-17

我用的是JSF2.0，你得确认你的bean是不是在JSF容器里头

ella110727 写道

挺清楚的。可是FacesContext这个方法没法调用呢？why?

我用的是JSF2.0，你得确认你的bean是不是在JSF容器里头

3 楼 yuanliyin 2011-10-08