Embed Size (px)
DESCRIPTION
The Shiny Objects module discussed in this session will allow the developer to easily add visually appealing buttons to their projects without the use of special graphics files. Make a button that really shines with a call as simple as Ti.UI.createButton! See how easy it was to create this module and benefit from the lessons learned during its development. Why All the Fuss? The stock button provided by Apple is plain and boring. It lacks the depth, color and presence of the standard Apple buttons. The standard buttons are mostly available for use in the navigation bar and cannot be put together in a view to add multiple buttons. This session will be of most interest to intermediate and advanced developers looking to create or extend Titanium functionality, but is also quite useful for the beginning developer to learn how to easily add a cool looking button to their projects. Objective-C and Java will be discussed but are not necessary to use this module. Module Benefits - Shine and Gloss Using Gradient Layers - Consistent Look and Feel for iPhone and Android Apps - Ability to Change the Button Background color with a Property - Adjustable Border Radius - Automatic Highlighting
Citation preview
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 �
