Titanium SDK 3.0

Two days before Appcelerator released Titanium SDK version 3.0. This  is one of the major release from Appcelerator. This release contains 170 new features and enhancement.

Here I have listed few features based on my personal opinion.

Important New Features in 3.0 SDK

• Alloy FrameworkMVC framework for Titanium Mobile
• On-Device DebuggingOn-device debugging on Android and iOS. Android via USB, iOS via WiFi . Learn more about debugging.
• Android Action Bar Support for the Android action bar
• Command-Line Interface    Support for Node.js-based command-line interface
  

Other Features

• Titanium.App.disableNetworkActivityIndicator  - Prevents network activity indicator from being displayed. (New API, supported on iPhone and iPad.)
• Titanium.Platform.manufacturer - Gets the value of the manufacturer property. (New API, supported on Android, iPhone and iPad.)
• Titanium.UI.AUTOLINK_EMAIL_ADDRESSES
• Titanium.UI.ActivityIndicatorStyle - A set of constants for the styles available for Titanium.UI.ActivityIndicator objects. (Added support for Android.)
• Titanium.UI.Android.PROGRESS_INDICATOR_DIALOG
• Titanium.UI.AlertDialog.style (iPhone and iPad.)
• Titanium.UI.ScrollableView.dragend
• Titanium.UI.ScrollableView.dragstart
• Titanium.UI.TextField.maxLength(Added support for Android.)
• Titanium.UI.View.twofingertap(Added support for Android.)

How to Update?
“For new users, download Titanium 3.0
For existing Titanium Studio users, you will be prompted to update automatically on the next restart. You can also manually check for updates by selecting the Check for Titanium SDK Updates from the Help menu within Titanium Studio ”

Important Links

• Announcing Titanium 3.0
• Breaking Changes in Titanium SDK 3.0 (impotrant article to read befor updating your Ti SDK to 3.0)
• Titanium SDK 3.0 release notes

Appc Mobile Dev Challenge App - ShareCar

My App(ShareCar) for Appcelerator Mobile Dev Challenge



A new Car Sharing service for commuters in India.

Simple and intuitive-to-use car sharing(carpooling) application empowers ride-sharing in real time within India. A ShareCar is a must have app which enables passengers or drivers to save money, commute, carbon emissions and reducing traffic congestion. This app helps you find interesting people in your neighborhood attending the same destination that you are heading to. Users can offer a ride to them or join their ride. Users can easily search, connect and organize their car share together, dividing the fuel cost. It lets you forge useful relationships with like-minded people. Simply use the journey planner to search the database by date and route. Using ShareCar user can share their ride information easily on Facebook.


Why Share?

• Fuel is very expensive 
• Control air pollution & go green
• Save oil, time and money
• Reduce traffic
• Make new friends
• Helps you, helps someone else

Key Features

• Users can quickly and easily insert carpools(offer/request)
• Intuitive messaging system
• Easy overview and management of listings
• Detailed user profile
• Detailed search options for national travel (offer or request, trips by women for women, for smokers / non-smokers, etc.)
• No limit on the number of rides you offer or take
• Easily flip through with clear search result details
  

Technical Features

• Support for Android and iOS 
• Build by Appcelerator Titanium Framework
• Backend - Appcelerator Cloud Services(ACS)
  [Cloud Users, Social Integration,  Custom Objects,  Photos, Messages]

Challengepost URL :  http://appcelerator.challengepost.com/submissions/9857-sharecar

Get connected, socialize, and save money and fuel.

ACS Social Integration

Do you know, How to create ACS cloud user account using Facebook login?
Yes, we can do using ACS Social Integrations.

The external account login will create a ACS Services account if it hasn't been created, otherwise, it will login using the user who has the matching external account info.

STEP 1 - Facebook login in Titanium App 
Use below sample code for Facebook login

STEP 2 - Social Integration
After successfull login with Facebook, you will get Facebook accessToken, you can retrive this token using "Ti.Facebook.accessToken".

To integrate your facebook account with cloud, you need to pass three parameters to "Cloud.SocialIntegrations.externalAccountLogin" method,

id - External account's user id, optional for facebook. ACS server will obtain the uid using facebook token if id is missing
type - Type of the external account social media like Facebook, LinkedIn, Twitter(Currently only facebook token will be validated by the ACS server)
token - Token provided by the external account
add SocialIntegrations in Facebook login event listener

After the successful ACS Social Integrations go to
https://my.appcelerator.com/apps -> ypou-app -> Manage ACS -> Development -> Users
Here you will find a new cloud user account, which was created by external account login.

Other Methods
externalAccountLink - Associate an external account with an existing Appcelerator Cloud Services user account

externalAccountUnlink - Disassociate an external account from a Appcelerator Cloud Services user account.

searchFacebookFriends - Retrieves a list of Facebook Friends

References: 
http://docs.appcelerator.com/titanium/2.1/index.html#!/api/Titanium.Cloud.SocialIntegrations
https://cloud.appcelerator.com/docs/api/v1/social/loginexternal

Locking Android Orientation Mode

You can lock the orientation mode for Android in Titanium by successfully implementing the following steps :

By following the below steps you can lock the orientation mode throughout the app.

 1) Create a custom AndroidManifest.xml (copy this from original generated source
"build/android/AndroidManifest.xml")
2) Copy this on the created folder "platform/android/AndroidManifest.xml" at the top level of your project.(Inside your project root)

