# HG changeset patch
# User Jaroslav Tulach <jaroslav.tulach@apidesign.org>
# Date 1364286545 -3600
# Node ID 20fb32569339ff4c97beadb420ab6ea58efd97be
# Parent  16fd25f3a75dff5991c42422d8e248c5883cdb75
Richer example showing Knockout operations with arrays/lists and ability to receive parameters from an event

diff -r 16fd25f3a75d -r 20fb32569339 rt/archetype/src/main/resources/archetype-resources/src/main/java/App.java
--- a/rt/archetype/src/main/resources/archetype-resources/src/main/java/App.java	Tue Mar 26 09:24:26 2013 +0100
+++ b/rt/archetype/src/main/resources/archetype-resources/src/main/java/App.java	Tue Mar 26 09:29:05 2013 +0100
@@ -1,16 +1,19 @@
 package ${package};
 
+import java.util.List;
 import org.apidesign.bck2brwsr.htmlpage.api.*;
 import static org.apidesign.bck2brwsr.htmlpage.api.OnEvent.*;
 import org.apidesign.bck2brwsr.htmlpage.api.Page;
 import org.apidesign.bck2brwsr.htmlpage.api.Property;
 import org.apidesign.bck2brwsr.htmlpage.api.ComputedProperty;
 
-/** Edit the index.xhtml file. Use 'id' to name certain HTML elements.
- * Use this class to define behavior of the elements.
+/** This is the controller class for associated index.html page. The <code>Index</code>
+ * is autogenerated by parsing the index.html page. It fields represent individual
+ * elements annotated by "id" in the page.
  */
 @Page(xhtml="index.html", className="Index", properties={
-    @Property(name="name", type=String.class)
+    @Property(name="name", type=String.class),
+    @Property(name="messages", type=String.class, array=true),
 })
 public class App {
     static {
@@ -19,16 +22,67 @@
         model.applyBindings();
     }
     
+    /** 
+     * @param m the model of the index page creates in static initializer
+     */
     @On(event = CLICK, id="hello")
     static void hello(Index m) {
-        GraphicsContext g = m.CANVAS.getContext();
+        display(m.getHelloMessage(), m);
+        m.getMessages().add(m.getHelloMessage());
+    }
+
+    /** Reacts when mouse moves over the canvas.
+     * 
+     * @param m the model of the page
+     * @param x property "x" extracted from the event generated by the browser
+     * @param y property "y" from the mouse event
+     */
+    @On(event = MOUSE_MOVE, id="canvas")
+    static void clearPoint(Index m, int x, int y) {
+        GraphicsContext g = m.canvas.getContext();
+        boolean even = (x + y) % 2 == 0;
+        if (even) {
+            g.setFillStyle("blue");
+        } else {
+            g.setFillStyle("red");
+        }
         g.clearRect(0, 0, 1000, 1000);
         g.setFont("italic 40px Calibri");
         g.fillText(m.getHelloMessage(), 10, 40);
     }
+
+    /** Callback function called by the KnockOut/Java binding on elements
+     * representing href's with individual messages being their data.
+     * 
+     * @param data the data associated with the element 
+     * @param m the model of the page
+     */
+    @OnFunction
+    static void display(String data, Index m) {
+        GraphicsContext g = m.canvas.getContext();
+        g.clearRect(0, 0, 1000, 1000);
+        g.setFillStyle("black");
+        g.setFont("italic 40px Calibri");
+        g.fillText(data, 10, 40);
+    }
+
+    /** Callback function.
+     * 
+     * @param data data associated with the actual element on the page
+     * @param m the model of the page
+     */
+    @OnFunction
+    static void remove(String data, Index m) {
+        m.getMessages().remove(data);
+    }
     
     @ComputedProperty
     static String helloMessage(String name) {
         return "Hello " + name + "!";
     }
+    
+    @ComputedProperty
+    static boolean noMessages(List<String> messages) {
+        return messages.isEmpty();
+    }
 }
diff -r 16fd25f3a75d -r 20fb32569339 rt/archetype/src/main/resources/archetype-resources/src/main/resources/index.html
--- a/rt/archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Tue Mar 26 09:24:26 2013 +0100
+++ b/rt/archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Tue Mar 26 09:29:05 2013 +0100
@@ -12,7 +12,16 @@
             <canvas id="canvas" width="300" height="50">
             </canvas>
         </p>
-
+        
+        
+        <div data-bind="if: noMessages">No message displayed yet.</div>
+        <ul data-bind="foreach: messages">
+            <li>
+                <a href="#" data-bind="text: $data, click: $root.display"></a>
+                (<a href="#" data-bind="click: $root.remove">delete</a>)
+            </li>
+        </ul>
+      
         <script src="bck2brwsr.js"></script>
         <script type="text/javascript">
             var vm = bck2brwsr('${artifactId}-${version}.jar');
diff -r 16fd25f3a75d -r 20fb32569339 rt/archetype/src/main/resources/archetype-resources/src/test/java/IntegrationTest.java
--- a/rt/archetype/src/main/resources/archetype-resources/src/test/java/IntegrationTest.java	Tue Mar 26 09:24:26 2013 +0100
+++ b/rt/archetype/src/main/resources/archetype-resources/src/test/java/IntegrationTest.java	Tue Mar 26 09:29:05 2013 +0100
@@ -32,9 +32,9 @@
         Index m = new Index();
         m.setName("Joe Hacker");
         m.applyBindings();
-        assert "Joe Hacker".equals(m.INPUT.getValue()) : "Value is really Joe Hacker: " + m.INPUT.getValue();
-        m.INPUT.setValue("Happy Joe");
-        m.triggerEvent(m.INPUT, OnEvent.CHANGE);
+        assert "Joe Hacker".equals(m.input.getValue()) : "Value is really Joe Hacker: " + m.input.getValue();
+        m.input.setValue("Happy Joe");
+        m.triggerEvent(m.input, OnEvent.CHANGE);
         assert "Happy Joe".equals(m.getName()) : "Name property updated to Happy Joe: " + m.getName();
     }