如何从 Richfaces 弹出窗口刷新父 jsf 页面

发布于 2024-11-30 08:36:12 字数 6998 浏览 2 评论 0原文

我有一个包含几个字段的 JSF 页面。我遵循了 BalusC 的教程和一切都很好。然后我添加了 RichFaces 支持，效果很好。我可以看到弹出窗口等正在工作。

现在我想做的是，一旦一个人注册了，我想在弹出窗口中显示该名称（这也很好，我可以在弹出窗口中看到）。然后我希望能够在弹出窗口中更改该名称并将其反映在父级中，但我不知道如何做到这一点。请看一下。

XHTML 页面

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>Registration</title>
</h:head>
<h:body>
    <h:form>
        <h:panelGrid columns="3">
            <h:outputLabel for="username">Username</h:outputLabel>
            <h:inputText id="username" value="#{register.user.username}"
                required="true">
                <f:ajax event="blur" render="usernameMessage" />
            </h:inputText>
            <h:message id="usernameMessage" for="username" />

            <h:outputLabel for="password">Password</h:outputLabel>
            <h:inputSecret id="password" value="#{register.user.password}"
                required="true" redisplay="true">
                <f:ajax event="blur" render="passwordMessage" />
            </h:inputSecret>
            <h:message id="passwordMessage" for="password" />

            <h:outputLabel for="email">Email</h:outputLabel>
            <h:inputText id="email" value="#{register.user.email}"
                required="true">
                <f:ajax event="blur" render="emailMessage" />
            </h:inputText>
            <h:message id="emailMessage" for="email" />

            <h:outputLabel for="birthdate">Birthdate (yyyy-MM-dd)</h:outputLabel>
            <h:inputText id="birthdate" value="#{register.user.birthdate}">
                <f:convertDateTime pattern="yyyy-MM-dd" />
                <f:ajax event="blur" render="birthdateMessage" />
            </h:inputText>
            <h:message id="birthdateMessage" for="birthdate" />

            <h:panelGroup />
            <h:commandButton value="Register" action="#{register.submit}">
                <f:ajax execute="@form" render="@form" />
            </h:commandButton>
            <h:commandButton value="Edit Name in Popup">
                <rich:componentControl target="popup" operation="show" />
            </h:commandButton>
            <h:messages globalOnly="true" layout="table" />
        </h:panelGrid>
        <rich:popupPanel id="popup" modal="true" resizeable="true"
            onmaskclick="#{rich:component('popup')}.hide()">
            <f:facet name="header">
                <h:outputText value="Simple popup panel" />
            </f:facet>
            <f:facet name="controls">
                <h:outputLink value="#"
                    onclick="#{rich:component('popup')}.hide(); return false;">
                    X
                </h:outputLink>
            </f:facet>

            <h:panelGrid columns="3">
                <h:outputLabel for="username2">Username</h:outputLabel>
                <h:inputText id="username2" value="#{register.user.username}"
                    required="true">
                </h:inputText>
                <h:commandButton value="Register" action="#{register.update}">

                </h:commandButton>
            </h:panelGrid>

        </rich:popupPanel>
    </h:form>
</h:body>
</html>

Java 类