Locking Android Orientation Mode

3) Add this: android:screenOrientation="portrait" to all activities
4) Remove this: "|orientation" from all activities.

Here is my AndroidManifest.xml.


Here you can download the complete working project from my Github account Titanium-Android-Orientation

Appcelerator Titanium Alloy Framework

My Presentation About Appcelerator Alloy Frame work

Appcelerator Titanium Alloy from Karthi Ponnusamy

Here you can download the complete working project from my Github account  Appcelerator Titanium Alloy Sample App

Top 5 Visited Posts

Here are the Top 5 visited post on titaniumtutorial.com based on Google Analytics stats.

Post
Appcelerator Cloud Push Notification in Android Push Notification for Android using Appcelerator Cloud Service(ACS)
Launch third-party apps from Titanium App Launch iOS Native(Map,Settings,Browser,..etc)/Third-party applications from our Titanium Application
Appcelerator Cloud Push Notification in iPhone Push Notification for iOS using Appcelerator Cloud Service(ACS)
Appcelerator Cloud Service Custom Object and Query Custom Objects using >Appcelerator Cloud Service and Query(Order by, Greater than, Less Than, Equal) the Objects
WebView in Appcelerator Titanium WebView in Appcelerator Titanium with events explanation

YouTube Playlist in Titanium

In this post I am going to discuss about how to fetch YouTube playlist from a channel using Appcelerator Titanium.

YouTube offer API for category, search term, playlist, favorites, subscriptions... etc. Here you can found list of YouTube API
https://developers.google.com/youtube/getting_started

Below API will retrieve the user's playlists. This request does not require authentication
https://gdata.youtube.com/feeds/api/users/userId/playlists?v=2

* Here  userId represents YouTube username.

The above API response containing a playlists feed in XML format.
The response contains a series of <entry>  tags, with each entry describing a playlist.
Each entry contains the playlist's title, description, author and modification date as well as
a  <content> tag that specifies the URL for retrieving the list of videos in the playlist

Here I am  using Apple's YouTube username to fetch their YouTube playlist

var channelName = "apple";
var loader = Titanium.Network.createHTTPClient();
loader.open("GET", "http://gdata.youtube.com/feeds/api/users/"+channelName+"/playlists?v=2");

loader.onload = function() {
 var doc = this.responseXML.documentElement;
 var items = doc.getElementsByTagName("entry");
 for (var i = 0; i < items.length; i++) {
   var item = items.item(i);
   var playlist_title = item.getElementsByTagName("title").item(0).text;//playlist title
   var vid_count = item.getElementsByTagName("yt:countHint").item(0).text; //video count for this playlist
   var play_list_id = item.getElementsByTagName("yt:playlistId").item(0).text; //play_list_id
 }
};

loader.onerror = function(e) {
 alert("Error:"+e.error);
};

loader.timeout = 10000;
loader.send();

In below code I am going to retrieve all the videos in a particular playlist using playlist id.
http://gdata.youtube.com/feeds/api/playlists/playlist_id?v=2

var loader = Titanium.Network.createHTTPClient();
loader.open("GET", "http://gdata.youtube.com/feeds/api/playlists/" + playlist_id + "?v=2");

loader.onload = function() {
  var doc = this.responseXML.documentElement;
  var items = doc.getElementsByTagName("entry");
  for (var c = 0; c < items.length; c++) {
   var item = items.item(c);
   var thumbnails = item.getElementsByTagName("media:thumbnail");
   if (thumbnails && thumbnails.length > 0) {
     var media = thumbnails.item(0).getAttribute("url"); //thumbnail image
     var title = item.getElementsByTagName("title").item(0).text; //video title
     var videoId = item.getElementsByTagName("yt:videoid").item(0).text; //video id
   }
  }
};

loader.onerror = function(e) {
 alert("Error:" + e.error);
};

loader.timeout = 5000;
loader.send(); 

Playlist listing for Apple

Video List for Particular Playlist

Here you can download the complete working project from my Github Titanium YouTube Playlist

CodeStrong

Appcelerator Titanium Chennai Event

Hello Friends,

We are coming back with another Appcelerator Titanium event in Chennai. This time we are coming with "Cross Platform Mobile Strategy", we have two speakers

1. Kevin Whinnery, Chief Technical Evangelist from Appcelerator.
2. Sivakumar Veerappan, CEO from Anubavam.

Agenda:

6:00 P.M: Registration and Networking

6:30 P.M: Introductions to available Cross Platforms, AppC and Titanium framework: by Sivakumar Veerappan, CEO, Anubavam

6:45 P.M: The Appcelerator Mobile Platform: Full Stack, Cross-Platform, and Incredibly Fast: By Kevin Whinnery, Chief Technical Evangelist, Appcelerator

Titanium Mobile has revolutionized mobile development by empowering top-quality native application development for iOS and Android from a single JavaScript codebase.  For Appcelerator, this is only the beginning.  Our goal is to provide the first and best full-stack development platform for mobile applications.  Appcelerator integrates an open source, cross-platform mobile development SDK, cloud services, application analytics, and development tools into the most productive, feature-rich mobile development platform around.

