- \n
- Fat arrow functions<\/li>\n
- Classes<\/li>\n
- Inheritance<\/li>\n
- Template Literals<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/bitcows.com\/wp-content\/uploads\/2018\/03\/screenshot-577x1024.png\")
<\/p>\nLets start with our Application class. This will get our
Window<\/code> element fromAlloy<\/code> and expose a couple of functions to add to theWindow<\/code> object and open it on load. <\/p>\n\nclass Application {\n constructor(win) {\n this.window = $.index; \/\/window defined in index.xml\n }\n open() {\n this.window.open();\n }\n add(view){\n this.window.add(view);\n }\n}\n<\/pre>\nNext lets 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.<\/p>\n
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<\/code> and assigning it tothis.view<\/code>. Our View also needs an image so we can do the same thing for our image.Ti.UI.createImageView<\/code> and assign it tothis.imageView<\/code>. Next we want to add a sound function to hear what our animal sounds like. So lets 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 on to the next class.<\/p>\n\nclass AnimalView {\n constructor(name, sound, type, imgSrc) {\n this.name = name;\n this.type = type;\n this.sound = sound;\n\n var playSound = () => {\n console.log(this.sound);\n }\n\n this.view = Titanium.UI.createView({\n layout : \"vertical\",\n height : \"50%\"\n });\n\n var imageView = Ti.UI.createImageView({\n image: imgSrc,\n height : \"80%\"\n });\n\n imageView.addEventListener(\"click\", () => {playSound()});\n this.view.add(imageView);\n }\n}\n<\/pre>\nThis 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 call super and 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 lets create that label.
Ti.UI.createLabel<\/code> and assign it tothis.label<\/code>. Next we need to add that label to the view. Remember this.view is inherited from the AnimalView so that when we callthis.view.add(this.label)<\/code> its 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. <\/p>\n\nclass BirdView extends AnimalView {\n constructor(name, color, type, hobby){\n super(name, \"tweet\", type, \"\/images\/bird.jpg\");\n this.color = color;\n this.hobby = hobby;\n\n this.label = Ti.UI.createLabel({\n text : `${this.name} the ${this.type} is ${this.color} \\nenjoys ${this.hobby} and goes: ${this.sound}`\n });\n\n this.view.add(this.label);\n }\n}\n<\/pre>\nLastly, 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. <\/p>\n
\n\/\/open view\nlet app = new Application();\napp.add(new BirdView(\"Steve\", \"yellow\", \"bird\", \"hiking\"));\napp.open();\n<\/pre>\n
This is what we would have in our Alloy file
index.xml<\/code> 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
\nthis.window = Ti.UI.createWindow();<\/code> to create the instance of the window. <\/p>\n\n<Alloy>\n <Window class=\"container\" layout=\"vertical\" top=\"50\"\/>\n<\/Alloy>\n<\/pre>\n
GitList Link<\/a><\/strong><\/p>\n