Embed Size (px)
DESCRIPTION
An introduction to techniques new and old for developing native Android applications
Citation preview
1http://www.appcelerator.com | @appcelerator
Native Android Applications Native Android Applications with Titaniumwith Titanium
Marshall Culpepper (@marshall_law)
Kevin Whinnery (@kevinwhinnery)
2http://www.appcelerator.com | @appcelerator
Agenda• Native Android Concepts and Terms• Using Titanium APIs to participate in the native Android ecosystem• Cross-platform JavaScript tips and techniques• Code structure for cross-platform apps• Questions and Answers
3http://www.appcelerator.com | @appcelerator
Concepts• Application– http://developer.android.com/reference/android/app/Application.html– 1..n Activities• Selected by OS w/ Intent filters
– SDK version compatibility
• Intent– http://developer.android.com/reference/android/content/Intent.html– Various fields/options• Action (VIEW, EDIT, SEND, etc), Data (URI)• Category (CATEGORY_LAUNCHER etc)• Mime type (i.e. vnd.android.cursor.item/phone)• Class name (i.e. com.mycompany.Activity)• Custom key/value pairs
– Fully serializable data, used between Activities
4http://www.appcelerator.com | @appcelerator
Concepts
• Activity– http://developer.android.com/reference/android/app/Activity.
html– Task Stack• Inter-app + screen navigation
– App entry point– Handle system+custom intents• Can return values to other activities
• Service– http://developer.android.com/reference/android/app/Service.
html– Long running background processes– Part of an Application
5http://www.appcelerator.com | @appcelerator
Concepts
• PendingIntent– http://developer.android.com/reference/android/app/PendingI
ntent.html– Holds an Intent that will be executed at a later time by the
system or another Activity
• NotificationManager– http://developer.android.com/reference/android/app/Notificat
ionManager.html– http://developer.android.com/reference/android/app/Notificat
ion.html– API for showing a system notification, i.e. status bar icon,
sound, etc– our API is currently undocumented, but will be coming
shortly
6http://www.appcelerator.com | @appcelerator
App/Activity Life Cycle
• User launches app–Intent is fired to app with:• category: CATEGORY_LAUNCHER•action: MAIN
7http://www.appcelerator.com | @appcelerator
How do I do that with Ti?• Custom JS Activities/Services– JS Activities can be simple (launched via URL) or complex (launched
via intent filter from the system)– JS Services currently only run when the app starts
• Doesn’t support full functionality of Android Services (yet)• See http://developer.appcelerator.com/doc/mobile/android-simple-services
– Configured via tiapp.xml
• Everything else (mostly) follows a 1:1 mapping w/ official Android API– All constants / create* methods live in Ti.Android– i.e. Ti.Android.createIntent– Access current activity with Ti.Android.currentActivity– Activity.startActivityForResult supports a function callback for
convenience– See Documentation for Ti.Android
• http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.Android-module
11
http://www.appcelerator.com | @appcelerator
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
13
http://www.appcelerator.com | @appcelerator
Ti.Platform.osname
A little extra sugar for branching based on OS...
14
http://www.appcelerator.com | @appcelerator
Usage...
use as a convenient way to branch logicbased on operating system, or...
...a convenient way to choose a value based on operating system
15
http://www.appcelerator.com | @appcelerator
Platform Resources
Code files, images, or any other resource can be swapped out on a per-platform basis
17
http://www.appcelerator.com | @appcelerator
Dealing with multiple resolutions and densities
18
http://www.appcelerator.com | @appcelerator
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.
19
http://www.appcelerator.com | @appcelerator
Example
Same Physical Size
Resolution: 320x480 Resolution: 480x800
Medium Density (160dpi)High Density (240dpi)
Smaller Physical Size
Resolution: 240x320
Low Density (120dpi)
20
http://www.appcelerator.com | @appcelerator
Many Screen Types
http://developer.android.com/guide/practices/screens_support.html
21
http://www.appcelerator.com | @appcelerator
Contrast with iOS
• iPhone layout is always based on a 320x480 point system, regardless of screen density/pixels• Retina display devices (high density display) require high-res images (@2x)
320 “points”
480 “points”
22
http://www.appcelerator.com | @appcelerator
Ignoring Densities
• Android property anyDensity=false will cause medium res images to be used, and will scale UI layout to match a 160dpi screen• This is the default behavior in 1.5• Not always desirable - configurable in tiapp.xml
23
http://www.appcelerator.com | @appcelerator
Multiple Resolutions
• Ti.Platform.displayCaps– platformWidth– 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
24
http://www.appcelerator.com | @appcelerator
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
25
http://www.appcelerator.com | @appcelerator
Structuring your Titanium application for cross-platform
26
http://www.appcelerator.com | @appcelerator
Rich client applications (like Ti Mobile apps) should strive
to be:
event-driven and
component-oriented
27
http://www.appcelerator.com | @appcelerator
Interaction Events
• Interaction events you know:– click– swipe– change– focus– blur
28
http://www.appcelerator.com | @appcelerator
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)
29
http://www.appcelerator.com | @appcelerator
Being component-oriented helps us build cross-platform
more easily.
30
http://www.appcelerator.com | @appcelerator
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
31
http://www.appcelerator.com | @appcelerator
Walkthrough: Tweetanium
• Component oriented construction• Composed from a custom-built UI library, following the Titanium.UI component factory style• Utilizes new features for localization, strategies for externalizing UI configuration• Under construction, code posted next week• Desktop version available as well
32
http://www.appcelerator.com | @appcelerator
Questions?
