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