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

<ASIN:1430230541>

<ASIN:0321683919>

<ASIN:0596517742>

<ASIN:0321572602>

<ASIN:0596806752>