 Ambarish Hazarnis Pawan Sirse
How to Develop Mobile Apps ?                              Mobile app                                                      ...
Web Frameworks for applicationdevelopment are . . .                             - Loren Brichter,                         ...
 Titanium is an open source framework for building  Native mobile applications. Open Source (Apache 2.0). Supported OS ...
Requirements:>For Android Emulator & Development 1.Sun Java Development Kit 6 (aka 1.6) 2.Android Development Kit>For Buil...
Installing JAVA
Setting up the environment and path1. Goto : Control Panel > System & Security > System        > Advanced System Settings ...
Verify Java Install1. Open a new command window and enter the command below.    > javac -version2. If youve configured the...
Installing the Android Development Kit (ADK)1.Launch the installer_r09-windows setup.2.Rename the destination folder as C:...
3.Start the SDK manager.4.Cancel the Installation of packages.5.Copy and replace the platforms, platform-tools, extras, te...
7.Add the ADK to the PATH  1. Add : C:android-sdktools;C:android-sdkplatformsandroid-4tools;     before the JAVA path.8.Wo...
Verify ADK Install1. Open a new command window and enter the commands below.     > aapt v     > android list2. If youve co...
Install Python 2.7.x1.Launch the Python installer and use the defaults.                             Verify Install1. Open ...
Install SCons 1.2.0.x1.Launch the SCons installer and use the defaults.                              Verify Install1. Open...
Install Git1.Launch the Git Installer.2.Click Next to start the setup.3.Click Next to accept the License Agreement.4.Set D...
6.Leave the default Git text in the text field and click Next .7.Select Run Git from the Windows Command Prompt radio butt...
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.                         ...
Install Titanium Studio1.Launch the Titanium Studio setup.2. Click Next to start.3.Click I Agree to accept the License Agr...
Lets run our first app on emulator1.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...
The Application Project Structure• Build          .apk• Resources       app.js       Splash Screen       Application Icon•...
The Titanium ArchitectureHow does Titanium work ?   • Pre-compiler   • Front-end compiler   • Platform compiler & packager
Titanium Design ConceptsThe following are the major design components in Titanium:    • Windows - windows host one or most...
Self-contained Windows  For example, to create a simple Window, you could do the following:var win = Ti.UI.createWindow();...
For Alert:    view.addEventListener(‘click,function()    {      alert(‘You clicked Upper View’);    });Create a new View f...
Adding interactivityFor Animationview2.addEventListener(‘dbclick,function(){  view2.animate({         width:150,         h...
Labels                         Text to be displayed on screenvar mylabel = Titanium.UI.createLabel({    text: Wow! This is...
Text Fields                         Text to be entered within a fieldvar tf1 = Titanium.UI.createTextField({    hintText: ...
Button                      Add your own buttons and functionsvar button = Titanium.UI.createButton({       //create Butto...
Picker                    Add Picker which functions as drop-down boxvar picker = Titanium.UI.createPicker();var data = []...
Activity Indicator         Display this if some Activity is to be performed in backgroundvar actInd = Titanium.UI.createAc...
Animations                    We can add Animations to any widgetsvar animation = Titanium.UI.createAnimation({         //...
ImageViewEg: ImageView from Titanium APIvar myimage = Ti.UI.createImageView({ image: android/appicon.png, width:128, heigh...
Adding interactivity to ImageViewOn Touch Start:    myimage.addEventListener(touchstart,function(e)    {      myimage.anim...
Table View                         Creation of static or dynamic Tablesvar data = [{title:"Row 1"},{title:"Row 2"}];data.p...
Titanium Appcelerator - Beginners
Titanium Appcelerator - Beginners
Upcoming SlideShare
Loading in …5
×

Titanium Appcelerator - Beginners

10,208 views

Published on

Here we explain the installation & basic coding for Titanium Appcelerator which is a cross platform development tool supporting Android, iOS & Blackberry.

Published in: Technology, Education
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
10,208
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
228
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Titanium Appcelerator - Beginners

  1. 1.  Ambarish Hazarnis Pawan Sirse
  2. 2. How to Develop Mobile Apps ? Mobile app Cross Core SDKs Platform WebI-Phone Android Blackberry Titanium Framework Mobile Sencha Jquery Touch
  3. 3. Web Frameworks for applicationdevelopment are . . . - Loren Brichter, creator “Twitter for iPhone”/Tweetie
  4. 4.  Titanium is an open source framework for building Native mobile applications. Open Source (Apache 2.0). Supported OS : iOS Android BlackBerry webOS Has its Own IDE with code completion & debugging* support. Facilitates for submitting the app on Market.
  5. 5. 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
  6. 6. Installing JAVA
  7. 7. Setting up the environment and path1. Goto : Control Panel > System & Security > System > Advanced System Settings > Environment Variables.2. Goto : Path in System Variables & Edit.3. Add : C:Javajdk1.6.0_21bin; to path.
  8. 8. Verify Java Install1. Open a new command window and enter the command below. > javac -version2. If youve configured the PATH correctly, you should see something similar to.3. This means our JAVA is installed correctly.
  9. 9. Installing the Android Development Kit (ADK)1.Launch the installer_r09-windows setup.2.Rename the destination folder as C:android-sdk.
  10. 10. 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
  11. 11. 7.Add the ADK to the PATH 1. Add : C:android-sdktools;C:android-sdkplatformsandroid-4tools; 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 pathtoandroid-sdk-windowstools whereas it currently resides in pathtoandroid-sdk-windowsplatform-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.
  12. 12. Verify ADK Install1. Open a new command window and enter the commands below. > aapt v > android list2. If youve configured everything correctly, you should see something similar to.
  13. 13. Install Python 2.7.x1.Launch the Python installer and use the defaults. Verify Install1. Open a new command window and enter the commands below. > python --version2. If youve configured everything correctly, you should see something similar to.
  14. 14. Install SCons 1.2.0.x1.Launch the SCons installer and use the defaults. Verify Install1. Open a new command window and enter the commands below. > scons --version2. If youve configured everything correctly, you should see something similar to
  15. 15. Install Git1.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.
  16. 16. 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.
  17. 17. 8.Select Checkout as-is, commit as-is radio button & click Next.
  18. 18. 9. Wait for the installation to complete.10.Click the Finish button to complete the installation. Verify Install1. Open a new command window and enter the commands below. > git --version > git config –list2. If youve configured everything correctly, you should see something similar to
  19. 19. Install Titanium Studio1.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.
  20. 20. Lets run our first app on emulator1.Goto: File>New>Titanium Mobile Project2.Fill the Details of the App & click Finish.
  21. 21. Run the code.After the Studio displays : Deployed hello ... Application should be running.You will see something like this in the emulator
  22. 22. The Application Project Structure• Build .apk• Resources app.js Splash Screen Application Icon• Tiapp.xmlTitanium follows MVC : Model-View-Controller
  23. 23. The Titanium ArchitectureHow does Titanium work ? • Pre-compiler • Front-end compiler • Platform compiler & packager
  24. 24. Titanium Design ConceptsThe 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
  25. 25. 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 HTMLvar 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.
  26. 26. For Alert: view.addEventListener(‘click,function() { alert(‘You clicked Upper View’); });Create a new View for animation var view2 = Ti.UI.createView({ backgroundColor:red, width:50, height:50, bottom:50 }); win.add(view2);
  27. 27. Adding interactivityFor Animationview2.addEventListener(‘dbclick,function(){ view2.animate({ width:150, height:150, duration:1000 });});
  28. 28. Labels Text to be displayed on screenvar mylabel = Titanium.UI.createLabel({ text: Wow! This is a Label, height:auto, width:auto, color:#900, font:{fontSize:20}, textAlign:center, top: 10});
  29. 29. Text Fields Text to be entered within a fieldvar 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);});
  30. 30. Button Add your own buttons and functionsvar 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});
  31. 31. Picker Add Picker which functions as drop-down boxvar 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);});
  32. 32. Activity Indicator Display this if some Activity is to be performed in backgroundvar actInd = Titanium.UI.createActivityIndicator({ //activity indicator height:50, width:10, message: You cannot do anything now});actInd.show();
  33. 33. Animations We can add Animations to any widgetsvar animation = Titanium.UI.createAnimation({ //define animation height:100, duration:1000, repeat:5, autoreverse:true});Object.animate(animation); //start animation
  34. 34. ImageViewEg: ImageView from Titanium APIvar myimage = Ti.UI.createImageView({ image: android/appicon.png, width:128, height:128, borderColor:#aaa, borderRadius:10, borderWidth:5});
  35. 35. Adding interactivity to ImageViewOn Touch Start: myimage.addEventListener(touchstart,function(e) { myimage.animate({ width:200, height:200, duration:500 }); });On Touch End: myimage.addEventListener(touchend,function(e) { myimage.animate({ width:128, height:128, duration:500 }); });
  36. 36. Table View Creation of static or dynamic Tablesvar 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 tabletable.addEventListener(click,function(e){ alert(e.rowData.title);});

×