Appcelerator Titanium January 6

Presentation on theme: "Appcelerator Titanium January 6"— Presentation transcript:

Slide1

Appcelerator TitaniumJanuary 6th, 2015RVA.jsBruce PulleyAndrew RumbleySlide2

Who are these guys?Bruce Pulley (@pulleymb)bruce@shockoe.comSenior Mobile Applications DeveloperAndrew Rumbley (@rumbleyam)andrew@shockoe.comSenior Mobile and Web Applications DeveloperShockoe.com LLC,Taming the Mobile MonsterSlide3

What are we talking about?Appcelerator Titanium BasicsTitanium Alloy MVC FrameworkNuances associated with creating cross platform applicationsSlide4

How are Apps Developed?Android:-Java based SDK-Compiles on Windows, Linux, and OSX-Provides IntelliJ based IDE: Android StudioiOS:-Objective-C based SDK (or Swift…)-Compiles on OSX only-Provides Xcode IDESlide5

Cross Platform DevelopmentTwo different development teamsTwo different skill sets (Objective-C and Java)No code reuseTwice the development and maintenance effortSlide6

How can we make this manageable?Slide7
Slide8

What is Appcelerator Titanium?Cross Platform Mobile Applications FrameworkAllows you to write your apps in JavaScriptCan compile for iOS and AndroidPromotes code reuseProvides an Eclipse based IDESlide9

How does Titanium work?Slide10

Sample Applicationvar win = Ti.UI.createWindow({ backgroundColor: '#000', navBarHidden: true});var label = Ti.UI.createLabel({ text : 'Hello RVA.js', color : '#F47D2A', font : { fontSize: 50 }

});var logo = Ti.UI.createImageView

({

image : '

shockoe.png

',

bottom : 10,

right : 10

});

win.add

(label);

win.add

(logo);

win.open

();Slide11

Example: Downloading a file (Android)Slide12

Example: Downloading a file (iOS)Slide13

Example: Downloading a file (Ti)Slide14

What components are available to me?API Documentation provided at:http://docs.appcelerator.com/titanium/3.0/UI ElementsGeolocationNetworkingMedia PlaybackStreamsFilesystem AccessGesture Support….Slide15

Example: UI ElementsSlide16

Example: UI AnimationsSlide17

Example: Network CallsSlide18

Example: MediaSlide19

Example: GeolocationSlide20

Adding structure with Titanium AlloySlide21

What is MVC?Software architectural pattern for implementing user interfaces.Divides a given software application into three interconnected parts:ModelViewControllerSlide22

Titanium Alloy StructureThe project is divided into three main foldersViewsStylesControllersSlide23

ViewsXMLDescribes the basic UI structure of an alloy projectSlide24

StylesTSS (Titanium Style Sheets)Defines the style of UI componentsLike CSS, supports styling by id or classSlide25

ControllersContains the business logic of the applicationUsed to manipulate the UI defined in the XMLCan create classic Titanium elements and add them to the View hierarchySlide26

CommonJS LibrariesExisting JS libraries can be used with TitaniumGreat for components that are used by multiple controllersAlloy includes several built-ins:-BackboneJS-MomentJS-UnderscoreJSSlide27

WidgetsEncourages code reuseUse a component in multiple projectsDistribute your components for the benefit of othersMake use of components others have createdSlide28

ThemesAllow you to create different UI for multiple applications that should behave the same wayHas a self-contained MVC structureWill merge with base styles to create fully realized app-specific styles Slide29

Platform Specific NuancesSlide30

Why do platform specific code?Android and iOS users expect different things.Popovers (iOS)Hardware back button (Android)PickersIconsSlide31

How?XMLTSSJSSlide32

ModulesNative code that can be used from your Titanium codeAdvantagesPerformanceFunctionalityDisadvantagesSame as native developmentSlide33

Questions?Slide34

Who were those guys?Bruce Pulley (@pulleymb)bruce@shockoe.comSenior Mobile Applications DeveloperAndrew Rumbley (@rumbleyam)andrew@shockoe.comSenior Mobile and Web Applications DeveloperShockoe.com LLC,Taming the Mobile Monster