Styling Action bar in Titanium Android

Titanium SDK 3.0 Appcelerator includes support for Android action bar element, including support for action bar tabs, action items, access to actionbar title, background and home icon. To enable the action bar features, application must be build with target SDK version of 11 (Android 3.0) or above. Now we can customize action bar and can apply custom holo theme in our Android app.

Default Action bar



Styled Action bar including tabgroup

Follow below steps to create the Styling actionbar in Titanium Android.

1. Generate Action Bar style

Create action bar using Action Bar Generator. Style name should be one word without any punctuation. Set Style compatibility to Holo. Apply on for the settings, which you want to apply in your application theme and download zip file. Remember your style name, it will be used in app.xml to apply this theme in your app.

2. Add the zip files in the Project

Extract .zip file of your custom theme. After extracting, it will create res folder. You have to add this res folder in your projects in below hierarchy

$project_root$/platform/android/res

Note: If there is no platform and android folders already built in your application, then you have to manually create these folders and add res folder. Your resulting hierarchy will be

Titanium Classical Version

Titanium Alloy Version

3. Modify tiapp.xml to use custom style

Replace Android tag in your tiapp.xml

With this one

 

Clean your project and run. Custom themes will be available in your app

Now o/p is like :

Font size global in all resolutions (android)

To accomplish this task you can check my test code below and see if it helps you.

var win = Ti.UI.createWindow({
    backgroundColor:'#fff',
});
 
var screenWidth = Ti.Platform.displayCaps.platformWidth;
var screenHeight = Ti.Platform.displayCaps.platformHeight;
 
function GetHeight(value) {
    var temp = (value * 100) / 480;
    return parseInt((screenHeight * temp) / 100);
}
 
function GetWidth(value) {
    var temp = (value * 100) / 320;
    return parseInt((screenWidth * temp) / 100);
}
 
var label = Ti.UI.createLabel({
        center:'0',
        color: '#019FCE',
        text: "Appcelerator Titanium Rockz !!!",
        font: {
            fontSize:GetHeight(15),
            fontFamily:'ABeeZee-Regular'
        },
        textAlign: 'center',
        wordWrap:true
});
 
win.add(label);
win.open();

Titanium XML Parse and extract data  : 

Example : 

<Response stat="ok">
     <auth>
          <token> 73257626300602415 - 3324a12587e2e9b3602</token>
          <params>delete</params>
          <userid = "23232" username="ABC" fname="A"/>
     </auth>
</Response>

 

Solve like this : 

Presuming your xml came from am xhr request then.

 
xhr.onload = function() {
  // Give me a xml document.
  var doc = this.responseXML.documentElement;
 
  // Get the token element, then the first item (could be lots of  them) then the text of the first.
  var token = doc.getElementsByTagName("token").item(0).text;
 
  // Ditto as above, but this time get the attribute name "username"
  var username = doc.getElementsByTagName("user").item(0).getAttribute("username");
}

Alloy Collection CRUD

Alloy Collection CRUD Operations :

In Titanium Alloy, We are using many ways to Update, Delete, Insert or Replace Operation to Database Table.

I have using below way to CRUD Operation on Database Table.

Let's Start From Example : 

Models : Employee.js

