Titanium Appcelerator - Beginners

  • View

  • Download

Embed Size (px)


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

Text of Titanium Appcelerator - Beginners

  • 1. Ambarish Hazarnis Pawan Sirse

2. How to Develop Mobile Apps ?Mobile appCrossCore SDKsPlatform WebI-PhoneAndroidBlackberry TitaniumFramework Mobile Sencha JqueryTouch 3. Web Frameworks for applicationdevelopment are . . . - Loren Brichter,creator Twitter for iPhone/Tweetie 4. Titanium is an open source framework for buildingNative 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. 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. Installing JAVA 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. 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. Installing the Android Development Kit (ADK)1.Launch the installer_r09-windows setup.2.Rename the destination folder as C:android-sdk. 10. 3.Start the SDK manager.4.Cancel the Installation of packages.5.Copy and replace the platforms, platform-tools, extras, temp foldersfrom DVD to C:/android-sdk.6. Click Refresh in the Installed Packages option of AVD Manager. You will see something like this 11. 7.Add the ADK to the PATH1. Add : C:android-sdktools;C:android-sdkplatformsandroid-4tools; before the JAVA path.8.Workaround for a missing adbDue to a recent change in the Android SDK file structure, Titanium Developerexpects the adb.exe executable to be in pathtoandroid-sdk-windowstoolswhereas 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 timeGoogle updates the Platform-Tools package, or AndroidSDK itself. 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. 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. 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. 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. 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. 8.Select Checkout as-is, commit as-is radio button & click Next. 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. 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. Lets run our first app on emulator1.Goto: File>New>Titanium Mobile Project2.Fill the Details of the App & click Finish. 21. Run the code.After the Studio displays : Deployed hello ... Application should be running.You will see something like this in the emulator 22. The Application Project Structure Build.apk Resources app.js Splash Screen Application Icon Tiapp.xmlTitanium follows MVC : Model-View-Controller 23. The Titanium ArchitectureHow does Titanium work ? Pre-compiler Front-end compiler Platform compiler & packager 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 thatperform specific actions like buttons 25. Self-contained WindowsFor 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. For Alert:view.addEventListener(click,function(){alert(You clicked Upper View);});Create a new View for animationvar view2 = Ti.UI.createView({backgroundColor:red,width:50,height:50,bottom:50});win.add(view2); 27. Adding interactivityFor Animationview2.addEventListener(dbclick,function(){view2.animate({ width:150, height:150, duration:1000 });}); 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. 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 tf1alert(Welcome+ tf1.value);}); 30. ButtonAdd your own buttons and functionsvar button = Titanium.UI.createButton({ //create Buttontitle: 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. PickerAdd 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. Activity Indicator Display this if some Activity is to be performed in backgroundvar actInd = Titanium.UI.createActivityIndicator({ //activity indicatorheight:50,width:10,message: You cannot do anything now});actInd.show(); 33. AnimationsWe can add Animations to any widgetsvar animation = Titanium.UI.createAnimation({ //define animationheight:100,duration:1000,repeat:5,autoreverse:true});Object.animate(animation);//start animation 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. 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. 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 tabledata: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);});