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

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);
});