In this session, Kevin will discuss where the Appcelerator platform is today, and where it's going in the future.  We will also do a technical deep dive on the latest improvements and additions to the Appcelerator platform, including the core native platforms, mobile web, and cloud services.  As always, we'll have plenty of time for Q&A and digging deeper into the features and topics you want to explore.

8:30: Dinner


Date: 18 July 2012

Time: 06:00 P.M to 08:30 P.M

Venue: Fortune Select Palms

          142, Rajiv Gandhi Salai,

          Old Mahabalipuram Road,

          Thoraipakkam,

          Chennai – 600096

You can RSVP for this event here http://www.meetup.com/Chennai-Titanium-User-Group/events/73255942/

Don't forget to confirm your seats before coming..


For more details contact
04465180342, 9994526041

Regards,
Ramkumar Murugadoss

Appcelerator Cloud Push Notification in iPhone

Push Notification in iOS Using Appcelerator Cloud Service

We can implement Push Notification in iOS using Appcelerator Cloud Service in 5 steps.

1. Cloud User Login
2. Retrieve Device Token
3. Subscribe a Channel
4. Push Certificates
5. Push Configuration 

1)Cloud User Login
Create a test user in Appcelerator Cloud Console 
My Apps -> Manage ACS ->  DEVELOPMENT ->  Users
and login with credential. Use below code for cloud user login

 
    var Cloud = require('ti.cloud');

    Cloud.Users.login({
        login: 'push123',
        password: 'push123'
    }, function (e) {
    if (e.success) {
    var user = e.users[0];
     alert("Loggin successfully");
        } else {
            alert("Error :"+e.message);
        }
    });

2)Retrieve Device Token
You can Retrieve Device Token using below code

 

    Titanium.Network.registerForPushNotifications({
        types: [
            Titanium.Network.NOTIFICATION_TYPE_BADGE,
            Titanium.Network.NOTIFICATION_TYPE_ALERT,
            Titanium.Network.NOTIFICATION_TYPE_SOUND
        ],
    success:function(e)
    {
        deviceToken = e.deviceToken;
        alert("deviceToken = "+deviceToken);
        registerForPush();
    },
    error:function(e)
    {
        alert("Error: "+e.message);
    },
    callback:function(e)
    {
        alert("push notification received"+JSON.stringify(e.data));
    }
    });

3)Subscribe a Channel
Add following code for channel subscribtion

 
    Cloud.PushNotifications.subscribe({
        channel: 'demo_alert',
        type:'ios',
        device_token: deviceToken
    }, function (e) {
        if (e.success) {
            alert('Success :'+((e.error && e.message) || JSON.stringify(e)));
        } else {
            alert('Error:' + ((e.error && e.message) || JSON.stringify(e)));
        }
    });

4)Push Certificates
It is most important part of this Tutotial, Appcelerator Doc clearly expained about how to create push certificates. http://cloud.appcelerator.com/docs/ios#push
Follow this section("Provisioning your Device for specialized Development") to create Development and Production Push certificates. Your certificates should be in .p12 format.

5)Push Configuration
After getting the push certificates(in my case I have created development push certificate), upload it in cloud console. 
My Apps -> Manage ACS ->  DEVELOPMENT ->  Settings -> Apple iOS Push Certificates

Cool.., You have completed  Push Notification setup. This time for testing, run the application in iOS device and click the button "REGISTER PUSH NOTIFICATION". You will get 3 alerts continuously.

Then go to My Apps -> Manage ACS -> DEVELOPMENT -> Push Notifications, here you can see "1 iOS clients subscribed to push notifications"

 It is time to send push notification, enter the values and hit the button "Send Push Notification" instantly you will receive notification in your iOS device(with default icon and sound)

Push Notification in iPad

Push Notification Callback

Here you can download the complete working project from my Github Appcelerator Titanium iOS Push Notification

If anyone found difficulties in push notification implementation feel free to contact me

CodeStrong

Titanium Layout

In Titanium, windows and views have layout property. There are three types of Layout available in Titanium

1. Composite or Absolute (default)
2. Vertical
3. Horizontal

Composite or Absolute (default)

It is default layout. A child view is positioned based on its positioning properties(top, bottom, left, right and center). If no positioning properties are specified, the child is centered.

var win = Ti.UI.currentWindow;

var label1 = Ti.UI.createLabel({
    text : 'Sample Text 1',
    color : 'blue',
    height : 40,
    width : 180,
    top : 100,
    left : 60,
    font:{fontSize:14, fontWeight:'bold'},
    textAlign : 'center'
});
win.add(label1);

var label2 = Ti.UI.createLabel({
    text : 'Sample Text 2',
    color : 'blue',
    height : 40,
    width : 180,
    top : 160,
    left : 60,
    font:{fontSize:14, fontWeight:'bold'},
    textAlign : 'center'
});
win.add(label2);

var label3 = Ti.UI.createLabel({
    text : 'Sample Text 3',
    color : 'blue',
    height : 40,
    width : 180,
    top : 220,
    left : 60,
    font:{fontSize:14, fontWeight:'bold'},
    textAlign : 'center'
});
win.add(label3);

Vertical

