Axway Appcelerator - Titanium SDK 6.1.0 - Status, Releases & Roadmap
Titanium Appcelerator - Beginners
-
Upload
ambarish-hazarnis -
Category
Technology
-
view
8.668 -
download
1
description
Transcript of Titanium Appcelerator - Beginners
![Page 1: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/1.jpg)
Cross Platform Mobile
ApplicationDevelopment
Ambarish Hazarnis
Pawan Sirse
![Page 2: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/2.jpg)
Mobile app
Core SDKs
I-Phone Android Blackberry
Cross Platform
Web Framework
Mobile Jquery
Sencha Touch
Titanium
How to Develop Mobile Apps ?
![Page 3: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/3.jpg)
Write once, suffer everywhere
- Loren Brichter, creator
“Twitter for iPhone”/Tweetie
Web Frameworks for application development are . . .
![Page 4: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/4.jpg)
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.
![Page 5: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/5.jpg)
![Page 6: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/6.jpg)
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
![Page 7: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/7.jpg)
Installing JAVA
![Page 8: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/8.jpg)
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.
![Page 9: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/9.jpg)
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.
![Page 10: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/10.jpg)
Installing the Android Development Kit (ADK)
1.Launch the installer_r09-windows setup.
2.Rename the destination folder as C:\android-sdk.
![Page 11: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/11.jpg)
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
![Page 12: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/12.jpg)
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.
![Page 13: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/13.jpg)
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.
![Page 14: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/14.jpg)
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.
![Page 15: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/15.jpg)
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
![Page 16: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/16.jpg)
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.
![Page 17: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/17.jpg)
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.
![Page 18: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/18.jpg)
8.Select Checkout as-is, commit as-is radio button & click Next.
![Page 19: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/19.jpg)
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
![Page 20: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/20.jpg)
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.
![Page 21: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/21.jpg)
Lets run our first app on emulator
1.Goto: File>New>Titanium Mobile Project2.Fill the Details of the App & click Finish.
![Page 22: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/22.jpg)
Run the code.After the Studio displays : Deployed hello ... Application should be running. You will see something like this in the emulator
![Page 23: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/23.jpg)
The Application Project Structure
• Build .apk
• Resourcesapp.jsSplash ScreenApplication Icon
• Tiapp.xml
Titanium follows MVC : Model-View-Controller
![Page 24: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/24.jpg)
The Titanium Architecture
How does Titanium work ?
• Pre-compiler
• Front-end compiler
• Platform compiler & packager
![Page 25: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/25.jpg)
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
![Page 26: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/26.jpg)
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.
![Page 27: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/27.jpg)
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’); });
![Page 28: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/28.jpg)
Adding interactivity
view2.addEventListener(‘dbclick',function() { view2.animate({
width:150,height:150,duration:1000});
});
For Animation
![Page 29: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/29.jpg)
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});
![Page 30: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/30.jpg)
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);});
![Page 31: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/31.jpg)
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});
![Page 32: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/32.jpg)
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);});
![Page 33: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/33.jpg)
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();
![Page 34: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/34.jpg)
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
![Page 35: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/35.jpg)
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});
![Page 36: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/36.jpg)
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:
![Page 37: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/37.jpg)
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);});
![Page 38: Titanium Appcelerator - Beginners](https://reader033.fdocuments.us/reader033/viewer/2022061210/548e62e8b479595e5a8b4cac/html5/thumbnails/38.jpg)
THANK YOU FOLKS