Web Components With X-Tag
Written by Ian Elliot   
Tuesday, 15 October 2013
Article Index
Web Components With X-Tag
Using X-Tag
Accessors, Methods and Events

 

Accessors

If you want to give your component a property called myval then you can do the job with the accessors object:

accessors:{
 
 myval: {
 
  get:function(){
 
   return avalue;
   }
,
   
set:function(newval){
    
do something with newval;
   
}
}

That is, for each property you want to create you simply provide two functions, a get and a set. 

There is one small gotcha to keep in mind. You can't use this.myval in the definition of myval otherwise the result is a recursive call to get or set.

One way to deal with local variables for each instance of your component is to set up an object to store them. For example:

lifecycle: {
 created: function() {
  this.innerHTML = "
mycomponent";
  this.locals = {};
  this.locals.myval = 0; }
},

accessors: {
 myval: {
  get: function() {
   console.log(this.locals.myval);
   return this.locals.myval;
  },
  set: function(newval) {
   this.locals.myval = newval;    
   console.log(this.locals.myval);
  }
}

 

With this definition you can now write things like:

<my-component id="mycomp1" >test1</my-component>

document.addEventListener('DOMComponentsLoaded',
function(){
 var mycomp =
        document.getElementById("mycomp1");
 var temp = mycomp.myval;
 mycomp.myval = 30;
});

 

If you run this you will see zero and 30 printed on the console log. 

Of course, components can also have attributes and you can create a property that corresponds to an attribute using the attribute property.

That is:

myval:{
 attribute:{ 
   name:"myval"
 
},
 
get: function(){ return value},
 set: function(newval){do something with newval}
}

defines a property called myval as before corresponding to an attribute called myval which can be set using:

<my-component id="mycomp1" myval="20" >
</my-component>

or in code

mycomp.setAttribute("myval",50);

Of course you can still set it as a property as in:

mycomp.myval=60;

 

This does raise the question of how to initialize a property if it is also an attribute. If the attribute has been set in the tag you don't want to set it to a default value. However, as the property is automatically set from the attribute in the tag by using the appropriate set function, it turns out to be easy. All you have to do is put something like:

this.locals.myval = this.locals.myval||0;

in the created function. 

Methods

As well as properties you can also define methods in the methods object. For example, to create a clearAll method you would use 

methods: {
 clearAll: function() {
    console.log("clear all called");
 }
}

and then you could call the method in the usual way:

mycomp.clearAll();

You can, of course, create as many methods in the methods object as you need. 

Events

Finally, you can define events within the events object. For example, to handle the component's click event:

events:{
 click: function(){
  console.log("clicked");
 }
}

Now if you click on the component the message is displayed on the log. 

Where Next

That's about it for an introduction to X-Tag but there is more. There's a set of useful helper functions, for example, which can make building your own components much easier.  You also need to look up pseudos, templates, mixins and the prototype property. At the moment X-Tag is still developing and these are best left for a future update to this article. 

Have a look at some of the simpler components supplied with X-Tag or download the very simple example built up in this article from the CodeBin (note you have to register first).

 

xtaglogo

 

 

More Information

Introduction to Web Components

http://www.X-Tags.org

Related Articles

Getting Started With jQuery UI

jQuery UI Custom Control - Widget Factory

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.

 

raspberry pi books

 

Comments




or email your comment to: comments@i-programmer.info

 

Banner


JavaScript Jems - Objects Are Anonymous Singletons

JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way.  In particular, every object can be regard [ ... ]



JavaScript Canvas - Typed Arrays

Working with lower level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data.


Other Articles

  

<ASIN:1430230541>

<ASIN:0321683919>

<ASIN:0596517742>

<ASIN:0321572602>

<ASIN:0596806752>



Last Updated ( Tuesday, 15 October 2013 )