exports.definition = {
    config : {
        columns : {
            "Name" : "TEXT",
            "Description" : "TEXT",
            "Gender" : "TEXT"
        },
        adapter : {
            type : "sql",
            collection_name : "employee"
        }
    },
    extendModel : function(Model) {
        _.extend(Model.prototype, {
            // extended functions and properties go here
        });

        return Model;
    },
    extendCollection : function(Collection) {
        _.extend(Collection.prototype, {
            // extended functions and properties go here

            insertRecord : function(opts) {
                var collection = this;
       var dbName = collection.config.adapter.db_name;
       var table = collection.config.adapter.collection_name;
       var columns = collection.config.columns;
       var names = [], q = [];
       for (var k in opts.query.columns) {
            names.push(opts.query.columns[k]);
            q.push("?");
       }
       var sql = "INSERT INTO " + table +
                 " (" + names.join(",") + ") VALUES
                 (" +   q.join(",") + ");";

       db = Ti.Database.open(collection.config.adapter.db_name);
       db.execute(sql, opts.query.value);
       db.close();
       collection.trigger('sync');
            },

           insertORReplaceRecord : function(opts) {
       var collection = this;
       var dbName = collection.config.adapter.db_name;
       var table = collection.config.adapter.collection_name;
       var columns = collection.config.columns;
       var names = [], q = [];
       for (var k in opts.query.columns) {
            names.push(opts.query.columns[k]);
            q.push("?");
       }
       var sql = "INSERT OR REPLACE INTO " + table +
                 " (" + names.join(",") + ") VALUES
                 (" +   q.join(",") + ");";

       db = Ti.Database.open(collection.config.adapter.db_name);
       db.execute(sql, opts.query.value);
       db.close();
       collection.trigger('sync');
            },

            updateRecord : function(opts) {           
       var collection = this;
       var dbName = collection.config.adapter.db_name;
       var table = collection.config.adapter.collection_name;
       var columns = collection.config.columns;
       var names = [], whereQ = [], values=[];       

       

       for (var i in opts.query.columns) {
           names.push(opts.query.columns[i]+"=?");
       }
       for (var i in opts.query.whereKey) {
           whereQ.push(opts.query.whereKey[i]+"=?");
       }
               
        //Values of Set Columns and Where Condition
        for (var j in opts.query.values) {
            values.push(opts.query.values[j]);
        }
        for (var k in opts.query.whereValue) {
            values.push(opts.query.whereValue[k]);
        }
                

                var sql = "UPDATE " + table + " SET " + 

                 names.join(",") + " WHERE "+ whereQ.join(" AND ");

       db = Ti.Database.open(collection.config.adapter.db_name);
       db.execute(sql, values);
       db.close();
       collection.trigger('sync');
            },

            deleteRecord : function(opts) {
       var collection = this;
       var dbName = collection.config.adapter.db_name;
       var table = collection.config.adapter.collection_name;
       var columns = collection.config.columns;
       var names = [], q = [];
       for (var k in opts.query.columns) {
            names.push(opts.query.columns[k]);
            q.push("?");
       }
       var sql = "DELETE FROM " + table + " " + opts.query.sql;

       db = Ti.Database.open(collection.config.adapter.db_name);
       db.execute(sql, opts.query.params);
       db.close();
       collection.trigger('sync');
            },

          

          deleteAllRecords : function() {
       var collection = this;
       var dbName = collection.config.adapter.db_name;
       var table = collection.config.adapter.collection_name;
       var sql = "DELETE FROM " + collection.config.adapter.collection_name;

       db = Ti.Database.open(collection.config.adapter.db_name);
       db.execute(sql);
       db.close();
       collection.trigger('sync');
            }
        });
        return Collection;
    }
};
 

You have checked above js file of  Employee.js  which is a model file of the sample project.
we are going to apply Operations on this Employee mode:

Lets start the operation mean how can i cal the all operation from js files.

1. Insert Record to Employee Collection : 

Alloy.Collections.Employee.insertRecord({
  query : {
     columns : ["Name", "Description", "Gender"],
     value : ["JOHN", "NO WORDS", "MALE"]
   }
 });

Query : INSERT INTO Employee
("NAME", "Description", "Gender") VALUES
("JOHN", "NO WORDS", "MALE");

 

2. Insert OR Replace Record to Employee Collection : 

Alloy.Collections.Employee.insertORReplaceRecord({
  query : {
     columns : ["Name", "Description", "Gender"],
     value : ["CARTER", "NO WORDS", "FEMALE"]
   }
 });

Query : INSERT OR REPLACE INTO Employee
("NAME", "Description", "Gender") VALUES
("CARTER", "NO WORDS", "FEMALE");

 

3. Upadate Record to Employee Collection : 

