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”.
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.
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…