Enhancing	  the	  User	  Interface	  	    Using	  Titanium	  Modules	                 Sco8	  Mason	  
Objectives•  Module Basics!•  Configuration Tips!•  Code Detail!•  Emulator Demos!•  Lessons Learned!
Making theButton Shine Technical Diagram
Shiny Buttons Revealed        var module = require(shiny.objects); 	        var btnPurple = module.createButton({ 	       ...
Module Parts              implements TiModule! Module!       extends KrollModule!              extends KrollModule!       ...
Online Documentation Be sure to read and become familiar with the module                  documentation at:http://develope...
Project Files
iPhone ModuleShinyObjectsModule.h#import "TiModule.h"!@interface ShinyObjectsModule : TiModule !{!}!@end!ShinyObjectsModul...
Android ModuleShinyObjectsModule.javaimport org.appcelerator.kroll.KrollModule;import org.appcelerator.kroll.annotations.K...
iPhone Proxy Example        Objective C                                         Titanium#import "ShinyObjectsUtilityProxy....
Android Proxy Example              Java                                                 Titanium@Kroll.proxy(creatableInMo...
Configuration Tip      Help your app find the correct module!<ti:app xmlns:ti="http://ti.appcelerator.org">	...!<modules>! ...
Adding the ViewiPhone     Methods                Properties          Events     initLayers!            setEnabled!        ...
Adding the ViewAndroid    Methods             Properties           Events propertyChanged!    processProperties!   handled...
Interesting Places - iOS                  iOS SDK Directory/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS4...
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”!•  E...
Android Deployment•  Edit and correct code in Titanium Studio!•  Build the code with “ant”!•  Test with “titanium run”!•  ...
Emulator Demos
Lessons Learned•  Be aware of the naming conventions!•  Specify platform in tiapp.xml!•  Get comfortable with Terminal!•  ...
Questions
Upcoming SlideShare
Loading in …5
×

Scott Mason: Enhancing the User Interface Using Titanium Modules

2,779 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Scott Mason: Enhancing the User Interface Using Titanium Modules

  1. 1. Enhancing  the  User  Interface     Using  Titanium  Modules   Sco8  Mason  
  2. 2. Objectives•  Module Basics!•  Configuration Tips!•  Code Detail!•  Emulator Demos!•  Lessons Learned!
  3. 3. Making theButton Shine Technical Diagram
  4. 4. 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" });
  5. 5. Module Parts implements TiModule! Module! extends KrollModule! extends KrollModule! implements TiProxy Proxy! KrollModule! extends KrollProxy! implements TiViewProxyViewProxy! KrollModule! extends TiViewProxy! implements TiUIView View! KrollModule! extends TiUIView!
  6. 6. Online Documentation Be sure to read and become familiar with the module documentation at:http://developer.appcelerator.com/doc/mobile/guides
  7. 7. Project Files
  8. 8. iPhone ModuleShinyObjectsModule.h#import "TiModule.h"!@interface ShinyObjectsModule : TiModule !{!}!@end!ShinyObjectsModule.m#import "ShinyObjectsModule.h"!...!@implementation ShinyObjectsModule!... more code!@end!
  9. 9. Android ModuleShinyObjectsModule.javaimport org.appcelerator.kroll.KrollModule;import org.appcelerator.kroll.annotations.Kroll;importorg.appcelerator.titanium.TiContext;@Kroll.module(name="ShinyObjects", id="shiny.objects")public classShinyObjectsModule extends KrollModule
  10. 10. iPhone Proxy Example Objective C Titanium#import "ShinyObjectsUtilityProxy.h"!#import "TiUtils.h"! var module = require(shiny.objects); @implementation ShinyObjectsUtilityProxy ! var proxy = module.createUtility(); proxy.sleep(sleepDuration); ...!-(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!
  11. 11. Android Proxy Example Java Titanium@Kroll.proxy(creatableInModule=ShinyObjectsModule.class) var module = require(shiny.objects); public class UtilityProxy extends KrollProxy var proxy = module.createUtility(); @implementation UtilityProxy ! proxy.sleep(sleepDuration); ...!@Kroll.method public 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 } }
  12. 12. 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>!
  13. 13. Adding the ViewiPhone Methods Properties Events initLayers! setEnabled! clicked! frameSizeChanged! setBorderRadius! tapped!hasTouchableListener! setTitle! highlightOn!handleControlEvents! setBackgroundColor! highlightOff! setFont! setColor! setTextAlign!
  14. 14. Adding the ViewAndroid Methods Properties Events propertyChanged! processProperties! handled by OS! initLayers! handleStyleOptions! createView!
  15. 15. Interesting Places - iOS iOS SDK Directory/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS4.3.sdk/System/Library/Frameworks/UIKit.framework/Headers Your Project Build Directory /Users/sam/Projects/ShinyButtons/build/iphone/ Classes
  16. 16. Interesting Places - Android JAR Files in Project Directory
  17. 17. 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!
  18. 18. 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!
  19. 19. Emulator Demos
  20. 20. 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!
  21. 21. Questions

×