Codestrong 2012 breakout session android internals and best practices
1. Titanium Mobile:
Best Practices for Android
Josh Roesslein, Software Engineer
Appcelerator, Inc.
jroesslein@appcelerator.com
Max Stepanov, Senior Software Engineer
Appcelerator, Inc.
mstepanov@appcelerator.com
2. Agenda
• History
• Windows and Navigation
• Layout events
• Event Bubbling
• Modern Look and Feel
• Debugging
3. History
• 0.8: HTML UI / WebView
• 0.9: Native UI / Mozilla Rhino
• 1.8: Google V8
4. Windows and Navigation
• Heavyweight vs. Lightweight
• Activities and Back Stack
• Back Stack
5. Windows and Navigation
Window A
Window B
Activity A Window B
Activity B
Activity B Window D
6. Layouts
• Eventing: Use postlayout
NOT open
• A layout pass may not
have occurred by the time
an open event is fired
• A postlayout event occurs
after a native Android
layout pass (may occur
multiple times)
7. Event bubbling
• SDK 3.0 allows control over event
bubbling
• Titanium.Event object has two new
properties
• bubbles
• cancelBubble
• Current defaults are identical to
2.X, but will change to achieve
parity in the future
8. Control bubbling
Allow custom events to bubble
button.fireEvent(“myEvent”,
{bubbles: true});
Allow bubbling to cancel during event
handling
view.addEventListener(“myEvent”,
function(e) {
e.cancelBubble = true;
})
9. Cancel bubbling
Allow views to bubble up / not to
bubble up events
view.bubbleParent = false;
For more information:
http://docs.appcelerator.com/titanium/
3.0/index.html#!/guide/Event_Handlin
g
10. Newer Look/Feel
• Target API level
• Backwards
compatible
• Unlocks newer
behaviors and
features
• Themes
• Consistent
• Holo themes
• ActionBar
• MenuItem
• Action Items
• Tabs
• Opt-in
• TabGroup API
13. New in Titanium
Titanium 1.7 Titanium 3.0
Android Emulator Physical Devices
14. Device Debugging
• V8 only (for on-device debugging)
• Just plug in device into USB
• Launches faster than Emulator!
15. Threading
User taps button 1
EventListener 1
• UI thread for handling var x = 1;
user interactions Ti.API.log(x);
openWin(x);
• JS thread for the postlayout event
application logic Geo location
Function Run
• Debugger thread for
communications with EventListener 2
Titanium Studio Line 1
Line 2
• Other Android Line 3
platform threads
16. Best Practices
• Use conditional breakpoints
• JavaScript code block
• Hit count
• Use Console logging with
Ti.API functions
17. Josh Roesslein & Max Stepanov
jroesslein@appcelerator.com / mstepanov@appcelerator.com
Editor's Notes
----- Meeting Notes (10/22/12 13:49) -----Where the android platform has been in the past and improvements we have made over the past few years.How windows and activities work together and the differences you should know about HW and LW windows.A tip for using the "postlayout" event to query the computed layout of your views. DEMO.The new event bubbling introduced into 3.0.How to give your apps a modern look and feel. ActionBar.Finally a demo of the new device debugging support. No more slow emulator.
Initially Titanium used HTML for creating UI. Was basically a “webview” plus some native bindings.For Release 0.9 introduced native UI.For 1.8 we transitioned to V8 for our JS runtime. We saw a substantial increase in JS performance over Rhino.Rhino is still supported today, but our plans is to eventually deprecate it in favor of V8.
Blue boxes -> activity stackRed boxes -> window stackHeavyweight:Launches a new activity when opened.Lightweight windows may be opened on top of it.Lightweight:Always opened on top of the current activity.Can co-exist with multiple windows on the same activity.Are basically just “views” placed into an activities content view layout.All windows are lightweight except when one of these properties is used during creation:FullscreennavBarHiddenModalwindowSoftInputModeWatch out for the back button. By default Android will finish the “top” activity in the stack.If you have multiple windows hosted by that activity, all of them will get closed.Break up your naivgation into “tasks” (ex: compose email, look up contact) and useHeavyweight windows for each task. Users expect back button to take them back to the previous task.DEMO
Eventing: A common issue we see is the number of people listening to the ‘open’ event on a window to determine the height and width of a view inside the window. This is not correct since a layout pass is not guaranteed to have occurred when the event is fired. A better approach would be to listen to the ‘postlayout’ event instead. A post layout event occurs when native Android is done running through a layout pass, can happen multiple times.DEMO
DEMO
Target API levelSpecifies the version the app is “designed” to run on.Allows application to access features introduced in newer API levels (ex: 11 allows action bar and holo theme)Can still run on older versions, but must not use any newer features (detect os version).ThemesUsed on Android to give applications a consistent appearance.Android provides default themes such as Holo to provide greater cohesion between apps.Themes are extendable (style.parent) so you can mold them to get the style you want.Action Bar- Menu Item updated to expose some newer APIs.showAsAction: controls how the item appears in the bar (always, if space, never)actionView: custom view for the action itemNavigation TabsSame tab group API.Opt-in by setting target API level above 11.Replaces TabWidget style groups.Demo.
MenuItem example.Left: bad exampleRight: Good practice. Use action items for more used items. Other menu items will overflow into drop down menu.