In vertical layout all children are ordered one below the other(top to bottom). All child sandboxes have the same width (set to the parent's width).

The first child is laid out top units from its parent's bounding box. Each subsequent child is laid out below the previous child. The space between children is equal to the upper child's bottom value plus the lower child's top value.

var win = Ti.UI.currentWindow;
    win.layout = "vertical";

var label1 = Ti.UI.createLabel({
    text : 'Sample Text 1',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    top : 50
});
win.add(label1);


var label2 = Ti.UI.createLabel({
    text : 'Sample Text 2',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    top : 50
});
win.add(label2);


var label3 = Ti.UI.createLabel({
    text : 'Sample Text 3',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    top : 50
});
win.add(label3);

Horizontal

In horizontal layout all children are ordered next to each other in a row.
All children in a row have the same sandbox height.

Here children are laid out horizontally from left to right, in rows. If a child requires more horizontal space than exists in the current row, it is wrapped to a new row. The height of each row is equal to the maximum height of the children in that row.

var win = Ti.UI.currentWindow;
    win.layout = "horizontal";

var label1 = Ti.UI.createLabel({
    text : 'Sample Text 1',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    left:10
});
win.add(label1);

var label2 = Ti.UI.createLabel({
    text : 'Sample Text 2',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    left:10
});
win.add(label2);

var label3 = Ti.UI.createLabel({
    text : 'Sample Text 3',
    font:{fontSize:14, fontWeight:'bold'},
    color : 'blue',
    left:10
});
win.add(label3);

CODESTRONG

Appcelerator Cloud Push Notification in Android

This tutorial is based on Ti SDK 3.0.0, which is outdated. I have a new blog post based on Ti SDK 3.1.3GA using GCM.

What is Push Notification?
Push notification allows an app to notify you of new messages or events without the need to actually open the application, similar to how a text message will make a sound and pop up on your screen. This is a great way for apps to interact with us in the background, whether it be a game notifying us of some event occurring in our game world or simply the iPad's mail application beeping as a new message appears in our inbox. read more

Push Notification in Titanium Using Cloud Service
We can achieve Push Notification in Titanium using Appcelerator Cloud Service in 5 steps.

1. Cloudpush Module Implementation
2. Retrieve Device Token
3. Cloud User Login
4. Subscribe  a Channel
5. Push Configuration

1)Cloudpush Module Implementation
Cloudpush provides methods for accessing Android push notifications from ACS using the MQTT protocol. require cloudpush in your app and add module in  your tiapp.xml

// add this line in tiapp.xml
<module platform="android">ti.cloudpush</module> 
// add this line in app.js
var CloudPush = require('ti.cloudpush'); 

2)Retrieve Device Token
You can Retrieve Device Token using below code

 
  CloudPush.retrieveDeviceToken({
          success: function deviceTokenSuccess(e) {
              alert('Device Token: ' + e.deviceToken);
              deviceToken = e.deviceToken
          },
          error: function deviceTokenError(e) {
              alert('Failed to register for push! ' + e.error);
       }
  });

3)Cloud User Login
Before subscribe for Push Notification, cloud user should logged in.
So create a test user in Appcelerator Cloud Console
My Apps -> Manage ACS ->  DEVELOPMENT ->  Users
and login with credential. Use below code for cloud user login

    Cloud.Users.login({
        login: 'push123',
        password: 'push123'
    }, function (e) {
        if (e.success) {
            alert("login success");
        } else {
            alert('Error: ' +((e.error && e.message) || JSON.stringify(e)));
        }
   });

4)Subscribe a Channel
Add following code for channel subscribtion

 
             Cloud.PushNotifications.subscribe({
                 channel: 'alert', // "alert" is channel name
                 device_token: deviceToken,
                 type: 'android'
             }, function (e){
                 if (e.success) {
                    alert('Subscribed for Push Notification!');
                 }else{
                     alert('Error:' +((e.error && e.message) || JSON.stringify(e)));
                 }
             });

5)Android Push Configuration
It is final step. In Appcelerator Cloud Console go to
My Apps -> Manage ACS -> DEVELOPMENT -> Settings/Android Push Configuration and enter the Application Package in the text box. Your pakage name should be similar to com.xxx.androidpush  Here xxx is company name and androidpush is Application name

Cool.., You have completed Android Push Notification setup(Here is the whole sample code). This time for testing, run the application in android device and click the button "Android Cloud Push Notification". You will get 3 alerts continuously.

Then go to My Apps -> Manage ACS -> DEVELOPMENT -> Push Notifications, here you can see "1 Android clients subscribed to push notifications"

It is time to send push notification, enter the values and hit the button "Send Push Notification" instantly you will receive notification in your Android device(with default icon and sound)

How to customize ACS Push notification?
Here you can use use your custom sounds and icons.

Icon
custom icons must be placed in below directory
App_root/platform/android/res/drawable/myicon.png 

Here "myicon.png" is custom icon, specified in the push message without the filename extension. For example: in icon text box enter the file name without extension(myicon)

Sound
Custom sound must be placed in below directory
app_root/platform/android/assets/sound/beep.wav 

Here "beep.wav" is custom sound, specified in the push message with the filename extension. For example: in custom sound text box you have to enter sound filename with extension(beep.wav). Here is the screens of custom notification

>

Here you can download the complete working project from my Github Appcelerator Titanium Android Push Notification

If anyone found difficulties in push notification implementation feel free to contact me

CodeStrong

Appcelerator Cloud Service Custom Object and Query

