ZK's JavaScript Extension"

From Documentation
m (Created page with '{{ZKComponentReferencePageHeader}} To make it easier for JavaScript objects to represent widgets ZK has introduced a class concept to JavaScript. Here is a brief introduction on…')
 
m
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{ZKComponentReferencePageHeader}}
+
{{ZKComponentDevelopmentEssentialsPageHeader}}
  
 
To make it easier for JavaScript objects to represent widgets ZK has introduced a class concept to JavaScript. Here is a brief introduction on defining a class in JavaScript.
 
To make it easier for JavaScript objects to represent widgets ZK has introduced a class concept to JavaScript. Here is a brief introduction on defining a class in JavaScript.
Line 5: Line 5:
 
To define a new class in JavaScript, we use <javadoc directory="jsdoc" method="$extends(zk.Class, _global_.Map, _global_.Map)">_global_.zk</javadoc>.
 
To define a new class in JavaScript, we use <javadoc directory="jsdoc" method="$extends(zk.Class, _global_.Map, _global_.Map)">_global_.zk</javadoc>.
  
 +
<source lang="javascript">
 +
zk.$package('com.foo');
 +
 +
com.foo.Location = zk.$extends(zk.Object, {
 +
x: 0,
 +
y: 0,
 +
distance: function (loc) {
 +
  return Math.sqrt(Math.pow(this.x - loc.x, 2) + Math.pow(this.y - loc.y, 2));
 +
}
 +
},{
 +
find: function (name) {
 +
  if (name == 'ZK')
 +
  return new com.foo.Location(10, 10);
 +
  throw 'unknown: "+name;
 +
}
 +
})
  
{{ZKComponentReferencePageFooter}}
+
</source>
 +
 
 +
The first argument of <javadoc directory="jsdoc" method="$extends(zk.Class, _global_.Map, _global_.Map)">_global_.zk</javadoc> is the base class to extend from. In this case, we extend from <javadoc directory="jsdoc">zk.Object</javadoc>, which is the root of the class hierarchy. The second argument consists of the (non-static) members of the class. In this case, we define two data members (x and y) and one method (distance).
 +
 
 +
The third argument is optional and if omitted means that the extended class will contain no static members. In the example we define a static method (<mp>find</mp>).
 +
For now this is all that is required for us to create our first component so let’s move onto talk about the component implementation.
 +
 
 +
 
 +
{{ZKComponentDevelopmentEssentialsPageFooter}}

Latest revision as of 06:37, 14 July 2010




To make it easier for JavaScript objects to represent widgets ZK has introduced a class concept to JavaScript. Here is a brief introduction on defining a class in JavaScript.

To define a new class in JavaScript, we use zk.$extends(Class, Map, Map).

zk.$package('com.foo');
 
com.foo.Location = zk.$extends(zk.Object, {
 x: 0,
 y: 0,
 distance: function (loc) {
  return Math.sqrt(Math.pow(this.x - loc.x, 2) + Math.pow(this.y - loc.y, 2));
 }
},{
 find: function (name) {
  if (name == 'ZK')
   return new com.foo.Location(10, 10);
  throw 'unknown: "+name;
 }
})

The first argument of zk.$extends(Class, Map, Map) is the base class to extend from. In this case, we extend from Object, which is the root of the class hierarchy. The second argument consists of the (non-static) members of the class. In this case, we define two data members (x and y) and one method (distance).

The third argument is optional and if omitted means that the extended class will contain no static members. In the example we define a static method (find). For now this is all that is required for us to create our first component so let’s move onto talk about the component implementation.



Last Update : 2010/07/14

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