scott mason: enhancing the user interface using titanium modules

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 