字段验证成功后阻止 UI

我使用JSF 2.2和Primefaces 5.3。我必须创建一个表单，该表单将像这样工作：

按下按钮后：

如果填写了所有必填字段，则只要发送数据，页面就会被阻止（由于向数据库发送数据）。
如果未填写其中一个必填字段，则不会阻止该页面。

你能告诉我该怎么做吗？

这是一个 xhtml 页面：

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head></h:head>
    <h:body id="page">
        <f:metadata>
            <f:viewAction action="#{loginController.start()}" />
        </f:metadata>  
        <p:growl id="messages" showDetail="true" />
        <h:form>
            <p:panelGrid id="panel" columns="2" styleClass="ui-noborder" columnClasses="rightalign,leftalign">                      
                <p:outputLabel for="databaseName" value="Database name:" />
                <p:inputText id="databaseName" required="true" value="#{userDatabase.name}" />
                <p:outputLabel for="databaseFile" value="File:" />
                <p:fileUpload id="databaseFile" required="true" fileLimit="1" update="file messages" fileUploadListener="#{dataController.handleFileUpload}" mode="advanced" dragDropSupport="true" sizeLimit="1000000000" uploadLabel="Upload" cancelLabel="Delete" allowTypes="/(.|/)(txt|binetflow)$/" />              
                <h:panelGroup />
                <h:outputText id="fileDescription" value="#{dataController.fileName}" />                        
                <p:commandButton id="buttonSend" value="Send" update="messages" action="#{dataController.send()}" />                        
            </p:panelGrid>
            <p:blockUI block="page" trigger="buttonSend">
                Sending of the data...              
            </p:blockUI>            
        </h:form>
    </h:body>   
</html>

这是一个 CDI 豆：

package com.system.controller;
import java.io.Serializable;
import java.util.logging.Logger;
import javax.enterprise.context.RequestScoped;
import javax.enterprise.inject.Produces;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.view.ViewScoped;
import javax.inject.Inject;
import javax.inject.Named;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;
import com.system.model.UserDatabase;
import com.system.service.DataService;
@Named
@ViewScoped
public class DataController implements Serializable {
    private static final long serialVersionUID = 1383572529241805730L;
    public void handleFileUpload(FileUploadEvent event){
        uploadFile=event.getFile(); 
        FacesMessage message = new FacesMessage("Successful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);        
    }
    public String getFileName(){
        if(uploadFile==null) return "";
        else return uploadFile.getFileName();               
    }
    public void send(){
        if(uploadFile==null){
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "The file isn't uploaded", "You should upload a file"));
        }
        else{
            //Sending the data to the database... (tha page should be blocked)
            try {
                Thread.sleep(5000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            //After successful of sending the data, the page should be unlocked.
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "The data has been added.", ""));           
        }
    }
    @Named
    @Produces
    @RequestScoped
    private UserDatabase userDatabase=new UserDatabase();  
    @Inject
    private DataService dataService;
    @Inject
    private Logger log;
    private UploadedFile uploadFile;
}

当然，上面的代码可以工作，但是每次按下按钮时页面都会被阻止（即使字段未填写）。我想我应该在p:blockUI组件中使用trigger的widgetVar，但我不知道怎么做，也许我错了。对我来说最好的方法是如果我可以从 CDI bean 中的 send 方法阻止/解锁页面，但我不知道这是否可能，除此之外 - 这不是必需的。每种方式都会对我有所帮助。

终于找到了解决方案。这些是我所做的步骤：

我在 blockUI 组件中使用了trigger的widgetVar属性 istead：

<p:blockUI block="page" widgetVar="widgetBlock">
    Sending of the data...          
</p:blockUI>

我在 DataController bean 中创建了自己的验证方法：

public boolean isValidation(){
    if(uploadFile==null || userTable.getName()==null || userTable.getName().trim().equals("")) return false;
    else return true;
}

我添加了命令按钮的onstart（我调用我的验证方法，如果我得到true，我会阻止页面）和oncomplete（我解锁页面的位置）：

<p:commandButton id="buttonSend" value="Send" action="#{dataController.send()}" update="messages" 
                 onstart="if(#{dataController.validation}){PF('widgetBlock').show()}" 
                 oncomplete="PF('widgetBlock').hide()" />

我将命令按钮id放在文件上传组件中的update属性中。除此之外，我从文件上传中删除了require属性：

<p:fileUpload id="file" 
              fileLimit="1"
              update="buttonSend fileDescription messages" 
              fileUploadListener="#{dataController.handleFileUpload}" 
              mode="advanced" dragDropSupport="true" sizeLimit="1000000000" 
              uploadLabel="Upload" cancelLabel="Delete" allowTypes="/(.|/)(txt|binetflow)$/" />               
<h:panelGroup />

我也从inputtext组件中删除了require属性并添加了<p:ajax>标签（我删除了此属性，因为<p:ajax>标签无法像我想要的那样与此属性一起使用，请在此处查看我的帖子）：
```
<p:inputText  id="tableName" value="#{userTable.name}" >
    <p:ajax event="keyup" update="buttonSend" />                    
</p:inputText>
```

最后，我将字段的验证从 xhtml 页面移动到 bean 中的send方法DataController：

public void send(){             
    boolean validation=true;
    if(userTable.getName()==null || userTable.getName().trim().equals("")){
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "The name field isn't filled", "You should fill this field"));
        validation=false;
    }
    if(uploadFile==null){
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "The file isn't uploaded", "You should upload a file"));
        validation=false;
    }       
    if(validation){
        //Sending the data to the database... (tha page is blocked)
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //After successful of sending the data, the page is unlocked.
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "The data has been added.", ""));           
    }
}

你可以像这样检查验证是否失败

只需将 rendered="#{facesContext.validationFailed}" 附加到您的块UI，并在提交表单时更新它

相关内容

最新更新

热门标签：