Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alloy Simple App Demonstration

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

  • Be the first to comment

Alloy Simple App Demonstration

  1. 1. Appcelerator Titanium Alloy Simple App, Step-By-Step
  2. 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. 3. Create new project in TiStudio• Save Project• Open up terminal in project to add Alloy functionality
  4. 4. Create Alloy Project• In the terminal window you just created, type alloy new .• Output should look something like this
  5. 5. Modify index.js in controllers folder• Open app/controllers/index.js edit the file so it should look like this
  6. 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. 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. 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. 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. 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. 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. 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. 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. 14. Navigating Between Windows• Next we need to access the controller for the new window.• Alloy.getController(„tabViewOneChild‟); returns the controller object.
  15. 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. 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. 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. 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. 19. Final Directory Structure Should Look Like This
  20. 20. App Should Look Like This• A
  21. 21. More Information Aaron K. Saunders Clearly Innovative Inc info@clearlyinnovative.com @aaronksaunders http://blog.clearlyinnovative.com Project Source Codehttps://github.com/aaronksaunders/SimpleAlloyPre sentationApp

    Be the first to comment

    Login to see the comments

  • ArturoLen

    Sep. 11, 2012
  • ltaymans

    Oct. 24, 2012
  • 2wheelsburning

    Oct. 24, 2012
  • ripnix

    Dec. 31, 2012
  • scakko

    May. 1, 2013
  • ssusera3db59

    Jul. 4, 2013
  • ericsala

    Apr. 20, 2014
  • CalogeroMinei

    Aug. 17, 2014
  • uusa35

    Sep. 3, 2014
  • AhmedHamdy55

    Nov. 9, 2014
  • ParminderSingh89

    Apr. 4, 2015
  • ethanliew

    May. 8, 2015
  • hagarmekky

    Dec. 19, 2016

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

Views

Total views

26,815

On Slideshare

0

From embeds

0

Number of embeds

2,583

Actions

Downloads

223

Shares

0

Comments

0

Likes

13

×