5日目:イベントリスナーを多様せずにスライドメニューのUI実装する方法のJavaScript変換後のソース

app.js

var Controller, baseState, controller, rowLabels, state, tab, tab1, tab2, tab3, tabGroup, table, win;

Controller = require("controller");

baseState = require("baseState");

state = {
  "default": 1,
  slide: 2,
  end: 3
};

win = Ti.UI.createWindow({
  title: "main",
  backgroundColor: "#FFF"
});

rowLabels = [
  {
    title: "Row 1"
  }, {
    title: "Row 2"
  }, {
    title: "Row 3"
  }, {
    title: "Row 4"
  }
];

table = Ti.UI.createTableView({
  backgroundColor: '#666',
  separatorColor: '#ccc',
  zIndex: 10,
  width: 320,
  left: 30,
  top: 0,
  data: rowLabels
});

win.add(table);

controller = new Controller();

tab1 = Ti.UI.createView({
  width: 30,
  height: 120,
  left: 0,
  top: 0,
  backgroundColor: "#666",
  zIndex: 1
});

tab1.addEventListener('click', function(e) {
  return controller.handleEvent(state["default"]);
});

tab2 = Ti.UI.createView({
  width: 30,
  height: 120,
  left: 0,
  top: 120,
  backgroundColor: "#ededed",
  zIndex: 1
});

tab2.addEventListener('click', function(e) {
  return controller.handleEvent(state.slide);
});

tab3 = Ti.UI.createView({
  width: 30,
  height: 120,
  left: 0,
  top: 240,
  backgroundColor: "#999",
  zIndex: 1
});

tab3.addEventListener('click', function(e) {
  return controller.handleEvent(state.end);
});

win.add(tab1);

win.add(tab2);

win.add(tab3);

tabGroup = Ti.UI.createTabGroup();

tab = Ti.UI.createTab({
  window: win
});

tabGroup.addTab(tab);

tabGroup.open();

controller.js

var Controller;

Controller = (function() {

  function Controller() {
    this.state = new baseState();
    this.state = this.state.start();
  }

  Controller.prototype.handleEvent = function(event) {
    Ti.API.info("event fire.event no" + event);
    if (event === state["default"]) {
      return this.state = this.state.selectTab1();
    } else if (event === state.slide) {
      return this.state = this.state.selectTab2();
    } else {
      return this.state = this.state.selectTab3();
    }
  };

  return Controller;

})();

module.exports = Controller;

state.js

var animate, baseState, tab1State, tab2State, tab3State,
  __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

animate = function(color) {
  table.animate({
    duration: 300,
    left: 320,
    curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
  }, function() {
    table.backgroundColor = color;
    return table.animate({
      duration: 400,
      left: 30,
      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });
  });
  return true;
};

baseState = (function() {

  function baseState() {
    Ti.API.info("STATE: baseState");
  }

  baseState.prototype.start = function() {
    return new tab1State();
  };

  baseState.prototype.selectTab1 = function() {
    Ti.API.info("START NEW TAB1STATE");
    return new tab1State();
  };

  baseState.prototype.selectTab2 = function() {
    Ti.API.info("START NEW TAB2STATE");
    return new tab2State();
  };

  baseState.prototype.selectTab3 = function() {
    Ti.API.info("START NEW TAB3STATE");
    return new tab3State();
  };

  return baseState;

})();

tab1State = (function(_super) {

  __extends(tab1State, _super);

  function tab1State() {
    Ti.API.info("STATE:tab1");
  }

  tab1State.prototype.start = function() {
    return tab1State.__super__.start.apply(this, arguments);
  };

  tab1State.prototype.selectTab1 = function() {
    Ti.API.info("この状態では何もしない");
    return tab1State.__super__.selectTab1.apply(this, arguments);
  };

  tab1State.prototype.selectTab2 = function() {
    animate("#ededed");
    return tab1State.__super__.selectTab2.apply(this, arguments);
  };

  tab1State.prototype.selectTab3 = function() {
    animate("#999");
    return tab1State.__super__.selectTab3.apply(this, arguments);
  };

  return tab1State;

})(baseState);

module.exports = tab1State;

tab2State = (function(_super) {

  __extends(tab2State, _super);

  function tab2State() {
    Ti.API.info("STATE:tab2");
  }

  tab2State.prototype.start = function() {
    return tab2State.__super__.start.apply(this, arguments);
  };

  tab2State.prototype.selectTab1 = function() {
    animate("#666");
    return tab2State.__super__.selectTab1.apply(this, arguments);
  };

  tab2State.prototype.selectTab2 = function() {
    Ti.API.info("この状態では何もしない");
    return tab2State.__super__.selectTab2.apply(this, arguments);
  };

  tab2State.prototype.selectTab3 = function() {
    animate("#999");
    return tab2State.__super__.selectTab3.apply(this, arguments);
  };

  return tab2State;

})(baseState);

module.exports = tab2State;

tab3State = (function(_super) {

  __extends(tab3State, _super);

  function tab3State() {
    Ti.API.info("STATE:tab3");
  }

  tab3State.prototype.start = function() {
    return tab3State.__super__.start.apply(this, arguments);
  };

  tab3State.prototype.selectTab1 = function() {
    animate("#666");
    return tab3State.__super__.selectTab1.apply(this, arguments);
  };

  tab3State.prototype.selectTab2 = function() {
    animate("#ededed");
    return tab3State.__super__.selectTab2.apply(this, arguments);
  };

  tab3State.prototype.selectTab3 = function() {
    Ti.API.info("この状態では何もしない");
    return tab3State.__super__.selectTab3.apply(this, arguments);
  };

  return tab3State;

})(baseState);

module.exports = tab3State;