ko-archetype/src/main/resources/archetype-resources/src/main/resources/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Mon, 13 May 2013 14:25:37 +0200
changeset 1202 5f04bdbc6ee1
parent 1201 b6fd8b9ccc7a
child 1205 1901da93f3f2
permissions -rw-r--r--
Moving archetype tests into separate module - at that moment it is possible to use the previously generated archetype
jaroslav@1201
     1
<?xml version="1.0" encoding="UTF-8"?>
jaroslav@1202
     2
<!--
jaroslav@1202
     3
jaroslav@1202
     4
    The MIT License (MIT)
jaroslav@1202
     5
jaroslav@1202
     6
    Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
jaroslav@1202
     7
jaroslav@1202
     8
    Permission is hereby granted, free of charge, to any person obtaining a copy
jaroslav@1202
     9
    of this software and associated documentation files (the "Software"), to deal
jaroslav@1202
    10
    in the Software without restriction, including without limitation the rights
jaroslav@1202
    11
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
jaroslav@1202
    12
    copies of the Software, and to permit persons to whom the Software is
jaroslav@1202
    13
    furnished to do so, subject to the following conditions:
jaroslav@1202
    14
jaroslav@1202
    15
    The above copyright notice and this permission notice shall be included in
jaroslav@1202
    16
    all copies or substantial portions of the Software.
jaroslav@1202
    17
jaroslav@1202
    18
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
jaroslav@1202
    19
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
jaroslav@1202
    20
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
jaroslav@1202
    21
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
jaroslav@1202
    22
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
jaroslav@1202
    23
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
jaroslav@1202
    24
    THE SOFTWARE.
jaroslav@1202
    25
jaroslav@1202
    26
-->
jaroslav@1202
    27
jaroslav@1202
    28
<!--
jaroslav@1202
    29
    Copied from knockout.js Twitter example:
jaroslav@1202
    30
    http://knockoutjs.com/examples/twitter.html
jaroslav@1202
    31
-->
jaroslav@1202
    32
jaroslav@1201
    33
<!DOCTYPE html>
jaroslav@1201
    34
<html xmlns="http://www.w3.org/1999/xhtml">
jaroslav@1201
    35
    <head>
jaroslav@1202
    36
        <title>Bck2Brwsr's Twitter</title>
jaroslav@1201
    37
    </head>
jaroslav@1201
    38
    <body>
jaroslav@1202
    39
        <link href='twitterExample.css' rel='Stylesheet' ></link>
jaroslav@1202
    40
        
jaroslav@1202
    41
        <style type='text/css'>
jaroslav@1202
    42
           .liveExample select { height: 1.7em; }
jaroslav@1202
    43
           .liveExample button { height: 2em; }
jaroslav@1202
    44
        </style>
jaroslav@1202
    45
        
jaroslav@1202
    46
        
jaroslav@1202
    47
        <h2>Bck2Brwsr's Twitter</h2>
jaroslav@1202
    48
        
jaroslav@1201
    49
        <p>
jaroslav@1202
    50
        This code based on original <a href="http://knockoutjs.com/examples/twitter.html">knockout.js Twitter example</a> and
jaroslav@1202
    51
        uses almost unmodified HTML code. It just changes the model. It 
jaroslav@1202
    52
        is written in Java language and it is executed using <a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a>
jaroslav@1202
    53
        virtual machine. The Java source code has about 190 lines and is available 
jaroslav@1202
    54
        <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>
jaroslav@1202
    55
        - in fact it may even be more dense than the original JavaScript model.
jaroslav@1201
    56
        </p>
jaroslav@1201
    57
        
jaroslav@1202
    58
        <div class='liveExample'>
jaroslav@1202
    59
            <div class='configuration'>
jaroslav@1202
    60
                <div class='listChooser'>
jaroslav@1202
    61
                    <button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button>
jaroslav@1202
    62
                    <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button> 
jaroslav@1202
    63
                    <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
jaroslav@1202
    64
                </div>
jaroslav@1202
    65
jaroslav@1202
    66
                <p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p>
jaroslav@1202
    67
                <div class='currentUsers' >
jaroslav@1202
    68
                    <ul data-bind='foreach: activeTweeters'>
jaroslav@1202
    69
                        <li>
jaroslav@1202
    70
                            <button data-bind='click: $root.removeUser'>Remove</button>
jaroslav@1202
    71
                            <div data-bind='text: $data'> </div>
jaroslav@1202
    72
                        </li>
jaroslav@1202
    73
                    </ul>
jaroslav@1202
    74
                </div>
jaroslav@1202
    75
jaroslav@1202
    76
                <form data-bind='submit: addUser'>
jaroslav@1202
    77
                    <label>Add user:</label>
jaroslav@1202
    78
                    <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
jaroslav@1202
    79
                    <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
jaroslav@1202
    80
                </form>
jaroslav@1202
    81
            </div>
jaroslav@1202
    82
            <div class='tweets'>
jaroslav@1202
    83
                <div class='loadingIndicator'>Loading...</div>
jaroslav@1202
    84
                <table data-bind='foreach: currentTweets' width='100%'>
jaroslav@1202
    85
                    <tr>
jaroslav@1202
    86
                        <td><img data-bind='attr: { src: profile_image_url }' /></td>
jaroslav@1202
    87
                        <td>
jaroslav@1202
    88
                            <a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
jaroslav@1202
    89
                            <span data-bind='html: html'> </span>
jaroslav@1202
    90
                            <div class='tweetInfo' data-bind='text: created_at'> </div>
jaroslav@1202
    91
                        </td>
jaroslav@1202
    92
                    </tr>
jaroslav@1202
    93
                </table>
jaroslav@1202
    94
            </div>
jaroslav@1202
    95
        </div>
jaroslav@1201
    96
        
jaroslav@1201
    97
        <script src="bck2brwsr.js"></script>
jaroslav@1201
    98
        <script type="text/javascript">
jaroslav@1202
    99
            var vm = bck2brwsr('demo-twitter-1.0-SNAPSHOT.jar');
jaroslav@1202
   100
            vm.loadClass('org.apidesign.html.demo.twitter.TwitterClient');
jaroslav@1201
   101
        </script>
jaroslav@1202
   102
jaroslav@1202
   103
jaroslav@1201
   104
    </body>
jaroslav@1201
   105
</html>