Fragment"

From Documentation
m
 
(12 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Template:UnderConstruction}}
+
{{ZKComponentReferencePageHeader}}
  
{{ZKComponentReferencePageHeader}}
 
 
= Fragment =
 
= Fragment =
 
* Demonstration: N/A
 
* Demonstration: N/A
Line 7: Line 6:
 
* JavaScript API: <javadoc directory="jsdoc">zkmax.wgt.Fragment</javadoc>
 
* JavaScript API: <javadoc directory="jsdoc">zkmax.wgt.Fragment</javadoc>
 
* Style Guide: N/A
 
* Style Guide: N/A
* {{ZK EE}}
+
{{ZK EE}}
  
 
= Purpose =
 
= Purpose =
<tt>Fragment</tt> is a ZK component which developers can combine native HTML elements with ZK data binding syntax to make the static page to be dynamic.
+
<code>Fragment</code> is a ZK component which developers can combine native HTML elements with ZK data binding syntax to make the static page to be dynamic.
 +
 
 +
== Alternative==
 +
To manipulate HTML elements dynamically, ZK supports several ways in addition to this component. Please refer to [[ZK_Developer%27s_Reference/UI_Patterns/HTML_Tags]] for more details.
  
 
= Example =
 
= Example =
Line 28: Line 30:
  
 
= Data Binding =
 
= Data Binding =
With Fragment Component, you can bind the properties of ViewModel. For instance, you can use ZK MVVM data binding to access the ViewModel indirectly on the native HTML elements.
+
With Fragment Component, you can bind the properties of ViewModel. For instance, you can use ZK MVVM data binding to access the ViewModel on the native HTML elements.
 +
== Enclose with CDATA==
 +
Remember to mark the fragment content with the CDATA section to avoid being parsed by server-side binder and causing problems:
 +
<syntaxhighlight lang='xml'>
 +
    <fragment><![CDATA[
 +
        ...
 +
    ]]></fragment>
 +
</syntaxhighlight>
 +
 
 +
== Supported Bindings ==
  
These are the supported annotations for now:
+
These are the supported annotations:
 
* '''@save'''
 
* '''@save'''
   syntax: @save([EL-expression])
+
   syntax: @save([limited EL-expression])
 
* '''@load'''
 
* '''@load'''
   syntax: @load([EL-expression])
+
   syntax: @load(limited EL-expression)
 
* '''@bind'''
 
* '''@bind'''
   syntax: @bind([EL-expression])
+
   syntax: @bind(limited EL-expression)
 
* '''@command'''
 
* '''@command'''
   syntax: @command([EL-expression], [arbitraryKey]=[EL-expression])
+
   syntax: @command(mybean.myproperty, [arbitraryKey]=[limited EL-expression])
 
* '''@global-command'''
 
* '''@global-command'''
   syntax: @global-command([EL-expression], [arbitraryKey]=[EL-expression])
+
   syntax: @global-command(mybean.myproperty, [arbitraryKey]=[limited EL-expression])
 +
 
 +
== Limited EL-expression ==
 +
Inside a fragment, it only supports partially, limited data binding expressions including bean dot notation, arithmetic operator, <code>!</code>, and <code>==</code>
  
 +
= Put HTML as text content =
 
This component also provides a virtual <code>textContent</code> attribute for HTML elements to insert data into the tag.  
 
This component also provides a virtual <code>textContent</code> attribute for HTML elements to insert data into the tag.  
  
Line 62: Line 77:
  
 
= 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 <code>if</code> and <code>forEach</code> tags together for condition and collection rendering.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 111: Line 126:
 
</source>
 
</source>
  
You can get the invalid message by assigning a self-defined key as an alias. In order to access invalidate messages by HTML elements, simply bind the messages onto Fragment properties.  
+
You can get the invalid message by assigning a self-defined key as an alias. In order to access invalidate messages by HTML elements, you can simply bind the messages onto Fragment properties.  
  
 
Here we can use form-binding and form validators to validate all the fields.
 
Here we can use form-binding and form validators to validate all the fields.
Line 127: Line 142:
  
 
== Client-side Property Validation ==
 
== Client-side Property Validation ==
This component also provides a new <code>@jsvalidator</code> running at client side, accepting custom JavaScript functions for validation. The benefit is that there is no need to send requests to the server for each validation. However, since the validation logic will be exposed at client side, some simple check, such as empty checking or range checking, is recommended. The usage is like <code>@validator</code> but it is effective only on applying to HTML elements.
+
This component also provides a new <code>@jsvalidator</code> running at client side, accepting custom JavaScript functions for validation. The benefit is that there is no need to send requests to the server for each validation. However, since the validation logic will be exposed at client side, some simple check, such as empty checking or range checking, is recommended. The usage is like <code>@validator</code> but it is effective only when applying HTML elements.
  
 
'''@jsvalidator'''
 
