Titanium MobileApplication Development

Titanium Alloy - Migration with Model Tutorial

2013-10-16T04:52:00.001-07:00

Hi Friends,

I am busy with my work. Here I am going to write post about "Migration".

What is Migration?
A migration is a description of incremental changes to a database, which takes your database from version 1 to version X, with a migration file for each step in the evolution of your database schema. This is helpful to keep different versions of a database in sync. For example, when version 7 of your application is deployed, migrations are able to successfully update the database from versions 1 through 6.

Where I put migration files in my Titanium project?
In Alloy, migrations are defined by JavaScript files located in the app/migrations folder of the project.

Is there is any naming conversion require for migration files?
Yes, The file should be named the same as the model JavaScript file prefixed with 'YYYYMMDDHHmmss_' (datetime code followed by an underscore), for example, 20120610049877_movies.js(**your model file name should be movies.js). Alloy applies the migrations from oldest to newest, according to the datetime code at the beginning of the file name.

What are the functions used in migration files for upgrade my db?
The migration file contains two functions that need to be implemented : migration.up(migrator)  and migration.down(migrator), where migrator is a special migration object that provides references to the database and table as well as some convenient functions for table operations (see table below). The migration.up function upgrades the database from the previous version, while the migration.down function rolls back the changes to the previous version.

Is migration supports all type of adapters?
  Currently, migrations are only used with the sql sync adapter.

Example Project:
In this tutorial i am creating simple project you can download source code from following github repository.   AlloyMigrationExample

1. Create simple Alloy project
2. Put you preloaded sqlite db file into asset folder.
3. My sqlite db name is "sampledb.sqlite" and the db has "user_accounts" table with some preloaded data

We are going to add migration files for add a new table "movies" and insert the preloaded data.

4. In Titanium Studio, Right click on the project --> New --> Alloy Migration -->Enter your migration table name. (No need to add timedate , Titanium Studio add this for you). In this example we enter "movies". Now you can see migration file in app/migrations/20130812093432_movies.js. (Timedate string will be different ignore it. You can edit timedate string as per your need).

5. Open the 20130812093432_movies.js. file and you can see two function called migration.up and migration.down. Modify code as follow,

 
migration.up = function(migrator) {
 migrator.createTable({
  columns: {
   id: 'INTEGER PRIMARY KEY AUTOINCREMENT',
   title: 'TEXT',
   subtitle: 'TEXT',
   image: 'TEXT'
  }
 });
};

migration.down = function(migrator) {
 migrator.dropTable("movies");
};

6. migrator.createTable() function

This method used to create table at run time and added into database.
columns: In this field you can define your table columns with type.

7. Create Another migrator file for insert the preloaded data in movies table.

Repeat the Step 4. (Exactly same). Finally you get new migrator file with different time date string.
Which means older get executed first.
we get 201308120941308_movies.js , new migration file open this file and modify it.

 
var products = [];
for (var i = 0; i < 500; i++) {
 if (i%7 === 0) {
  products.push({
   title: 'This is the title',
   subtitle: 'This is the slightly more verbose subtitle',
   image: i%2 ? '/appc.png' : '/alloy.png'
  });
 } else if (i%2) {
  products.push({
   title: 'This is the title with subtitle',
   subtitle: 'This is the slightly more verbose subtitle'
  });
 } else {
  products.push({
   title: 'This is the lonely title'
  });
 }
}

migration.up = function(migrator) {
 for (var i = 0; i < products.length; i++) {
  migrator.insertRow(products[i]);
 }
};

migration.down = function(migrator) {
 for (var i = 0; i < products.length; i++) {
  migrator.deleteRow(products[i]);
 }
};

8. Create model file for movies

Right click on project --> New --> Alloy Model --> Enter Model Name "movies"
Modify the app/Model/movies.js

exports.definition = {
 config: {
  columns: {
   id: 'INTEGER PRIMARY KEY AUTOINCREMENT',
   title: 'TEXT',
   subtitle: 'TEXT',
   image: 'TEXT'
  },
  
  adapter: {
   type: "sql",
   collection_name: "movies",
   idAttribute: 'id',
  }
 }
};

