Intro to appcelerator


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • We need to take screen shot from Mac
  • Connect to Techday7 twitter.. To get Updates…
  • Connect to Techday7 twitter.. To get Updates…
  • ISO 639-1
  • Intro to appcelerator

    1. 1. Prepared byMohab Tarek@MohabTarek
    2. 2. Native DevelopmentJava Objective-C
    3. 3. Appcelerator Titanium Mobile• Titanium is a JavaScript runtime that gives you native access to the platform’s controls• You are not building a app via html/css/js (i.e. PhoneGap) JavaScript
    4. 4. How Titanium Mobile Works• You write code in JavaScript• At runtime, your application has 3 major components: o JavaScript source code (minified and inlined, but not compiled, into Java/Obj-C strings) o Titanium API implementation in the native OS o JavaScript interpreter (V8/Rhino for Android, JavaScriptCore for iOS)• The JavaScript interpreter runs your JavaScript code in an environment with proxies for the native objects (windows, controls, etc)
    5. 5. Titanium Mobile Application Source Files Our ApplicationUI API Phone API Optional ModulesBridge - JavaScript -Java / JavaScript - Objective C OS - Android / iPhone Native Android App Native iOS App
    6. 6. JS files to native objective code• JS is statically analyzed• Ti’s Python build scripts interact with native SDK tools .• Native project stub will created• JS precompiled to bytecode(Android) or inlined in a generated C file(iOS)• Your JS and native code package together with V8/Rhino or JavaScriptCore to interpret JS code at runtime
    7. 7. To start development…• PC or Mac machine (for iOS development)• XCode with iOS SDK• JDK 6 x86• Android SDK• Titanium Studio with SDK
    8. 8. Titanium Studio• Eclipse-- (was Aptana Studio)• Editor• Formatting• Code-completion• Build• Debug• Release
    9. 9. Ti Studio (why it so powerful)…• It always notifies you about latest SDK and Studio updates .
    10. 10. Ti Studio (why it so powerful)…• It is so smart, because it catches mistakes immediately!
    11. 11. Ti Studio (why it so powerful)…• Syntax highlighting
    12. 12. Ti Studio (why it so powerful)…• Content assist and more…
    13. 13. Anatomy of a projectProject directory build/ android/ Build folders, per platform iphone/ Resources/ Resource files: JS code, app.js images, sounds, Sqlite DBs, etc. manifest tiapp.xml Project files
    14. 14. App File Structure• I18n - Internationalization files• modules - Third-Party (or Appcelerator) native modules• Resources o app.js – Startup file o images - Generic Images o android - Android-specific images • imageshigh / etc – Android density/screen-size dirs o iphone - iOS-specific images • @2x files o lib, ui, whatever - your source file dirs
    15. 15. manifest#appname: whymca#publisher: olivier#url: appicon.png#appid: com.whymca.test#desc: undefined#type: mobile#guid: 746e9cb4-49f6-4afe-af0b-5de9f0116f65
    16. 16. tiapp.xml<?xml version="1.0" encoding="UTF-8" <iphone> standalone="no"?> <orientations device="iphone"><ti:app xmlns:ti=""> <orientation>Ti.UI.PORTRAIT</orientation> <deployment-targets> </orientations> <target device="iphone">true</target> <orientations device="ipad"> <target device="ipad">false</target> <orientation>Ti.UI.PORTRAIT</orientation> <target device="android">true</target> <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation> </deployment-targets> <orientation>Ti.UI.LANDSCAPE_LEFT</orientation> <id>com.whymca.test</id> <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation> <name>whymca</name> </orientations> <version>1.0</version> </iphone> <publisher>olivier</publisher> <android <url></url> xmlns:android=" <description>not specified</description> es/android"> <copyright>2011 by olivier</copyright> </android> <icon>appicon.png</icon> <modules> <persistent-wifi>false</persistent-wifi> </modules> <prerendered-icon>false</prerendered-icon> </ti:app> <statusbar-style>default</statusbar-style> <statusbar-hidden>false</statusbar-hidden> <fullscreen>false</fullscreen> <navbar-hidden>false</navbar-hidden> <analytics>false</analytics> <guid>746e9cb4-49f6-4afe-af0b- 5de9f0116f65</guid>
    17. 17. app.js• Starting point of App• In app.js, we generally take care of a few things: o Bootstrap the application with any data we need o Check for dependencies like device type, platform version or network connection o Require and open our top-level UI component o Background service for both iOS and Android
    18. 18. Project structure…
    19. 19. Getting Titanium MobileStep 1: Sign up for Appcelerator•• “App EXPLORE” plan = Free: Build, test, ship, sell for free• Additional plans available (more analytics, cloud, support): 2: Download Titanium Studio• 3:• Profit ???
    20. 20. Let’s Get into the interesting part. Coding…
    21. 21. var win = Ti.UI.createWindow({ Hello World title: Hello, World!, layout: vertical, backgroundColor: white});var helloLabel = Ti.UI.createLabel({ text: Hello World, color: black, font: { fontSize: 20sp }, height: 40dp, width: 250dp});win.add(helloLabel);var helloButton = Ti.UI.createButton({ title: Click me!, font: { fontSize: 20sp }, top: 20dp, height: 40dp, width: 250dp});
    22. 22. Create WindowWe can also set properties like thiswin.backgroundColor="#F00";win.setBackgroundColor("#F00");
    23. 23. Create Label
    24. 24. Create Button
    25. 25. Create button with add event listener
    26. 26. Add sub view to Window or View
    27. 27. Log methods
    28. 28. Layout (composite )• composite (or absolute). Default layout. A child view is positioned based on its positioning properties or "pins" (top, bottom, left, right and center). If no positioning properties are specified, the child is centered.• The child is always sized based on its width and height properties, if these are specified. If the childs height or width is not specified explicitly, it may be calculated implicitly from the positioning properties. For example, if both left and center.x are specified, they can be used to calculate the width of the child control.
    29. 29. Layout (vertical)• Children are laid out vertically from top to bottom. The first child is laid out top units from its parents bounding box. Each subsequent child is laid out below the previous child. The space between children is equal to the upper childs bottom value plus the lower childs top value.• Each child is positioned horizontally as in the composite layout mode.
    30. 30. Layout (vertical)• Horizontal layouts have different behavior depending on whether wrapping is enabled. Wrapping is enabled by default (the horizontalWrap property is true).• With wrapping behavior, the children are laid out horizontally from left to right, in rows. If a child requires more horizontal space than exists in the current row, it is wrapped to a new row. The height of each row is equal to the maximum height of the children in that row.
    31. 31. Include Vs. Require• Ti.include(‘filename.js); o is to be used when you want to include some other js file within another file. o copy-pastes source code every time its called. o Used when wanting to define global methods or variables [defined once in top of file.js].• Require(filename.js).method o parses modules source code just once and it returns same object that is exported every time it is called. o Used when calling a method or variable from another file o fontSize : require(src/Settings1).getFontNormal() o var _isAndroidTablet = require(src/GlobalVariables).isAndroidTablet(); o Another File code exports.isAndroidTablet = function() { if(scWidth>scHeight && osname==android) return true; return false; }
    32. 32. Animate with UI elements Before start After complete
    33. 33. Connect to Web Servicesopen( “GET|POST”, “*HTTP://URL…+”, “*TRUE|FLASE – async call+”+ )This async parameter only for iOS
    34. 34. Connect to Web Services• How to send data using post method?• How to stop request
    35. 35.“SHOW”,”DEM O”) Keep your app fresh. Use web services
    36. 36. Database• Install will copy SQLite database file to devices internal storage. If file is there, it just uses the open method• We can use Ti.App.Properties to set db install to true. For E.g. Ti.App.Properties. setBool(‘isDbInstalled’,true)• Open will automatically open the DB to perform CRUD operations
    37. 37. Database code snippets• Running SQL Queries against the DB• We can also get number of Rows affected
    38. 38. Database code snippets• What about SELECT Query?
    39. 39. Database example
    40. 40. Internationalization• Create 2 letter folder inside “i18n” (18 stands for the number of letters between the first i and last n in internationalization) in root folder.• Create Locale folder in it• In that Locale folder just keep strings.xml
    41. 41. Our App in different languages• strings.xml
    42. 42. Internationalization example <resources> <string name="en_NoOfBills">No of bills</string> <string name="ar_NoOfBills"> string> </resources>var lang = require(src/Settings1).getLang(); var lblTitle = Ti.UI.createLabel({ text:L(lang+’ NoOfBills) }
    43. 43. Ti JavaScript API• UI – Titanium.Contacts – Titanium.UI – Titanium.Media – Titanium.UI.Android – Titanium.Android – Titanium.UI.Clipboard – Titanium.Android.Calendar – Titanium.UI.iOS – Titanium.Android.NotificationManager – Titanium.UI.iPad – Titanium.App.iOS – Titanium.UI.iPhone – Titanium.App.Android – Titanium.Map • Data Persistence• Sensors – Titanium.Database – Titanium.Accelerometer – Titanium.Filesystem – Titanium.Geolocation – Titanium.App.Properties – Titanium.Gesture • i18n• Networking – Titanium.Locale – Titanium.Network • Utilities/helpers – Titanium.XML – Titanium – Titanium.Facebook – Titanium.App – Titanium.Yahoo – Titanium.API – Titanium.Analytics – Titanium.Utils• Device integration – Titanium.Platform
    44. 44. Extending the API: why?• Accessing specific OS features• Leveraging existing native libraries• Optimizing critical portions of the app• Extending/ameliorating portions of the Titanium Mobile framework
    45. 45. Extending the API: how?• Creating a fork of Titanium Mobile’s source code on github o Unflexible approach • You put your hands in the heart of the framework • Maintaining a separate branch can be tedious and costly o There are situations where this is the cheaper approach • E.g. when needing to extend the functionality of core modules of the framework (networking, maps, ecc.)
    46. 46. Extending the API: how?• Creating one or more native modules throught the Titanium Module SDK o Great flexibility o Easy to distribute as • Open Source • Binary packages • Appcelerator Ti+Plus Marketplace (?)• Add files to modules folder to specificAndroid or iOS
    47. 47. Useful Ti Modules
    48. 48. Moduli nativi – some examples• Android barcode scanner (Zxing wrapper) o• iOS ZipFile (create/decompress zip files) o• iOS TiStoreKit (in app purchase) o• iOS TiSMSDialog (in app sms sending) o• Appcelerator Titanium modules (sample modules) o
    49. 49. KitchenSink•
    50. 50. Cross-platform Strategy• If possible, build and test your application for multiple platforms from the start• Understand the cost of using platform-specific native UI elements• Separate business logic and UI construction• Smaller UI components are easier to maintain across platforms than large ones• Test on many devices and resolutions | @appcelerator 50
    51. 51. Some Tools of the Trade | @appcelerator 51
    52. 52. Ti.Platform.osnameA little extra sugar for branching based on OS... | @appcelerator 52
    53. 53. Usage... use as a convenient way to branch logic based on operating system, or......a convenient way to choose a valuebased on operating system | @appcelerator 53
    54. 54. Platform Resources Code files, images, or any other resource can be swapped out on a per-platform basis | @appcelerator 54
    55. 55. Dealing with multipleresolutions and densities | @appcelerator 55
    56. 56. Terms and Concepts• Resolution: The total number of physical pixels on a screen• Density: the spread of pixels across an inch of the actual screen (DPI) When defining Android user interfaces, the top/bottom/left/right/height/width/font etc. values you use are based on RESOLUTION. SCREEN DENSITY can be used to determine density-appropriate visual assets to use. | @appcelerator 56
    57. 57. Example Smaller Physical Size Resolution: 240x320 Low Density (120dpi) Same Physical Size Resolution: 320x480 Resolution: 480x800Medium Density (160dpi) High Density (240dpi) | @appcelerator 57
    58. 58. Many Screen Types | @appcelerator 58
    59. 59. Contrast with iOS• iPhone layout is always based on a 320x480 point system, regardless of screen density/pixels• Retina display devices (high 480 “points” density display) require high- res images (@2x) 320 “points” | @appcelerator 59
    60. 60. Multiple Resolutions• Ti.Platform.displayCaps o platformWidth o platformHeight• Based on available screen real estate, you may change the size or layout of your UI• Use the available emulator skins and devices to test layouts on multiple resolutions• Use top/bottom/left/right for sizing where possible | @appcelerator 60
    61. 61. Multiple Densities• Even if the available screen resolution is the same, higher density screens call for higher resolution assets• Provide density-specific images in the ‘android/images’ resource directory• Provide highest resolution images, it will scale to rest of images , you can modify by adding other images | @appcelerator 61
    62. 62. Structuring your Titanium application for cross- platform | @appcelerator 62
    63. 63. Rich client applications (likeTi Mobile apps) should strive to be: event-driven and component-oriented | @appcelerator 63
    64. 64. Interaction Events• Interaction events you know: o click o swipe o change o focus o blur | @appcelerator 64
    65. 65. Custom Events• Custom events you might not use (but should!)• Custom events can be app wide• Custom events can be specific to your app’s components (business events) | @appcelerator 65
    66. 66. Being component-orientedhelps us build cross-platform more easily. | @appcelerator 66
    67. 67. Component-Oriented• Your application is composed of a library of application- specific components you create• The smaller the component, the easier it is to make each components work across platforms• Encourages the encapsulation and reuse of UI components | @appcelerator 67
    68. 68. Macro• Ti for Titanium• L for Titanium.Locale.getString• alert for Titanium.UI.createAlertDialog• And also remember about Code snippets o For e.g. :- button then {ctrl + space} and see the magic..
    69. 69. File System code snippetsFile system
    70. 70. Map view code snippets (cont)…
    71. 71. Few more code snippets (cont)…iOSAndroid
    72. 72. Android Manifest• Android Manifest can be overridden• Add custom behavior or capabilities to you app• Copy the one generated by Titanium• Modify generated file and then put it inThe following folder
    73. 73. Tips & Tricks• Android has a problem in GC so when closing a page it doesn’t release it’s objects Ex. Used in changing languages. if(require(src/Settings1).getLang() != lang) { if (win1.children) { for (var c = win1.children.length - 1; c >= 0; c--) { win1.remove(win1.children[c]); win1.children[c] = null; } } lang = require(src/Settings1).getLang(); Draw(); }
    74. 74. Tips & Tricks..• There is only one map view can be added to view in app• If a view has MapView and another one have map app will crash immediately .• When adding annotations remove previously added annotation first and event listeners mapview.removeAllAnnotations(); mapview.removeEventListener(click, annotationListener);
    75. 75. Packaging ..• In order to build applications made for the Android Marketplace, you need to create a distribution key on your local computer. This key is used to digitally sign your app.• Open the Terminal or Prompt type the following o cd /<path to your android sdk>/tools• we need to use the Java keytool located in this directory $ keytool -genkey -v -keystore com.othaim.iktissab -alias Iktissab –keyalg RSA -validity 10000• Press Enter and execute the command and youll be asked a series of questions. You need to provide a password for the keystore - it would be wise to write it down as you will need it to package your app later.• Now your key will be exported and saved to the directory you were currently in.• Now your key will be exported and saved to the directory you were currently in. In our case, this is the tools directory under our Android SDK folder
    76. 76. Packaging ..• Open your project in Titanium Studio. Make sure your project is selected in the Project explorer page, and then select the Distribution button followed by the Distribute – Android option, as seen in the following screenshot
    77. 77. Packaging ..• You will need to enter in the distribution location (where you want the packaged APK file saved to) and the location of the keystore file you created in the previous recipe, along with the password and alias you provided earlier. After you enter in that information it should look something like the following screenshot:
    78. 78. Pros• One codebase for two platforms o You’ll (theoretically) spend less time than writing two native apps o Maintenance on one codebase should be easier in the long run• Native interface controls o Your apps can look just like native ones• Might be able to reuse your JavaScript in other parts of your project o eg., Web front-end, Node.js backend• Platform is open-source o• JavaScript is fun!
    79. 79. Cons• Platform is young and still changing• Need to learn a new platform / SDK / quirks o Knowing the ins & outs of native iOS / Android will help• You’ll still have lots of if(iOS){} and if(android){} o LEGO Minifig Collector has 24 blocks of code that are Android or iOS specific• Performance isn’t 100% of a native app• SDK/API Documentation is weak (but getting better)• Q&A support forum is a mess (use SO instead)
    80. 80. Future Platform Support• Blackberry• WinPhone7
    81. 81. Links•••••••
    82. 82. Links..Appcelerator••••• applications• Projects• Joli
    83. 83. Credits• Appcelerator Titanium by Nic Jansma @NicJ• Extending Titanium Mobile through Native Modules by Olivier Morandi• Native Android Applications with Titanium by Marshall Culpepper (@marshall_law) and Kevin Whinnery (@kevinwhinnery)• Getting started with Titanium by Next-Generation Mobile Platform• Appcelerator Titanium Smartphone App Development Cookbook book