2

完全な住所が認識された場合、codeAddress()GoogleマップのJavaScript APIを介して住所を完成させ、グローバルな js-variable を設定するjs関数があります。valid = trueまた<p:inputText>、完成したアドレスで a の値を更新します。

<p:commandButton>、欲しいものがある

  1. 実行するcodeAddress()
  2. valid = trueフォームを送信すると、住所が<p:inputText>保存されaddressBean
  3. 次のページに移動
  4. valid = falsejsf-validator メッセージをトリガーする場合

valid残念ながら、次のページかどうかを判断するための重要な値として、私の設定はまだ機能しません。値が Bean に送信されるのが遅すぎるようです。

これは私のjsfコードです:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
        <script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
</h:head>
<h:body>
    <h:outputScript name="jsf.js" library="javax.faces" target="head"/>
    <h:outputScript library="js" name="bugMaps.js" />
    <body onload="initialize()" />
    <h:form id="addressForm" onsubmit="codeAddress();">
        <p:inputText id="address" required="true"
            validatorMessage="Please enter a valid address." validator="#{addressBean.validate()}">
            <p:ajax update=":addressForm:addressValidate" />
        </p:inputText>
        <h:message id="addressValidate" for=":addressForm:address"/>
        <p:commandButton value="submit"
            onclick="codeAddress();"/>
        <p:inputText id="fullAddress" value="#{addressBean.fullAddress}" />
        <p:inputText id="valid" value="#{addressBean.valid}" />
    </h:form>   
</h:body>
</html>

これは bugMaps.js です:

var geocoder;
var map;
var valid;

function initialize() {
    geocoder = new google.maps.Geocoder();
}

function codeAddress() {

    var address = (document.getElementById('addressForm:address').value + ", Germany");
    geocoder.geocode({'address' : address},function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latLong = results[0].geometry.location;
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            var country, postal_code, locality, street_number, route;
            for (i = 0; i < results[0].address_components.length; ++i) {
                var component = results[0].address_components[i];
                if (!locality && component.types.indexOf("locality") > -1)
                    locality = component.long_name;
                else if (!postal_code && component.types.indexOf("postal_code") > -1)
                    postal_code = component.long_name;
                else if (!country && component.types.indexOf("country") > -1)
                    country = component.long_name;
                else if (!street_number && component.types.indexOf("street_number") > -1)
                    street_number = component.long_name;
                else if (!route && component.types.indexOf("route") > -1)
                    route = component.long_name;
            }

            if (typeof latLong != "undefined"
                && typeof latitude != "undefined"
                && typeof longitude != "undefined"
                && typeof route != "undefined"
                && typeof street_number != "undefined"
                && typeof postal_code != "undefined"
                && typeof locality != "undefined"
                && typeof country != "undefined"){
                valid = true;

            }
            else{
                valid=false;
            };
            document.getElementById('addressForm:fullAddress').value = results[0].formatted_address;

            jsfSubmit();

        }
        else{
            alert('Geocode was not successful for the following reason: '+ status);
            valid=false;

        }
    }); 
};

function navigateToAnotherPage(data){
    if(valid){
        document.location.href='nextPage.xhtml';
    }
};

function jsfSubmit(){
    jsf.ajax.request(this, event, {execute:"@form", onevent:navigateToAnotherPage});
    alert("nothing"); // FIXME: without this useful alert bean keeps old values and display them on nextPage
};

これは私の AddressBean.java です:

package hoho.main.managebean;

import java.io.Serializable;

import javax.enterprise.context.SessionScoped;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;
import javax.inject.Named;

import com.sun.faces.util.MessageFactory;

@Named
@SessionScoped
public class AddressBean implements Serializable {

    private static final long serialVersionUID = 1L;
    private String fullAddress;
    private boolean valid = false;

    public void validate(FacesContext context,
            UIComponent toValidate, Object value) {
        if(!valid){
              String client = toValidate.getClientId(context);  
              FacesMessage msg = MessageFactory.getMessage(UIInput.REQUIRED_MESSAGE_ID, client);  
              throw new ValidatorException(msg);
        }
    }

    public String getFullAddress() {
        return fullAddress;
    }

    public void setFullAddress(String fullAddress) {
        this.fullAddress = fullAddress;
    }

    public boolean isValid() {
        return valid;
    }

    public void setValid(boolean valid) {
        this.valid = valid;
    }

}

これは nextPage.xhtml です。

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>

    <h:outputText value="#{addressBean.fullAddress}" />

</h:body>
</html>
4

1 に答える 1

2

jsf.ajax.requestJavaScript で使用して、フォームを送信できます。例は

        function navigateToAnotherPage(data){
            //When the request is completed, we are safe to navigate to another page.
            if(data.status == "success"){
                alert("callback is invoked");
                //Go to another page
                document.location.href='destpage.xhtml';
            }
        }

        function jsfSubmit(){
            alert("Do your logic here");
            jsf.ajax.request(this, event, {execute:"@form", onevent:navigateToAnotherPage});
        }

そして、この関数をjsfコンポーネントにバインドします

        <h:commandButton type="button" value="javascriptSubmit" onclick="jsfSubmit()"/>

完全なリファレンスはこちら: http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/js-api/symbols/jsf.ajax.html

ただし、javascript を使用してバッキング Bean メソッドを呼び出す方法がわかりません。だから私はいつも2つのボタンを使っています。最初のボタンをクリックするとJavaScriptプロセスロジックが発生し、その後、フォームを送信して別のページに移動する2番目のボタンでクリックイベントがトリガーされます。もちろん、2 番目のボタンは ですdisplay:none。また、それはちょっと単純です。

さらに、バッキング Bean が更新される前に検証が常に行われるため、検証は機能しません。var validjavascript内の javascript とboolean validバッキング Bean 内の の間にリンクが表示されません。ただし、<p:inputText id="valid" value="#{addressBean.valid}" />JavaScript を使用して更新し、入力フィールドを送信し、バッキング Beanvalidを更新し、このブール変数を検証に使用すると、検証は常に失敗します。これは、 beforeboolean validが更新され (たとえば true)、検証メソッドが最初に呼び出されるためです (そのため、検証メソッドは古いvalid.

ウォークアラウンドは、バリデーターを<p:inputText id="valid" value="#{addressBean.valid}" />ではなくにアタッチすることです<p:inputText id="address" required="true"...../>valueこれで、 inを使用して入力フィールドの値を取得できますvalidate(FacesContext context, UIComponent toValidate, Object value)。ここの値は、ページの入力フィールドに入力した (または JavaScript で入力した) 値です (したがって、常に最新です)。

validこの時点では、バッキング Bean の はまだ更新されていないことに注意してください。検証が OK の場合は、valid更新され、value取得したばかりに設定されます。検証が失敗した場合、validは更新されません。

つまり、フローは 0. コンポーネント ツリーを構築/復元します。1. 変換、検証。2. バッキング Bean の値を更新します。3. バッキング Bean メソッドを呼び出します。 4. ページをレンダリングします。

于 2013-02-06T04:28:04.200 に答える