| author | Jaroslav Tulach <jaroslav.tulach@apidesign.org> |
| Wed, 15 May 2013 11:14:39 +0200 | |
| changeset 1213 | 022099dee442 |
| parent 1209 | bf622f485775 |
| permissions | -rw-r--r-- |
| jaroslav@1201 | 1 |
<?xml version="1.0" encoding="UTF-8"?> |
| jaroslav@1202 | 2 |
|
| jaroslav@1202 | 3 |
<!-- |
| jaroslav@1202 | 4 |
Copied from knockout.js Twitter example: |
| jaroslav@1202 | 5 |
http://knockoutjs.com/examples/twitter.html |
| jaroslav@1202 | 6 |
--> |
| jaroslav@1202 | 7 |
|
| jaroslav@1201 | 8 |
<!DOCTYPE html> |
| jaroslav@1201 | 9 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
| jaroslav@1201 | 10 |
<head> |
| jaroslav@1202 | 11 |
<title>Bck2Brwsr's Twitter</title> |
| jaroslav@1201 | 12 |
</head> |
| jaroslav@1201 | 13 |
<body> |
| jaroslav@1202 | 14 |
<link href='twitterExample.css' rel='Stylesheet' ></link> |
| jaroslav@1202 | 15 |
|
| jaroslav@1202 | 16 |
<style type='text/css'> |
| jaroslav@1202 | 17 |
.liveExample select { height: 1.7em; }
|
| jaroslav@1202 | 18 |
.liveExample button { height: 2em; }
|
| jaroslav@1202 | 19 |
</style> |
| jaroslav@1202 | 20 |
|
| jaroslav@1202 | 21 |
|
| jaroslav@1202 | 22 |
<h2>Bck2Brwsr's Twitter</h2> |
| jaroslav@1202 | 23 |
|
| jaroslav@1201 | 24 |
<p> |
| jaroslav@1205 | 25 |
This code is based on original |
| jaroslav@1205 | 26 |
<a href="http://knockoutjs.com/examples/twitter.html">knockout.js |
| jaroslav@1205 | 27 |
Twitter example</a> and |
| jaroslav@1205 | 28 |
uses almost unmodified HTML page. It just changes the model. The model |
| jaroslav@1209 | 29 |
is written in Java language with the help of |
| jaroslav@1209 | 30 |
<a href="http://bck2brwsr.apidesign.org/javadoc/net.java.html.json/"> |
| jaroslav@1209 | 31 |
Knockout/Java binding library |
| jaroslav@1209 | 32 |
</a>. The Java source code has about 180 lines and seems more |
| jaroslav@1209 | 33 |
dense and shorter than the original JavaScript model. |
| jaroslav@1201 | 34 |
</p> |
| jaroslav@1205 | 35 |
<p> |
| jaroslav@1205 | 36 |
The project has two profiles. Either it executes in real Java virtual |
| jaroslav@1205 | 37 |
machine and renders using JavaFX's WebView (use <code>fxbrwsr</code> profile |
| jaroslav@1205 | 38 |
- the default). It can also run directly in a browser via |
| jaroslav@1205 | 39 |
<a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a> virtual machine |
| jaroslav@1205 | 40 |
(use <code>bck2brwsr</code> profile). |
| jaroslav@1205 | 41 |
</p> |
| jaroslav@1201 | 42 |
|
| jaroslav@1202 | 43 |
<div class='liveExample'> |
| jaroslav@1202 | 44 |
<div class='configuration'> |
| jaroslav@1202 | 45 |
<div class='listChooser'> |
| jaroslav@1202 | 46 |
<button data-bind='click: deleteList, enable: activeTweetersName'>Delete</button> |
| jaroslav@1202 | 47 |
<button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button> |
| jaroslav@1202 | 48 |
<select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select> |
| jaroslav@1202 | 49 |
</div> |
| jaroslav@1202 | 50 |
|
| jaroslav@1202 | 51 |
<p>Currently viewing <span data-bind='text: activeTweetersCount'> </span> user(s):</p> |
| jaroslav@1202 | 52 |
<div class='currentUsers' > |
| jaroslav@1202 | 53 |
<ul data-bind='foreach: activeTweeters'> |
| jaroslav@1202 | 54 |
<li> |
| jaroslav@1202 | 55 |
<button data-bind='click: $root.removeUser'>Remove</button> |
| jaroslav@1202 | 56 |
<div data-bind='text: $data'> </div> |
| jaroslav@1202 | 57 |
</li> |
| jaroslav@1202 | 58 |
</ul> |
| jaroslav@1202 | 59 |
</div> |
| jaroslav@1202 | 60 |
|
| jaroslav@1202 | 61 |
<form data-bind='submit: addUser'> |
| jaroslav@1202 | 62 |
<label>Add user:</label> |
| jaroslav@1202 | 63 |
<input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
|
| jaroslav@1202 | 64 |
<button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button> |
| jaroslav@1202 | 65 |
</form> |
| jaroslav@1202 | 66 |
</div> |
| jaroslav@1202 | 67 |
<div class='tweets'> |
| jaroslav@1213 | 68 |
<div class='loadingIndicator' data-bind="visible: loading">Loading...</div> |
| jaroslav@1202 | 69 |
<table data-bind='foreach: currentTweets' width='100%'> |
| jaroslav@1202 | 70 |
<tr> |
| jaroslav@1202 | 71 |
<td><img data-bind='attr: { src: profile_image_url }' /></td>
|
| jaroslav@1202 | 72 |
<td> |
| jaroslav@1202 | 73 |
<a class='twitterUser' data-bind='attr: { href: userUrl }, text: from_user'> </a>
|
| jaroslav@1202 | 74 |
<span data-bind='html: html'> </span> |
| jaroslav@1202 | 75 |
<div class='tweetInfo' data-bind='text: created_at'> </div> |
| jaroslav@1202 | 76 |
</td> |
| jaroslav@1202 | 77 |
</tr> |
| jaroslav@1202 | 78 |
</table> |
| jaroslav@1202 | 79 |
</div> |
| jaroslav@1202 | 80 |
</div> |
| jaroslav@1201 | 81 |
|
| jaroslav@1201 | 82 |
<script src="bck2brwsr.js"></script> |
| jaroslav@1201 | 83 |
<script type="text/javascript"> |
| jaroslav@1205 | 84 |
var vm = bck2brwsr('${artifactId}-${version}.jar');
|
| jaroslav@1205 | 85 |
vm.loadClass('${package}.TwitterClient');
|
| jaroslav@1201 | 86 |
</script> |
| jaroslav@1202 | 87 |
|
| jaroslav@1202 | 88 |
|
| jaroslav@1201 | 89 |
</body> |
| jaroslav@1201 | 90 |
</html> |