Appcelerator Titanium: Learning by examples #1


Intro to Titanium

Titanium applications are written in Javascript but are complied to native apps that use native interfaces.

For iOS, Javascript is encoded and put into a variable in a C file inside the app and Javascript is interpreted by the Javascript engine built into the app and generate UI elements dynamically.

For Android, Javascript is compiles to Java byte code using Rhino JSC compiler. A part of Javascript code is still interpreted at runtime.

Creating View

  1. Create a Mobile App Project with Classic template
  2. Replace the code in app.js with the following code
  3. // this sets the background color of the master UIView (when there are no windows/tab groups on it)
    Titanium.UI.setBackgroundColor('#000');
    
    // create tab group
    var tabGroup = Titanium.UI.createTabGroup();
    
    
    //
    // create base UI tab and root window
    //
    var win1 = Titanium.UI.createWindow({  
        title:'Tab 1',
        backgroundColor:'#fff'
    });
    var tab1 = Titanium.UI.createTab({  
        icon:'KS_nav_views.png',
        title:'Tab 1',
        window:win1
    });
    
    var FirstView = require('FirstView');
    
    win1.add(new FirstView());
    
    //
    // create controls tab and root window
    //
    var win2 = Titanium.UI.createWindow({  
        title:'Tab 2',
        backgroundColor:'#fff'
    });
    var tab2 = Titanium.UI.createTab({  
        icon:'KS_nav_ui.png',
        title:'Tab 2',
        window:win2
    });
    
    var label2 = Titanium.UI.createLabel({
    	color:'#999',
    	text:'I am Window 2',
    	font:{fontSize:20,fontFamily:'Helvetica Neue'},
    	textAlign:'center',
    	width:'auto'
    });
    
    win2.add(label2);
    
    
    
    //
    //  add tabs
    //
    tabGroup.addTab(tab1);  
    tabGroup.addTab(tab2);  
    
    
    // open tab group
    tabGroup.open();
    
    
    
  4. Create a file named FirstView.js and place the following code
  5. function FirstView() {
    	
    	// Top level container 
    	var self = Ti.UI.createView({
    		layout: 'vertical',		// vertical layout 
    		top: 10					// margin from top is 10 
    	});
    	
    	// Line 1 
    	var row1 = Ti.UI.createView({
    		layout: 'horizontal',
    		height: 80
    	});
    	
    	// adding to the container 
    	self.add(row1);
    	
    	// Lets add some UI controls to the row1 
    	
    	var label1 = Titanium.UI.createLabel({
    		color:'#999',
    		text:'Label 1',
    		font: {
    			fontSize:20, 
    			fontFamily:'Helvetica Neue'
    		},
    		textAlign:'center',
    		width:'auto',
    		left: 10
    	});
    	
    	// 
    	row1.add(label1);
    	
    	var textField1 = Ti.UI.createTextField({
    		left: 10,									// left margin 
    		keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD,	// Number keypad 
    		borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL,	// Better UI for iOS, no effect on Android 
    		width: 160
    	});
    	
    	row1.add(textField1);
    	
    	var button1 = Ti.UI.createButton({
    		left: 10,
    		title: 'Button1'
    	});
    	
    	// adding click listener of the button 
    	button1.addEventListener('click', function() {
    		// alert will be displayed 
    		alert(textField1.value);
    	});
    	
    	row1.add(button1);
    	
    	var row2 = Ti.UI.createView({
    		layout: 'horizontal',
    		height: 80
    	});
    	
    	self.add(row2);
    	
    	return self;
    }
    
    module.exports = FirstView;
    

Install Kitchen Sink

  1. Open Help -> Studio -> Show Studio Dashboard
  2. On the Dashboard page click on “More” besides “Get Started Quickly With Sample Apps”
  3. Go to the “Samples” window and right click on “Kitchen Sink” -> import sample as project
  4. Run the app in all platforms (iOS, Android etc)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s