Tutorial on building an Application using Appcelerator Titanium Alloy MVC source code available here https://github.com/aaronksaunders/SimpleAlloyPresentationApp
VIDEOS - https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg
MORE SLIDES - complete overview of Alloy Available here
http://www.slideshare.net/aaronksaunders/modev-east2012
3. Create new project in TiStudio
• Save Project
• Open up terminal in project to add Alloy
functionality
4. Create Alloy Project
• In the terminal window you just created, type
alloy new .
• Output should look something like this
5. Modify index.js in controllers folder
• Open app/controllers/index.js edit the file so it
should look like this
6. Create the Tabs for the TabGroup
• Type alloy generate controller tabOneView
• Open the file app/views/tabOneView.xml
• Edit the file as follows
7. Tab creation, more details
• We set an ids on objects so they can be accessed
from controllers
• We have a tab with a nested window and the
button in the window
8. Tab creation, Tab View Two
• Type alloy generate controller tabViewTwo
• app/views/tabViewTwo.xml is very similar to
tabViewOne.xml
• We now have the tabs set up, lets create the
tabGroup
9. TabGroup Creation
• Open app/views/index.xml
• Add the TabGroup object and then nest the
require statements using the controller file
name for each tabView we created
10. TabGroup Creation, explanation
• We are using <Require src=“”/> so we can
modularize our code more efficiently.
• The functionality for each components is
separated into the specified controller file
11. Let’s See What We’ve Built
• At this point you should be able to run you
application and click through the two tabs and
see the expected behavior
QUESTIONS
12. Navigating Between Windows
• Open app/controllers/tabViewOne.js
• Here we will add some action to what we have
built to open a child window from
app/views/tabViewOne.xml.
13. Navigating Between Windows
• The $.open_button.eventListener will be called when
the user clicks on “one_button”. The “$.” notation
allows you to access your objects by id
14. Navigating Between Windows
• Next we need to access the controller for the
new window.
• Alloy.getController(„tabViewOneChild‟); returns the
controller object.
15. Creating new controller object
• Type, alloy generate controller tabViewOneChild,
• In this controller at app/controllers/tabViewOneChild.js
we only need to open the view.
• We pass in the tab object as a parameter for
the function
• To expose methods outside of controller we
use exports
16. tabViewOneChild.js controller source
• app/controllers/tabViewOneChild.js code should look
like this when completed
• We use the tab container to open the child
window using the window id
17. tabViewOneChild.xml view source
• app/views/tabViewOneChild.xml code should look like
this when completed
• We simple window with label; the id is
defined here so that the controller can access
it.
18. Back to tabViewOne controller
• Here we call the exported function we created in
app/controllers/tabViewOneChild.js to open the window.
• We have access to any and all exported objects from
the controller