javaquery/demo-twitter/src/main/resources/org/apidesign/bck2brwsr/demo/twitter/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Mon, 15 Apr 2013 22:11:48 +0200
branchfx
changeset 994 f90426fe144c
parent 957 022f62873be6
permissions -rw-r--r--
Different initial text
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@994
    44
        This is a <b>JavaFX</b> port of the original <a href="http://xelfi.cz/twttr">Bck2Brwsr Twttr example</a>.
jaroslav@994
    45
        It uses the same HTML and Java client code. Just the implementation of <a href="http://hudson.apidesign.org/hudson/job/bck2brwsr.javadoc/lastSuccessfulBuild/artifact/javaquery/api/target/site/apidocs/index.html">Java/Knockout bindings</a> 
jaroslav@994
    46
        is different. The UI is rendered by FX's WebView. The 
jaroslav@994
    47
        <a href="http://source.apidesign.org/hg/bck2brwsr/file/fx/javaquery/demo-twitter/src/main/java/org/apidesign/bck2brwsr/demo/twitter/TwitterClient.java">
jaroslav@994
    48
            application code</a> runs in HotSpot VM.
jaroslav@931
    49
        </p>
jaroslav@931
    50
        
jaroslav@931
    51
        <div class='liveExample'>
jaroslav@931
    52
            <div class='configuration'>
jaroslav@931
    53
                <div class='listChooser'>
jaroslav@956
    54
                    <button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button>
jaroslav@931
    55
                    <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button> 
jaroslav@931
    56
                    <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
jaroslav@931
    57
                </div>
jaroslav@931
    58
jaroslav@956
    59
                <p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p>
jaroslav@956
    60
                <div class='currentUsers' >
jaroslav@956
    61
                    <ul data-bind='foreach: activeTweeters'>
jaroslav@931
    62
                        <li>
jaroslav@931
    63
                            <button data-bind='click: $root.removeUser'>Remove</button>
jaroslav@931
    64
                            <div data-bind='text: $data'> </div>
jaroslav@931
    65
                        </li>
jaroslav@931
    66
                    </ul>
jaroslav@931
    67
                </div>
jaroslav@931
    68
jaroslav@931
    69
                <form data-bind='submit: addUser'>
jaroslav@931
    70
                    <label>Add user:</label>
jaroslav@931
    71
                    <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
jaroslav@931
    72
                    <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
jaroslav@931
    73
                </form>
jaroslav@931
    74
            </div>
jaroslav@931
    75
            <div class='tweets'>
jaroslav@931
    76
                <div class='loadingIndicator'>Loading...</div>
jaroslav@931
    77
                <table data-bind='foreach: currentTweets' width='100%'>
jaroslav@931
    78
                    <tr>
jaroslav@931
    79
                        <td><img data-bind='attr: { src: profile_image_url }' /></td>
jaroslav@931
    80
                        <td>
jaroslav@956
    81
                            <a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
jaroslav@956
    82
                            <span data-bind='html: html'> </span>
jaroslav@931
    83
                            <div class='tweetInfo' data-bind='text: created_at'> </div>
jaroslav@931
    84
                        </td>
jaroslav@931
    85
                    </tr>
jaroslav@931
    86
                </table>
jaroslav@931
    87
            </div>
jaroslav@931
    88
        </div>
jaroslav@931
    89
        
jaroslav@931
    90
        <script src="bck2brwsr.js"></script>
jaroslav@931
    91
        <script type="text/javascript">
jaroslav@931
    92
            var vm = bck2brwsr('demo-twitter-0.6-SNAPSHOT.jar');
jaroslav@931
    93
            vm.loadClass('org.apidesign.bck2brwsr.demo.twitter.TwitterClient');
jaroslav@931
    94
        </script>
jaroslav@931
    95
jaroslav@931
    96
jaroslav@931
    97
    </body>
jaroslav@931
    98
</html>