Alloy Simple App Demonstration
•Download as PPTX, PDF•
13 likes•18,397 views
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
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Similar to Alloy Simple App Demonstration
Similar to Alloy Simple App Demonstration (20)
More from Aaron Saunders
More from Aaron Saunders (15)
Recently uploaded
Recently uploaded (20)
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