javaquery/demo-twitter/src/main/resources/org/apidesign/bck2brwsr/demo/twitter/index.html
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/javaquery/demo-twitter/src/main/resources/org/apidesign/bck2brwsr/demo/twitter/index.html Thu Apr 04 13:12:17 2013 +0200
1.3 @@ -0,0 +1,99 @@
1.4 +<?xml version="1.0" encoding="UTF-8"?>
1.5 +<!--
1.6 +
1.7 + Back 2 Browser Bytecode Translator
1.8 + Copyright (C) 2012 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
1.9 +
1.10 + This program is free software: you can redistribute it and/or modify
1.11 + it under the terms of the GNU General Public License as published by
1.12 + the Free Software Foundation, version 2 of the License.
1.13 +
1.14 + This program is distributed in the hope that it will be useful,
1.15 + but WITHOUT ANY WARRANTY; without even the implied warranty of
1.16 + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
1.17 + GNU General Public License for more details.
1.18 +
1.19 + You should have received a copy of the GNU General Public License
1.20 + along with this program. Look for COPYING file in the top folder.
1.21 + If not, see http://opensource.org/licenses/GPL-2.0.
1.22 +
1.23 +-->
1.24 +
1.25 +<!--
1.26 + Copied from knockout.js Twitter example:
1.27 + http://knockoutjs.com/examples/twitter.html
1.28 +-->
1.29 +
1.30 +<!DOCTYPE html>
1.31 +<html xmlns="http://www.w3.org/1999/xhtml">
1.32 + <head>
1.33 + <title>Bck2Brwsr's Twitter</title>
1.34 + </head>
1.35 + <body>
1.36 + <link href='twitterExample.css' rel='Stylesheet' ></link>
1.37 +
1.38 + <script src='twitterApi.js' type='text/javascript'> </script>
1.39 +
1.40 + <style type='text/css'>
1.41 + .liveExample select { height: 1.7em; }
1.42 + .liveExample button { height: 2em; }
1.43 + </style>
1.44 +
1.45 +
1.46 + <h2>Bck2Brwsr's Twitter</h2>
1.47 +
1.48 + <p>
1.49 + This code based on original <a href="http://knockoutjs.com/examples/twitter.html">knockout.js Twitter example</a> and
1.50 + uses almost unmodified HTML code. It just changes the model. It
1.51 + is written in Java language and it is executed using <a href="http://bck2brwsr.apidesign.org">Bck2Brwsr</a>
1.52 + virtual machine.
1.53 + </p>
1.54 +
1.55 + <div class='liveExample'>
1.56 + <div class='configuration'>
1.57 + <div class='listChooser'>
1.58 + <button data-bind='click: deleteList, enable: activeTweeters.name'>Delete</button>
1.59 + <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>Save</button>
1.60 + <select data-bind='options: savedLists, optionsValue: "name", value: activeTweetersName'> </select>
1.61 + </div>
1.62 +
1.63 + <p>Currently viewing <span data-bind='text: activeTweeters().userNames().length'> </span> user(s):</p>
1.64 + <div class='currentUsers' data-bind='with: activeTweeters'>
1.65 + <ul data-bind='foreach: userNames'>
1.66 + <li>
1.67 + <button data-bind='click: $root.removeUser'>Remove</button>
1.68 + <div data-bind='text: $data'> </div>
1.69 + </li>
1.70 + </ul>
1.71 + </div>
1.72 +
1.73 + <form data-bind='submit: addUser'>
1.74 + <label>Add user:</label>
1.75 + <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
1.76 + <button data-bind='enable: userNameToAddIsValid' type='submit'>Add</button>
1.77 + </form>
1.78 + </div>
1.79 + <div class='tweets'>
1.80 + <div class='loadingIndicator'>Loading...</div>
1.81 + <table data-bind='foreach: currentTweets' width='100%'>
1.82 + <tr>
1.83 + <td><img data-bind='attr: { src: profile_image_url }' /></td>
1.84 + <td>
1.85 + <a href='http://twitter.com/${ from_user }' class='twitterUser' data-bind='attr: { href: "http://twitter.com/" + from_user }, text: from_user'> </a>
1.86 + <span data-bind='text: text'> </span>
1.87 + <div class='tweetInfo' data-bind='text: created_at'> </div>
1.88 + </td>
1.89 + </tr>
1.90 + </table>
1.91 + </div>
1.92 + </div>
1.93 +
1.94 + <script src="bck2brwsr.js"></script>
1.95 + <script type="text/javascript">
1.96 + var vm = bck2brwsr('demo-twitter-0.6-SNAPSHOT.jar');
1.97 + vm.loadClass('org.apidesign.bck2brwsr.demo.twitter.TwitterClient');
1.98 + </script>
1.99 +
1.100 +
1.101 + </body>
1.102 +</html>