<Alloy>
  <!-- Main Window -->
  <Window id="todoWin" title="Todo" platform="android,ios,windows">

    <!-- header -->
    <View id="header">
      <Label id="title">Alloy Todo</Label>
      <View class="divider"/>
      <View id="addView" onClick="addToDoItem">
        <ImageView id="addImage"/>
      </View>
    </View>

    <!-- Main table for tasks
      Use model-view binding to render the rows fo this table
      based on the models in the given collection. "dataCollection"
      represents the collection used to populate this table.
      "dataWhere" is a function used to filter the list of
      models processed within the collection. "dataTransform"
      is a function that will be executed on each model as it
      is rendered as a row. It gives the opportunity to modify
      the model's values before they are applied to each row.
    -->
    <TableView id="todoTable" dataCollection="todo" dataFilter="whereFunction" dataTransform="transformFunction">
      <Require src="row"/>
    </TableView>

    <!-- iOS: footer with buttons -->
    <View platform="ios" id="footer">
      <TabbedBar onClick="showTasks" id="tabbedbar">
        <Labels>
          <Label>All</Label>
          <Label>Active</Label>
          <Label>Done</Label>
        </Labels>
      </TabbedBar>
    </View>

    <!-- Android: menu -->
    <Menu platform="android">
      <MenuItem title="All" onClick="showTasks"/>
      <MenuItem title="Active" onClick="showTasks"/>
      <MenuItem title="Done" onClick="showTasks"/>
    </Menu>
  </Window>

  <!-- Main Window for unsupported platforms -->
  <Window id="todoWin" platform="blackberry,mobileweb">
    <Label>todo app is not supported on Blackberry or MobileWeb</Label>
  </Window>
</Alloy>