knockout.js can display our String arrays and update them when they change model
authorJaroslav Tulach <jaroslav.tulach@apidesign.org>
Mon, 18 Feb 2013 19:42:02 +0100
branchmodel
changeset 763ecd7294f1e17
parent 762 a758763f8415
child 764 605791f059b0
knockout.js can display our String arrays and update them when they change
javaquery/api/src/main/java/org/apidesign/bck2brwsr/htmlpage/PageProcessor.java
javaquery/api/src/test/java/org/apidesign/bck2brwsr/htmlpage/KnockoutTest.java
javaquery/demo-calculator-dynamic/src/main/java/org/apidesign/bck2brwsr/demo/calc/Calc.java
javaquery/demo-calculator-dynamic/src/main/resources/org/apidesign/bck2brwsr/demo/calc/Calculator.xhtml
     1.1 --- a/javaquery/api/src/main/java/org/apidesign/bck2brwsr/htmlpage/PageProcessor.java	Mon Feb 18 19:41:30 2013 +0100
     1.2 +++ b/javaquery/api/src/main/java/org/apidesign/bck2brwsr/htmlpage/PageProcessor.java	Mon Feb 18 19:42:02 2013 +0100
     1.3 @@ -338,6 +338,9 @@
     1.4                  w.write("  prop_" + p.name() + ".assign(ko);\n");
     1.5                  w.write("  return prop_" + p.name() + ";\n");
     1.6                  w.write("}\n");
     1.7 +                w.write("private Object[] " + gs[0] + "ToArray() {\n");
     1.8 +                w.write("  return " + gs[0] + "().toArray(new Object[0]);\n");
     1.9 +                w.write("}\n");
    1.10              } else {
    1.11                  w.write("private " + tn + " prop_" + p.name() + ";\n");
    1.12                  w.write("public " + tn + " " + gs[0] + "() {\n");
    1.13 @@ -442,7 +445,7 @@
    1.14              return new String[] { 
    1.15                  "get" + n,
    1.16                  null,
    1.17 -                "get" + nu + "___3" + bck2brwsrType,
    1.18 +                "get" + nu + "ToArray___3Ljava_lang_Object_2",
    1.19                  null
    1.20              };
    1.21          }
     2.1 --- a/javaquery/api/src/test/java/org/apidesign/bck2brwsr/htmlpage/KnockoutTest.java	Mon Feb 18 19:41:30 2013 +0100
     2.2 +++ b/javaquery/api/src/test/java/org/apidesign/bck2brwsr/htmlpage/KnockoutTest.java	Mon Feb 18 19:42:02 2013 +0100
     2.3 @@ -17,6 +17,7 @@
     2.4   */
     2.5  package org.apidesign.bck2brwsr.htmlpage;
     2.6  
     2.7 +import org.apidesign.bck2brwsr.core.JavaScriptBody;
     2.8  import org.apidesign.bck2brwsr.htmlpage.api.ComputedProperty;
     2.9  import org.apidesign.bck2brwsr.htmlpage.api.OnEvent;
    2.10  import org.apidesign.bck2brwsr.htmlpage.api.Page;
    2.11 @@ -31,7 +32,8 @@
    2.12   * @author Jaroslav Tulach <jtulach@netbeans.org>
    2.13   */
    2.14  @Page(xhtml="Knockout.xhtml", className="KnockoutModel", properties={
    2.15 -    @Property(name="name", type=String.class)
    2.16 +    @Property(name="name", type=String.class),
    2.17 +    @Property(name="results", type=String.class, array = true)
    2.18  }) 
    2.19  public class KnockoutTest {
    2.20      
    2.21 @@ -50,6 +52,25 @@
    2.22          assert "Jardo".equals(m.getName()) : "Name property updated: " + m.getName();
    2.23      }
    2.24      
    2.25 +    @HtmlFragment(
    2.26 +        "<ul id='ul' data-bind='foreach: results'>\n"
    2.27 +        + "  <li><b data-bind='text: $data'></b></li>\n"
    2.28 +        + "</ul>\n"
    2.29 +    )
    2.30 +    @BrwsrTest public void displayContentOfArray() {
    2.31 +        KnockoutModel m = new KnockoutModel();
    2.32 +        m.getResults().add("Ahoj");
    2.33 +        m.applyBindings();
    2.34 +        
    2.35 +        int cnt = countChildren("ul");
    2.36 +        assert cnt == 1 : "One child, but was " + cnt;
    2.37 +        
    2.38 +        m.getResults().add("hello");
    2.39 +
    2.40 +        cnt = countChildren("ul");
    2.41 +        assert cnt == 2 : "Two children now, but was " + cnt;
    2.42 +    }
    2.43 +    
    2.44      @ComputedProperty
    2.45      static String helloMessage(String name) {
    2.46          return "Hello " + name + "!";
    2.47 @@ -59,4 +80,11 @@
    2.48      public static Object[] create() {
    2.49          return VMTest.create(KnockoutTest.class);
    2.50      }
    2.51 +    
    2.52 +    @JavaScriptBody(args = { "id" }, body = 
    2.53 +          "var e = window.document.getElementById(id);\n "
    2.54 +        + "if (typeof e === 'undefined') return -2;\n "
    2.55 +        + "return e.children.length;\n "
    2.56 +    )
    2.57 +    private static native int countChildren(String id);
    2.58  }
     3.1 --- a/javaquery/demo-calculator-dynamic/src/main/java/org/apidesign/bck2brwsr/demo/calc/Calc.java	Mon Feb 18 19:41:30 2013 +0100
     3.2 +++ b/javaquery/demo-calculator-dynamic/src/main/java/org/apidesign/bck2brwsr/demo/calc/Calc.java	Mon Feb 18 19:42:02 2013 +0100
     3.3 @@ -33,11 +33,13 @@
     3.4      @Property(name = "memory", type = double.class),
     3.5      @Property(name = "display", type = double.class),
     3.6      @Property(name = "operation", type = String.class),
     3.7 -    @Property(name = "hover", type = boolean.class)
     3.8 +    @Property(name = "hover", type = boolean.class),
     3.9 +    @Property(name = "results", type = String.class, array = true)
    3.10  })
    3.11  public class Calc {
    3.12      static {
    3.13 -        new Calculator().applyBindings();
    3.14 +        Calculator m = new Calculator();
    3.15 +        m.applyBindings();
    3.16      }
    3.17      
    3.18      @On(event = CLICK, id="clear")
    3.19 @@ -65,11 +67,13 @@
    3.20      
    3.21      @On(event = CLICK, id="result")
    3.22      static void computeTheValue(Calculator c) {
    3.23 -        c.setDisplay(compute(
    3.24 +        final double val = compute(
    3.25              c.getOperation(), 
    3.26              c.getMemory(), 
    3.27              c.getDisplay()
    3.28 -        ));
    3.29 +        );
    3.30 +        c.getResults().add("another result " + val);
    3.31 +        c.setDisplay(val);
    3.32          c.setMemory(0);
    3.33      }
    3.34      
     4.1 --- a/javaquery/demo-calculator-dynamic/src/main/resources/org/apidesign/bck2brwsr/demo/calc/Calculator.xhtml	Mon Feb 18 19:41:30 2013 +0100
     4.2 +++ b/javaquery/demo-calculator-dynamic/src/main/resources/org/apidesign/bck2brwsr/demo/calc/Calculator.xhtml	Mon Feb 18 19:42:02 2013 +0100
     4.3 @@ -78,6 +78,12 @@
     4.4          </table>
     4.5          <div data-bind="text: displayPreview"></div>
     4.6          
     4.7 +        <h3>Results</h3>
     4.8 +        
     4.9 +        <ul data-bind="foreach : results">
    4.10 +            <li>Item: <b data-bind="text: $data"></b></li>
    4.11 +        </ul>
    4.12 +        
    4.13          <script src="bck2brwsr.js"></script>
    4.14          <script type="text/javascript">
    4.15              var vm = bck2brwsr('demo.calculator-0.3-SNAPSHOT.jar');