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 code based on original <a href="http://knockoutjs.com/examples/twitter.html">knockout.js Twitter example</a> and
45 uses almost unmodified HTML code. It just changes the model. It
46 is written in Java language and it is executed using <a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a>
50 <div class='liveExample'>
51 <div class='configuration'>
52 <div class='listChooser'>
53 <button data-bind='click: deleteList, enable: activeTweeters.name'>Delete</button>
54 <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button>
55 <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
58 <p>Currently viewing <span data-bind='text: activeTweeters().userNames().length'> </span> user(s):</p>
59 <div class='currentUsers' data-bind='with: activeTweeters'>
60 <ul data-bind='foreach: userNames'>
62 <button data-bind='click: $root.removeUser'>Remove</button>
63 <div data-bind='text: $data'> </div>
68 <form data-bind='submit: addUser'>
69 <label>Add user:</label>
70 <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
71 <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
75 <div class='loadingIndicator'>Loading...</div>
76 <table data-bind='foreach: currentTweets' width='100%'>
78 <td><img data-bind='attr: { src: profile_image_url }' /></td>
80 <a href='http://twitter.com/${ from_user }' class='twitterUser' data-bind='attr: { href: "http://twitter.com/" + from_user }, text: from_user'> </a>
81 <span data-bind='text: text'> </span>
82 <div class='tweetInfo' data-bind='text: created_at'> </div>
89 <script src="bck2brwsr.js"></script>
90 <script type="text/javascript">
91 var vm = bck2brwsr('demo-twitter-0.6-SNAPSHOT.jar');
92 vm.loadClass('org.apidesign.bck2brwsr.demo.twitter.TwitterClient');