1.1 --- a/rt/archetype/src/main/resources/archetype-resources/src/main/java/App.java	Tue Mar 26 09:24:26 2013 +0100
     1.2 +++ b/rt/archetype/src/main/resources/archetype-resources/src/main/java/App.java	Tue Mar 26 09:29:05 2013 +0100
     1.3 @@ -1,16 +1,19 @@
     1.4  package ${package};
     1.5  
     1.6 +import java.util.List;
     1.7  import org.apidesign.bck2brwsr.htmlpage.api.*;
     1.8  import static org.apidesign.bck2brwsr.htmlpage.api.OnEvent.*;
     1.9  import org.apidesign.bck2brwsr.htmlpage.api.Page;
    1.10  import org.apidesign.bck2brwsr.htmlpage.api.Property;
    1.11  import org.apidesign.bck2brwsr.htmlpage.api.ComputedProperty;
    1.12  
    1.13 -/** Edit the index.xhtml file. Use 'id' to name certain HTML elements.
    1.14 - * Use this class to define behavior of the elements.
    1.15 +/** This is the controller class for associated index.html page. The <code>Index</code>
    1.16 + * is autogenerated by parsing the index.html page. It fields represent individual
    1.17 + * elements annotated by "id" in the page.
    1.18   */
    1.19  @Page(xhtml="index.html", className="Index", properties={
    1.20 -    @Property(name="name", type=String.class)
    1.21 +    @Property(name="name", type=String.class),
    1.22 +    @Property(name="messages", type=String.class, array=true),
    1.23  })
    1.24  public class App {
    1.25      static {
    1.26 @@ -19,16 +22,67 @@
    1.27          model.applyBindings();
    1.28      }
    1.29      
    1.30 +    /** 
    1.31 +     * @param m the model of the index page creates in static initializer
    1.32 +     */
    1.33      @On(event = CLICK, id="hello")
    1.34      static void hello(Index m) {
    1.35 -        GraphicsContext g = m.CANVAS.getContext();
    1.36 +        display(m.getHelloMessage(), m);
    1.37 +        m.getMessages().add(m.getHelloMessage());
    1.38 +    }
    1.39 +
    1.40 +    /** Reacts when mouse moves over the canvas.
    1.41 +     * 
    1.42 +     * @param m the model of the page
    1.43 +     * @param x property "x" extracted from the event generated by the browser
    1.44 +     * @param y property "y" from the mouse event
    1.45 +     */
    1.46 +    @On(event = MOUSE_MOVE, id="canvas")
    1.47 +    static void clearPoint(Index m, int x, int y) {
    1.48 +        GraphicsContext g = m.canvas.getContext();
    1.49 +        boolean even = (x + y) % 2 == 0;
    1.50 +        if (even) {
    1.51 +            g.setFillStyle("blue");
    1.52 +        } else {
    1.53 +            g.setFillStyle("red");
    1.54 +        }
    1.55          g.clearRect(0, 0, 1000, 1000);
    1.56          g.setFont("italic 40px Calibri");
    1.57          g.fillText(m.getHelloMessage(), 10, 40);
    1.58      }
    1.59 +
    1.60 +    /** Callback function called by the KnockOut/Java binding on elements
    1.61 +     * representing href's with individual messages being their data.
    1.62 +     * 
    1.63 +     * @param data the data associated with the element 
    1.64 +     * @param m the model of the page
    1.65 +     */
    1.66 +    @OnFunction
    1.67 +    static void display(String data, Index m) {
    1.68 +        GraphicsContext g = m.canvas.getContext();
    1.69 +        g.clearRect(0, 0, 1000, 1000);
    1.70 +        g.setFillStyle("black");
    1.71 +        g.setFont("italic 40px Calibri");
    1.72 +        g.fillText(data, 10, 40);
    1.73 +    }
    1.74 +
    1.75 +    /** Callback function.
    1.76 +     * 
    1.77 +     * @param data data associated with the actual element on the page
    1.78 +     * @param m the model of the page
    1.79 +     */
    1.80 +    @OnFunction
    1.81 +    static void remove(String data, Index m) {
    1.82 +        m.getMessages().remove(data);
    1.83 +    }
    1.84      
    1.85      @ComputedProperty
    1.86      static String helloMessage(String name) {
    1.87          return "Hello " + name + "!";
    1.88      }
    1.89 +    
    1.90 +    @ComputedProperty
    1.91 +    static boolean noMessages(List<String> messages) {
    1.92 +        return messages.isEmpty();
    1.93 +    }
    1.94  }

     2.1 --- a/rt/archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Tue Mar 26 09:24:26 2013 +0100
     2.2 +++ b/rt/archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Tue Mar 26 09:29:05 2013 +0100
     2.3 @@ -12,7 +12,16 @@
     2.4              <canvas id="canvas" width="300" height="50">
     2.5              </canvas>
     2.6          </p>
     2.7 -
     2.8 +        
     2.9 +        
    2.10 +        <div data-bind="if: noMessages">No message displayed yet.</div>
    2.11 +        <ul data-bind="foreach: messages">
    2.12 +            <li>
    2.13 +                <a href="#" data-bind="text: $data, click: $root.display"></a>
    2.14 +                (<a href="#" data-bind="click: $root.remove">delete</a>)
    2.15 +            </li>
    2.16 +        </ul>
    2.17 +      
    2.18          <script src="bck2brwsr.js"></script>
    2.19          <script type="text/javascript">
    2.20              var vm = bck2brwsr('${artifactId}-${version}.jar');

     3.1 --- a/rt/archetype/src/main/resources/archetype-resources/src/test/java/IntegrationTest.java	Tue Mar 26 09:24:26 2013 +0100
     3.2 +++ b/rt/archetype/src/main/resources/archetype-resources/src/test/java/IntegrationTest.java	Tue Mar 26 09:29:05 2013 +0100
     3.3 @@ -32,9 +32,9 @@
     3.4          Index m = new Index();
     3.5          m.setName("Joe Hacker");
     3.6          m.applyBindings();
     3.7 -        assert "Joe Hacker".equals(m.INPUT.getValue()) : "Value is really Joe Hacker: " + m.INPUT.getValue();
     3.8 -        m.INPUT.setValue("Happy Joe");
     3.9 -        m.triggerEvent(m.INPUT, OnEvent.CHANGE);
    3.10 +        assert "Joe Hacker".equals(m.input.getValue()) : "Value is really Joe Hacker: " + m.input.getValue();
    3.11 +        m.input.setValue("Happy Joe");
    3.12 +        m.triggerEvent(m.input, OnEvent.CHANGE);
    3.13          assert "Happy Joe".equals(m.getName()) : "Name property updated to Happy Joe: " + m.getName();
    3.14      }
    3.15