Question

我们正在开发一个银行应用程序，我们使用JSF，Primefaces作为主要技术。在开发页面时，我们遇到了与页面验证相关的问题。该功能用于进行金融交易。点击“来自帐户”中的帐户号码＆＃39;下拉列表，它使用AJAX获取帐户余额并在屏幕上显示用户。选择＆＃39;来自帐户＆＃39;，如果我们提交屏幕，它会保留下拉列表中的值，但会清除使用AJAX派生的余额字段。我的要求是保留该字段以及更改下拉列表，相应地更改值。代码如下。

test1.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>:: Test1 ::</title>
    <script>
    </script>
    <style>
    </style>
    <link rel="stylesheet" type="text/css" href="../resources/css/template.css" />
</h:head>
<h:body>
<h:form id="mainForm">
<div align="center">
<p:panel id="txnPanel" header="Accont Transfer" style="width: 70%; text-align:left;" >
    <p:fieldset>
        <p:panelGrid columns="4" styleClass="gridlessTable" style="width:100%;margin:0px auto;" columnClasses="headerColumn,separatorColumn,dataColumn,errorColumn">
            <p:outputLabel for="fromAccount" value="From Account" styleClass="lables" />
            <p:outputLabel value=":" />
            <p:selectOneMenu id="fromAccount" value="#{testView.fromAccount}" required="true" requiredMessage="Please Select From Account">
                <p:ajax listener="#{testView.getFromAccountDetails()}" update="availableBalance" event="change"/>
                <f:selectItem itemValue="" itemLabel="----- Select Account -----" />
                <f:selectItems value="#{test1View.accountList}" var="account" itemLabel="#{account}" itemValue="#{account}" />
            </p:selectOneMenu>
            <p:message for="fromAccount" styleClass="error"/>

            <p:outputLabel for="availableBalance" value="Available Balance" styleClass="lables"/>
            <p:outputLabel value=":" />
            <p:outputLabel id="availableBalance" value="#{testView.fromAccountBalance}"/>
            <p:spacer />
        </p:panelGrid>
    </p:fieldset>
    <p:fieldset>
        <p:panelGrid columns="4" styleClass="gridlessTable" style="width:100%;margin:0px auto;" columnClasses="headerColumn,separatorColumn,dataColumn,errorColumn">
            <p:outputLabel for="toAccount" value="To Account" styleClass="lables" />
            <p:outputLabel value=":" />
                <p:selectOneMenu id="toAccount" value="#{testView.toAccount}" required="true" requiredMessage="Please Select To Account">
                    <f:selectItem itemValue="" itemLabel="----- Select Account -----" />
                <f:selectItems value="#{test1View.accountList}" var="account" itemLabel="#{account}" itemValue="#{account}" />
                </p:selectOneMenu>
            <p:message for="toAccount" styleClass="error" />
        </p:panelGrid>
    </p:fieldset>
    <p:fieldset>
        <p:panelGrid columns="4" styleClass="gridlessTable" style="width:100%;margin:0px auto;" columnClasses="headerColumn,separatorColumn,dataColumn,errorColumn">
            <p:outputLabel for="txnAmount" value="Amount" styleClass="lables"  required="true" requiredMessage="Please Enter Amount"/>
            <p:outputLabel value=":" />
            <p:inputText id="txnAmount" value="#{testView.txnAmount}" size="20" maxlength="50" styleClass="amountInput"/>
            <p:message for="txnAmount" styleClass="error" />

            <p:outputLabel for="narration" value="Narration" styleClass="lables"  required="true" requiredMessage="Please Enter Narration"/>
            <p:outputLabel value=":" />
            <p:inputText id="narration" value="#{testView.narration}" size="35" maxlength="50"/>
            <p:message for="narration" styleClass="error" />
        </p:panelGrid>
    </p:fieldset>

    <div align="center">
        <h:panelGrid columns="2" cellpadding="2">
            <p:commandButton value="Submit"
                type="submit"
                action="#{testView.doTransaction()}" validateClient="true" id="submitButton" ajax="false" update="txnPanel">
            </p:commandButton>
        </h:panelGrid>
    </div>
</p:panel>
</div>
</h:form>
</h:body>
</html>

Test1View.java

import java.util.ArrayList;

public class Test1View{

    private ArrayList<String> accountList = null;

    public Test1View(){
        accountList = new ArrayList<String>();
        accountList.add("ABC");
        accountList.add("DEF");
        accountList.add("GHI");
        accountList.add("JKL");
        accountList.add("MNO");
        accountList.add("PQR");
        accountList.add("STU");
        accountList.add("VWX");
        accountList.add("YZA");
    }

    public ArrayList<String> getAccountList() {
        return accountList;
    }

    public void setAccountList(ArrayList<String> accountList) {
        this.accountList = accountList;
    }

}

TestView.java

import java.math.BigDecimal;

public class TestView{

    private String fromAccount;
    private String toAccount;
    private String narration;
    private BigDecimal txnAmount;
    private BigDecimal fromAccountBalance;

    public BigDecimal getFromAccountBalance() {
        return fromAccountBalance;
    }

    public void setFromAccountBalance(BigDecimal fromAccountBalance) {
        this.fromAccountBalance = fromAccountBalance;
    }

    public String getFromAccount() {
        return fromAccount;
    }

    public void setFromAccount(String fromAccount) {
        this.fromAccount = fromAccount;
    }

    public String getToAccount() {
        return toAccount;
    }

    public void setToAccount(String toAccount) {
        this.toAccount = toAccount;
    }

    public String getNarration() {
        return narration;
    }

    public void setNarration(String narration) {
        this.narration = narration;
    }

    public BigDecimal getTxnAmount() {
        return txnAmount;
    }

    public void setTxnAmount(BigDecimal txnAmount) {
        this.txnAmount = txnAmount;
    }

    public void getFromAccountDetails() {
        if(fromAccount != null && !fromAccount.equals("")){
            fromAccountBalance = new BigDecimal(Math.random() * 4867.0);
        }
        else{
            fromAccountBalance = null;
        }
    }

    /**
     * Do own account transaction.
     * 
     * @return the string
     */
    public String doTransaction(){
        String returnValue = null;

        return returnValue;
    }

}

template.css

.ui-widget-content.ui-datatable-even {
    background: #FFFFFF; !important;
}

.ui-outputlabel.ui-widget.lables {
    font-weight: bold !important;
}

.amountRed {
    color: #b70808 !important;
}

.amountInput {
    text-align: right !important;
    font-weight: normal !important;
}

.gridlessTable tr, .gridlessTable td {
    border: none !important;
}

.ui-inputtext {
    font-weight: normal !important;
}
.headerColumn{
    width: 24% !important;
    height:25px !important;
    text-align: left;
}
.separatorColumn{
    width: 1% !important;
    height:auto !important;
    text-align: center !important;
}
.dataColumn{
    width: 40% !important;
    height:25px !important;
    text-align: left !important;
}
.errorColumn{
    width: 30% !important;
    height:auto !important;
    text-align: left !important;
}

此处附有截图。

After the page is loaded After the account is selected After submitted with only From Account Selected 01. http://i.stack.imgur.com/VI6OA.jpg 02. http://i.stack.imgur.com/6k33h.jpg 03. http://i.stack.imgur.com/qguni.jpg

在JSF Primefaces中验证失败时，使用AJAX呈现的outputLables不会被保留

0 个答案: