javaquery/demo-twitter/src/main/resources/org/apidesign/bck2brwsr/demo/twitter/index.html
1 <?xml version="1.0" encoding="UTF-8"?>
4 Back 2 Browser Bytecode Translator
5 Copyright (C) 2012 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
7 This program is free software: you can redistribute it and/or modify
8 it under the terms of the GNU General Public License as published by
9 the Free Software Foundation, version 2 of the License.
11 This program is distributed in the hope that it will be useful,
12 but WITHOUT ANY WARRANTY; without even the implied warranty of
13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 GNU General Public License for more details.
16 You should have received a copy of the GNU General Public License
17 along with this program. Look for COPYING file in the top folder.
18 If not, see http://opensource.org/licenses/GPL-2.0.
23 Copied from knockout.js Twitter example:
24 http://knockoutjs.com/examples/twitter.html
28 <html xmlns="http://www.w3.org/1999/xhtml">
30 <title>Bck2Brwsr's Twitter</title>
33 <link href='twitterExample.css' rel='Stylesheet' ></link>
35 <style type='text/css'>
36 .liveExample select { height: 1.7em; }
37 .liveExample button { height: 2em; }
41 <h2>Bck2Brwsr's Twitter</h2>
44 This is a <b>JavaFX</b> port of the original <a href="http://xelfi.cz/twttr">Bck2Brwsr Twttr example</a>.
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>
46 is different. The UI is rendered by FX's WebView. The
47 <a href="http://source.apidesign.org/hg/bck2brwsr/file/fx/javaquery/demo-twitter/src/main/java/org/apidesign/bck2brwsr/demo/twitter/TwitterClient.java">
48 application code</a> runs in HotSpot VM.
51 <div class='liveExample'>
52 <div class='configuration'>
53 <div class='listChooser'>
54 <button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button>
55 <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button>
56 <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
59 <p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p>
60 <div class='currentUsers' >
61 <ul data-bind='foreach: activeTweeters'>
63 <button data-bind='click: $root.removeUser'>Remove</button>
64 <div data-bind='text: $data'> </div>
69 <form data-bind='submit: addUser'>
70 <label>Add user:</label>
71 <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
72 <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
76 <div class='loadingIndicator'>Loading...</div>
77 <table data-bind='foreach: currentTweets' width='100%'>
79 <td><img data-bind='attr: { src: profile_image_url }' /></td>
81 <a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
82 <span data-bind='html: html'> </span>
83 <div class='tweetInfo' data-bind='text: created_at'> </div>
90 <script src="bck2brwsr.js"></script>
91 <script type="text/javascript">
92 var vm = bck2brwsr('demo-twitter-0.6-SNAPSHOT.jar');
93 vm.loadClass('org.apidesign.bck2brwsr.demo.twitter.TwitterClient');