Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building cross-platform native mobile Apps with Titanium + Alloy

Alco
September 29, 2013

Building cross-platform native mobile Apps with Titanium + Alloy

My slides for AT&T Bootstrap Week, September 2013

Alco

September 29, 2013
Tweet

More Decks by Alco

Other Decks in Programming

Transcript

  1. About me Have been using Titanium since late 2009 Former

    Titanium trainer in the Caribbean and Latin America Obsessed with cross-platform mobile develoment Love Javascript hacking and technology startups I'm a hacker in constant training
  2. About Appcelerator and Titanium JavaScript SDK to develop native, cross-platform

    mobile apps 500,000+ developers worldwide Titanium is free and Open Source Supports iOS, Android, Blackberry 10, Tizen and Windows in the works The Appcelerator Platform is the enterprise-grade suite of products based on Titanium
  3. What do I mean by cross- platform? To understand the

    power of Titanium, we first need to understand the problem Titanium solves
  4. Is a Web-app cross-platform? A web-app is cross-platform only if

    we define a cross-platform app as an app that can run on multiple platforms
  5. Cross-platform is much more than running on different platforms All

    platforms have their own set of NATIVE UI elements and UX patterns
  6. Objective-C (iOS) U I B u t t o n

    * m y B u t t o n = [ U I B u t t o n b u t t o n W i t h T y p e : U I B u t t o n T y p e R o u n d e d R e c t ] ; [ m y B u t t o n s e t T i t l e : @ " C l i c k M e ! " f o r S t a t e : U I C o n t r o l S t a t e N o r m a l ] ;
  7. Java (Android) B u t t o n m y

    B u t t o n = n e w B u t t o n ( t h i s ) ; m y B u t t o n . s e t T e x t ( " C l i c k M e ! " ) ;
  8. Titanium/JavaScript (iOS, Android) v a r m y B u

    t t o n = T i . U I . c r e a t e B u t t o n ( { t i t l e : ' C l i c k M e ! ' } )
  9. Titanium/Alloy (iOS, Android) < A l l o y >

    < B u t t o n > C l i c k M e ! < / B u t t o n > < / A l l o y >
  10. UI DEFINITION: INDEX.XML < a l l o y >

    < t a b g r o u p i d = " w i n " > < t a b t i t l e = " T a b 1 " i c o n = " K S _ n a v _ u i . p n g " > < w i n d o w t i t l e = " T a b 1 " > < l a b e l c l a s s = " m y l a b e l " > I a m W i n d o w 1 < / l a b e l > < / w i n d o w > < / t a b > < t a b t i t l e = " T a b 2 " i c o n = " K S _ n a v _ v i e w s . p n g " > < w i n d o w t i t l e = " T a b 2 " > < l a b e l c l a s s = " m y l a b e l " > I a m W i n d o w 2 < / l a b e l > < / w i n d o w > < / t a b > < / t a b g r o u p > < / a l l o y >
  11. UI STYLING: INDEX.TSS " W i n d o w

    " : { b a c k g r o u n d C o l o r : " # f f f " } , " L a b e l " : { w i d t h : T i . U I . S I Z E , h e i g h t : T i . U I . S I Z E , c o l o r : " # 0 0 0 " , f o n t : { f o n t S i z e : 2 0 , f o n t F a m i l y : ' H e l v e t i c a N e u e ' } , t e x t A l i g n : ' c e n t e r ' } , " # w i n " : { t o p : 0 , l e f t : 0 } , " . m y l a b e l " : { c o l o r : " # 0 0 0 " }
  12. Get started today! Runs on Mac, Windows and Linux iOS

    development requires a Mac Requires installation and configuration of all native tools (Xcode, Android SDK manager, etc) Download Titanium Studio from my.appcelerator.com Start hacking!