Alloy Simple App Demonstration
Download as PPTX, PDF13 likes18,405 views
This document provides a step-by-step guide to create a simple application using Appcelerator Titanium Alloy. It covers the process of setting up the project, creating controllers and views for tab navigation, and demonstrates how to open child windows through specific events. The guide includes code examples and links to the complete project source code for reference.
Alloy Simple App Demonstration
- 1. Appcelerator Titanium Alloy Simple App, Step-By-Step
- 2. Getting Started • Follow Alloy download instruction – http://projects.appcelerator.com/alloy/docs/Alloy- bootstrap/index.html – https://github.com/appcelerator/alloy • Complete Project Source Code – https://github.com/aaronksaunders/SimpleAlloyPr esentationApp
- 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
- 19. Final Directory Structure Should Look Like This
- 20. App Should Look Like This • A
- 21. More Information Aaron K. Saunders Clearly Innovative Inc info@clearlyinnovative.com @aaronksaunders http://blog.clearlyinnovative.com Project Source Code https://github.com/aaronksaunders/SimpleAlloyPre sentationApp