rosvit/Todo.java

## index.html
<html>
  <head>
    <style>
      .isDone {
        text-decoration: line-through;
        color: grey;
      }
    </style>
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
      <span><span data-bind="text: remaining"></span> of
        <span data-bind="text: todos().length"></span>
        remaining</span>
      [ <a href="#" data-bind="click: archive">archive</a> ]
      <ul class="unstyled" data-bind="foreach: todos">
        <li>
          <input type="checkbox" data-bind="checked: done">
            <span data-bind="text: text, css: { isDone: done }"></span>
        </li>
      </ul>
      <form>
        <input type="text" data-bind="value: todoText, valueUpdate: 'afterkeydown'"  size="30"
               placeholder="add new todo here">
        <input type="submit" value="add" data-bind="click: addTodo, enable: todoText">
      </form>
    </div>
  </body>
</html>

## Todo.java
package dew.demo.todos;

import net.java.html.json.*;
import java.util.List;
import java.util.ArrayList;

@Model(className="TodoUI", properties={
  @Property(name="todos", type=Todo.class, array=true),
  @Property(name="todoText", type=String.class)
})
class TodoCtrl {
  @Model(className="Todo", properties={
    @Property(name="text", type=String.class),
    @Property(name="done", type=boolean.class)
  })
  static class ItemCtrl {
  }

  @ComputedProperty static int remaining(
    List<Todo> todos, String todoText) {
    int count = 0;
    for (Todo d : todos) {
      if (!d.isDone()) {
        count++;
      }
    }
    return count;
  }

  @Function static void archive(TodoUI m) {
    ArrayList<Todo> old = new ArrayList<>(m.getTodos());
    m.getTodos().clear();
    for (Todo d : old) {
      if (!d.isDone()) {
        m.getTodos().add(d);
      }
    }
  }

  @Function static void addTodo(TodoUI m) {
    m.getTodos().add(new Todo(m.getTodoText(), false));
    m.setTodoText(null);
  }

  // initialize the UI
  static {
    new TodoUI(
      null,
      new Todo("First", false),
      new Todo("2nd", true),
      new Todo("Third", false)
    ).applyBindings();
  }
}
	<html>
	<head>
	<style>
	.isDone {
	text-decoration: line-through;
	color: grey;
	}
	</style>
	</head>
	<body>
	<h2>Todo</h2>
	<div ng-controller="TodoCtrl">
	<span><span data-bind="text: remaining"></span> of
	<span data-bind="text: todos().length"></span>
	remaining</span>
	[ <a href="#" data-bind="click: archive">archive</a> ]
	<ul class="unstyled" data-bind="foreach: todos">
	<li>
	<input type="checkbox" data-bind="checked: done">
	<span data-bind="text: text, css: { isDone: done }"></span>
	</li>
	</ul>
	<form>
	<input type="text" data-bind="value: todoText, valueUpdate: 'afterkeydown'" size="30"
	placeholder="add new todo here">
	<input type="submit" value="add" data-bind="click: addTodo, enable: todoText">
	</form>
	</div>
	</body>
	</html>
	package dew.demo.todos;

	import net.java.html.json.*;
	import java.util.List;
	import java.util.ArrayList;

	@Model(className="TodoUI", properties={
	@Property(name="todos", type=Todo.class, array=true),
	@Property(name="todoText", type=String.class)
	})
	class TodoCtrl {
	@Model(className="Todo", properties={
	@Property(name="text", type=String.class),
	@Property(name="done", type=boolean.class)
	})
	static class ItemCtrl {
	}

	@ComputedProperty static int remaining(
	List<Todo> todos, String todoText) {
	int count = 0;
	for (Todo d : todos) {
	if (!d.isDone()) {
	count++;
	}
	}
	return count;
	}

	@Function static void archive(TodoUI m) {
	ArrayList<Todo> old = new ArrayList<>(m.getTodos());
	m.getTodos().clear();
	for (Todo d : old) {
	if (!d.isDone()) {
	m.getTodos().add(d);
	}
	}
	}

	@Function static void addTodo(TodoUI m) {
	m.getTodos().add(new Todo(m.getTodoText(), false));
	m.setTodoText(null);
	}

	// initialize the UI
	static {
	new TodoUI(
	null,
	new Todo("First", false),
	new Todo("2nd", true),
	new Todo("Third", false)
	).applyBindings();
	}
	}