package com.example;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class Register implements Serializable {

    private static final long serialVersionUID = 1L;

    private User user;

    public Register() {
        user = new User();
    }

    public void submit() {
        FacesMessage message = new FacesMessage("Registration succesful!");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public void update() {
        FacesMessage message = new FacesMessage("Update succesful!");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public User getUser() {
        return user;
    }

}

User 类

 package com.example;

    import java.io.Serializable;
    import java.util.Date;

    public class User implements Serializable {

        private static final long serialVersionUID = 1L;

        private Long id;
        private String username;
        private String password;
        private String email;
        private Date birthdate;
        public Long getId() {
            return id;
        }
        public void setId(Long id) {
            this.id = id;
        }
        public String getUsername() {
            return username;
        }
        public void setUsername(String username) {
            this.username = username;
        }
        public String getPassword() {
            return password;
        }
        public void setPassword(String password) {
            this.password = password;
        }
        public String getEmail() {
            return email;
        }
        public void setEmail(String email) {
            this.email = email;
        }
        public Date getBirthdate() {
            return birthdate;
        }
        public void setBirthdate(Date birthdate) {
            this.birthdate = birthdate;
        }

    }

根据 Arjan Tijms 的建议进行了更新

<h:form id="form2">
    <rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()">
        <f:facet name="header">
            <h:outputText value="Simple popup panel" />
        </f:facet>
        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">
                X
            </h:outputLink>
        </f:facet>

        <h:panelGrid columns="3">
            <h:outputLabel for="username2">Username</h:outputLabel>
            <h:inputText id="username2" value="#{register.user.username}" required="true"></h:inputText>
            <h:commandButton value="Register" action="#{register.update}">
                <f:ajax execute="@form" render=":form" />
            </h:commandButton>
        </h:panelGrid>

    </rich:popupPanel>
</h:form>

原文

I have a JSF page with a few fields. I followed this tutorial from BalusC and all is good. I then added RichFaces support to it, which is working fine. I can see popups etc working.

Now what I am trying to do is that once a person has been registered, I want to show the name in the popup (this is also fine I can see that in the popup). Then I want to be able to change that name inside the popup and have that reflected in the parent, but I have no clue how to do that. Please have a look.

XHTML Page

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>Registration</title>
</h:head>
<h:body>
    <h:form>
        <h:panelGrid columns="3">
            <h:outputLabel for="username">Username</h:outputLabel>
            <h:inputText id="username" value="#{register.user.username}"
                required="true">
                <f:ajax event="blur" render="usernameMessage" />
            </h:inputText>
            <h:message id="usernameMessage" for="username" />

            <h:outputLabel for="password">Password</h:outputLabel>
            <h:inputSecret id="password" value="#{register.user.password}"
                required="true" redisplay="true">
                <f:ajax event="blur" render="passwordMessage" />
            </h:inputSecret>
            <h:message id="passwordMessage" for="password" />

            <h:outputLabel for="email">Email</h:outputLabel>
            <h:inputText id="email" value="#{register.user.email}"
                required="true">
                <f:ajax event="blur" render="emailMessage" />
            </h:inputText>
            <h:message id="emailMessage" for="email" />

            <h:outputLabel for="birthdate">Birthdate (yyyy-MM-dd)</h:outputLabel>
            <h:inputText id="birthdate" value="#{register.user.birthdate}">
                <f:convertDateTime pattern="yyyy-MM-dd" />
                <f:ajax event="blur" render="birthdateMessage" />
            </h:inputText>
            <h:message id="birthdateMessage" for="birthdate" />

            <h:panelGroup />
            <h:commandButton value="Register" action="#{register.submit}">
                <f:ajax execute="@form" render="@form" />
            </h:commandButton>
            <h:commandButton value="Edit Name in Popup">
                <rich:componentControl target="popup" operation="show" />
            </h:commandButton>
            <h:messages globalOnly="true" layout="table" />
        </h:panelGrid>
        <rich:popupPanel id="popup" modal="true" resizeable="true"
            onmaskclick="#{rich:component('popup')}.hide()">
            <f:facet name="header">
                <h:outputText value="Simple popup panel" />
            </f:facet>
            <f:facet name="controls">
                <h:outputLink value="#"
                    onclick="#{rich:component('popup')}.hide(); return false;">
                    X
                </h:outputLink>
            </f:facet>

            <h:panelGrid columns="3">
                <h:outputLabel for="username2">Username</h:outputLabel>
                <h:inputText id="username2" value="#{register.user.username}"
                    required="true">
                </h:inputText>
                <h:commandButton value="Register" action="#{register.update}">

                </h:commandButton>
            </h:panelGrid>

        </rich:popupPanel>
    </h:form>
</h:body>
</html>

Java class

package com.example;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class Register implements Serializable {

    private static final long serialVersionUID = 1L;

    private User user;

    public Register() {
        user = new User();
    }

    public void submit() {
        FacesMessage message = new FacesMessage("Registration succesful!");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public void update() {
        FacesMessage message = new FacesMessage("Update succesful!");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public User getUser() {
        return user;
    }

}

User Class

 package com.example;

    import java.io.Serializable;
    import java.util.Date;

    public class User implements Serializable {

        private static final long serialVersionUID = 1L;

        private Long id;
        private String username;
        private String password;
        private String email;
        private Date birthdate;
        public Long getId() {
            return id;
        }
        public void setId(Long id) {
            this.id = id;
        }
        public String getUsername() {
            return username;
        }
        public void setUsername(String username) {
            this.username = username;
        }
        public String getPassword() {
            return password;
        }
        public void setPassword(String password) {
            this.password = password;
        }
        public String getEmail() {
            return email;
        }
        public void setEmail(String email) {
            this.email = email;
        }
        public Date getBirthdate() {
            return birthdate;
        }
        public void setBirthdate(Date birthdate) {
            this.birthdate = birthdate;
        }

    }

Updated bit after Arjan Tijms' suggestion

<h:form id="form2">
    <rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()">
        <f:facet name="header">
            <h:outputText value="Simple popup panel" />
        </f:facet>
        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">
                X
            </h:outputLink>
        </f:facet>

        <h:panelGrid columns="3">
            <h:outputLabel for="username2">Username</h:outputLabel>
            <h:inputText id="username2" value="#{register.user.username}" required="true"></h:inputText>
            <h:commandButton value="Register" action="#{register.update}">
                <f:ajax execute="@form" render=":form" />
            </h:commandButton>
        </h:panelGrid>

    </rich:popupPanel>
</h:form>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幻想少年梦 2024-12-07 08:36:12

只需将 rich:popupPanel 移出主窗体，并为其提供自己的窗体即可。如果您随后提交对话框中的表单，整个页面将重新呈现。

由于支持 bean 是视图范围的，因此之前的用户数据将被保留，并且只有用户名将根据您在对话框中输入的内容进行更新。

此外，您可以通过 AJAX 提交表单，为主表单提供一个 ID 并重新渲染它。

例如，

<rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()">
    <f:facet name="header">Simple popup panel</f:facet>
    <h:form id="form2">
         <h:outputLabel for="username2" value="Username"/>
         <h:inputText id="username2" value="#{register.user.username}" required="true"/>
         <a4j:commandButton value="do" action="#{register.update}" render="form" oncomplete="#{rich:component('popup')}.hide()"/>                 
     </h:form>
</rich:popupPanel>

我在这里使用了 A4J commandButton ，它有一个方便的 oncomplete 属性。您可以使用标准 ajax 标记上的 onevent 属性执行类似的操作，但使用的代码稍多一些。

请注意，如果主表单存在验证错误，则在没有任何对策的情况下，无法从其他表单进行更新（如果遇到这种情况，最好针对该特定情况提出一个新问题）。

Just move the rich:popupPanel out of the main form, and give it it's own form. If you then submit the form that's in the dialog, the entire page will re-render.

Since the backing bean is view scoped, the previously user data will be retained and only the user name will be updated with whatever you entered in the dialog.

Additionally, you can submit the form via AJAX, give the main form an ID and re-render that.

E.g.

<rich:popupPanel id="popup" modal="true" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()">
    <f:facet name="header">Simple popup panel</f:facet>
    <h:form id="form2">
         <h:outputLabel for="username2" value="Username"/>
         <h:inputText id="username2" value="#{register.user.username}" required="true"/>
         <a4j:commandButton value="do" action="#{register.update}" render="form" oncomplete="#{rich:component('popup')}.hide()"/>                 
     </h:form>
</rich:popupPanel>

I used the A4J commandButton here which has a convenient oncomplete attribute. You can do a similar thing with the onevent attribute on the standard ajax tag, but using slightly more code.

Do note that if the main form has validation errors, it's without any counter measures impossible to update from the other form (if you run into that, you'd best open a new question for that particular situation).

回复收藏 0 原文