Kranium 101

app.js

Ti.include("/kranium/lib/kranium.js");

// // include some low level helper libraries like underscore
// // HERE: include underscore- and underscore string library (not needed for this example)
// var _ = require('libs/core/underscore')._;
// _.s = require('libs/core/underscore.string')._s;
// _.mixin(_.s.exports());
// // or Date.js
// require('/libs/core/date-de-DE');
// 
// // then include some own libraries built of Titanium's low level API which is not UI
// // HERE: versions.js retrieve platform about os, device and software version and stores it globally (not needed for this example)
// Ti.include('/libs/versions.js');


// our example of using a own component
// HERE: a simple configurable overlay HUD, which we initiate here but make it throughout the whole application
var hud = K.create({type: 'hud_window', message: 'Loading...'});

var app = {
  ui : {
    hud : hud
  }
};

// at the end of the app.js file, open up your root UI file
// containing mostly a tabgroup or navigation group
// styling the app is now easy... 
//  - global styles go into app.kss, 
// - the start_screen it self gets styles from start_screen.kss
K.create({ type: 'start_screen' }).open();

hud_window.js

exports.Class = Window.extend({
  /**
    * HUD init function 
    * This function get's called when a component is called via K.create();
    * Use it to create the UI Controls of the components and make them accessible via this
    */
  init : function(options){
    // you can retrieve the initial properties from the options object
    // the options object is the variable that you call with K.create(options)
    this.message = options.message || "Loading ...";
    
    // configure the properties of your base object (here: Window)
    this.touchEnabled = false;
    this.orientationModes = [Ti.UI.PORTRAIT,Ti.UI.UPSIDE_PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT];
    
    this.height = 150;
    this.width = 150;
    this.borderRadius = 10;
    
    // create the view for the HUD K.create()
    var messageView = K.create({ 
      type: 'view',
      height: 150, width: 150, 
      borderRadius: 10, backgroundColor: '#000', 
      opacity: 0.7, touchEnabled: false
    });
    
    // create the label for the HUD with K.create()
    // later we want to access this widget in a different method so 
    // we add it to the 'this' object to makes the label  accessible in the following method setMessage
    this.messageLabel = K.create({ 
      type: 'label',
      text: this.message,
      width: 150, height: 'auto',  
      color: '#fff', font: {fontSize: 20, fontWeight: 'bold'}, 
      textAlign:'center'
    });
    
    // the children property is actually the one where the add-method is adding too
    this.children = [ messageView ];
    this.add(this.messageLabel);
    
    // NEVER FORGET TO ADD TO CALL THE CONSTRUCTOR OF THE SUPERCLASS
    this._super(options);
  }
  // Set a new Message
  ,setMessage : function(newMessage){
    // this references to the Kranium object, 
    // this.el references to the Ti-Object that get's created by the Kranium Object
    // we use this.el to change the Ti-Object 'text'-property
    this.el.messageLabel.text = newMessage;
  }
  
  // show the hud window with a animation
  ,show : function(){

    // Set an initial low scale
    this.el.transform = K.create({type:'2dmatrix'});
    this.el.transform.scale(0.001);
    
    // Animate it to perform a nice "scale in"
    var scaleInTransform = K.create({type: '2dmatrix'});
    scaleInTransform = scaleInTransform.scale(1);
    
    var scaleIn = K.create({type:'animation'});
    scaleIn.transform = scaleInTransform;
    scaleIn.duration = 400;
    this.el.animate(scaleIn);

    this.el.open();
  }
  // hide the hud window with a animation
  ,hide : function(){
    // set the final transformation
    var scaleOutTransform = K.create({type:'2dmatrix'});
    scaleOutTransform = scaleOutTransform.scale(0.001);
    
    // bind animation to the final scale transformation
    var scaleOut = K.create({type:'animation'});
    scaleOut.transform = scaleOutTransform;
    scaleOut.duration = 400;
    this.el.animate(scaleOut);
    
    // we have to store 'this' into 'self' before we enter the event listener
    // since 'this' has a different scope (here: scaleOut, the TiUIAnimation we bind the event to)
    // and we need a reference to the original 'this' (the TiUIWindow) to close it
    var self = this; 
    // When the animation finishes, close the window
    scaleOut.addEventListener('complete', function(){
     self.el.close();
    });
  }
});

start_screen.js

exports.Class = Window.extend({
  init: function(options){
    
    // simple button that triggers the show-method of our HUD component
    this.hud_button = K.create({
      type: 'button', 
      height: 100, width: 100, top: 20,
      title: 'A button', 
      events: {
        click: function(e){
          // use the hud variable we globally defined in the app.js
          // to access the functions we have to access the inst ("instance") property of that extended window
          app.ui.hud.inst.show();
          setTimeout(function(){
            app.ui.hud.inst.hide();
          }, 5000);
        }
      }
    });

    this.children = [this.hud_button];
    
    // NEVER FORGET TO CALL THE SUPERCLASS
    this._super(options); 
  }
});