Cross Platform Mobile
ApplicationDevelopment
Ambarish Hazarnis
Pawan Sirse
Mobile app
Core SDKs
I-Phone Android Blackberry
Cross Platform
Web Framework
Mobile Jquery
Sencha Touch
Titanium
How to Develop Mobile Apps ?
Write once, suffer everywhere
- Loren Brichter, creator
“Twitter for iPhone”/Tweetie
Web Frameworks for application development are . . .
Titanium Titanium is an open source framework for
building Native mobile applications.
Open Source (Apache 2.0).
Supported OS :iOSAndroid
BlackBerrywebOS
Has its Own IDE with code completion & debugging* support.
Facilitates for submitting the app on Market.
Installation Guide
Requirements:
>For Android Emulator & Development 1.Sun Java Development Kit 6 (aka 1.6) 2.Android Development Kit
>For Building Titanium Mobile 1.Python 2.5/2.6 2.Scons 1.2.0.x 3.Git
Installing JAVA
Setting up the environment and path
1. Goto : Control Panel > System & Security > System > Advanced System Settings > Environment Variables.
2. Goto : Path in System Variables & Edit.
3. Add : C:\Java\jdk1.6.0_21\bin; to path.
1. Open a new command window and enter the command below. > javac -version
2. If you've configured the PATH correctly, you should see something similar to.
Verify Java Install
3. This means our JAVA is installed correctly.
Installing the Android Development Kit (ADK)
1.Launch the installer_r09-windows setup.
2.Rename the destination folder as C:\android-sdk.
3.Start the SDK manager.4.Cancel the Installation of packages.5.Copy and replace the platforms, platform-tools, extras, temp folders from DVD to C:/android-sdk.6. Click Refresh in the Installed Packages option of AVD Manager. You will see something like this
7.Add the ADK to the PATH 1. Add : C:\android-sdk\tools;C:\android-sdk\platforms\android-4\tools; before the JAVA path.
8.Workaround for a missing adb
Due to a recent change in the Android SDK file structure, Titanium Developer expects the adb.exe executable to be in path\to\android-sdk-windows\tools whereas it currently resides in path\to\android-sdk-windows\platform-tools.
To resolve this issue: >Simply copy adb.exe and AdbWinApi.dll from platform-tools to the tools directory.
NOTE: Remember to repeat this process with adb each time Google updates the Platform-Tools package, or Android SDK itself.
Verify ADK Install
1. Open a new command window and enter the commands below. > aapt v > android list2. If you've configured everything correctly, you should see something similar to.
Install Python 2.7.x
1.Launch the Python installer and use the defaults.
Verify Install
1. Open a new command window and enter the commands below. > python --version2. If you've configured everything correctly, you should see something similar to.
Install SCons 1.2.0.x
1.Launch the SCons installer and use the defaults.
Verify Install
1. Open a new command window and enter the commands below. > scons --version2. If you've configured everything correctly, you should see something similar to
Install Git
1.Launch the Git Installer.2.Click Next to start the setup.3.Click Next to accept the License Agreement.4.Set Destination Folder as C:\Git.5.Ensure that the following packages are selected for installation & click NEXT.
6.Leave the default Git text in the text field and click Next .7.Select Run Git from the Windows Command Prompt radio button & click Next.
8.Select Checkout as-is, commit as-is radio button & click Next.
9. Wait for the installation to complete.10.Click the Finish button to complete the installation.
1. Open a new command window and enter the commands below. > git --version > git config –list2. If you've configured everything correctly, you should see something similar to
Verify Install
Install Titanium Studio
1.Launch the Titanium Studio setup.2. Click Next to start.3.Click I Agree to accept the License Agreement.4.Set the destination folder to C:\Titanium Studio & click Next. 5.Click Next.6.Click Next.6.Click Install to start Installation.7.Click Next.8.Click Close.9.Launch the Titanium Studio from Desktop.10.Set the Workspace to C:\Titanium Studio Workspace.
Lets run our first app on emulator
1.Goto: File>New>Titanium Mobile Project2.Fill the Details of the App & click Finish.
Run the code.After the Studio displays : Deployed hello ... Application should be running. You will see something like this in the emulator
The Application Project Structure
• Build .apk
• Resourcesapp.jsSplash ScreenApplication Icon
• Tiapp.xml
Titanium follows MVC : Model-View-Controller
The Titanium Architecture
How does Titanium work ?
• Pre-compiler
• Front-end compiler
• Platform compiler & packager
Titanium Design Concepts
The following are the major design components in Titanium:
• Windows - windows host one or most Views
• Views - views draw content on the screen
• Widgets - widgets are special types of views that perform specific actions like buttons
Self-contained Windows
For example, to create a simple Window, you could do the following:
var win = Ti.UI.createWindow(); >>Window is similar to page of HTML
var view = Ti.UI.createView({ >>One window can have many viewsbackgroundColor:'red',width:200,height:150,top:150});
win.add(view); >> Add view to the window.
win.open(); >> Open the window.
var view2 = Ti.UI.createView({backgroundColor:'red',width:50,height:50,bottom:50});
win.add(view2);
Create a new View for animation
For Alert:
view.addEventListener(‘click',function() { alert(‘You clicked Upper View’); });
Adding interactivity
view2.addEventListener(‘dbclick',function() { view2.animate({
width:150,height:150,duration:1000});
});
For Animation
Labels
Text to be displayed on screen
var mylabel = Titanium.UI.createLabel({ text: 'Wow! This is a Label', height:'auto', width:'auto', color:'#900', font:{fontSize:20}, textAlign:'center', top: 10});
Text Fields
Text to be entered within a field
var tf1 = Titanium.UI.createTextField({ hintText: 'You Name Here', height:35, top:40, left:10, width:250}); tf1.addEventListener('blur',function(e){ //if focus moved away from tf1
alert('Welcome ' + tf1.value);});
Button
Add your own buttons and functions
var button = Titanium.UI.createButton({ //create Button title: 'Hello !', width: 100});
win.add(button);
button.addEventListener('click',function(e) //if button is clicked{ alert("You just clicked the button"); //display alert message});
Picker
Add Picker which functions as drop-down box
var picker = Titanium.UI.createPicker();var data = [];data[0]=Titanium.UI.createPickerRow({title:'Bananas'});data[1]=Titanium.UI.createPickerRow({title:'Strawberries'});data[2]=Titanium.UI.createPickerRow({title:'Mangoes'});data[3]=Titanium.UI.createPickerRow({title:'Grapes'}); picker.add(data);win.add(picker); picker.addEventListener('change',function(e){ //if picker is changed
alert('You selected '+e.row);});
Activity Indicator
Display this if some Activity is to be performed in background
var actInd = Titanium.UI.createActivityIndicator({ //activity indicator height:50, width:10, message: 'You cannot do anything now'});
actInd.show();
Animations
We can add Animations to any widgets
var animation = Titanium.UI.createAnimation({ //define animationheight:100,duration:1000,repeat:5,autoreverse:true
});
Object.animate(animation); //start animation
ImageView
Eg: ImageView from Titanium API
var myimage = Ti.UI.createImageView({ image: 'android/appicon.png', width:128, height:128, borderColor:'#aaa', borderRadius:10, borderWidth:5});
Adding interactivity to ImageView
myimage.addEventListener('touchend',function(e) { myimage.animate({
width:128,height:128,duration:500});
});
myimage.addEventListener('touchstart',function(e) { myimage.animate({
width:200,height:200,duration:500});
});
On Touch Start:
On Touch End:
Table View
Creation of static or dynamic Tables
var data = [{title:"Row 1"},{title:"Row 2"}];data.push({title:'Row 3'}); var table = Titanium.UI.createTableView({ //static creation of table
data:data,backgroundColor: 'blue',rowHeight: 20,separatorColor: 'red'
}); table.appendRow({title:'Row 4'}); //dynamically add rows to table table.addEventListener('click',function(e){
alert(e.rowData.title);});
THANK YOU FOLKS