Recently Appcelerator integrated cloud services with Titanium, in this post I am going to explain about bacics of Appcelerator Cloud Service(ACS)

What is Mobile Cloud Computing?
Mobile cloud computing is the usage of cloud computing in combination with mobile devices.
Cloud computing exists when tasks and data are kept on the internet(data are stored on servers at a remote location) rather than on individual devices, providing on-demand access.click here to know more

ACS Advantage

• Create a server backed for your app instantly
• Launch and scale your app automatically
• No server coding or administration required
• Scalability and Reliability
• Flexibility
• Reduced Cost
• Increased Storage

What can we do with ACS?

Appcelerator provides around 15+ cloud services, among that few are

Standard(Tier 1)

• Users
• Files
• Photos
• Custom objects
• Emails
• Push notifications

Advanced(Tier 2)

• Chats
• Checkins
• Events
• Friends
• Photo Collection
• Places
• Posts
• Reviews
• Message
• Social integration

In this post I am going to explain how to 

1. How to create cloud app?
2. How to create cloud  user?
3. How to create custom object?
4. How to query custom object?

1. Create cloud App

Open your Titanium Studio and create a new ploject and make sure (Automatically cloud-enable this application should be checked)

After creating the project edit your tiapp.xml file you can see two(development, Production) set of cloud API keys. No need to worry about this it will be automatically mapped.

For example If run the App in simulator or Device it will use Development keys, If you create a signed pakage it will use Production keys.

Then login to Appcelerator cloud console and you can see yor newly created app

2.Create Cloud User

Include the ti.cloud module at top of your file then add below code to create a cloud User, Here I am creating a User with some sample data

   var Cloud = require('ti.cloud');
          Cloud.Users.create({
            username: "testuser1",
            password: "testuser1",
            password_confirmation: "testuser1",
            first_name: "test",
            last_name: "user1"
        }, function (e) {
            if (e.success) {
                var user = e.users[0];
                alert('Created! You are now logged in as ' + user.id);
                
            }
            else {
             if (e.error && e.message) {
                 alert('Error :' + e.message);   
             }
            }
            
        });

after creating a cloud user, the user will logged in automatically 

click Manage -> Development -> App Management -> Users

Here you can see the list of users, also you can edit the user detail

3.Create Custom Object

Cloud user can definec their own Custom Objects and object types, add beolow code to create a cloud custom object, before creating a custom object user must be logged in

    Cloud.Users.login({
      login  : 'testuser1',
      password: 'testuser1',
    }, function(e) {
      if (e.success)   {

        Cloud.Objects.create({
          classname : 'books',
          fields : {
            book_id : 1,
            title : 'Javascript',
            author : 'Peter'
          }
        }, function(e) {
          if(e.success) {
            alert("created");
          } else {
            alert('Error: ' + ((e.error && e.message) || JSON.stringify(e)));
          }
        }); 
                    
      } else {
        alert('Login Error:' +((e.error && e.message) || JSON.stringify(e)));
      } 
    }); 

click Manage -> Development -> App Management -> Custom Objects

Here you can see the list of custom objects, also you can edit the object

4. Query Custom Object

Here I am using three type of query

  if(e.index == 0){
   var params = {classname: "books",page: 1,per_page: 10}; // which is used for sellect object having classname = "books"
  }else if(e.index == 1){
   var params = {classname: "books",page: 1,per_page: 10, where: { author: "Peter"}};// which is used for sellect object WHERE author = 'Peter' and classname = "books"
  }else if(e.index == 2){
   var params = {classname: "books",page: 1,per_page: 10, where: { "book_id":{"$gte" : 2}}};// which is used for sellect object WHERE book_id > 2 and classname = "books"
  }

    Cloud.Objects.query(
     params
    , function(e) {
      if (e.success) {
                opLabel.text = JSON.stringify(e.books);
      } else {
                alert('Error: ' +((e.error && e.message) || JSON.stringify(e)));        
      } 
    })

Here you can download the complete working project from my Github account  Appcelerator Titanium Custom Object and Query

Techday7 - Appcelerator Titanium Development workshop in Chennai

Techday7 is organizing a Appcelerator Titanium Development workshop in Chennai on June 16 2012 with the name of Cross Platform Mobile Development using Appcelerator Titanium. Techday7 is providing a 3 hour workshop. This workshop is targeted at the developer to equip them to use Appcelerator’s Titanium platform to create cross platform native mobile applications using HTML, CSS and Javascript skills and open source technologies. Come and learn the recommended practices, techniques and methodology used in Titanium framework. These workshops is designed for individuals who want to become an expert Titanium developer or improve mobile app development skills, we can help you achieve your goals. In this workshop we are going to deliver the speech on following topics

• Why cross-platform mobile framework? What is Appcelerator Titanium?
• Getting started with Appcelerator Titnanium
• Best Practices for Appcelerator Titanium

Cross Platform Mobile Development using Appcelerator Titanium

Techday7 invites you all to attend this event. Kindly RSVP this event to confirm your seats.
Date: 16 June 2012
Time: 9:00 A.M to 1:00 P.M
Venue: IIT Madras Research Park,
Kanagam Road, Taramani,
Chennai – 600 113.
Contact: 044-65180342, 9994526041, 9092049890

Venue Map

https://twitter.com/techday7 https://www.facebook.com/TECHDAY7

