javaquery/demo-twitter/src/main/resources/org/apidesign/bck2brwsr/demo/twitter/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Mon, 08 Apr 2013 19:31:47 +0200
branchmodel
changeset 957 022f62873be6
parent 956 7fc6b7e9c982
child 994 f90426fe144c
child 1063 9e3a4ba88c2f
permissions -rw-r--r--
Point the URL to the latest version of the source
jaroslav@931
     1
<?xml version="1.0" encoding="UTF-8"?>
jaroslav@931
     2
<!--
jaroslav@931
     3
jaroslav@931
     4
    Back 2 Browser Bytecode Translator
jaroslav@931
     5
    Copyright (C) 2012 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
jaroslav@931
     6
jaroslav@931
     7
    This program is free software: you can redistribute it and/or modify
jaroslav@931
     8
    it under the terms of the GNU General Public License as published by
jaroslav@931
     9
    the Free Software Foundation, version 2 of the License.
jaroslav@931
    10
jaroslav@931
    11
    This program is distributed in the hope that it will be useful,
jaroslav@931
    12
    but WITHOUT ANY WARRANTY; without even the implied warranty of
jaroslav@931
    13
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
jaroslav@931
    14
    GNU General Public License for more details.
jaroslav@931
    15
jaroslav@931
    16
    You should have received a copy of the GNU General Public License
jaroslav@931
    17
    along with this program. Look for COPYING file in the top folder.
jaroslav@931
    18
    If not, see http://opensource.org/licenses/GPL-2.0.
jaroslav@931
    19
jaroslav@931
    20
-->
jaroslav@931
    21
jaroslav@931
    22
<!--
jaroslav@931
    23
    Copied from knockout.js Twitter example:
jaroslav@931
    24
    http://knockoutjs.com/examples/twitter.html
jaroslav@931
    25
-->
jaroslav@931
    26
jaroslav@931
    27
<!DOCTYPE html>
jaroslav@931
    28
<html xmlns="http://www.w3.org/1999/xhtml">
jaroslav@931
    29
    <head>
jaroslav@931
    30
        <title>Bck2Brwsr's Twitter</title>
jaroslav@931
    31
    </head>
jaroslav@931
    32
    <body>
jaroslav@931
    33
        <link href='twitterExample.css' rel='Stylesheet' ></link>
jaroslav@931
    34
        
jaroslav@931
    35
        <style type='text/css'>
jaroslav@931
    36
           .liveExample select { height: 1.7em; }
jaroslav@931
    37
           .liveExample button { height: 2em; }
jaroslav@931
    38
        </style>
jaroslav@931
    39
        
jaroslav@931
    40
        
jaroslav@931
    41
        <h2>Bck2Brwsr's Twitter</h2>
jaroslav@931
    42
        
jaroslav@931
    43
        <p>
jaroslav@931
    44
        This code based on original <a href="http://knockoutjs.com/examples/twitter.html">knockout.js Twitter example</a> and
jaroslav@931
    45
        uses almost unmodified HTML code. It just changes the model. It 
jaroslav@931
    46
        is written in Java language and it is executed using <a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a>
jaroslav@956
    47
        virtual machine. The Java source code has about 190 lines and is available 
jaroslav@957
    48
        <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@953
    49
        - in fact it may even be more dense than the original JavaScript model.
jaroslav@931
    50
        </p>
jaroslav@931
    51
        
jaroslav@931
    52
        <div class='liveExample'>
jaroslav@931
    53
            <div class='configuration'>
jaroslav@931
    54
                <div class='listChooser'>
jaroslav@956
    55
                    <button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button>
jaroslav@931
    56
                    <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button> 
jaroslav@931
    57
                    <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
jaroslav@931
    58
                </div>
jaroslav@931
    59
jaroslav@956
    60
                <p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p>
jaroslav@956
    61
                <div class='currentUsers' >
jaroslav@956
    62
                    <ul data-bind='foreach: activeTweeters'>
jaroslav@931
    63
                        <li>
jaroslav@931
    64
                            <button data-bind='click: $root.removeUser'>Remove</button>
jaroslav@931
    65
                            <div data-bind='text: $data'> </div>
jaroslav@931
    66
                        </li>
jaroslav@931
    67
                    </ul>
jaroslav@931
    68
                </div>
jaroslav@931
    69
jaroslav@931
    70
                <form data-bind='submit: addUser'>
jaroslav@931
    71
                    <label>Add user:</label>
jaroslav@931
    72
                    <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
jaroslav@931
    73
                    <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
jaroslav@931
    74
                </form>
jaroslav@931
    75
            </div>
jaroslav@931
    76
            <div class='tweets'>
jaroslav@931
    77
                <div class='loadingIndicator'>Loading...</div>
jaroslav@931
    78
                <table data-bind='foreach: currentTweets' width='100%'>
jaroslav@931
    79
                    <tr>
jaroslav@931
    80
                        <td><img data-bind='attr: { src: profile_image_url }' /></td>
jaroslav@931
    81
                        <td>
jaroslav@956
    82
                            <a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
jaroslav@956
    83
                            <span data-bind='html: html'> </span>
jaroslav@931
    84
                            <div class='tweetInfo' data-bind='text: created_at'> </div>
jaroslav@931
    85
                        </td>
jaroslav@931
    86
                    </tr>
jaroslav@931
    87
                </table>
jaroslav@931
    88
            </div>
jaroslav@931
    89
        </div>
jaroslav@931
    90
        
jaroslav@931
    91
        <script src="bck2brwsr.js"></script>
jaroslav@931
    92
        <script type="text/javascript">
jaroslav@931
    93
            var vm = bck2brwsr('demo-twitter-0.6-SNAPSHOT.jar');
jaroslav@931
    94
            vm.loadClass('org.apidesign.bck2brwsr.demo.twitter.TwitterClient');
jaroslav@931
    95
        </script>
jaroslav@931
    96
jaroslav@931
    97
jaroslav@931
    98
    </body>
jaroslav@931
    99
</html>