5日目:イベントリスナーを多様せずにスライドメニューのUI実装する方法 （リファクタリングした結果）

app.coffee

# スライド状態を管理するクラス群を呼び出す
Controller = require("controller")
baseState = require("baseState")

state =
  default:1
  slide:2
  end:3

# メインのウィンドウとそこに配置するUIを準備
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()
            


# 左側のメニューに該当するUIを準備
tab1 = Ti.UI.createView
  width:30
  height:120
  left:0
  top:0
  backgroundColor: "#666"
  zIndex:1
tab1.addEventListener('click',(e) ->
  controller.handleEvent(state.default)
)  
tab2 = Ti.UI.createView
  width:30
  height:120
  left:0
  top:120
  backgroundColor: "#ededed"
  zIndex:1
  
tab2.addEventListener('click',(e) ->
  controller.handleEvent(state.slide)  
)  
tab3 = Ti.UI.createView
  width:30
  height:120
  left:0
  top:240
  backgroundColor: "#999"
  zIndex:1

tab3.addEventListener('click',(e) ->
  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.coffee

class Controller
  constructor: () ->

    @state = new baseState()
    @state = @state.start()
  handleEvent:(event) ->
    Ti.API.info "event fire.event no#{event}"
    if event is state.default
      @state = @state.selectTab1()
    else if event is state.slide
      @state = @state.selectTab2()
    else
      @state = @state.selectTab3()

module.exports = Controller    

state.coffee

animate = (color) ->

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

class baseState
  constructor:() ->
    Ti.API.info "STATE: baseState"

  start: () ->
    return new tab1State()    
  selectTab1: () ->
    Ti.API.info "START NEW TAB1STATE"    
    return new tab1State()    
  selectTab2: () ->
    Ti.API.info "START NEW TAB2STATE"
    return new tab2State()    
  selectTab3: () ->
    Ti.API.info "START NEW TAB3STATE"
    return new tab3State()
    

class tab1State extends baseState
  constructor:() ->
    Ti.API.info "STATE:tab1"
  start: () ->    
    super
  selectTab1:() ->
    Ti.API.info "この状態では何もしない"
    super  
  selectTab2:() ->
    animate("#ededed")
    super
  selectTab3:() ->
    animate("#999")
    super

module.exports = tab1State


class tab2State extends baseState
  constructor:() ->
    Ti.API.info "STATE:tab2"
  start: () ->
    super
  selectTab1:() ->
    animate("#666")
    super
  selectTab2:() ->
    Ti.API.info "この状態では何もしない"
    super
  selectTab3:() ->
    animate("#999")
    super
module.exports = tab2State    




class tab3State extends baseState
  constructor:() ->
    Ti.API.info "STATE:tab3"
  start: () ->
    super    
  selectTab1:() ->
    animate("#666")
    super
  selectTab2:() ->
    animate("#ededed")
    super
  selectTab3:() ->
    Ti.API.info "この状態では何もしない"
    super


module.exports = tab3State