Home   Single Page

データソースを 何時UI にロードするか

データバィンディングはイベントもしくはユーザーの活動により発動されます。このように、ZUML アノテーション表現の中で load-when タグでデータバィンディングマネージャーに何時、データソースからコンポーネントの属性にデータをロードするかを知らせます。

<component-name attribute-name="@{bean-name.attribute-name,

load-when='component-id.event-name'} " />

複数の定義も可能で、1つずつ順番に呼ばれます。

以下のサンプルでは、 first name もしくは last name が更新されたときに Person の fullname が更新される例をデモします。

データバィンディングマネージャーは fullName という id の Label の value を person.fullName から次のタイミングでリロードします。そのタイミングは firstName もしくは lastName という id の Textbox の value のどちらかが変更されたとき、言い換えれば、 onChange イベントが発動されたときです。

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>

<window>
<zscript>
//prepare the example person object
Person person = new Person();
person.setFirstName("George");
person.setLastName("Bush");
</zscript>

<grid width="400px">
<rows>
<row> First Name: 
<textbox id="firstName" value="@{person.firstName}"/>
        </row>        
<row> Last Name: 
<textbox id="lastName" value="@{person.lastName}"/>
        </row>        
<row> Full Name: 
<label id="fullName" value="@{person.fullName,
load-when='firstName.onChange,lastName.onChange'}"/>
        </row>        
</rows>
</grid>

</window>