jaroslav@1201
|
1 |
<?xml version="1.0" encoding="UTF-8"?>
|
jaroslav@1202
|
2 |
<!--
|
jaroslav@1202
|
3 |
|
jaroslav@1202
|
4 |
The MIT License (MIT)
|
jaroslav@1202
|
5 |
|
jaroslav@1202
|
6 |
Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
|
jaroslav@1202
|
7 |
|
jaroslav@1202
|
8 |
Permission is hereby granted, free of charge, to any person obtaining a copy
|
jaroslav@1202
|
9 |
of this software and associated documentation files (the "Software"), to deal
|
jaroslav@1202
|
10 |
in the Software without restriction, including without limitation the rights
|
jaroslav@1202
|
11 |
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
jaroslav@1202
|
12 |
copies of the Software, and to permit persons to whom the Software is
|
jaroslav@1202
|
13 |
furnished to do so, subject to the following conditions:
|
jaroslav@1202
|
14 |
|
jaroslav@1202
|
15 |
The above copyright notice and this permission notice shall be included in
|
jaroslav@1202
|
16 |
all copies or substantial portions of the Software.
|
jaroslav@1202
|
17 |
|
jaroslav@1202
|
18 |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
jaroslav@1202
|
19 |
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
jaroslav@1202
|
20 |
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
jaroslav@1202
|
21 |
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
jaroslav@1202
|
22 |
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
jaroslav@1202
|
23 |
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
jaroslav@1202
|
24 |
THE SOFTWARE.
|
jaroslav@1202
|
25 |
|
jaroslav@1202
|
26 |
-->
|
jaroslav@1202
|
27 |
|
jaroslav@1202
|
28 |
<!--
|
jaroslav@1202
|
29 |
Copied from knockout.js Twitter example:
|
jaroslav@1202
|
30 |
http://knockoutjs.com/examples/twitter.html
|
jaroslav@1202
|
31 |
-->
|
jaroslav@1202
|
32 |
|
jaroslav@1201
|
33 |
<!DOCTYPE html>
|
jaroslav@1201
|
34 |
<html xmlns="http://www.w3.org/1999/xhtml">
|
jaroslav@1201
|
35 |
<head>
|
jaroslav@1202
|
36 |
<title>Bck2Brwsr's Twitter</title>
|
jaroslav@1201
|
37 |
</head>
|
jaroslav@1201
|
38 |
<body>
|
jaroslav@1202
|
39 |
<link href='twitterExample.css' rel='Stylesheet' ></link>
|
jaroslav@1202
|
40 |
|
jaroslav@1202
|
41 |
<style type='text/css'>
|
jaroslav@1202
|
42 |
.liveExample select { height: 1.7em; }
|
jaroslav@1202
|
43 |
.liveExample button { height: 2em; }
|
jaroslav@1202
|
44 |
</style>
|
jaroslav@1202
|
45 |
|
jaroslav@1202
|
46 |
|
jaroslav@1202
|
47 |
<h2>Bck2Brwsr's Twitter</h2>
|
jaroslav@1202
|
48 |
|
jaroslav@1201
|
49 |
<p>
|
jaroslav@1202
|
50 |
This code based on original <a href="http://knockoutjs.com/examples/twitter.html">knockout.js Twitter example</a> and
|
jaroslav@1202
|
51 |
uses almost unmodified HTML code. It just changes the model. It
|
jaroslav@1202
|
52 |
is written in Java language and it is executed using <a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a>
|
jaroslav@1202
|
53 |
virtual machine. The Java source code has about 190 lines and is available
|
jaroslav@1202
|
54 |
<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>
|
jaroslav@1202
|
55 |
- in fact it may even be more dense than the original JavaScript model.
|
jaroslav@1201
|
56 |
</p>
|
jaroslav@1201
|
57 |
|
jaroslav@1202
|
58 |
<div class='liveExample'>
|
jaroslav@1202
|
59 |
<div class='configuration'>
|
jaroslav@1202
|
60 |
<div class='listChooser'>
|
jaroslav@1202
|
61 |
<button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button>
|
jaroslav@1202
|
62 |
<button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button>
|
jaroslav@1202
|
63 |
<select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
|
jaroslav@1202
|
64 |
</div>
|
jaroslav@1202
|
65 |
|
jaroslav@1202
|
66 |
<p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p>
|
jaroslav@1202
|
67 |
<div class='currentUsers' >
|
jaroslav@1202
|
68 |
<ul data-bind='foreach: activeTweeters'>
|
jaroslav@1202
|
69 |
<li>
|
jaroslav@1202
|
70 |
<button data-bind='click: $root.removeUser'>Remove</button>
|
jaroslav@1202
|
71 |
<div data-bind='text: $data'> </div>
|
jaroslav@1202
|
72 |
</li>
|
jaroslav@1202
|
73 |
</ul>
|
jaroslav@1202
|
74 |
</div>
|
jaroslav@1202
|
75 |
|
jaroslav@1202
|
76 |
<form data-bind='submit: addUser'>
|
jaroslav@1202
|
77 |
<label>Add user:</label>
|
jaroslav@1202
|
78 |
<input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
|
jaroslav@1202
|
79 |
<button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
|
jaroslav@1202
|
80 |
</form>
|
jaroslav@1202
|
81 |
</div>
|
jaroslav@1202
|
82 |
<div class='tweets'>
|
jaroslav@1202
|
83 |
<div class='loadingIndicator'>Loading...</div>
|
jaroslav@1202
|
84 |
<table data-bind='foreach: currentTweets' width='100%'>
|
jaroslav@1202
|
85 |
<tr>
|
jaroslav@1202
|
86 |
<td><img data-bind='attr: { src: profile_image_url }' /></td>
|
jaroslav@1202
|
87 |
<td>
|
jaroslav@1202
|
88 |
<a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
|
jaroslav@1202
|
89 |
<span data-bind='html: html'> </span>
|
jaroslav@1202
|
90 |
<div class='tweetInfo' data-bind='text: created_at'> </div>
|
jaroslav@1202
|
91 |
</td>
|
jaroslav@1202
|
92 |
</tr>
|
jaroslav@1202
|
93 |
</table>
|
jaroslav@1202
|
94 |
</div>
|
jaroslav@1202
|
95 |
</div>
|
jaroslav@1201
|
96 |
|
jaroslav@1201
|
97 |
<script src="bck2brwsr.js"></script>
|
jaroslav@1201
|
98 |
<script type="text/javascript">
|
jaroslav@1202
|
99 |
var vm = bck2brwsr('demo-twitter-1.0-SNAPSHOT.jar');
|
jaroslav@1202
|
100 |
vm.loadClass('org.apidesign.html.demo.twitter.TwitterClient');
|
jaroslav@1201
|
101 |
</script>
|
jaroslav@1202
|
102 |
|
jaroslav@1202
|
103 |
|
jaroslav@1201
|
104 |
</body>
|
jaroslav@1201
|
105 |
</html>
|