scott mason: enhancing the user interface using titanium modules
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 HighlightingTRANSCRIPT
![Page 1: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/1.jpg)
Enhancing the User Interface Using Titanium Modules
Sco8 Mason
![Page 2: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/2.jpg)
Objectives �
• Module Basics!
• Configuration Tips!
• Code Detail!
• Emulator Demos!
• Lessons Learned!
![Page 3: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/3.jpg)
Making the Button Shine �
Technical Diagram�
![Page 4: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/4.jpg)
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"
});
![Page 5: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/5.jpg)
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!
![Page 6: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/6.jpg)
Online Documentation �
Be sure to read and become familiar with the module documentation at:�
http://developer.appcelerator.com/doc/mobile/guides �
![Page 7: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/7.jpg)
Project Files �
![Page 8: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/8.jpg)
iPhone Module �
#import "TiModule.h"!
@interface ShinyObjectsModule : TiModule !{ !} !@end !
ShinyObjectsModule.h�
ShinyObjectsModule.m�#import "ShinyObjectsModule.h" !...!
@implementation ShinyObjectsModule !
... more code !
@end !
![Page 9: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/9.jpg)
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�
![Page 10: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/10.jpg)
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);
![Page 11: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/11.jpg)
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);
![Page 12: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/12.jpg)
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>!
![Page 13: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/13.jpg)
Adding the View �iPhone �
Methods � Properties � Events �initLayers! setEnabled! clicked!
frameSizeChanged! setBorderRadius! tapped!hasTouchableListener! setTitle! highlightOn!handleControlEvents! setBackgroundColor! highlightOff!
setFont!setColor!
setTextAlign!
![Page 14: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/14.jpg)
Adding the View �Android�
Methods � Properties � Events �
propertyChanged! processProperties! handled by OS!
initLayers! handleStyleOptions!
createView!
![Page 15: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/15.jpg)
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 �
![Page 16: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/16.jpg)
Interesting Places - Android�
JAR Files in Project Directory�
![Page 17: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/17.jpg)
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!
![Page 18: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/18.jpg)
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!
![Page 19: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/19.jpg)
Emulator Demos �
![Page 20: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/20.jpg)
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!
![Page 21: Scott Mason: Enhancing the User Interface Using Titanium Modules](https://reader034.vdocument.in/reader034/viewer/2022052522/554d1f8eb4c905ca208b4a9e/html5/thumbnails/21.jpg)
Questions �