Export CSV File in Titanium

One of my recent project I have exported tabular data into CSV file. In this post I will discuss about how to export CSV file in Appcelerator Titanium Application.

Here I have created a commonJS module for exporting tabular data into CSV file. The commonJs module function accept an argument and it export argument into CSV file.

The input argument(array) should be in following structure.

var input = [
    ["sample data 0", "sample data 1", "sample data 2"],
    ["sample data 0", "sample data 1", "sample data 2"],
    ["sample data 0", "sample data 1", "sample data 2"],
    ["sample data 0", "sample data 1", "sample data 2"]
];

In app.js add the below code

var csv = require('exportCsvData');

var win = Ti.UI.createWindow({
    backgroundColor:'#ccc',
    title:'CSV Import Module'
})

var createCsv = Titanium.UI.createButton({
    title:'Export CSV',
    top:'140',
    left:'110',
    height:'40',
    width:'115',
    color:'black'
});
win.add(createCsv);

win.open();

createCsv.addEventListener('click', function(e){
   var input = [
     ["sample data 0", "sample data 1", "sample data 2", "sample data 3"],
     ["sample data 0", "sample data 1", "sample data 2", "sample data 3"],
     ["sample data 0", "sample data 1", "sample data 2", "sample data 3"],
     ["sample data 0", "sample data 1", "sample data 2", "sample data 3"]
   ];
  
   var op = csv.exportCsvData(input);
   alert("Output file path = "+ op); 
});

Here is the code of exportCsvData.js which is a commonJS module

exports.exportCsvData = function(input)
{

    var rowTxt = "";
    for(var i=0;i < input.length; i++){ // row iteration
        for(var j = 0; j < input[i].length; j++){ // column iteration
            rowTxt += '"' + input[i][j] + '"';
 
            if(j < (input[i].length-1))
            {
                rowTxt += ',';
            }
        }
        rowTxt += '\n';// adding new line at end of row
    }

    // creating output file in application data directory
    var outputFile = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'output.csv');
    // writing data in output file 
        outputFile.write(rowTxt); 


    if(outputFile.exists){
        alert("CSV generated!!!");
    }
    
    // return output file path
    return outputFile.nativePath;    
}

this module will return the output CSV file path

Now I am a Titanium Certified App Developer

Recently(April 23 2012) I have completed TCAD Certification(Titanium Certified App Developer).

Following Links helped me to achieve TCAD

https://wiki.appcelerator.org/display/td/TCAD+Course+Labs
https://github.com/appcelerator-training

Launch third-party apps from Titanium App

We can open Third-party applications from our Titanium Application.

Example 1:

We can open iOS Maps app by using the below code.

Ti.Platform.openURL('Maps://');

Example 2:

We can open iOS settings app by using the below code.

Ti.Platform.openURL('Prefs://');

We can open iOS LOCATION SERVICES in settings by using the below code.

Ti.Platform.openURL('prefs:root=LOCATION_SERVICES'); 

List of currently known URL Scheme in the Settings app

    prefs:root=General&path=About
    prefs:root=General&path=ACCESSIBILITY
    prefs:root=AIRPLANE_MODE
    prefs:root=General&path=AUTOLOCK
    prefs:root=General&path=USAGE/CELLULAR_USAGE
    prefs:root=Brightness
    prefs:root=General&path=Bluetooth
    prefs:root=General&path=DATE_AND_TIME
    prefs:root=FACETIME
    prefs:root=General
    prefs:root=General&path=Keyboard
    prefs:root=CASTLE
    prefs:root=CASTLE&path=STORAGE_AND_BACKUP
    prefs:root=General&path=INTERNATIONAL
    prefs:root=LOCATION_SERVICES
    prefs:root=ACCOUNT_SETTINGS
    prefs:root=MUSIC
    prefs:root=MUSIC&path=EQ
    prefs:root=MUSIC&path=VolumeLimit
    prefs:root=General&path=Network
    prefs:root=NIKE_PLUS_IPOD
    prefs:root=NOTES
    prefs:root=NOTIFICATIONS_ID
    prefs:root=Phone
    prefs:root=Photos
    prefs:root=General&path=ManagedConfigurationList
    prefs:root=General&path=Reset
    prefs:root=Sounds&path=Ringtone
    prefs:root=Safari
    prefs:root=General&path=Assistant
    prefs:root=Sounds
    prefs:root=General&path=SOFTWARE_UPDATE_LINK
    prefs:root=STORE
    prefs:root=TWITTER
    prefs:root=General&path=USAGE
    prefs:root=VIDEO
    prefs:root=General&path=Network/VPN
    prefs:root=Wallpaper
    prefs:root=WIFI
    prefs:root=INTERNET_TETHERING

Reference URL : iOS-url-scheme
NOTE : All url schemes to iOS settings will be removed in iOS 5.1

Google Geocode in Titanium Application

In my Titanium Application I have tried to use reverseGeocoder to find the current address (Street, City, State, Zip and Country) from the latitude and longitude.

But Ti reverseGeocoder does not return the exact address from the current latitude and longitude at all the time. It works only in few locations only.

So that I have move to Google Geocode API

Here is my sample code for how to use Google Geocode API in Titanium Application to get Street, City, State, Zip and Country value using latitude and longitude.