Alloy.Collections.Employee.updateRecord({
  query : {
     columns : ["Name", "Description"],
     value : ["JOHN Deny", "I AM DEVELOPER"],
     whereKey : ["Name", "Gender"],
     whereValue : ["JOHN", "MALE"]
   }
 });

Query : UPDATE Employee
SET Name="JOHN Deny",Description="I AM DEVELOPER"
WHERE NAME="JOHN" AND Gender="MALE";

 

4. Delete Record to Employee Collection : 

Alloy.Collections.Employee.deleteRecord({
  query : {
     sql : "WHERE Name=?",
     params : "JOHN"
   }
 });

Query : DELETE FROM Employee
WHERE Name="JOHN"; 

 

5. Delete All Records to Employee Collection : 

Alloy.Collections.Employee.deleteAllRecords();

Query : DELETE FROM Employee;

 

 

 

 

 

Titanium Module Guides and Tricks : 

TiModule.h' file not found: 

you need to edit your titanium.xcconfig TITANIUM_SDK to reflect your path...
most commonly the needed change is from the defaul:

TITANIUM_SDK = /Library/Application Support/Titanium/mobilesdk/osx
               /$(TITANIUM_SDK_VERSION)

to:

TITANIUM_SDK = ~/Library/Application Support/Titanium/mobilesdk/osx
                /$(TITANIUM_SDK_VERSION)

Adding Special Compiler Directives in module.xcconfig :  

If your module needs a special Framework or other system library or special compiler directives, you can use the module's xcconfig file to define them. Titanium automatically creates a file named module.xcconfig and one named titanium.xcconfig. The titanium.xcconfig is used when compiling your module for packaging. However, module.xcconfig is used by the application compiler when the application is built and your module is referenced. This allows you to control the compiler directives used during this process, too.

First, we'll need to add the Framework in Xcode. In this example, we'll simply add GameKit. Select Frameworks in your project folder, right click "Add -> Existing Frameworks" and select the menu item And choose "GameKit.framework" and click the "Add" button. You should now see the new Framework reference under the Frameworks folder:

If you compile your project, you should now have no errors.

Now that we've added the Framework to the project, we still need to set it up so that the application compiler can also import this Framework during compile. To do that, edit the module.xcconfig and add the following line at the bottom:

OTHER_LDFLAGS=$(inherited) -framework GameKit

If we have number of Frmework in the module then you can edit the module.xcconfig and add the following way :

OTHER_LDFLAGS=$(inherited) -framework AddressBook -framework AddressBookUI -framework UIKit -framework Foundation -framework CoreGraphics

 

Adding Library in module.xcconfig :  

Framework Can be added by above way in module.xcconfig file , but what I really wanted to know was how to set path subproject library file such as "xxxx.a" and header "xxx.h". First i built it as one project, but it was hard to set path header when i package it by "builder.py". Now I solved this problem. I changed like the following. :

I built subprojects each and then get the header and lib(.a)file each.
Then just added those titanium module project in XCODE. Then, set path Header search path in XCODE's Building Setting.

I built subprojects each and then get the header and lib(.a)file each. Then just added those titanium module project in XCODE. Then, set path Header search path in XCODE's Building Setting.

Also added path such as .dylib in module.xconfig like this.  :

other_ldflags = $(inherited) -framework CFNetwork /usr/lib/libiconv.dylib

eg) CFNetwork is framework, libiconv.dylib is usr/lib libarary file.

 

Adding fireEvent in Module and Catch in Titanium: 

 

 testModule.m

#pragma Public APIs

-(id)example:(id)args

{

    if([self _hasListeners:@"addProgress"]){

        NSLog(@"[INFO] firing from iOS method ==> -(id)example:(id)args");

        [self fireEvent:@"addProgress"];

    } else {

        NSLog(@"[INFO] Not firing..1");

    }

    // example method

    return @"hello world.....";

}

index.js from Titanium

// TODO: write your module tests here
var test = require('com.test');
Ti.API.info("module is => " + test);


