ko-archetype/src/main/resources/archetype-resources/src/main/resources/index.html
changeset 1202 5f04bdbc6ee1
parent 1201 b6fd8b9ccc7a
child 1205 1901da93f3f2
     1.1 --- a/ko-archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Mon May 13 11:39:33 2013 +0200
     1.2 +++ b/ko-archetype/src/main/resources/archetype-resources/src/main/resources/index.html	Mon May 13 14:25:37 2013 +0200
     1.3 @@ -1,31 +1,105 @@
     1.4  <?xml version="1.0" encoding="UTF-8"?>
     1.5 +<!--
     1.6 +
     1.7 +    The MIT License (MIT)
     1.8 +
     1.9 +    Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
    1.10 +
    1.11 +    Permission is hereby granted, free of charge, to any person obtaining a copy
    1.12 +    of this software and associated documentation files (the "Software"), to deal
    1.13 +    in the Software without restriction, including without limitation the rights
    1.14 +    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    1.15 +    copies of the Software, and to permit persons to whom the Software is
    1.16 +    furnished to do so, subject to the following conditions:
    1.17 +
    1.18 +    The above copyright notice and this permission notice shall be included in
    1.19 +    all copies or substantial portions of the Software.
    1.20 +
    1.21 +    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    1.22 +    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    1.23 +    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    1.24 +    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    1.25 +    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    1.26 +    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    1.27 +    THE SOFTWARE.
    1.28 +
    1.29 +-->
    1.30 +
    1.31 +<!--
    1.32 +    Copied from knockout.js Twitter example:
    1.33 +    http://knockoutjs.com/examples/twitter.html
    1.34 +-->
    1.35 +
    1.36  <!DOCTYPE html>
    1.37  <html xmlns="http://www.w3.org/1999/xhtml">
    1.38      <head>
    1.39 -        <title>Bck2Brwsr's Hello World</title>
    1.40 +        <title>Bck2Brwsr's Twitter</title>
    1.41      </head>
    1.42      <body>
    1.43 -        <h1 data-bind="text: helloMessage">Loading Bck2Brwsr's Hello World...</h1>
    1.44 -        Your name: <input id='input' data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
    1.45 -        <button id="hello">Say Hello!</button>
    1.46 +        <link href='twitterExample.css' rel='Stylesheet' ></link>
    1.47 +        
    1.48 +        <style type='text/css'>
    1.49 +           .liveExample select { height: 1.7em; }
    1.50 +           .liveExample button { height: 2em; }
    1.51 +        </style>
    1.52 +        
    1.53 +        
    1.54 +        <h2>Bck2Brwsr's Twitter</h2>
    1.55 +        
    1.56          <p>
    1.57 -            <canvas id="canvas" width="300" height="50">
    1.58 -            </canvas>
    1.59 +        This code based on original <a href="http://knockoutjs.com/examples/twitter.html">knockout.js Twitter example</a> and
    1.60 +        uses almost unmodified HTML code. It just changes the model. It 
    1.61 +        is written in Java language and it is executed using <a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a>
    1.62 +        virtual machine. The Java source code has about 190 lines and is available 
    1.63 +        <a href="http://source.apidesign.org/hg/bck2brwsr/file/7fc6b7e9c982/javaquery/demo-twitter/src/main/java/org/apidesign/bck2brwsr/demo/twitter/TwitterClient.java">here</a>
    1.64 +        - in fact it may even be more dense than the original JavaScript model.
    1.65          </p>
    1.66          
    1.67 +        <div class='liveExample'>
    1.68 +            <div class='configuration'>
    1.69 +                <div class='listChooser'>
    1.70 +                    <button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button>
    1.71 +                    <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button> 
    1.72 +                    <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
    1.73 +                </div>
    1.74 +
    1.75 +                <p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p>
    1.76 +                <div class='currentUsers' >
    1.77 +                    <ul data-bind='foreach: activeTweeters'>
    1.78 +                        <li>
    1.79 +                            <button data-bind='click: $root.removeUser'>Remove</button>
    1.80 +                            <div data-bind='text: $data'> </div>
    1.81 +                        </li>
    1.82 +                    </ul>
    1.83 +                </div>
    1.84 +
    1.85 +                <form data-bind='submit: addUser'>
    1.86 +                    <label>Add user:</label>
    1.87 +                    <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
    1.88 +                    <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
    1.89 +                </form>
    1.90 +            </div>
    1.91 +            <div class='tweets'>
    1.92 +                <div class='loadingIndicator'>Loading...</div>
    1.93 +                <table data-bind='foreach: currentTweets' width='100%'>
    1.94 +                    <tr>
    1.95 +                        <td><img data-bind='attr: { src: profile_image_url }' /></td>
    1.96 +                        <td>
    1.97 +                            <a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
    1.98 +                            <span data-bind='html: html'> </span>
    1.99 +                            <div class='tweetInfo' data-bind='text: created_at'> </div>
   1.100 +                        </td>
   1.101 +                    </tr>
   1.102 +                </table>
   1.103 +            </div>
   1.104 +        </div>
   1.105          
   1.106 -        <div data-bind="if: noMessages">No message displayed yet.</div>
   1.107 -        <ul data-bind="foreach: messages">
   1.108 -            <li>
   1.109 -                <a href="#" data-bind="text: $data, click: $root.display"></a>
   1.110 -                (<a href="#" data-bind="click: $root.remove">delete</a>)
   1.111 -            </li>
   1.112 -        </ul>
   1.113 -      
   1.114          <script src="bck2brwsr.js"></script>
   1.115          <script type="text/javascript">
   1.116 -            var vm = bck2brwsr('${artifactId}-${version}.jar');
   1.117 -            vm.loadClass('${package}.App');
   1.118 +            var vm = bck2brwsr('demo-twitter-1.0-SNAPSHOT.jar');
   1.119 +            vm.loadClass('org.apidesign.html.demo.twitter.TwitterClient');
   1.120          </script>
   1.121 +
   1.122 +
   1.123      </body>
   1.124  </html>