iOS mail box ぽいの　途中

app.coffee

# Class
class NavGroup
  constructor: (@win)->
    @NavGroup = Ti.UI.iPhone.createNavigationGroup
      window: @win
    return @NavGroup

class TableView
  constructor: (@win)->
    @TableView = Ti.UI.createTableView
      style: Ti.UI.iPhone.TableViewStyle.GROUPED
    return @TableView

class TableViewSection
  constructor: (@title)->
    @tableViewSection = Ti.UI.createTableViewSection
      headerTitle: @title
    return @tableViewSection

# UI Style
ui =
  baseWin:
    title: 'メールボックス'
    barColor: '#123'


# Mail Data
json =
  mail:
    users: [
      { address: 'anpan@gmail.com', icon: 'anpan.png', unread: 141 }
      { address: 'baikin@gmail.com', icon: 'baikin.png', unread: 47 }
      { address: 'jam@gmail.com', icon: 'jam.gif', unread: 999 }
      { address: 'cheese@gmail.com', icon: 'cheese.jpg', unread: 0 }
    ]


# テーブル（行）作成
createTableViewRow = (user)->
  row = Ti.UI.createTableViewRow
    height: '47dp'
    hasChild: true
  icon = Ti.UI.createImageView
    left: '10dp'
    image: "images/#{user.icon}"
    width: '25dp'
    height: '25dp'
  address = Ti.UI.createLabel
    width: '210dp'
    left: '50dp'
    text: user.address
    color: '#333'
    font:
      fontSize: 22
      fontWeight: 'bold'
  if user.unread > 0
    address.width = '180dp'
    count = Ti.UI.createButton
      right: '15dp'
      height: '22dp'
      title: "  #{user.unread}  "
      color: '#fff'
      borderColor: '#8891a2'
      borderWidth: 1
      borderRadius: 10
      backgroundImage: 'images/mail_count_bg.png'
      backgroundSelectedImage: 'images/mail_count_bg.png'
      font:
        fontSize : 18
        fontFamily: 'Helvetica-Bold'
        fontWeight : 'bold'
      zIndex: 9999
    row.add count
  row.add icon
  row.add address
  return row




# テーブルの更新
updateTableViewCount = (tableView)->
  users = json.mail.users
  sectionList = []
  section01 = new TableViewSection '受信'
  section02 = new TableViewSection 'アカウント'
  
  users.map (user)->
    row = createTableViewRow user
    section01.add row
    return
  
  users.map (user)->
    row = createTableViewRow user
    section02.add row
    return
  
  sectionList.push section01
  sectionList.push section02
  tableView.data = sectionList
  return


# 初期化
init = ->
  # 最背面の背景色
  Ti.UI.setBackgroundColor '#fff'
  
  # 基本ウインドウ
  win = Ti.UI.createWindow()
  baseWin = Ti.UI.createWindow ui.baseWin
  baseView = Ti.UI.createView()
  baseWin.add baseView
  
  
  
  
  
  # 編集ボタン（右）
  editButton = Ti.UI.createButton
    title: '　編集　'
  editButton.addEventListener 'click', ->
    alert 'click'
    return
  baseWin.rightNavButton = editButton
  
  
  
  # テーブル
  tableView = new TableView()
  baseView.add tableView
  
  # テーブルの更新
  updateTableViewCount tableView
  
  # ナビ
  navGroup = new NavGroup baseWin
  win.add navGroup
  win.open()
  
  return

init()