Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Create a new Alloy mobile project inside Titanium Studio. In the index view, create five buttons with the labels, Open Maps, Open SMS, Open Dialer, Open YouTube, and Open App Store / Market.

  2. In the index controller, add a click event listener for each of these buttons. Then use the Ti.Platform.openURL() function to open a corresponding url for each of these tasks. These urls are:

    1. Maps: use maps:// or http:// as the URL scheme for iOS & Android respectively. Use this as the map location: maps.google.com/maps?q=440+Bernardo+Ave,+Mountain+View,+CA&hl=en&sll=42.746632,-75.770041&sspn=6.364676,10.305176&oq=44&hnear=440+Bernardo+Ave,+Mountain+View,+Santa+Clara,+California+94043&t=m&z=17

    2. SMS: use sms:+ and a number of your choice

    3. Phone: use tel:// and a number of your choice

    4. YouTube: use http://www.youtube.com/watch?v=iodEa0eitag as the target URL

    5. Store: for iOS, use http://itunes.apple.com/us/app/legoland-california-official/id452395530?mt=8 and for Android use market://details?id=com.zc.android

  3. Build your application and test that these buttons perform their assigned functions.

  4. Now we will modify this app so it can be opened by the second app.

  5. For iOS, add the following code to the tiapp.xml file, and make sure the app ID matches the app ID you chose for your app.

    Code Block
    languagehtml/xml
    <ios>
      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleURLName</key>
          <string>com.appcelerator.urlschemes</string>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>Urlschemes</string>
          </array>
        </dict>
      </array>
    </ios>


  6. For Android: you must have built for the emulator at least once, the follow these steps:

    1. Open build/android/AndroidManifest.xml

    2. Copy the <application> tag and all its contents

    3. In tiapp.xml, modify the <android> tag to remove the '/' that makes it an empty tag; add a closing </android> tag

    4. Within that tag, add <manifest></manifest> tags

    5. Within the manifest tags, paste the tags you copied from the generated manifest

    6. Following the </intent-filter> closing tag, add the following code:

      Code Block
      languagehtml/xml
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="urlschemes" android:host=""/>
      </intent-filter>


  7. To work around a tooling default, we'll need to build the project from the command line with an additional flag. First, clean the project in Studio. Then, open a terminal window and navigate to your project's root directory. Enter the following command (make sure to specify the appropriate target platform, though):


    1. titanium build --platform ios --force-copy

  8. Create a second Alloy app with a name and app ID of your choice. The app should have three buttons in its index view. They should have the labels: “Open Target app”, “In Target app, open Maps”, and “In Target app, open YouTube”. Give these buttons the action properties of “”, “maps”, and “youtube” respectively. Also, give all the buttons the onClick property of “doClick”

  9. In the index controller insert the following doClick function before opening the window:

    Code Block
    languagejavascript
    function doClick(e) {  
      if(OS_IOS) {
        if(Ti.Platform.canOpenURL('Urlschemes://')) {
          Ti.Platform.openURL('Urlschemes://?'+action);
        } else {
          alert('You must install the Target app first');
        }
      } else {
        var didItWork = Ti.Platform.openURL('urlschemes://?'+action);
        if(!didItWork) {
          alert('You need to install the Target app');
        }
      }
    }


  10. Build and run the application with the command line technique described above. Once the app is open, you can press the Open Target App button, and your first app should open.

  11. Close the app, and we will now edit our first app to accept arguments when it is called to be opened.

  12. In the URLSchemes app, add the following code to the alloy.js file:

    Code Block
    languagejavascript
    Alloy.Globals.urlParser = function(url) {
        url = url.replace(/[Uu]rlschemes:\/\/\?/,"");
        return url.split('&');
    };
    
    if(OS_ANDROID) {
        Alloy.Globals.action = '';    
        var activity = Ti.Android.currentActivity;
        function doIt(e) {
            var args = activity.getIntent().getData();
            if(args && args != 'urlschemes://') {
                // parse the url string and arguments
                var parsedArgs = Alloy.Globals.urlParser(args);
                switch(parsedArgs[0]) {
                    case 'maps':
                        Alloy.Globals.action = 'maps';
                    break;
                    case 'youtube':
                        Alloy.Globals.action = 'youtube';
                    break;
                }
            }
        }           
        activity.addEventListener("start", doIt);
    }


  13. Now, in the index controller add the following code to the beginning of the file:

     

     

    Code Block
    languagejavascript
    // check for arguments passed to this app
    if(OS_IOS) {
        $.index.addEventListener('open', function(e){
            	function grabArguments() {
            		var args = Ti.App.getArguments();
            		if(args.url) {
            			// property present only if app has been launched from the other app
            			var parsedArgs = Alloy.Globals.urlParser(args.url);
            			switch(parsedArgs[0]) {
            				case 'maps':
            					doClickMaps();
            				break;
            				case 'youtube':
            					doClickYouTube();
            				break;
            			}
            		}
            	}
            	grabArguments();
            	Ti.App.addEventListener('resumed', grabArguments);
        });
    } else if(OS_ANDROID) {
        $.index.addEventListener('open', function() {
            switch(Alloy.Globals.action) {
                case 'maps':
                    doClickMaps();
                break;
                case 'youtube':
                    doClickYouTube();
                break;
            }
        });
    }

     

     

  14. Build both app as you did before, and now if you click any of the buttons in the second app we made, the described action should be taken by the first app.


    You can download the completed applications from: this link.