Now you can use this model same as other models used in Alloy. You can download working example from github. Download full working example source code from AlloyMigrationExample

Thanks.

Android Native Controls Module for Titanium

2013-08-29T07:16:00.002-07:00

NativeControls - This module helps to create android native controls in titanium.

My Colleague J.Kabeer given an idea to implement module for missing Android native controls.

Initially we start this module with RadioGroup and later version we will plan to update most of the controls.

Feature:

Create android native RadioGroup in titanium
You can set the default selectedIndex value to RadioGroup
You can add "chage" EventListener to RadioGroup
You can get selected RadioButton Object value using getSelectedIndexValue() Method
Define text color by set textColor value
Define layoutType by set the layoutType = "horizontal/vertical"
Passing radio buttons as array of object in "buttons"

Usage:

var nativecontrols = require('learnappcelerator.nativecontrols');

var radiogroup = nativecontrols.createRadioGroup({
 width : Ti.UI.SIZE,
 height : Ti.UI.SIZE,
 top : 100,
 left : 10,
 textColor : "",
 selectedIndex : 2,
 layoutType : "vertical",
 buttons : [{
  id : 1,
  text : 'value 11'
 }, {
  id : 2,
  text : 'value 12'
 }, {
  id : 3,
  text : 'value 13'
 }]
});

radiogroup.addEventListener('change', function(e) {
 alert(JSON.stringify(e.result));
 var obj=radiogroup.getSelectedButton();
 Ti.API.info("selected ButtonValue ="+JSON.stringify(obj));
});

win.add(radiogroup);

Screenshots

Version 1.1 - RadioGroup - available

Version 1.2 - AutoCompleteTexBox - will update soon.

Download:
Module: https://marketplace.appcelerator.com/apps/6378?759209041

Alloy - REST API Json to TableView

2013-08-21T23:55:00.001-07:00

Hi,

I am creating simple application for fetching JSON data from REST API and display the data to Table View.

You can download the source code from json2tableview repository

Steps:

1. Create simple alloy Project
2. Modify index.xml

3. Modify index.js

function openDetail(e) {
 alert('row index = ' + JSON.stringify(e.index));
 //Ti.API.info('row rowData = ' + JSON.stringify(e.rowData));
 //Ti.API.info('row index = ' + JSON.stringify(e..index));
}

var data = [];

var sendit = Ti.Network.createHTTPClient({

 onerror : function(e) {

  Ti.API.debug(e.error);

  alert('There was an error during the connection');

 },

 timeout : 1000,

});

// Here you have to change it for your local ip

