Tutorials

EnyoJS Tutorial #7 – Magic of Published Methods

June 15, 2013
Good Stuff
2 Comments

One of the most useful feature in enyoJS is that each “kind” have their own published method auto generated for you by default if you set some values in the “published” attributes when coding the “kind” (if you are familiar with Java, getter and setter). You should always try to make use of them to minimize your coding work.

  1. The advantages of using published methods are listed below.For each “attribute or properties” you assigned into the published see code below. Creates a public setter function as well as a getter function. If you assigned label as your properties, getLabel and setLabel will be automatically generated, and it’s auto camel (auto capitcal) on first
  2. Each properties will also have an event handler that fires when the value of it changes. The methods are named based on their default name followed by “Changed“. Example, labelChanged

Below are the sample code on how I’ve change the header of the previous tutorial #6 to have such feature. It’s auto-magical!

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

enyo.kind({
    name: "Header",
    kind: "Control",
    components: [
        {
             kind: "onyx.Toolbar",
             name:"headerText",
             content:"Tutorial 6 : Loading Data to Form",
             style:"text-align:center"
        }
    ],
    // This is how you place your published method. For this example, i use headerLabel, you can add more properties by using "," just avoid
    // using "," at the the final attribute. Noticed once, this kind is created set and get along with headerLabelChanged is prepared.
    // Changed is good in data that keep refreshing, for example, if you are doing a pull to refresh etc. For this case,  
    // we used it to trigger a change in our header label.
    published:{
        headerLabel:""
    },
    create:function(){
	this.inherited(arguments);
    },
    // Just assume, set and get is there already unless you want to manually override them, and to access headerLabel, 
    // just use this.headerLabel.
    headerLabelChanged:function(){
	this.$.headerText.setContent(this.headerLabel);
    }  
});

Now let the magic begin, let’s get ready App.js as well to use the header new found functions.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

enyo.kind({
	name: "App",
	kind: "FittableRows", 
	classes: "enyo-fit enyo-unselectable",
	components: [
      { 
          // To access the methods and control of a kind, we always give it a name.
          // for this tutorial let's name this control headerControl.
          name:"headerControl",
          kind:"Header" 
      },
      {   
          kind: "Scroller",
          name: "contentControl",
          fit:true,
          touch:true, 
          thumb:true,
          components:[
            { 
              name:"registerFormControl",
              kind:"SampleForm" 
            }
          ]
      },
      { 
        kind:"Footer",
        onSubmit:"handleFormSubmit" 
      }
],
 
create: function(){
    this.inherited(arguments);
    this.loadStuffFromFile();
    // Let's put some value to our header onCreate.
    // always double check using console. Click and check on __proto__
    console.log(this.$.headerControl);
    // By setting the value of headerLabel, you are trigger a change. 
    // thus, the headerLabelChanged is fired!
    this.$.headerControl.setHeaderLabel("This is a Tutorial #7!");
},
loadTextFile:function(url,onSuccess,onError){
    var ajaxGet =  new enyo.Ajax({
        url:url,
        method:'GET',
        handleAs:'json'
    }); 
    ajaxGet.go();
    ajaxGet.response(this, onSuccess);
    ajaxGet.error(this, onError);
},
loadStuffFromFile:function(){
      var self = this;
      this.loadTextFile('assets/datafromserver.json',onSuccess,onError);
      function onSuccess(inSender,inResponse){
          // Remember: always use a proxy variable in subfunctions.
          console.log(inResponse);
          self.pushToSampleForm(inResponse.data);
      }
      function onError(){
          alert("Error in loading file...");
      }
},
 
pushToSampleForm:function(param){
      // like how we getFormValues();, we use setFormValues() instead.
      this.$.registerFormControl.setFormValues(param);
},
 
handleFormSubmit:function(inSender,inEvent) {
      this.payLoad = this.$.registerFormControl.getFormValues();
      console.log(this.payLoad);
      var ajax = new enyo.Ajax({
          url: "http://www.yourgatewayurl.com",
          method:"POST",
          timeout:5000,
          contentType:"application/json"
      });
      ajax.go(this.payLoad);
      ajax.response(this, "processResponse");
      ajax.error(this, "processError");
},
processResponse:function(inSender,inResponse) {
      alert("All Done");
},
processError:function(inSender,inResponse) {
      alert("Failed");
}
});

Like always, today’s tutorial files

Enyo Tutorial #7 (1215 downloads)

 

Comments

comments

2 thoughts on “EnyoJS Tutorial #7 – Magic of Published Methods”

  1. Your code
    [download id=”45″ format=”2″]
    doesn’t work on your pages

Leave a Reply

Your email address will not be published. Required fields are marked *