Client Attribute Prefix"

From Documentation
(Created page with "{{ZUMLReferencePageHeader}} Name: client attribute Namespace: http://www.zkoss.org/2005/zk/client/attribute Namespace shortcut: client/attribute Java: <javadoc method="CLIEN...")
 
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{ZUMLReferencePageHeader}}
 
{{ZUMLReferencePageHeader}}
  
−
  Name: client attribute
+
  Name: client attribute prefix
−
  Namespace: http://www.zkoss.org/2005/zk/client/attribute
+
  Namespace: http://www.zkoss.org/2020/zk/client/attribute-prefix
−
  Namespace shortcut: client/attribute
+
  Namespace shortcut: client/attribute-prefix
−
  Java: <javadoc method="CLIENT_ATTRIBUTE_NAMESPACE">org.zkoss.zk.ui.metainfo.LanguageDefinition</javadoc>
+
  Java: <javadoc method="CLIENT_ATTRIBUTE_PREFIX_NAMESPACE">org.zkoss.zk.ui.metainfo.LanguageDefinition</javadoc>
  
−
It is the reserved namespace for specifying client-side DOM attributes. Unlike the client namespace, which assigns something to widgets, the client/attribute namespace assigns additional DOM attributes to the DOM tree directly at the client.
+
It is the reserved namespace for specifying client-side DOM attributes including the prefix. Unlike the client namespace, which assigns something to widgets, the client/attribute namespace assigns additional DOM attributes to the DOM tree directly at the client.
  
−
<blockquote>
+
For example, suppose you want to specify <code>v-on:click</code> as a DOM attribute, you can do as follows.
−
----
 
−
Notice that if the widget's DOM output (<javadoc directory="jsdoc" method="redraw(_global_.Array)">zk.Widget</javadoc>) also has the same DOM attribute, both of them will be generated and it is technically not legal. Thus, you should prevent the DOM attributes that widget might output.
 
−
</blockquote>
 
−
 
 
−
For example, suppose you want to listen to the <code>onload</code> event, you can do as follows<ref>For more information, please refer to [[ZK Component Reference/Essential Components/Iframe#onload|ZK Component Reference: iframe]].</ref>.
 
−
 
 
−
<source lang="xml">
 
−
<iframe src="http://www.google.com" width="100%" height="300px"
 
−
  xmlns:ca="client/attribute"
 
−
  ca:onload="do_whater_you_want()"/>
 
−
</source>
 
−
 
 
−
 
 
−
If the attribute contains colon or other special characters, you can use the <code>attribute</code> element as follows.
 
  
 
<source lang="xml">
 
<source lang="xml">
−
<div xmlns:ca="client/attribute">
+
<zk xmlns:v-on="client/attribute-prefix">
−
   <attribute ca:name="ns:whatever">
+
   <button v-on:click="doSth">Do Something</button>
−
  whatever_value_you_want
+
</zk>
−
  </attribute>
 
−
</div>
 
 
</source>
 
</source>
−
 
−
The other use of the client-attribute namespace is to specify attributes that are available only to certain browsers, such as accessibility and [http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web Section 508].
 
−
 
−
 
−
== Data-Attribute Handler ==
 
−
Developer can define their own data-handler for the client attribute to have an extra functionality.
 
−
For example, (jQuery's mask)
 
−
 
−
'''Zul File:'''
 
−
<source lang="xml">
 
−
<textbox xmlns:ca="client/attribute" ca:data-mask="00:00:00" onChange='Clients.log(self.value)'/>
 
−
</source>
 
−
 
−
'''zk.xml:'''
 
−
<source lang="xml">
 
−
<client-config>
 
−
<data-handler>
 
−
<name>mask</name><!-- the attribute name, i.e. data-mask -->
 
−
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" />
 
−
<script>
 
−
function (wgt, dataValue) {
 
−
jq(wgt.$n()).mask(dataValue);
 
−
 
−
// unformat after onChange event.
 
−
wgt.listen({onChange: function (event) {
 
−
event.data.value = jq(this.$n()).cleanVal();
 
−
}});
 
−
}
 
−
</script>
 
−
</data-handler>
 
−
</client-config>
 
−
</source>
 
−
 
−
=== Syntax Definition ===
 
−
* '''&lt;data-handler>''': a group of a data-attribute handler <ref name="required">Required</ref> <ref name="multiple">One or Many</ref>
 
−
** '''&lt;name>''': the attribute name. (i.e. data-name) <ref name="required"/>
 
−
** '''&lt;override>''': true means the handler is used to override another existing one. <ref name="optional">Optional</ref>
 
−
** '''&lt;link>''': the url for extra CSS files <ref name="multiple"/><ref name="optional"/>
 
−
** '''&lt;script>''' the script content <ref name="required">Required</ref> <ref name="multiple">One or Many</ref>
 
−
*** '''&lt;script src="foo.js">''' the src attribute for the script (Javascript library or data-handler script), it can be a url of a JS script from context-path or a url from class-path. For example, <pre><script-uri>~./myscript</script-uri></pre>
 
−
*** Notice that the last <tt><script></tt> tag should be your data-handler script.
 
−
 
−
To see more examples, please refer to [http://blog.zkoss.org/index.php/2015/08/25/zk8-simple-but-powerful-using-data-handler-api-to-work-with-front-end-technologies/ ZK8: Simple but Powerful; Using Data-handler API to Work with Front-End Technologies] and [https://github.com/zkoss/zk8-datahandler Github] (you can design your own data-attribute handler and contribute this project).
 
−
 
−
 
−
<blockquote>
 
−
----
 
−
<references/>
 
−
</blockquote>
 
−
{{ZUMLReferenceHeadingToc}}
 
  
 
=Version History=
 
=Version History=
Line 87: Line 21:
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| 5.0.3
+
| 9.0.1
−
| July 2010
+
| April 2010
−
| The client-attribute namespace was introduced.
+
| The client-attribute-prefix namespace was introduced.
−
|-
 
−
| 8.0.0
 
−
| May 2015
 
−
| [http://tracker.zkoss.org/browse/ZK-2730 Support client data attributes handler]
 
 
|}
 
|}
  
 
{{ZUMLReferencePageFooter}}
 
{{ZUMLReferencePageFooter}}

Latest revision as of 07:40, 30 April 2020


DocumentationZUML ReferenceZUMLNamespacesClient Attribute Prefix
Client Attribute Prefix


Name: client attribute prefix
Namespace: http://www.zkoss.org/2020/zk/client/attribute-prefix
Namespace shortcut: client/attribute-prefix
Java: LanguageDefinition.CLIENT_ATTRIBUTE_PREFIX_NAMESPACE

It is the reserved namespace for specifying client-side DOM attributes including the prefix. Unlike the client namespace, which assigns something to widgets, the client/attribute namespace assigns additional DOM attributes to the DOM tree directly at the client.

For example, suppose you want to specify v-on:click as a DOM attribute, you can do as follows. 

<zk xmlns:v-on="client/attribute-prefix">
  <button v-on:click="doSth">Do Something</button>
</zk>

Version History

Last Update : 2020/04/30


Version Date Content
9.0.1 April 2010 The client-attribute-prefix namespace was introduced.



Last Update : 2020/04/30

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZUML_Reference/ZUML/Namespaces/Client_Attribute_Prefix&oldid=49890"