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;

 /** 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="messages", type=String.class, array=true),

 })

 public class App {

     static {

         Index model = new Index();

         model.setName("World");

         model.applyBindings();

     }

     /** 

      * @param m the model of the index page creates in static initializer

      */

     @On(event = CLICK, id="hello")

     static void hello(Index m) {

         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();

     }

 }