building native mobile apps using javascript with titanium
TRANSCRIPT
JavaScript Lab January 18, 2016
Building Native Mobile Apps using Javascript with Titanium
Program
1. Appcelerator: More than Apps 2. JS2Native: No WebView 3. Titanium: SDK & Cross-Platform API 4. Alloy: MVC for Titanium 5. Hyperloop: Access any (3P) API in JS
Slides will be linked from @FokkeZB tomorrow morning
Appcelerator: More than Apps
And Why This is Great News for All
2 Native
NO!
HTML Apps
" #!
HTML Apps
JS2Native
Titanium
Architecture
Alloy Codebase Development
JavaScript
PackageRun-time
TitaniumModule APIs
TitaniumCore APIs
HyperloopAPIs
Kroll(iOS/Android)
HAL (Windows)
3P APIs OS Device & UI APIs Platform
Hello World
var window = Ti.UI.createWindow({backgroundColor: “white"
});
var label = Ti.UI.createLabel({text: “Hello World”
});
label.addEventListener(“click”,function open() {
alert(“Hello World”);}
);
window.add(label);
window.open();
Ti API
Ti.createMyFartApp()
Ti.UI.createX() // Cross-platform UI View factoriesTi.UI.X // The UI View proxy the factory creates
Ti.UI.iOS.X // Platform specific UI View factories
Ti.X // Cross-platform device APIsTi.Android.X // Platform specific device APIs
require(“ti.map”).X // CommonJS & Titanium Modules
docs.appcelerator.com
File Structure
▾ Resources ▾ images logo.png app.js main.js utils.jstiapp.xml config
code
Alloy MVC
Classic Spaghetti
var window = Ti.UI.createWindow({backgroundColor: “white"
});
var label = Ti.UI.createLabel({text: “Hello World”
});
label.addEventListener(“click”,function open() {
alert(“Hello World”);}
);
window.add(label);
window.open();
style
logic
markup
<Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window></Alloy>
”Window”: {backgroundColor: “white”
}
function open() {alert(“Hello World”);
}
$.index.open();
index.xml
index.tss
index.js
Alloy
▸ app▾ Resources ▾ alloy ▾ controllers index.js backbone.js CFG.js underscore.js ▾ images logo.png alloy.js app.js utils.jstiapp.xml
▾ Resources ▾ images logo.png app.js main.js utils.jstiapp.xml
▾ app▾ assets ▾ images logo.png▾ controllers index.js▾ lib utils.js▾ styles index.tss▾ views index.xml▾ widgetsalloy.jsconfig.json
tiapp.xml
File Structure
What happens to your XML and TSS?<Foo>
<Foo ns=“Ti.bar”>
<Foo module=“bar”>
<Require src=“foo”>
<Widget src=“foo”>
<Foo id=“bar”>
<Foo bar=“zoo”>
“#bar”: { color: “white” }
Ti.UI.createFoo();
Ti.bar.createFoo();
require(“bar”).createFoo();
Alloy.createController(“foo”) .getView();
Alloy.createWidget(“foo”) .getView();
$.bar = Ti.UI.createFoo();
Ti.UI.createFoo({ bar: “zoo” });
$.bar = Ti.UI.createFoo({ color: “white” });
A lote more..
• Platform specific code blocks and assets • Platform/Environment specific config file • Underscore + Moment.js: built-in libraries • Backbone.js: events, models and data-binding • Alloy Themes: Ideal for white label apps • Alloy Widgets: Re-use code across apps • …
"
var blur = require('bencoding.blur');
var view = blur.createBasicBlurView({ blurRadius: 5, image: '/images/background.png' });
var window = Ti.UI.createWindow(); window.add(view);
window.open();
How you used to extend Titanium
# Hyperloop for Windows
var Window = require('Windows.UI.Xaml.Window'), TextBlock = require('Windows.UI.Xaml.Controls.TextBlock'), Colors = require('Windows.UI.Colors'), SolidColorBrush = require('Windows.UI.Xaml.Media.SolidColorBrush');
var text = new TextBlock(); text.Text = 'Hello, world!'; text.FontSize = 50; text.Foreground = new SolidColorBrush(Colors.Red);
var window = Window.Current, window.Content = text;
window.Activate();
var Hyperloop = require("hyperloop"); var TiApp = require("TiApp"); var UIViewController = require("UIViewController"); var UILabel = require("UILabel"); var UIColor = require("UIColor"); var UIScreen = require("UIScreen"); var CGRect = require("CGRect"); var NSTextAlignment = require("NSTextAlignment");
var label = UILabel.initWithFrame(CGRect.Make(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height )); label.setText('Hello World!'); label.setTextColor(UIColor.redColor());
var viewController = UIViewController.init(); viewController.view.setBackgroundColor(UIColor.whiteColor()); viewController.view.addSubview(label);
TiApp.app().showModalController(viewController, false);
Hyperloop for iOS
var Hyperloop = require("hyperloop"); var TiApp = require("TiApp"); var UIViewController = require("UIViewController"); var UILabel = require("UILabel"); var UIColor = require("UIColor"); var UIScreen = require("UIScreen"); var CGRect = require("CGRect"); var NSTextAlignment = require("NSTextAlignment");
var label = UILabel.initWithFrame(CGRect.Make(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height )); label.setText('Hello World!'); label.setTextColor(UIColor.redColor());
var viewController = UIViewController.init(); viewController.view.setBackgroundColor(UIColor.whiteColor()); viewController.view.addSubview(label);
TiApp.app().showModalController(viewController, false);
Hyperloop for iOS
" Hyperloop for Android
var TextView = require('android.widget.TextView'), Activity = require('android.app.Activity'), Color = require('android.graphics.Color'), RelativeLayout = require('android.widget.RelativeLayout'), Gravity = require('android.view.Gravity'), TypedValue = require('android.util.TypedValue'); var text = new TextView(activity); text.setText("Hello World!"); text.setTextColor(Color.RED); text.setTextSize(TypedValue.COMPLEX_UNIT_PX, 60);
var layout = new RelativeLayout(activity); layout.setGravity(Gravity.CENTER); layout.setBackgroundColor(Color.BLACK);
layout.addView(text);
var activity = new Activity(Ti.Android.currentActivity); activity.setContentView(layout);
var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize: 60 }, color: 'red' });
var window = Ti.UI.createWindow();
window.add(text); window.open();
Abstraction can be good
labs.appcelerator.com
www.appcelerator.com/signup
Slides will be linked from @FokkeZB tomorrow morning
Thank You !