I’ve started playing with Titanium Alloy from Appcelerator. There are some things that most tutorials don’t cover, and as I struggle through learning this I’ll post what I’ve learned. Yes, these may seem silly once you know what you’re doing, but hopefully it may help someone learn this a bit more quickly.
Once I installed Studio and upgraded to the latest SDK (3.x), from the Getting Started panel, you can scroll down and perform a one click install of some sample apps. I chose the ToDo list to play around with. If you do this, be sure to choose the one for Alloy because there is also a ToDo list for commonJS (standard Titanium I call it)
I ran the app to see what it does, and then started looking at the code. At first I thought it was multiple screens and saw the header block in index.xml and thought that was pretty inefficient. After looking at the other files, I realized I was wrong and just has some slide up views. If it did have multiple screens, I may want to include the same header on each screen.
Why would you want to do this? I had, in the past, built an app that had the client’s logo in the header of each screen. That was built long ago with Rhomobile, and it did not allow you to modularize things like this, so I had a pile of duplicated code across the app, which is problematic if you had to alter it at all.
There wasn’t anything I found easily to tell me how to include other code, because I’m new and had no idea what to search/look for and didn’t know the terminology. I had no choice but to start messing around, examining other example apps, and snips of code.
What I found was the <Require> statement, which is a little further down in index.xml. When I first tried this, I copied that line, changed it to header, and it didn’t work, go figure. I’ve since found an example in the docs (I know, right?) that nudged me in the right direction. That page is here ( http://docs.appcelerator.com/titanium/3.0/#!/guide/Views_without_Controllers ) if you’re interested. I know I actually ended up needing a controller, but more on that in a bit.
What I ended up with was this :
<Require id='index_header' src='header' type='view' />
The id name is arbitrary, I named it index_header since it’s located in index.xml. What is important is the src, and type.
I commented out the entire header view in index.xml and added the line above. I copied that header view block into a new file, header.xml and placed that in the views directory. Now in my mind my index.xml is including my header.xml file – perfect.
To create the controller I needed, in the controllers directory, I created a file called header.js (to match the .xml file). I opened the index.js file and copied the addToDoItem() function and I renamed the original one in index.js just to be sure there were no collisions. At this point in my learning, I’m not sure if you need to do this, I’m guessing its safe to remove from index.js.
I ran it. I was closer but it didn’t look right. Ahh, the styles.
Screens are styled with a .tss file, so I also need to copy the classes that this header view references into a new header.tss file (again same name as my .xml file). I created a new file in the styles directory and move the various items to this file : #header, #title, .divider,#addImage,#addView and saved it.
I ran it and it ran with the header area now modularized.
The require statement is pretty useful, and if used properly can allow you to create some pretty modular code.