• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Alloy Simple App Demonstration
 

Alloy Simple App Demonstration

on

  • 20,627 views

Tutorial on building an Application using Appcelerator Titanium Alloy MVC source code available here https://github.com/aaronksaunders/SimpleAlloyPresentationApp ...

Tutorial on building an Application using Appcelerator Titanium Alloy MVC source code available here https://github.com/aaronksaunders/SimpleAlloyPresentationApp

More complete overview of Alloy Available here
http://www.slideshare.net/aaronksaunders/modev-east2012

Statistics

Views

Total Views
20,627
Views on SlideShare
18,159
Embed Views
2,468

Actions

Likes
10
Downloads
158
Comments
8

17 Embeds 2,468

http://blog.clearlyinnovative.com 1123
http://www.twylah.com 747
http://www.clearlyinnovative.com 281
http://bobsims.tumblr.com 162
http://flavors.me 75
http://aaronksaunders.flavors.me 23
http://clearlyinnovative.tumblr.com 20
http://es.flavors.me 7
http://www.slashdocs.com 5
http://coderwall.com 5
http://pt.flavors.me 5
https://twitter.com 5
https://si0.twimg.com 4
https://www.linkedin.com 2
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 1
http://www.pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

18 of 8 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Have a new application I am building as a more advanced tutorial https://github.com/aaronksaunders/bikes_nearby_app
    Are you sure you want to
    Your message goes here
    Processing…
  • message = ''undefined' is not a function (evaluating 'Alloy.getController(\'login\')')';

    Its giving me this error while using in my own app.Your app works fine.Please tell me what could be the issue.
    Thanks.
    Are you sure you want to
    Your message goes here
    Processing…
  • Tutorial Changes for Titanium 3.X:
    tabViewOne.js : Use createController instead of getController (deprecated):

    $.open_button.addEventListener('click', function(e){
    console.debug('in open_button click event handler');
    var tabViewOneChildController = Alloy.createController('tabViewOneChild');
    tabViewOneChildController.openMainWindow($.tab_one);
    });


    tabViewOneChild.js : different syntax for module exports:

    function openMainWindow(_tab){
    _tab.open($.child_window);
    }
    exports.openMainWindow = openMainWindow;
    Are you sure you want to
    Your message goes here
    Processing…
  • sorry dont check this often, but did you find what you where looking for?
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Thanks for your tutorials! I would like to ask if you have any tutorials about like TableViewController when its tableViewCell or row is tapped goes to or being pushed to a ViewController in Titanium. Thanks for your help. :)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Alloy Simple App Demonstration Alloy Simple App Demonstration Presentation Transcript

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