var addrUrl = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&latlng="+latitude+","+longitude;
/* web-service call */
var addrReq = Titanium.Network.createHTTPClient();
addrReq.open("GET",addrUrl);
addrReq.send(null);
 
addrReq.onload = function()
{
    var response = JSON.parse(this.responseText);
 
    if(response.status == "OK"){
        var resLen = response.results[0].address_components.length;
        for(var i=0; i < resLen; i++) {
            switch (response.results[0].address_components[i].types[0])
            {
                case "street_number":
                    Ti.API.info("street number : "+response.results[0].address_components[i].long_name);
                    break;
                case "route":
                    Ti.API.info("street name : "+response.results[0].address_components[i].long_name);
                    break;
                case "locality":
                    Ti.API.info("city name : "+response.results[0].address_components[i].long_name);
                    break;
                case "administrative_area_level_1":
                    Ti.API.info("state name : "+response.results[0].address_components[i].long_name);
                    break;
                case "postal_code":
                    Ti.API.info("zip code : "+response.results[0].address_components[i].long_name);
                    break;
                case "country":
                    Ti.API.info("country name : "+response.results[0].address_components[i].long_name);
                    break;
                }
        }
    }else{
        showAlert('','Unable to find Address');
    }
 
};

Google Analytics in Titanium Application

I have recently used Google Analytics to track pages and track events in My Titanium iOS Application. For that I have used Roger Chapman's Titanium Google Analytics Library. I have followed the below steps

STEP 1 : Create Google Analytics Account

You need to Create a Google Analytics Account click this link(http://www.google.com/analytics/) to get started.

After successful creating the account you will get a Google Analytic ID like similar to this one UA-18135349-1

STEP 2 : Add Google Analytics to Titanium App

add the below code in you app.js file

var analytics = new Analytics('UA-18135349-1'); //replace it with your Google Analytics ID
 
analytics.reset();
 
Titanium.App.addEventListener('analytics_trackEvent', function(e){
    analytics.trackEvent(e.category, e.action, e.label, e.value);
});
 
Titanium.App.addEventListener('analytics_trackPageview', function(e){
    var pagename = (e.pageUrl);
    analytics.trackPageview(pagename);
});
 
Titanium.App.Analytics = {
    trackPageview:function(pageUrl){
        Titanium.App.fireEvent('analytics_trackPageview', {pageUrl:pageUrl});
    },
    trackEvent:function(category, action, label, value){
        Titanium.App.fireEvent('analytics_trackEvent', {category:category, action:action, label:label, value:value});
    }
}
 
 
// Function takes an integer which is the dispatch interval in seconds
analytics.start(10);
 
// You don't need to call stop on application close, but this is just to show you can call stop at any time (Basically sets enabled = false)
Titanium.App.addEventListener('close', function(e){
    analytics.stop();
});

STEP 3 : Track Pages

in your win1.js(the page which you want to Track Page View) add the below code

// track page view on focus
win.addEventListener('focus', function(e){
    Titanium.App.Analytics.trackPageview('all-listings/list-view'); // here 'all-listings/list-view' page url, you can use your custom url
});

STEP 4 : Track Events

Add below code in EventListener of the Control which you want to track. For example in my app I have to track the closeBtn event, so that I used below code

// pass the following parameters trackEvent(category, action, label, value)
closeBtn.addEventListener('click', function (e) {
    Titanium.App.Analytics.trackEvent('Dialog','Cancel','CloseButton','');
    win.close();
});

Okay. Cool now everything fine.But how to Check Google Analytics works or not?

Normally Google Analytics Account Activation takes 12 hrs to 1 day(if you created the account newly)

After the activation you can use the below link for real time testing(It will shows the last 30minutes activities)

https://www.google.com/analytics/web/#realtime

For TrackEvent you can check this one

We can't test TrackEvent immediately like(realtime analytics). It takes some time to reflect the changes.

How to test Google Analytics track event for Mobile Applications?

Titanium Android bottom tabgroup

Native android tab group is ALWAYS forced to the bottom by the OS (not by appcelerator). The following post explain how to achieve Bottom tabbar in Titanium(Android OS)

The first thing you want to remember is 90% of whatever you want to be changed using any native config, can be done in Ti by placing that file in the projects root, under whatever structer it was to have in native land. So if the file in a native app would be in '/foo/text.xml', in Ti you would place it in '%your apps project root%/foo/text.xml' Knowing that will help you with a lot of more advanced topics in Titanium dev.

Create a new project, and add the following xml into a file named 'titanium_tabgroup.xml' (without the quotes), inside a new project directory you will create called '%your apps project root%/platform/android/res/layout/' (again, without the quotes).

The XML you want to add is found in this gist

Then do a clean build of your app and run in android :)

Sample Output from Android Simulator

Here you can download the complete working project from my Github Android Bottom Tab Group

Reference Post : Matt Apperson Blog Post

Updated:

Bottom Tabgroup will be supported up to Titanium 3.0,  it will not be supported for Titanium 3.X  

Reason:

Before SDK 3.0, we used TabActivity to implement the TabGroup. Since TabActivity is deprecated, we now use TabHost to implement the TabGroup for API level < 11 in SDK 3.0. We define the TabHost layout in the code. That's why the custom TabHost layout xml file does not work anymore.
Based on the guideline of Pure Android, the bottom tab bars are not recommended. In addition, for API level >= 11 we use ActionBar to implement the TabGroup, in which case tab bars can only be on the top. In order to provide a consistent experience, we don't recommend using bottom tab bars.

