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>
47 virtual machine. The Java source code has about 190 lines and is available
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>
49 - in fact it may even be more dense than the original JavaScript model.
52 <div class='liveExample'>
53 <div class='configuration'>
54 <div class='listChooser'>
55 <button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button>
56 <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button>
57 <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
60 <p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p>
61 <div class='currentUsers' >
62 <ul data-bind='foreach: activeTweeters'>
64 <button data-bind='click: $root.removeUser'>Remove</button>
65 <div data-bind='text: $data'> </div>
70 <form data-bind='submit: addUser'>
71 <label>Add user:</label>
72 <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
73 <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
77 <div class='loadingIndicator'>Loading...</div>
78 <table data-bind='foreach: currentTweets' width='100%'>
80 <td><img data-bind='attr: { src: profile_image_url }' /></td>
82 <a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
83 <span data-bind='html: html'> </span>
84 <div class='tweetInfo' data-bind='text: created_at'> </div>
91 <script src="bck2brwsr.js"></script>
92 <script type="text/javascript">
93 var vm = bck2brwsr('demo-twitter-0.6-SNAPSHOT.jar');
94 vm.loadClass('org.apidesign.bck2brwsr.demo.twitter.TwitterClient');