test.addEventListener("addProgress", function(e) {
    Ti.API.info("addProgress from Titanium");
    alert("Event Fired!");
}); 

You can refer below links for module :

1. http://www.slideshare.net/omorandi/ticonf
2. http://developer.appcelerator.com/question/51751/how-to-fire-an-event-in-a-module-and-catch-it-in-js

 

 

 

 

TextFileld Mask :

Ti.include("mask.js");

var win = Ti.UI.createWindow({
    top : "20",
    backgroundColor : "#a8a8a8"
});

var Postcode = Ti.UI.createTextField({
    hintText: "Postcode",
    left: 20,
    right: 20,
    top: 100,
    height : "40dp",
    borderColor : "black",
    paddingLeft : "5dp"
});
win.add(Postcode);

var Phone = Ti.UI.createTextField({
    hintText: "phone",
    left: 20,
    right: 20,
    top: 150,
    height : "40dp",
    borderColor : "black",
    paddingLeft : "5dp"
});
win.add(Phone);

var LimitCharacter = Ti.UI.createTextField({
    hintText: "Limit Character (5)",
    left: 20,
    right: 20,
    top: 200,
    height : "40dp",
    borderColor : "black",
    paddingLeft : "5dp"
});
win.add(LimitCharacter);

Phone.addEventListener("change", function(e) {
    Mask.mask(Phone, Mask.phone);
});

Postcode.addEventListener("change", function(e) {
    Mask.mask(Postcode, Mask.postcode);
});

LimitCharacter.addEventListener("change", function(e) {
    e.source.value = e.source.value.slice(0,5);
});

win.open();

mask.js

Mask = {
     mask : function(_field, _function) {
          _field.value = _function(_field.value);
      },

      postcode : function(v) {
            v = v.replace(/D/g, "");
            v = v.replace(/^(\d{5})(\d)/, "$1-$2");
            return v.slice(0, 9);
      },

      phone : function(v) {
            v = v.replace(/\D/g, "");
            v = v.replace(/^(\d\d)(\d)/g, "($1) $2");
            v = v.replace(/(\d{4})(\d)/, "$1-$2");
            return v.slice(0, 14);
      }
};

Output : 

Contact Like Tableview Titanium :

var win = Ti.UI.createWindow();

var table = Ti.UI.createTableView({});

var contacts = ["Adam","Andrew","Boris","Claus","Debby","Jigar", "Karan", "Manoj"];

var sectionArr = [];

for (var i = 0,lastL,l,currSection,ilen = contacts.length;i<ilen;i++) {
     l = contacts[i].substr(0,1);
     if(lastL != l) {
          currSection = Ti.UI.createTableViewSection({
               headerTitle:l
          });
          sectionArr.push(currSection);
    }
    currSection.add(Ti.UI.createTableViewRow({
          title:contacts[i]
    }));
   
    lastL = l;
}
table.setData(sectionArr);

win.add(table);
win.open();

Output :

Titanium System Buttons

 

var win = Titanium.UI.currentWindow;

// used to evenly distribute items on the toolbar
var flexSpace = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});

// used to create a fixed amount of space between two items on the toolbar
var fixedSpace = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.FIXED_SPACE,
    width:50
});

// system buttons
var action = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.ACTION
});
action.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
            {title:'System Button', message:'ACTION'}
    ).show();
});

var camera = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.CAMERA
});
camera.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
        {title:'System Button', message:'CAMERA'}
    ).show();
});

var compose = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.COMPOSE
});
compose.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
        {title:'System Button', message:'COMPOSE'}
    ).show();
});

var bookmarks = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.BOOKMARKS
});
bookmarks.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
         {title:'System Button', message:'BOOKMARKS'}
    ).show();
});

var search = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.SEARCH
});
search.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
          {title:'System Button', message:'SEARCH'}
    ).show();
});

var add = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.ADD
});
add.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
         {title:'System Button', message:'ADD'}
    ).show();
});

var trash = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.TRASH
});
trash.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
        {title:'System Button', message:'TRASH'}
    ).show();
});