AppC Jira Link : https://jira.appcelerator.org/browse/TIMOB-12220

Titanium Mobile API Reference PDF free Download

Titanium Mobile API Reference PDF free Download, Click here to Download

Important Titanium Tutorial Link

These all are Important Titanium tutorials for beginners,

http://wiki.appcelerator.org/ (official guide)
http://vimeo.com/appcelerator (official video tutorials)
http://blog.clearlyinnovative.com/
http://cssgallery.info/category/titanium-appcelerator/ (Seven days with Titanium)
http://www.learningtitanium.com/
http://titaniumtips.com/
http://www.codeboxed.com/
http://mobile.tutsplus.com/category/tutorials/appcelerator/
http://boydlee.com/appcelerator-titanium.html
http://appcodingeasy.com/Titanium-Mobile
http://www.titaniumdevelopment.com.au/

Showcase for Mobile & desktop applications built with Appcelerator Titanium
http://www.builtwithtitanium.com/

Create Album and Post Photos in Facebook Using Appcelerator Titanium

STEP 1
User Need to be Loggedin with Facebook

STEP 2
Have to create a album using Graph API

Titanium.Facebook.requestWithGraphPath('me/albums', {name: albumTitle, message: albumDescription}, 'POST', function(e) {

// handle the response(response will have the album id)
   if(e.success) {
     if(e.result) {
        var response = JSON.parse(e.result);
        var album_id = response.id;
        var path = album_id+'/photos'; // Here response.id represents Album id
     }
   } else if(e.cancelled) {
       Ti.API.debug("user cancelled");
   } else {
       Ti.API.debug(e.result);
   }
});

STEP 3
Post photos to facebook using Graph API along with album id(which we got in previous step)

Before posting photos we have to convert photos into blob, Let assume I am having 3 images(1.jpg,2.jpg,3.jpg) inside the App_root/Resources folder. First we need to convert it into blob, then have to post it in facebook using Graph API

var aTitle = "Test Album";
var aDescription = "my description";
var media = [];      
for(var i=1; i<=3; i++){
   var file = Titanium.Filesystem.getFile(i+".jpg");
   var blob = file.read();
   media.push({'message': 'myPic', 'picture': blob});
}


var path = album_id+'/photos';

for (var m = 0; m < media.length; m++){
  Titanium.Facebook.requestWithGraphPath(path, media[m], 'POST', function(e){
     if (e.success) {
        //message = "Successfully posted in Facebook";
     } else {
        if (e.error) {
          //message = e.error;
        } else {
          //message = "Unkown result";
        }
    }
  });
}
alert("Successfully posted in Facebook");

Here is my working sample code at gist (Tested in iPhone)

Titanium copy image to Clipboard

Titanium provides Clipboard functionality. So that we can able to copy images and texts in Clipboard.
Let assume you have some image files in local file system, by using below code you can able to copy image to Clipboard.

var currIamge = 'test.jpg'  // mention your image path and name
var imageFile = Titanium.Filesystem.getFile(currIamge);
var imageBlob = imageFile.toBlob(); // convert image file into blob using toBlob() method
Ti.UI.Clipboard.setData('image/jpg',imageBlob);

PS : Tested with iPhone and it works fine

WebView in Appcelerator Titanium

The Titanium Web View allows you to open an HTML5 based view which can load either local or remote content. Here I am going to give example for both Local and remote content.

1. WebView with local content
Here I have added some sample text to webview, the 'html' property will accept the HTML content.

var win = Ti.UI.currentWindow;    
var textContent = '
Hi this is the sample text from the webview 
';
var localWebview = Titanium.UI.createWebView({
    top:0,
    left:10,
    right:10,
    html:textContent,
    height:320,
    width:320,
    backgroundColor:'transparent',
    touchEnabled:false
});
win.add(localWebview);

2. WebView with remote content
Here I have added some remote content into the webview, for example I am loading a Facebook page in webview.

var win = Ti.UI.currentWindow;    
Ti.App.fireEvent('show_indicator'); //display loading spinner until webview gets loaded
var fbUrl = "http://www.facebook.com";
var extwebview = Titanium.UI.createWebView({
     top:0,
     left:0,
     right:0,
     url:fbUrl,
     height:440,
     width:320,
     backgroundColor:'#ccc'
});
win.add(extwebview); //adding webview in current window

extwebview.addEventListener('load', function() {
    Ti.App.fireEvent('hide_indicator'); //Hide the Loading indicator after the webview loaded
})

var space = Titanium.UI.createButton({
    systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
  
var buttonClose = Titanium.UI.createButton({
    title:"Done",
    style:Titanium.UI.iPhone.SystemButtonStyle.DONE 
});

var bottomToolbar = Titanium.UI.createToolbar({
    left : 0,
    bottom: 0,
    height : 40,
    width : 320,
    items: [space,space, space,space, space, space,buttonClose]
})
win.add(bottomToolbar); // add close button at the bottom tabbar to close the webview 
  
buttonClose.addEventListener('click', function (e) {
    win.remove(extwebview);
    win.remove(bottomToolbar);
});