'''@jsvalidator'''
Line 135: Line 150:
 
The following is the definition of custom JavaScript function.
 
The following is the definition of custom JavaScript function.
 
  ValidationFunction(val, vmsgs)
 
  ValidationFunction(val, vmsgs)
  * val: The user input data.
+
  * val: The input data.
 
  * vmsgs:  
 
  * vmsgs:  
     The validation message holder object. You can add a invalidate message by adding a new property.  
+
     The validation message holder object. You can add an invalidate message by adding a new property.  
 
     If you want to clear the specific message, assign an empty string to the property.
 
     If you want to clear the specific message, assign an empty string to the property.
 
  * Returns: Boolean. True if the data is valid.
 
  * Returns: Boolean. True if the data is valid.
  
You can use an implicit object (vmsgs) to get the client-side invalid messages. The <tt>@jsvalidator</tt> has its own validation message holder not shared with server-side.
+
You can use an implicit object (vmsgs) to get the client-side invalid messages. The <code>@jsvalidator</code> has its own validation message holder not shared with server-side.
  
 
<source lang="xml">
 
<source lang="xml">
Line 148: Line 163:
 
         <input type="text" value="@bind(someprop) @jsvalidator('validateExample')"/>
 
         <input type="text" value="@bind(someprop) @jsvalidator('validateExample')"/>
 
         <span textContent="@load(vmsgs['foo'])"/>
 
         <span textContent="@load(vmsgs['foo'])"/>
        <script type="text/javascript">
+
    ]]></fragment>
 +
    <script type="text/javascript">
 
         function validateExample(val, vmsgs) {
 
         function validateExample(val, vmsgs) {
 
             var isValid = someValidationProcess(val);
 
             var isValid = someValidationProcess(val);
Line 154: Line 170:
 
             return isValid;
 
             return isValid;
 
         }
 
         }
        </script>
+
    </script>
    ]]></fragment>
 
 
</zk>
 
</zk>
 
</source>
 
</source>
Line 161: Line 176:
 
== The Differences Between @validator and @jsvalidator ==
 
== The Differences Between @validator and @jsvalidator ==
 
<div style="margin-left:auto;margin-right:auto;width:70%;">
 
