Using ES6+ in a Titanium App

Starting with Titanium SDK 6.1.0, Axway Appcelerator started supporting ES6+. But you may be asking yourself, how do I use ES6+ with Titanium? So here is a simple example on how to use some of what ES6+ has to offer in your Appcelerator app.

Note: To use ES6+ on all target devices, add the <transpile>true</transpile> property to your tiapp.xml which will enable Babel to transpile your code. It is available in Titanium SDK 7.1.0 and later.

ES6+ Elements Used:

• Fat arrow functions
• Classes
• Inheritance
• Template Literals

Let’s start with our Application class. This will get our Window element from Alloy and expose a couple of functions to add to the Window object and open it on load.

class Application {
   constructor(win) {
     this.window = $.index; // the window defined in index.xml
   }
   open() {
     this.window.open();
   }
   add(view) {
     this.window.add(view);
   }
}

Next, let’s create an AnimalView. This is really only to show that you are able to extend classes in ES6 and inherit elements from the parent class with ease. So, in a class, you always need a constructor – so here, we will add a few params to our constructor to keep things simple.

Since this is a view, we need to address how we get that view onto our application. So, we will instantiate a new view by calling Titanium.UI.createView and assigning it to this.view. Our View also needs an image, so we can do the same thing for our image. Ti.UI.createImageView and assign it to this.imageView. Next, we want to add a sound function to hear what our animal sounds like. So, let’s create a fat arrow function and print out what the sound of or animal is. Lastly, we will add our imageView to our View and move onto the next class.

class AnimalView {
   constructor(name, sound, type, imgSrc) {
     this.name = name;
     this.type = type;
     this.sound = sound;

     const playSound = () => {
       console.log(this.sound);
     }

     this.view = Titanium.UI.createView({
       layout : 'vertical',
       height : '50%'
     });

     const imageView = Ti.UI.createImageView({
       image: imgSrc,
       height : '80%'
     });

     imageView.addEventListener('click', () => {
         playSound():
     });
     this.view.add(imageView);
   }
}

This Class will be our concrete AnimalView Class in this case a BirdView. Again, we start by adding a constructor and passing our Class some parameters. Since the BirdView extends AnimalView, that means it inherits everything from the AnimalView. We need to pass the AnimalView some arguments, then give our BirdView some characteristics that belong only to a BirdView, such as color and hobbies. Now, the BirdView has a special label explaining the attributes of the BirdView. So, let’s create that label. Ti.UI.createLabel and assign it to this.label. Next, we need to add that label to the view. Remember this.view is inherited from the AnimalView, so that when we call this.view.add(this.label) – it’s actually adding it to the parent class AnimalView’s View. Note: inside our createLabel, we are using Template Literals. This allows us to put in values with out having to concatenate strings.

class BirdView extends AnimalView {
   constructor(name, color, type, hobby){
     super(name, 'tweet', type, '/images/bird.jpg');
       this.color = color;
       this.hobby = hobby;

       this.label = Ti.UI.createLabel({
         text : `${this.name} the ${this.type} is ${this.color} \nenjoys ${this.hobby} and goes: ${this.sound}`
       });

       this.view.add(this.label);
   }
}

Lastly, we need to add all our views together and add them to our application. Here, we create a new instance of Application and add our BirdView to it. Then we call open on our Application which opens the window.

// open view
let app = new Application();
app.add(new BirdView('Steve', 'yellow', 'bird', 'hiking'));
app.open();

This is what we would have in our Alloy file index.xml NOTE: this is not needed but I wanted to show that you could use Alloy in conjunction with Classes. If you didn’t want to use this, you could just as easily do this
this.window = Ti.UI.createWindow(); to create the instance of the window.

<Alloy>
   <Window class="container" layout="vertical" top="50"/>
</Alloy>

For more details, check out the GitHub Link