javaquery/demo-twitter/src/main/resources/org/apidesign/bck2brwsr/demo/twitter/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Mon, 08 Apr 2013 13:06:14 +0200
branchmodel
changeset 952 a20e3c6cffc7
parent 949 3bd43aa6f08d
child 953 935e11372aa6
permissions -rw-r--r--
Access to twitter is driven by @OnReceive annotation
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@931
    47
        virtual machine.
jaroslav@931
    48
        </p>
jaroslav@931
    49
        
jaroslav@931
    50
        <div class='liveExample'>
jaroslav@931
    51
            <div class='configuration'>
jaroslav@931
    52
                <div class='listChooser'>
jaroslav@931
    53
                    <button data-bind='click: deleteList, enable: activeTweeters.name'>Delete</button>
jaroslav@931
    54
                    <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button> 
jaroslav@931
    55
                    <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
jaroslav@931
    56
                </div>
jaroslav@931
    57
jaroslav@931
    58
                <p>Currently viewing <span data-bind='text: activeTweeters().userNames().length'> </span> user(s):</p>
jaroslav@931
    59
                <div class='currentUsers' data-bind='with: activeTweeters'>
jaroslav@931
    60
                    <ul data-bind='foreach: userNames'>
jaroslav@931
    61
                        <li>
jaroslav@931
    62
                            <button data-bind='click: $root.removeUser'>Remove</button>
jaroslav@931
    63
                            <div data-bind='text: $data'> </div>
jaroslav@931
    64
                        </li>
jaroslav@931
    65
                    </ul>
jaroslav@931
    66
                </div>
jaroslav@931
    67
jaroslav@931
    68
                <form data-bind='submit: addUser'>
jaroslav@931
    69
                    <label>Add user:</label>
jaroslav@931
    70
                    <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
jaroslav@931
    71
                    <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
jaroslav@931
    72
                </form>
jaroslav@931
    73
            </div>
jaroslav@931
    74
            <div class='tweets'>
jaroslav@931
    75
                <div class='loadingIndicator'>Loading...</div>
jaroslav@931
    76
                <table data-bind='foreach: currentTweets' width='100%'>
jaroslav@931
    77
                    <tr>
jaroslav@931
    78
                        <td><img data-bind='attr: { src: profile_image_url }' /></td>
jaroslav@931
    79
                        <td>
jaroslav@931
    80
                            <a href='http://twitter.com/${ from_user }' class='twitterUser' data-bind='attr: { href: "http://twitter.com/" + from_user }, text: from_user'> </a>
jaroslav@931
    81
                            <span data-bind='text: text'> </span>
jaroslav@931
    82
                            <div class='tweetInfo' data-bind='text: created_at'> </div>
jaroslav@931
    83
                        </td>
jaroslav@931
    84
                    </tr>
jaroslav@931
    85
                </table>
jaroslav@931
    86
            </div>
jaroslav@931
    87
        </div>
jaroslav@931
    88
        
jaroslav@931
    89
        <script src="bck2brwsr.js"></script>
jaroslav@931
    90
        <script type="text/javascript">
jaroslav@931
    91
            var vm = bck2brwsr('demo-twitter-0.6-SNAPSHOT.jar');
jaroslav@931
    92
            vm.loadClass('org.apidesign.bck2brwsr.demo.twitter.TwitterClient');
jaroslav@931
    93
        </script>
jaroslav@931
    94
jaroslav@931
    95
jaroslav@931
    96
    </body>
jaroslav@931
    97
</html>