Fragment"

From Documentation
(Reconstruct the headlines)
Line 12: Line 12:
  
 
= Example =
 
= Example =
 +
<source lang="xml">
 +
<zk>
 +
    <fragment viewModel="@id('vm') @init('org.zkoss.fragment.demo.VM2')" validationMessages="@id('vmsgs')"
 +
              form="@id('fx') @load(vm) @save(vm, before='submit') @validator(vm.formValidator)"
 +
              prop1="@bind(fx.prop1)" prop1err="@bind(vmsgs['fkey1'])"
 +
              prop2="@bind(fx.prop2)" prop2err="@bind(vmsgs['fkey2'])"><![CDATA[
 +
        <p><input type="text" value="@bind(prop1)"/><span textContent="@load(prop1err)"/></p>
 +
        <p><input type="text" value="@bind(prop2)"/><span textContent="@load(prop2err)"/></p>
 +
        <button onclick="@command('submit')">Submit</button>
 +
    ]]></fragment>
 +
</zk>
 +
</source>
  
== Data Binding ==
+
= Data Binding =
 
By binding the properties of ViewModel to a Fragment component, you can use the ZK MVVM data binding syntax on the native HTML elements.
 
By binding the properties of ViewModel to a Fragment component, you can use the ZK MVVM data binding syntax on the native HTML elements.
 
<source lang="xml" >
 
<source lang="xml" >
Line 32: Line 44:
 
</source>
 
</source>
  
== Shadow Elements ==
+
= Shadow Elements =
 
In this example, we use <tt>if</tt> and <tt>forEach</tt> tags together for condition and collection rendering.
 
In this example, we use <tt>if</tt> and <tt>forEach</tt> tags together for condition and collection rendering.
  
Line 64: Line 76:
 
</source>
 
</source>
  
== Validation ==
+
= Validation =
 
Here we use form binding and a form validator to validate the form once for all.
 
Here we use form binding and a form validator to validate the form once for all.
  

Revision as of 04:40, 22 June 2017

WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!


Fragment

Employment/Purpose

Fragment is a ZK component that let developers combine native HTML elements with ZK data binding syntax to make the static page to be dynamic.

Example

<zk>
    <fragment viewModel="@id('vm') @init('org.zkoss.fragment.demo.VM2')" validationMessages="@id('vmsgs')"
              form="@id('fx') @load(vm) @save(vm, before='submit') @validator(vm.formValidator)"
              prop1="@bind(fx.prop1)" prop1err="@bind(vmsgs['fkey1'])"
              prop2="@bind(fx.prop2)" prop2err="@bind(vmsgs['fkey2'])"><![CDATA[
        <p><input type="text" value="@bind(prop1)"/><span textContent="@load(prop1err)"/></p>
        <p><input type="text" value="@bind(prop2)"/><span textContent="@load(prop2err)"/></p>
        <button onclick="@command('submit')">Submit</button>
    ]]></fragment>
</zk>

Data Binding

By binding the properties of ViewModel to a Fragment component, you can use the ZK MVVM data binding syntax on the native HTML elements.

<zk>
    <fragment viewModel="@id('vm') @init('org.zkoss.zktest.test2.F85_ZK_3681_Command_VM')"
              status="@bind(vm.status)"><![CDATA[
        <div>
            <input type="checkbox" onchange="@command('onCheck', checked=event.checked)" />
            Check this checkbox: <span textContent="@load(status)"/>
        </div>

        <div>
            <button onclick="@global-command('callGlobal', text='Hello', num=1)">Call global (1)</button>
            <button onclick="@global-command('callGlobal', text='World', num=2)">Call global (2)</button>
        </div>
    ]]></fragment>
</zk>

Shadow Elements

In this example, we use if and forEach tags together for condition and collection rendering.

<zk>
    <fragment viewModel="@id('vm') @init('org.zkoss.zktest.test2.F85_ZK_3681_Shadow_VM')"
        issues="@bind(vm.issues)"><![CDATA[
        <section>
            <h1>My Issue List</h1>
            <ul>
                <forEach items="@load(issues)">
                    <!-- There's a pre-defined variable "each" for convenience. -->
                    <li>
                        <!-- @bind(each) is wrong because each is just a temp variable in loops. -->
                        <input type="checkbox" checked="@load(each.isDone)" />
                        <if test="@load(each.isDone)">
                            <strike>[<span textContent="@load(each.id)"/>]
                            <span textContent="@load(each.description)"/></strike>
                        </if>
                        <!-- No else for now. -->
                        <if test="@load(!each.isDone)">
                            [<span textContent="@load(each.id)"/>]
                            <span textContent="@load(each.description)"/>
                        </if>
                    </li>
                </forEach>
            </ul>
        <section>
    ]]></fragment>
</zk>

Validation

Here we use form binding and a form validator to validate the form once for all.

<zk>
    <fragment viewModel="@id('vm') @init('foo.BarVM')" validationMessages="@id('vmsgs')"
     form="@id('fx') @load(vm.currentUser) @save(vm.currentUser, before='submit') @validator('formBeanValidator', prefix='p_')"
     name="@bind(fx.name)" nameerror="@bind(vmsgs['p_name'])"><![CDATA[
     <input type="text" value="@bind(name)"/><span textContent="@load(nameerror)"/>
     <button onclick="@command('submit')">Submit</button>
    ]]></fragment>
</zk>

This component also provides a new @jsvalidator(validation_function_name) syntax to validate at client-side by evaluating your custom JavaScript function.

<zk>
    <fragment viewModel="@id('vm') @init('foo.BarVM')" someprop="@bind(vm.prop1)"><![CDATA[
        <input type="text" value="@bind(someprop) @jsvalidator('validateExample')"/>
        <span textContent="@load(vmsgs['foo'])"/>
        <script type="text/javascript">
        // @param val The value of user input
        // @param vmsgs A object of validation message holder
        // @return boolean true if it is valid
        function validateExample(val, vmsgs) {
            var isValid = someValidationProcess(val);
            vmsgs['foo'] = isValid ? '' : 'Invalid value';
            return isValid;
        }
        </script>
    ]]></fragment>
</zk>

Properties

  • content: specify the content of this component.
  • src: specify the URI of an external content file. The file encoding is assumed to be UTF-8.

Supported Events

Name
Event Type
onRecover
Event: Event

Represents an event sent back to the server caused by an offline recovery.

Supported Children

None

Use Cases

Version Description Example Location
8.5+ Data binding, Shadow elements Client Binding with ZK MVVM for your eyes only
8.5+ Validation, Event handling  

Version History

Last Update : 2017/06/22


Version Date Content
8.5 2017/09/21 Add the new Fragment component
     



Last Update : 2017/06/22

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.