var reply = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.REPLY
});
reply.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
      {title:'System Button', message:'REPLY'}
    ).show();
});

var stop = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.STOP
});
stop.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
         {title:'System Button', message:'STOP'}
    ).show();
});

var refresh = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.REFRESH
});
refresh.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
         {title:'System Button', message:'REFRESH'}
    ).show();
});

var play = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.PLAY
});
play.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
       {title:'System Button', message:'PLAY'}
    ).show();
});

var pause = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.PAUSE
});
pause.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
       {title:'System Button', message:'PAUSE'}
    ).show();
});

var fastforward = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.FAST_FORWARD
});
fastforward.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
           {title:'System Button', message:'FAST_FORWARD'}
    ).show();
});

var rewind = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.REWIND
});
rewind.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
         {title:'System Button', message:'REWIND'}
    ).show();
});

var edit = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.EDIT
});
edit.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
        {title:'System Button', message:'EDIT'}
    ).show();
});

var cancel = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.CANCEL
});
cancel.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
        {title:'System Button', message:'CANCEL'}
    ).show();
});

var save = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.SAVE
});
save.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
         {title:'System Button', message:'SAVE'}
    ).show();
});

var organize = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.ORGANIZE
});
organize.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
        {title:'System Button', message:'ORGANIZE'}
    ).show();
});

var done = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.DONE
});
done.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
          {title:'System Button', message:'DONE'}
    ).show();
});

var disclosure = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.DISCLOSURE
});
disclosure.addEventListener('click', function()
{
    Ti.API.info('FOO');
    Titanium.UI.createAlertDialog(
          {title:'System Button', message:'DISCLOSURE'}
    ).show();
});

var contactadd = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.CONTACT_ADD
});
contactadd.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
          {title:'System Button', message:'CONTACT_ADD'}
    ).show();
});

var nativespinner = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.SPINNER
});
nativespinner.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
         {title:'System Button', message:'SPINNER'}
    ).show();
});

var infolight = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.INFO_LIGHT
});
infolight.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
          {title:'System Button', message:'INFO_LIGHT'}
    ).show();
});

var infodark = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.INFO_DARK
});
infodark.addEventListener('click', function()
{
    Titanium.UI.createAlertDialog(
        {title:'System Button', message:'INFO_DARK'}
    ).show();
});

//
// CREATE BUTTONS TO CHANGE VIEW
//
var b = Titanium.UI.createButton({
    title:'Set Button Group 1',
    width:200,
    height:40,
    top:10
});

b.addEventListener('click', function()
{
    win.rightNavButton = camera;
    win.toolbar = [action,flexSpace,compose,fixedSpace,bookmarks,flexSpace,search];
});
win.add(b);

var b2 = Titanium.UI.createButton({
    title:'Set Button Group 2',
    width:200,
    height:40,
    top:60
});

b2.addEventListener('click', function()
{
    win.rightNavButton = add;
    win.toolbar = [trash,flexSpace,reply,fixedSpace,stop,flexSpace,refresh];
});
win.add(b2);

var b3 = Titanium.UI.createButton({
    title:'Set Button Group 3',
    width:200,
    height:40,
    top:110
});

b3.addEventListener('click', function()
{
    win.rightNavButton = play;
    win.toolbar = [pause,flexSpace,fastforward,fixedSpace,rewind,flexSpace,edit];
});
win.add(b3);

var b4 = Titanium.UI.createButton({
    title:'Set Button Group 4',
    width:200,
    height:40,
    top:160
});

b4.addEventListener('click', function()
{
    win.rightNavButton = cancel;
    win.toolbar = [save,flexSpace,organize,fixedSpace,done,flexSpace,disclosure];
});
win.add(b4);

var b5 = Titanium.UI.createButton({
    title:'Set Button Group 5',
    width:200,
    height:40,
    top:210
});

b5.addEventListener('click', function()
{
    win.rightNavButton = contactadd;
    win.toolbar = [nativespinner,flexSpace,infolight,flexSpace,infodark];
});
win.add(b5);