sendit.open('GET', 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?types=hospital&location=13.01883,80.266113&radius=1000&sensor=false&key=AIzaSyDStAQQtoqnewuLdFwiT-FO0vtkeVx8Sks');

sendit.send();

// Function to be called upon a successful response

sendit.onload = function() {

 var json = JSON.parse(this.responseText);

 // var json = json.todo;

 // if the database is empty show an alert

 if (json.length == 0) {
  $.table.headerTitle = "The database row is empty";
 }

 // Emptying the data to refresh the view

 // Insert the JSON data to the table view
 var countries = json.results;
 for ( var i = 0, iLen = countries.length; i < iLen; i++) {

  data.push(Alloy.createController('row', {
   icon : countries[i].icon,
   name : countries[i].name

  }).getView());

  // data.push(row);

  Ti.API.info(countries[i].icon);
  Ti.API.info(countries[i].name);

 }

 $.table.setData(data);
};

$.index.open();

4. Create Alloy Controller row (it create row.xml, row.js, row.tss)
5. Modify row.xml

6. Modify row.js

 
var args = arguments[0] || {};

$.icon.image = args.icon;
$.catID.text = ar

7. Add styles to tss files
index.tss

 
"Window":{
 backgroundColor :"#FFF",
 exitOnClose:true,
 navBarHidden:true
}

row.tss

 
"#icon":{
 left:0,
 height:50,
 width:50
}

"TableViewRow":{
 layout:"horizontal"
}

"Label":{
 color:'#000',
 font:{
  fontFamily:"Ariel",
  fontSize:'20dp',
  fontWeight:'bold'
 }
}

Thanks

Pinterest Module for Photo sharing - Titanium

2013-08-11T23:23:00.001-07:00

Hi.

Recently I have developed new titanium module for photo sharing in "Pinterest". This module helps you to sharing images in pinterest. Currently this module only for android.

Download module from here Pinterest - Android Module

Pinterest Module

Description

This module is used to share the photos in pinterest from titanium.

Accessing the pinterest-android Module

To access this module from JavaScript, you would do the following:

var pinterest = require("learnappcelerator.pinterest");

The pinterest variable is a reference to the Module object.

setClientId("clientId");

This is an required Field. You should login into developer.pinterest.com and register you appname. you can get client ID.

pinterest.setClientId("xxxxxxx"); //replace with your client ID

setDebugMode(flag);

This property is optional. If you want to get error logs in console set this as true.

pinterest.setDebugMode(true);

pinterest.createPinterest()

This method used to create the pinIt button.

Usage

var pinterest = require("learnappcelerator.pinterest");
pinterest.setClientId("xxxxxxx");
pinterest.setDebugMode(true);
var pin1 = pinterest.createPin({
        width: 150,
        height: 90,
        top: 100,
        left: 150,
        imageUrl:"http://placekitten.com/400/300",
        baseUrl:"http://placekitten.com",
        description:"kitten image!"
});
win.add(pin1);

Author

Author Name : M. Prakash
Email : prakashmca.m@gmail.com
Blog : http://www.learnappcelerator.blogspot.com

Screen shots:

Thanks.

Alloy - RSS Feed Parser

2013-07-18T02:19:00.002-07:00

RSS feeds benefit publishers by letting them syndicate content automatically. A standardized XML file format allows the information to be published once and viewed by many different programs. They benefit readers who want to subscribe to timely updates from favorite websites or to aggregate feeds from many sites into one place.

I am creating a simple RSS Reader which get the rss feed from given url and parse the xml data.

And return array of objects which is easy to manipulate in your titanium application.

I am creating sample project in alloy framework.

Download source code from github RSS-Feed-Reader

You can find rss.js file in /lib directory.

usage of this file is,

 
var rss = require('rss');
var RSS_URL = OS_MOBILEWEB ? '/goirss.xml' : 'http://www.thehindu.com/news/national/tamil-nadu/?service=rss';
// open detail window
function openDetail(e) {
 $.trigger('detail', e);
}

// Refresh table data from remote RSS feed
function refreshRss() {
 rss.loadRssFeed(RSS_URL, {
  success : function(data) {
   var rows = [];
   _.each(data, function(item) {
    rows.push(Alloy.createController('row', {
     articleUrl : item.link,
     title : item.title,
     date : item.pubDate,
     description : item.description
    }).getView());
   });
   $.table.setData(rows);
  }
 });
}

// do initial load of RSS
refreshRss();

Thank you.

Alloy - Sqlite CreateTable Example

2013-07-12T06:06:00.001-07:00

I created the sample project for createTable into preloaded sqlite database in Alloy Framework

download working example form gist alloySqliteCreateTable

Main logic written in app/controller/index.js

 
function createTable(e) {  
 var db = Ti.Database.open('codeguru');
 if(db){
  db.execute('CREATE TABLE people (name TEXT, phone_number TEXT, city TEXT)');
  var thisName = 'Arthur';
  var thisPhoneNo = '1-617-000-0000';
  var thisCity = 'Mountain View';
  db.execute('INSERT INTO people (name, phone_number, city) VALUES (?, ?, ?)', thisName, thisPhoneNo, thisCity);

  var personArray = ['Paul','020 7000 0000', 'London'];
  db.execute('INSERT INTO people (name, phone_number, city) VALUES (?, ?, ?)', personArray);

  var rows = db.execute('SELECT rowid,name,phone_number,city FROM people');
  while (rows.isValidRow())
  {
    Ti.API.info('Person ---> ROWID: ' + rows.fieldByName('rowid') + ', name:' + rows.field(1) + ', phone_number: ' + rows.fieldByName('phone_number') + ', city: ' + rows.field(3));
    rows.next();
  }
  rows.close();
 }
    alert($.label.text);
}

This is an quick fix for creating table in runtime. And I will working on collection of data inserted through model.js

For now, Refer this following repository for bulk updates in sqlite db alloy framework, One way to do bulk updates and deletes with Appcelerator Alloy Collections bulk_update

JSON object Sorted by Date

2013-07-11T05:32:00.000-07:00

Hi,

Many of them asking how to sort my json objects based on date. And writing many lines of code, sometimes get tired to sort the json object. Here I found simple function to sort your json object based on date.

Not only date you can sort json object based on any attribute by writing custom sort function in your code.

Let me explain how to create custom sort function in java script.

You can download the sample app source code from git repository Sort Json by Date

Example JSON object:

 
var latestOffers=[
          {id: '1', date: '20 Dec 2012, 8:00 am', text:'item1'},
          {id: '2',  date: '29 Jun 2012, 5:47 pm', text:'item2'},
          {id: '3', date: '15 May 2013, 6:40 pm', text:'item3'}         
        ];

Now I write sortbydate() function

function sortbydate(a, b) {
    // change the < condition to > for reverse the sort.
    // here you can add your own sorting condition 
    // eg,   return a.id < b.id;   //its sort your object based on id.
    return new Date(a.date).getTime() < new Date(b.date).getTime();
}

Now you can call the Array.sort() with your sortbydate function.

 
latestOffers.sort(sortbydate);
Ti.API.info('sorted json array ==='+ JSON.stringify(latestOffers));

Thanks

Alloy Framework - Use Preloaded Sqlite Database

2013-07-11T04:01:00.000-07:00

Most of time you may need to use the preloaded db in your application.

We are going to see How to use preloaded SQLite Database in Alloy framework in titanium.

Download the source code from git repository AlloySqlitedb

1. Open the Titanium Studio (I am using 3.1.1)
2. create New Alloy Mobile Project (refer the Link for creating New Alloy Project)
3. Put your sqlite database file into app/assets folder. (I am using myapp.sqlite)
4.create collections object in alloy.js file.

 
Alloy.Collections.fighters = Alloy.createCollection('fighters');

5.create model file "fighters.js" in app/model directory.

 
exports.definition = {
  config:{
   
   adapter:{
    "type":"sql",
    "collection_name":"fighters",
    "db_file": "/myapp.sqlite",
    "db_name": "fighters",
    "idAttribute": "id",
    "remoteBackup":false
   }
  }
}

6.Modify index.xml file in app/views/ directory - create Table View.

 

    
        Fighters

7. Create controller index.js file in app/controller directory

 
var fighters = Alloy.Collections.fighters;
var counter = 1;

function showId(e) {
 if (e.row.model) {
  //alert(e.row.model);
  var detailObj=fighters.get(e.row.model);
  var win=Alloy.createController('detail',{"$model":detailObj});
     win.getView().open();
 }
}

function addTestFighter(e) {
 // create the test fighter model
 var model = Alloy.createModel('fighters', {
  name: 'Name ' + counter,
  nickname: 'Nickname ' + counter
 });
 counter++;

 // add model to the collection and save it to sqlite
 fighters.add(model);
 model.save();

 // let's refresh so we can see the ids coming from the 
 // autoincrement field in the sqlite database in the 
 // row click alerts
 fighters.fetch();
}

fighters.fetch();

$.index.open();

8. Create layout for row.xml in app/views directory

9. Create controller row.js in app/controller directory

 
// Attach the bound model ($model) to the row so 
// we can access it in a click event.
if ($model) {
 $.row.model = $model.toJSON();
}

10. Create layout for for detail.xml in app/views directory

11. Create controller detail.js in app/controller directory.

 
var args=arguments[0]||{};
if(args.$model){
 Ti.API.info('model ='+JSON.stringify(args.$model));
 var dataJson=args.$model.toJSON();
}else{
 alert('data not passed');
}

12. Finally add the styles to your layouts in app/styles

a. index.tss

 
"Window": {
 backgroundColor: '#fff',
 navBarHidden: true,
 exitOnClose: true
}

"#title": {
 top: 0,
 height: '50dp',
 width: Ti.UI.FILL,
 color: '#fff',
 backgroundColor: '#a00',
 font: {
  fontSize: '36dp',
  fontWeight: 'bold'
 },
 textAlign: 'center'
}

"#table": {
 top: '50dp',
 bottom: 0
}

b.row.tss

 
"#row": {
 height: '60dp',
 backgroundColor: '#fff'
}

"Label": {
 height: Ti.UI.SIZE,
 width: Ti.UI.SIZE
}

"#name": {
 top: '7dp',
 left: '7dp',
 font: {
  fontSize: '24dp',
  fontWeight: 'bold'
 }
}

"#nickname": {
 bottom: '7dp',
 left: '14dp',
 font: {
  fontSize: '16dp',
  fonWeight: 'normal'
 }
}

c. detail.tss

 
"Window": {
 backgroundColor: '#fff',
 navBarHidden: true
}
"#name": {
 top: '10dp',
 font: {
  fontSize: '24dp',
  fontWeight: 'bold'
 }
}

"#nickname": {
 top: '10dp',
 font: {
  fontSize: '16dp',
  fonWeight: 'normal'
 }
}

13. Here we go and run the project.

Thanks.

Alloy Animation - builtin library

2013-07-11T02:23:00.000-07:00

Titanium alloy framework provide collection of useful animation utilities. To use the animation builtin library, all you need to do is require it with the alloy root directory in your require call. For example:

var animation = require('alloy/animation');
animation.crossFade(view1, view2, 500, finishCallback);

chainAnimate( Titanium.UI.View view, Titanium.UI.Animation[] animations, [function() finishCallback] )

Executes a series of animations on the target view.

crossFade( Titanium.UI.View from, Titanium.UI.View to, Number duration, [function() finishCallback] )

Transitions from one view to another using a cross-fade animation.

fadeAndRemove( Titanium.UI.View from, Number duration, Titanium.UI.View container, [function() finishCallback] )

Fades out a view then removes it from its parent view.

fadeIn( Titanium.UI.View to, Number duration, [function() finishCallback] )

Fades in the specified view.

fadeOut( Titanium.UI.View to, Number duration, [function() finishCallback] )

Fades out the specified view.

flash( Titanium.UI.View view, [Number delay], [function() finishCallback] )

Flashes the target view twice, fading to partially transparent then back to fully-opaque.

popIn( Titanium.UI.View view, [function() finishCallback] )

Makes the specified view appear using a "pop-in" animation, which combines a fade-in with a slight expanding and contracting animation, to call attention to the new view.

shake( Titanium.UI.View view, [Number delay], [function() finishCallback] )

Creates a shake animation, moving the target view back and forth rapidly several times.

Example:

1. open Titanium Studio

2. create New Alloy Project

3. Modify views/index.xml

4. Modify styles/index.tss

 
".container": {
 backgroundColor:"white"
},
"#square": {
 width: 200,
 height: 200,
 color: "#f00"
} 

"#shakeMe":{
 title:'Shake Me',
 bottom:'100dp'
}

5. Modify controllers/index.js

 
function shakeMe(e) {
    var animation = require('alloy/animation');
    animation.shake($.view2, 500);
}

$.index.open();

6. Run the project and click the button.

Thanks.

Garbage Collector - Titanium Module for Android

2013-06-24T02:38:00.000-07:00

Recently I developed an native module called Garbage Collector Module and published in Appcelerator Marketplace.

This module is used to Monitor your android device heap memory and force the garbage collector for free the unused objects.

Using this module we can get following informations,

MaxVMHeapSize
NativeHeapSize
VMHeapSize
TotalHeapSize
VMAllocatedHeapSize
NativeHeapAllocatedSize
VMHeapTotalAllocatedSize
VMHeapFreeMemory
VMHeapTotalFreeMemory

And Also we have two more public methods called,

isOutOfMemoryException() - we can check the Memory exception before app get crash.
callGC() - This method force the garbage collector and release the memory occupied by unused objects.

Accessing the Garbage Collector Module

To access this module from JavaScript, you would do the following:

var garbagecollector = require("prakash.garbagecollector");

Force Garbage Collector

garbagecollector.callGC();

Check MemoryException

garbagecollector.isOutOfMemoryException();  returns true/false

Check Heap Memory Status
garbagecollector.getMaxVMHeapSize();
garbagecollector.getNativeHeapSize();
garbagecollector.getVMHeapSize();
garbagecollector.getTotalHeapSize();
garbagecollector.getVMAllocatedHeapSize();
garbagecollector.getNativeHeapAllocatedSize();
garbagecollector.getVMHeapTotalAllocatedSize();
garbagecollector.getVMHeapFreeMemory();
garbagecollector.getVMHeapTotalFreeMemory();

Sample App Screenshot

Module URL :

https://marketplace.appcelerator.com/apps/5834?2036618235

Loading Remote JPG images in Android - Appcelerator Titanium

2012-10-05T04:39:00.000-07:00

Hi....

When I trying to Load the set of JPG images from json data (remote Images) the following error occurred.

 
Bitmap bounds could not be determined. If bitmap is loaded, it won't be scaled.

but its working fine in iOS. I started the research in INTERNET to fix this problem. Two solutions suggested by most of the people. They are,

1. Disabled FastDev in Android
2. Increase the VM Heap memory size.

but These are not solve my Problem. Finally I found one alternate solution for loading Remote JPG images in Android.

I am creating ImageLoader.js file for loading images....

ImageLoader.js

  
exports.LoadRemoteImage = function (obj,url) {
   var xhr = Titanium.Network.createHTTPClient();

xhr.onload = function()
{
 Ti.API.info('image data='+this.responseData);
 obj.image=this.responseData;
 
};
// open the client
xhr.open('GET',url);

// send the data
xhr.send();
}

For using this you need to pass imageView object and RemoteImageUrl.

app.js

 
var ImageLoader = require('ImageLoader');
var self = Ti.UI.createWindow({
     backgroundColor:'#ffffff',
  navBarHidden: true,
  fullscreen:true,
  layout:'horizontal'
  
 });
 
for(var i=0;i<5;i++) 
 {
var fullImage = Titanium.UI.createImageView({
    left: 10,
    top : 10,
    width : 100,
    height: 100,
    image:''
   });
   self.add (fullImage);
 
 ImageLoader.LoadRemoteImage(fullImage,'http://ic.i.tsatic-cdn.net/1213/105_99/29fce_1213904.jpg');
 
}

Finally my problem is solved..... Now Remote JPG Images Loaded fine in android...

I was created Thumbnail album and FullView album by using this ImageLoader.js

But You cannot pass any other object and can not set as backgroundImage. because when you are trying to load Image through HTTPClient, the image return as blob object. In iOS backgroundImage propert supports blob but not in Android.

Thankyou...........

Album Creation using scroll view and scrollableView in Titanium

2012-10-05T02:37:00.000-07:00

Hi......

In this post we are going to create Image Album for both thumbnail and fullview.

Design Goal:

            The list of images are displayed in thumb size which are loaded into scroll view. when user clicks the particular Thumbnail Image the Image is loaded into Fullview mode.

Start to Code:

   1. First create a window object and add a scroll view that should by in "horizontal' Layout and width is "100%".

2. Now construct the for loop and Load Images in scrollView.


                            var self = Ti.UI.createWindow({
       backgroundColor:'#ffffff',
       navBarHidden: true,
    fullscreen:true,
                              width:'100%'

      });
                           var ThumbAlbum=Ti.UI.createScrollView({
                                layout:'horizontal',
width:'100%'
                           });
                           self.add(ThumbAlbum);
                           var totalcount=5;
                           for(var i=0;i<totalcount;i++)
      {
                                 var thumb = Titanium.UI.createImageView({
   left: 10,
      top : 10,
   width : 100,
   height: 100,
                                  imageID:i,
image:''http://ic.i.tsatic-cdn.net/1213/105_99/29fce_1213904.jpg''
});
ThumbAlbum.add (thumb);
   }
                          self.open();
                  3. Next write fullImageView code in imageview's click event.

                                ThumbAlbum.addEventListener('click',function(e){

var FullView=require("fullviewWindow");

var win=FullView(e.source.imageID,e.source.image,totalcount);

win.open();

                                 });
                     4. Now create fullviewWindow.js file
function fullviewWindow (imageID,imageurl,totalcount)
                             {
                               var self = Ti.UI.createWindow({
       backgroundColor:'#ffffff',
       navBarHidden: true,
    fullscreen:true,
                              width:'100%'

      });
   var headerLbl=Ti.UI.createLabel({
   width:'100%',
height:30,
backgroundColor:'#000',
text: imageID+' of ' +totalcount
});
                        var fullimage = Titanium.UI.createImageView({
   left: 0,
      top : 30,
   width : '100%',
   height: '90%',
                                 image:imageurl
});
self.add(fullimage);
                              self.open();

   }
                           module.exports=fullviewWindow;

   5. Run the Program in Emulator/Simulator

Thankyou......

Simple tweets search app using Titanium

2012-10-05T00:25:00.001-07:00

Hi...

In this post we are going to see simple tweets search app using Titanium appcelerator.

Design goal:

Search the tweets based on name and list the results in Table view with tweets photo, name/title, description and posted date. when clicking the particular row the detailed information will be displayed in new window.

Start the Implementation:
       1.   create new titanium mobile project and start to edit the app.js (OR)          create new .js file in your existing mobile project.

       2.    create TextField and one Button with title 'Search' on the top of the window.

       3.   Now write the code in Search button's click event.

              3a. Twitter provides the api url for search the tweets.

            var url = "http://search.twitter.com/search.json?q=" + stext.value;

                   here, stext.value is the TextField value.

   4b. Now create httpClientRequest object to send the request.

            var xhr = Ti.Network.createHTTPClient({
          onload: function () {
json = JSON.parse(this.responseText);
loadData(json);
},
                            onerror: function (e) { alert('ERROR');},
timeout: 5000
});
                        xhr.open("GET", url);
      xhr.send();
                  4c. Write the definition for function loadData(json)
function loadData(json)
{
   if (json.results.length < 10) count = json.results.length;
              else count = 10;
             for (i = 0; i < count; i++) {
             tweets = json.results[i];
                 row = Ti.UI.createTableViewRow({
                     height: 'auto',
                   hasChild: true,
                 url: 'resultwindow.js',
                     iurl: tweets.profile_image_url,
                      iname: tweets.from_user,
                 itext: tweets.text,
                     idate: tweets.created_at,
                     id: tweets.from_user_id_str
                 });

               var image = Titanium.UI.createImageView({
                 image: tweets.profile_image_url,
                     top: 5,
                     left: 5,
                   height: 60,
                 width: 60
                });
               nameLabel = Ti.UI.createLabel({
                  text: tweets.from_user,
                     font: {
                         fontSize: '12dp',
                       fontWeight: 'bold'

                     },
                  height: 'auto',
                      left: 70,
                      top: 0,
                      color: '#f00',
                    touchEnabled: false
                  });

                 textLabel = Ti.UI.createLabel({
                     text: tweets.text,
                  font: {
                       fontSize: '8dp'
                    },
                    height: 'auto',
                    left: 80,
                    top: '15dp',
                    color: '#00f',
                    touchEnabled: false
                });

                nickLabel = Ti.UI.createLabel({
                    text: '"' + tweets.created_at + '"',
                    font: {
             fontSize: '8dp',
                        textAlign: 'right'
                    },
                    height: 'auto',
                    right: 0,
                    bottom: '2dp',
                    color: '#999',
                    touchEnabled: false
                });

                row.add(image);
                row.add(nameLabel);
                row.add(textLabel);
                row.add(nickLabel);

                tableData.push(row);
            }

            table.setData(tableData);
   }

   4d. Write code for Table Click event

table.addEventListener('click', function (e) {

        if (e.rowData.url) {

            var win1 = Titanium.UI.createWindow({
                //title:e.rowData.nameLabel.value,

                url: e.rowData.url,
                //navbarHidden: false,
                modal: true, // 'back' goes to previous window but no OptionMenu
                iurl: e.rowData.iurl,
                iname: e.rowData.iname,
                itext: e.rowData.itext,
                idate: e.rowData.idate,
                id: e.rowData.id
            });

            win1.open();
        }

});

5. Display the data in resultwindow.js as you like to display.
sample code for getting data from win object in resultwindow.js
var win = Ti.UI.currentWindow; //you should write this line at first in resultwindow.js
   var iname=win.iname;

6. Go to Runas and select android Emulator

Thank you......

Appcelerator Titanium Introduction

2012-08-27T03:14:00.000-07:00

-->

Creating Titanium Mobile Project

Open Appcelerator Titanium Studio
select or create workspace click ok
File -->New-->Titanium Mobile Project
Give Appname and AppID and click Finish

Basic things should be known…. Before we start

The Titanium Mobile Project folder contains following necessary files. You should be known those files and its purpose.

Resource Folder
1. Folders for each target platform (eg. Android, iPhone)
2. App.js
Build.log
CHANGELOG.txt
License
License.txt
Readme
Manifest
Tiapp.xml

Resource Folder

Resource folder contains all of your project resources in specific folders. For example each targeted platform of your mobile apps have separate folders and you can place your source and images on that folders.

App.js

This is “Start Point” of your app. This means it act as Main function of your app (eg. Main() in c, cpp and java). you’re going to put your code here. Start by editing your application's app.js to make your first mobile project using Titanium

Build.log

This file save the log information whenever your build your project in a particular system. And you must delete it before you are deploy into mobile device or try to run in another system.

CHANGELOG.txt

Place your change log text here. This file will be incorporated with your app at package time.

License

copyright 2008-2012 Appcelerator, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

License.txt

Place your license text here. This file will be incorporated with your app at package time.

Manifest

It contains basic information about your project such as appname, appid, publisher… etc..

Readme

You can put the user instruction about running your project such as pre-requisites and user manual.

Tiapp.xml

This is a configuration file. It have basic configuration information in xml format. You add/remove your own configuration here. Be careful while you’re editing this file it causes error if you do wrong with this file. For example if you think your app only run in landscape not in portrait then you can set it in tiapp.xml. (Don’t worries we will see later how do that).

Now let start the coding…

Wait…. Where you are starting to write code…….? That’s right open app.js file.

app.js file not an empty… it have some predefined coding… In app.js by default they created one tapgroub, two tabs, two windows and two labels. First, you just try to understand those coding.

Trace the coding:

-->

Tab group is container object that holds an many no of tabs.

Now look at the hierachy of the colntrols...

label added into window

window object added in tab object

tab added into tabgroup...

-->

// this sets the background color of UIView

Titanium.UI.setBackgroundColor('#000');

// create tab group

var tabGroup = Titanium.UI.createTabGroup();

//create window object

var win1 = Titanium.UI.createWindow({

title:'Tab 1',

backgroundColor:'#fff'

});

//create tab object

var tab1 = Titanium.UI.createTab({

icon:'KS_nav_views.png',

title:'Tab 1',

window:win1 //add window object to tab here

});

//create a label object

var label1 = Titanium.UI.createLabel({

color:'#999',

text:'I am Window 1',

font:{fontSize:20,fontFamily:'Helvetica Neue'},

textAlign:'center',

width:'auto'

});

win1.add(label1); // add label into window

tabGroup.addTab(tab1); // add tabs

tabGroup.open(); // open tab group

similarly we can create and add many tabs in tabgroup. Now the testing time. Run your code.

Run the project in Android Emulator

Go to Run --> run as--> Android Emulator