EnyoJS 2.7 Tutorial : Controls & Methods

Today we going to cover more on how to target controls, their methods and also using evals for your scripting needs. Below is a sample code of a ViewPage. To target the control, you must at least give the control a name. In this case, a button named “btnTapMe”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var kind = require('enyo/kind');
var Button = require('enyo/button');
var FittableRows = require('layout/FittableRows');
 
module.exports = kind({
	name: 'TestPage',
	kind: FittableRows,
	classes: 'enyo-fit',
	components:[
		{
		   kind:Button,
                   name:"btnTapMe",
                   content:'Tap Me!'
		}
   ],
   create: function(){
		   this.inherited(arguments);
   },
   rendered : function(){
		   this.inherited(arguments);
                   //To Target a named control like btnTapMe. Use this.$.
                   console.log( this.$.btnTapMe.getContent() );
 
   }
});

See code above under line 22. To target a named control, we use this.$. in this case, btnTapMe is the control name. Once targeted, you can access the control method name. In our case, we want to access it’s textual content within the button. Method name to access content is getContent() and to set or override the content we use setContent().

setContent( string_content )  is similar to jQuery’s .html method.  Below are some of the commonly used cheat sheets for controls as their default methods accessible.

Method Control/Kind Description
getContent() Textual Content Based Tags e.g. Div, button, paragraph, headers Retrieve the textual content within the control
setContent(value) Textual Content Based Tags e.g. Div, button, paragraph, headers Set the textual content within the control
addClass(css_class) Textual Content Based Tags e.g. Div, button, paragraph, headers Append a css class into the control
removeClass(css_class) Textual Content Based Tags e.g. Div, button, paragraph, headers Remove a css class from the control
render() All Controls Force redraw or refresh their sub-controls. E.g. dynamically refreshes new <li> added into <ul> tag
getValue() All Inputs Get value of the form tags such as input, select (Also include enyo.Input since they are just html controls made with some extended method)
setValue(value) All Inputs Set value of the form tags such as input, select (Also include enyo.Input since they are just html controls made with some extended method)
setDisabled(bool) All Inputs and Interactable Controls If set to true, it will disabled the controls from input or click/touch.
setAttribute(attribute_name,value) All HTML Tags/Controls Set and add additional attribute to existing named control.

Next, we move on to how to do eval in EnyoJS. At times, we may want to access a bunch of controls in a loop. Or to dynamically, access a control just by concating a defined string with the input value. For this case, eval will be useful.

Let’s look at the sample code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var kind = require('enyo/kind');
var Button = require('enyo/button');
var Input = require('enyo/Input');
var FittableRows = require('layout/FittableRows');
 
module.exports = kind({
   name: 'FirstPage',
   kind: FittableRows,
   classes: 'enyo-fit',
   components:[
		{
		   kind:Button,
                   name:"btnDisable",
                   style:"width:100%;margin:5px",
                   ontap:"handle_DisableAll",
                   content:'Disable All Input!'
		},
        {
            kind:Input,
            style:"width:100%;margin-top:5px",
            placeholder:"Field 0...",
            name:"txtInput-0"
        },
        {
            kind:Input,
            style:"width:100%;margin-top:5px",
            placeholder:"Field 1...",
            name:"txtInput-1"
        },
        {
            kind:Input,
            style:"width:100%;margin-top:5px",
            placeholder:"Field 2...",
            name:"txtInput-2"
        }
   ],
   create: function(){
	this.inherited(arguments);
   },
   rendered : function(){
	this.inherited(arguments);
 
   },
   handle_DisableAll:function(inSender,inEvent){
       //To Target a bunch of controls within using eval style.
        for (var i = 0; i < 3; i++){
              this.$["txtInput-"+i].setDisabled(true);
        }
   }
});

Well, this ends today’s tutorial on EnyoJS. Hope scripting…

Comments

comments