Enhancing the User Interface Using Titanium Modules
Sco8 Mason
Objectives �
• Module Basics!
• Configuration Tips!
• Code Detail!
• Emulator Demos!
• Lessons Learned!
Making the Button Shine �
Technical Diagram�
Shiny Buttons Revealed�
var module = require('shiny.objects'); var btnPurple = module.createButton({
color:"white",backgroundColor: "purple",top:130,left:40,width:100, height:30,title: "Purple"
});
Module Parts �
Module!implements TiModule!extends KrollModule!extends KrollModule!
Proxy!implements TiProxy
KrollModule!extends KrollProxy!
ViewProxy!implements TiViewProxy
KrollModule!extends TiViewProxy!
View!implements TiUIView
KrollModule!extends TiUIView!
Online Documentation �
Be sure to read and become familiar with the module documentation at:�
http://developer.appcelerator.com/doc/mobile/guides �
Project Files �
iPhone Module �
#import "TiModule.h"!
@interface ShinyObjectsModule : TiModule !{ !} !@end !
ShinyObjectsModule.h�
ShinyObjectsModule.m�#import "ShinyObjectsModule.h" !...!
@implementation ShinyObjectsModule !
... more code !
@end !
Android Module �
import org.appcelerator.kroll.KrollModule;import org.appcelerator.kroll.annotations.Kroll;import org.appcelerator.titanium.TiContext;@Kroll.module(name="ShinyObjects", id="shiny.objects")public class ShinyObjectsModule extends KrollModule �
ShinyObjectsModule.java�
iPhone Proxy Example �
#import "ShinyObjectsUtilityProxy.h"!#import "TiUtils.h"!
@implementation ShinyObjectsUtilityProxy !
... !
Objective C � Titanium�
var module = require('shiny.objects');var proxy = module.createUtility();
-(void)sleep:(id)args !{ !// ensure we have at least 1 argument !// and it runs on the UI thread!ENSURE_UI_THREAD_1_ARG(args); !
float seconds = [[args objectAtIndex:0] floatValue]; !NSLog(@"Sleeping for %f seconds", seconds); ![NSThread sleepForTimeInterval:seconds]; !} !
@end !
proxy.sleep(sleepDuration);
Android Proxy Example �
@Kroll.proxy(creatableInModule=ShinyObjectsModule.class)public class UtilityProxy extends KrollProxy@implementation UtilityProxy !
... !
Java� Titanium�
var module = require('shiny.objects');var proxy = module.createUtility();
@Kroll.methodpublic void sleep(int seconds){ Log.d(LCAT, String.format("Sleeping for %d seconds.", seconds)); try { Thread.sleep(seconds); } catch (InterruptedException e) { // we got interrupted, time to go }}
proxy.sleep(sleepDuration);
Configuration Tip�
Help your app find the correct module!
<ti:app xmlns:ti="http://ti.appcelerator.org">...!<modules>! <module version="1.0" platform="iphone">shiny.objects</module>! <module version="1.0" platform="android">shiny.objects</module>!</modules>!...!</ti:app>!
Adding the View �iPhone �
Methods � Properties � Events �initLayers! setEnabled! clicked!
frameSizeChanged! setBorderRadius! tapped!hasTouchableListener! setTitle! highlightOn!handleControlEvents! setBackgroundColor! highlightOff!
setFont!setColor!
setTextAlign!
Adding the View �Android�
Methods � Properties � Events �
propertyChanged! processProperties! handled by OS!
initLayers! handleStyleOptions!
createView!
Interesting Places - iOS�
/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS4.3.sdk/System/Library/Frameworks/UIKit.framework/Headers �
/Users/sam/Projects/ShinyButtons/build/iphone/Classes �
iOS SDK Directory�
Your Project Build Directory �
Interesting Places - Android�
JAR Files in Project Directory�
iPhone Deployment �
• Edit and correct code in Xcode!• Build from Terminal with ./build.py!
• Test with “titanium run”!• Extract zip file contents to Library directory!
• /Library/Application Support/Titanium/modules/iphone!
• Build into your app and distribute!
Android Deployment �
• Edit and correct code in Titanium Studio!• Build the code with “ant”!
• Test with “titanium run”!• Extract zip file contents to Library directory!
• /Library/Application Support/Titanium/modules/android!
• Build into your app and distribute!
Emulator Demos �
Lessons Learned�
• Be aware of the naming conventions!• Specify platform in tiapp.xml!
• Get comfortable with Terminal!• Browse and use existing Titanium code!
• Deploy into the Library directory!
Questions �
