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

Titanium: Develop Native Mobile Apps with JavaScript

Titanium: Develop Native Mobile Apps with JavaScript

Introduction to Titanium (and Alloy) for Mobilisation 2015 in Łódź, Poland.

Fokke Zandbergen

October 17, 2015
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. NO!

  2. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize:

    60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
  3. var text = Ti.UI.createLabel({ text: 'Hello, world!', font: { fontSize:

    60 }, color: 'red', focusable: true }); var window = Ti.UI.createWindow(); if (Ti.Platform.name === 'android') { window.add(Ti.UI.Android.createProgressIndicator()); } window.add(text); window.open(); Platform-specific code
  4. 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(); Modules 
  5.  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
  6.  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
  7. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize:

    60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
  8. 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(); Hyperloop for Windows
  9. 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); Hyperloop for Android
  10. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize:

    60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open();
  11. <Alloy> <Window> <Label>Hello, world!</Label> </Window> </Alloy> 'Label': { font: {

    fontSize: 60 }, color: 'red' } $.index.open(); index.xml index.tss index.js
  12. ✓ Native UI… NO HTML ✓ Cross Platform JS API

    ✓ Direct API Access ✓ Alloy MVC framework ✓ Modules & Widgets ✓ You need Tripple