<div style="margin-left:auto;margin-right:auto;width:70%;">
{| border="2" style="font-size:18; padding:10px;"
+
{| class='wikitable' | width="100%"
 
! Catalogue
 
! Catalogue
 
! @validator
 
! @validator
Line 183: Line 198:
 
# The validation message holders are not the same.
 
# The validation message holders are not the same.
  
For security concerns, we recommend you to use server-side <tt>@validator</tt> in most cases and choose client-side <tt>@jsvalidator</tt> if the validation needs an instant feedback such as password strength, number range, and so on.
+
For security concerns, we recommend you to use server-side <code>@validator</code> in most cases and choose client-side <code>@jsvalidator</code> if the validation needs an instant feedback such as password strength, number range, and so on.
  
 
= Event Handling =
 
= Event Handling =
  
The command of ViewModel can be invoked by attaching DOM events with <tt>@command</tt> or <tt>@global-command</tt> on HTML elements. Once the DOM event is triggered (i.g. clicked or changed), the command of ViewModel will be executed and receive the corresponding event object.
+
The command of ViewModel can be invoked by attaching DOM events with <code>@command</code> or <code>@global-command</code> on HTML elements. Once the DOM event is triggered (i.g. clicked or changed), the command of ViewModel will be executed and receive the corresponding event object.
  
 
You can get more details from the event object such as mouse cursor position, pressed keys, entered text, and selected text.  
 
You can get more details from the event object such as mouse cursor position, pressed keys, entered text, and selected text.  
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! ZK Event object
 
! ZK Event object
 
! DOM event
 
! DOM event
Line 258: Line 273:
 
=Supported Events=
 
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onRecover</tt></center>
+
| <center><code>onRecover</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
  
Line 273: Line 288:
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 282: Line 297:
 
| 8.5+
 
| 8.5+
 
| Data validation, Event handling
 
| Data validation, Event handling
| &nbsp;
+
| [https://www.zkoss.org/wiki/Small_Talks/2017/July/Advanced_Usage_of_Fragment_Component Advanced Usage of Fragment Component]
 
|}
 
|}
  
Line 288: Line 303:
 
{{LastUpdated}}
 
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 06:03, 5 February 2024

Fragment

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Purpose

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

Alternative

To manipulate HTML elements dynamically, ZK supports several ways in addition to this component. Please refer to ZK_Developer's_Reference/UI_Patterns/HTML_Tags for more details.

Example

ZKComRef Fragment Example.png

<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

With Fragment Component, you can bind the properties of ViewModel. For instance, you can use ZK MVVM data binding to access the ViewModel on the native HTML elements.

Enclose with CDATA

Remember to mark the fragment content with the CDATA section to avoid being parsed by server-side binder and causing problems:

    <fragment><![CDATA[
        ...
    ]]></fragment>

Supported Bindings

These are the supported annotations:

  • @save
 syntax: @save([limited EL-expression])
  • @load
 syntax: @load(limited EL-expression)
  • @bind
 syntax: @bind(limited EL-expression)
  • @command
 syntax: @command(mybean.myproperty, [arbitraryKey]=[limited EL-expression])
  • @global-command
 syntax: @global-command(mybean.myproperty, [arbitraryKey]=[limited EL-expression])

Limited EL-expression

Inside a fragment, it only supports partially, limited data binding expressions including bean dot notation, arithmetic operator, !, and ==

Put HTML as text content

This component also provides a virtual textContent attribute for HTML elements to insert data into the tag.

<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>

Data Validation

Server-side Property/Form Validation

To ensure data is correct and useful, we can leverage ZK's validators.

<zk>
    <fragment viewModel="@id('vm') @init('org.zkoss.fragment.demo.VM1')" validationMessages="@id('vmsgs')"
              prop1="@bind(vm.prop1) @validator(vm.validator1)"
              prop1err="@bind(vmsgs['prop1'])"><![CDATA[
        <input type="text" value="@bind(prop1)"/>
        <span textContent="@load(prop1err)"/>
    ]]></fragment>
</zk>

You can get the invalid message by assigning a self-defined key as an alias. In order to access invalidate messages by HTML elements, you can simply bind the messages onto Fragment properties.

Here we can use form-binding and form validators to validate all the fields.

<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>

Client-side Property Validation

This component also provides a new @jsvalidator running at client side, accepting custom JavaScript functions for validation. The benefit is that there is no need to send requests to the server for each validation. However, since the validation logic will be exposed at client side, some simple check, such as empty checking or range checking, is recommended. The usage is like @validator but it is effective only when applying HTML elements.

@jsvalidator

 syntax: @jsvalidator(validation_function_name)


The following is the definition of custom JavaScript function.

ValidationFunction(val, vmsgs)
* val: The input data.
* vmsgs: 
   The validation message holder object. You can add an invalidate message by adding a new property. 
   If you want to clear the specific message, assign an empty string to the property.
* Returns: Boolean. True if the data is valid.

You can use an implicit object (vmsgs) to get the client-side invalid messages. The @jsvalidator has its own validation message holder not shared with server-side.

<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'])"/>
    ]]></fragment>
    <script type="text/javascript">
        function validateExample(val, vmsgs) {
            var isValid = someValidationProcess(val);
            vmsgs['foo'] = isValid ? '' : 'Invalid value';
            return isValid;
        }
    </script>
</zk>

The Differences Between @validator and @jsvalidator

Catalogue @validator @jsvalidator
Validate at Server side Client side
ZK form validation Supported Not supported
Validation message holder Initialized in validationMessages An implicit vmsgs object
  1. @validator relies on the server, while @jsvalidator relies on the browser.
  2. @jsvalidator does not support form validation.
  3. The validation message holders are not the same.

For security concerns, we recommend you to use server-side @validator in most cases and choose client-side @jsvalidator if the validation needs an instant feedback such as password strength, number range, and so on.

Event Handling

The command of ViewModel can be invoked by attaching DOM events with @command or @global-command on HTML elements. Once the DOM event is triggered (i.g. clicked or changed), the command of ViewModel will be executed and receive the corresponding event object.

You can get more details from the event object such as mouse cursor position, pressed keys, entered text, and selected text.

ZK Event object DOM event
MouseEvent onclick
oncontextmenu
ondblclick
onmousedown
onmouseenter
onmouseleave
onmouseover
onmouseout
onmouseup
ondrag
KeyEvent onkeydown
onkeypress
onkeyup
InputEvent onchange
oninput
CheckEvent onchange (checkbox)
oninput (checkbox)
SelectionEvent onselect
DropEvent ondrop
Event onblur
onfocus
onfocusin
onfocusout
  • For further details about how to retrieve the event object, please refer to Retrieve Event Object directly.

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.
  • recoverId: specify the recover ID.

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+ Data validation, Event handling Advanced Usage of Fragment Component

Version History

Last Update : 2024/02/05


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



Last Update : 2024/02/05

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