commit a prototype of the new UI using RenderJS.

dream/platform/static/css/css.css

+.bold {
+  font-weight: bold;
+}
+.note {
+  font-weight: bold;
+  display: block;
+}
+.center {
+  display: block;
+  text-align: center;
+}
+.left {
+  display: block;
+  text-align: left;
+}
+.right {
+  display: block;
+  text-align: right;
+}
+.starred {
+  color: #0FBABD;
+}
+.large {
+  font-size: 125%;
+}
+.ui-popup .file {
+  max-width: 70%;
+}
+
+.inline {
+  max-width: 50%;
+  margin: 0 auto;
+}
+.inline a.ui-btn:after {
+  font-size: .9em;
+}
+@media (max-width: 40em) {
+  .inline {
+    max-width: 70%;
+    margin: 0 auto;
+  }
+}
+.alert {
+  color: red;
+  font-weight: bold;
+}
+.alert textarea {
+  color: red !important;
+  font-weight: normal;
+}
+.alert label {
+  display: block;
+  width: 100%;
+  float: none;
+}
+tbody .alert,
+tbody .proceed,
+tbody .large {
+  display: block;
+  text-align: center
+}
+@media (max-width: 40em) {
+  tbody .alert,
+  tbody .proceed {
+    font-size: 1.5em;
+  }
+}
+.proceed {
+  color: #0FBABD;
+  font-weight: bold;
+}
+.static {
+  cursor: default;
+}
+.input_board {
+  margin: 0;
+}
+.input_board .ui-controlgroup-controls {
+  width: 100%;
+}
+.input_board .ui-controlgroup-controls .ui-input-text input {
+  box-shadow: 0 0 2px #999999 inset;
+  -webkit-box-shadow: 0 0 2px #999999 inset;
+}
+.button_board {
+  text-align: center;
+}
+
+a.confirm, a.action {
+  font-weight: bold !important;
+}
+.profile {
+  display: inline-block;
+  border: 1px solid;
+}
+@media (max-width: 40em) {
+  .profile {
+    margin-top: 1em;
+  }
+}
+.profile img {
+  padding-right: 1em;
+  float: left;
+  vertical-align: middle;
+  max-width: 120px;
+}
+.tag {
+  margin: 0;
+  font-size: 200%;
+}
+  /* Modified on BASE */
+.mini {
+  font-size: 80%;
+}
+@media (max-width: 40em) {
+  .tag {
+    margin: 0;
+    font-size: 150%;
+  }
+}
+.downloads:before {
+  content: "·";
+}
+.inline-icon {
+  padding: 0 .5em;
+}
+.logo_wrap {
+  margin-top: 0em;
+  margin-bottom: 2em;
+  padding: 0.5em;
+  text-align: center;
+}
+.logo_wrap img {
+  max-height: 8em;
+}
+@media (max-width: 40em) {
+  .logo_wrap {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  .logo_wrap img {
+    max-height: 7em;
+  }
+}
+@media (max-width: 30em) {
+  .logo_wrap {
+    margin-top: .5em;
+    margin-bottom: .5em;
+  }
+}
+@media (max-width: 20em) {
+  .logo_wrap {
+    margin-top: .25em;
+    margin-bottom: .25em;
+  }
+}
+/* custom signin buttons: thx Zocial http://zocial.smcllns.com/ */
+.signin_google,
+.signin_google:visited {
+  background: #DD4B39 !important;
+  color: #fff !important;
+  text-shadow: none !important;
+  cursor: pointer !important;
+}
+.signin_fb,
+.signin_fb:visited {
+  background: #4863ae !important;
+  color: #fff !important;
+  text-shadow: none !important;
+  cursor: pointer !important;
+}
+.signin_fb:hover,
+.signin_fb:active,
+.signin_fb.ui-btn-active,
+.signin_google:hover,
+.signin_google:active,
+.signin_google.ui-btn-active {
+  background-image: -webkit-gradient(linear, center bottom, center top, from(rgba(255, 255, 255, 0.1)), color-stop(0.30, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.1))) !important;
+  background-image: -webkit-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
+  background-image: -ms-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
+  background-image: -moz-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
+  background-image: -o-linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
+  background-image: linear-gradient(center bottom , rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%, transparent 50%, rgba(0, 0, 0, 0.1)) !important;
+}
+.signin_google:focus,
+.signin_google.ui-focus
+.signin_fb:focus,
+.signin_fb.ui-focus {
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.popup_element {
+  padding-top: .75em;
+  padding-left: .75em;
+  padding-right: .75em;
+}
+.popup_element p {
+  margin-bottom: 0.15em;
+}
+.content_element {
+  display: inline-block;
+  vertical-align: top;
+  width: 45%;
+  padding-left: 2%;
+  padding-right: 2%;
+  /* ~ 98% for 2 col layout */
+  padding-top: 2%;
+}
+.content_element_fullscreen {
+  width: 96% /* 2% padding-left/right */
+}
+/* is this padding really necessary? */
+.content_element .ui-controlgroup-vertical,
+.content_element .ui-controlgroup-horizontal,
+.content_element form {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  vertical-align: middle;
+}
+@media (max-width: 40em) {
+  .content_element {
+    width: 100%;
+    padding: 0;
+  }
+}
+.content_element .ui-input-search {
+  width: 50%;
+}
+@media (max-width: 45em) {
+  .content_element .ui-input-search {
+    width: 60%;
+  }
+}
+@media (max-width: 30em) {
+  .content_element .ui-input-search {
+    width: 65%;
+  }
+}
+@media (max-width: 20em) {
+  .content_element .ui-input-search{
+    width: 70%;
+  }
+}
+.panel .ui-panel-inner .panel_element {
+  margin-left: -1em;
+  margin-right: -1em;
+}
+.panel .ui-panel-inner .panel_element.panel_element_first {
+  margin-top: -1em;
+}
+.panel .ui-panel-inner .panel_element.panel_element_last {
+  margin-bottom: -1em;
+}
+.panel .panel_element.panel_header {
+  border-width: 0;
+  padding-top: 1px;
+  top: -1px;
+}
+
+/* navbar */
+.navbar ul li a.ui-btn-active.clone_item span.navbar_clone {
+  font-weight: bold;
+}
+
+div.ui-content > iframe {
+    height: 500px;
+    min-width: 1300px;
+}
+
+div.ui-content2 > iframe {
+    height: 500px;
+    min-width: 1300px;
+}
\ No newline at end of file

dream/platform/static/css/normalize.css

+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background: transparent;
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

dream/platform/static/gadget/graph.html

+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>DREAM</title>
+  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
+  <link rel="stylesheet" href="../css/dream2.css">
+
+  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
+  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
+
+  <script type="text/javascript" src="../lib/jquery.ui.touch-punch.min.js"></script>
+  <script type="text/javascript" src="../lib/jschannel.js"></script>
+  <script type="text/javascript" src="../lib/renderjs.js"></script>
+  <script type="text/javascript" src="../lib/md5.js"></script>
+  <script type="text/javascript" src="../lib/jio.js"></script>
+  <script type="text/javascript" src="../lib/jio.localstorage.js"></script>
+  <script type="text/javascript" src="../lib/pubsub.js"></script>
+  <script type="text/javascript" src="../lib/jquery.jsPlumb-1.5.3-min.js"></script>
+  <script type="text/javascript" src="../lib/jquery.jsoneditor.js"></script>
+  <script type="text/javascript" src="../js/gadget_dream.js"></script>
+
+</head>
+
+<body>
+  <div data-role="page" class="ui-responsive-panel">
+    <div id="main"></div>
+
+    <div>
+      <textarea rows="20" cols="47" id="debug_zone" style="align:left"></textarea>
+      <button id="load_json">Load JSON</button>
+    </div>
+  </div>
+
+  <div data-role="page" data-url="dialog.html" id="dialog">
+    <div data-role="header">
+      <h1>Properties</h1>
+    </div>
+    <div data-role="content">
+      <p>XXX property editor screeen will be implemented here.</p>
+      <fieldset id="dialog-fieldset">
+      </fieldset>
+      <a href="#" data-role="button" data-rel="back" data-theme="b">Validate</a>
+      <a href="#" data-role="button" data-rel="back" data-theme="c">Deleve</a>
+      <a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a>
+    </div>
+  </div>
+
+</body>
+
+</html>

dream/platform/static/gadget/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Nexedi ERP5 | Computers</title>
+
+    <!-- TODO: gadget mobile meta -->
+    <!-- TODO: schema.org? -->
+    <!-- TODO: all JQM widgets should have enhanced markup vs
+         letting JQM enhance -->
+    <!-- normalize -->
+    <link rel="stylesheet" href="../css/normalize.css">
+    <!-- JQM structure -->
+    <link rel="stylesheet" href="../css/jquery.mobile.css">
+    <!-- JQM extensions -->
+    <link rel="stylesheet" href="../css/extensions.css">
+    <!-- fontawesome icons -->
+    <link rel="stylesheet" href="../css/fontawesome.css">
+    <!-- JQM custom themes (slapos-white, slapos-black, slapos-active) -->
+    <link rel="stylesheet" href="../css/themes.css">
+    <!-- generic CSS -->
+    <link rel="stylesheet" href="../css/css.css"> 
+    <!-- Jquery, JQM, JQM extensions -->
+    <script src="../lib/jquery.js" type="text/javascript"></script>
+    <script src="../lib/jquery.mobile.js" type="text/javascript"></script>
+    <script src="../lib/extensions.js" type="text/javascript"></script>
+    <!-- renderjs -->
+    <script src="../lib/jschannel.js" type="text/javascript"></script>
+    <script src="../lib/renderjs.js" type="text/javascript"></script>
+    <!-- route -->
+    <script src="../lib/route.js" type="text/javascript"></script>
+    <script src="../lib/url.js" type="text/javascript"></script>
+    <!-- custom script -->
+    <!--script src="../js/erp5_loader.js" type="text/javascript"></script-->
+    <script src="../js/gadget_index.js" type="text/javascript"></script>
+  </head>
+  <body>
+
+    <div id="computers" data-role="page" data-theme="slapos-white">
+
+      <!-- left panel -->
+      <div data-role="panel" id="menu_computers" data-theme="slapos-black"
+           class="panel" data-position="left" data-display="push">
+        <div class="panel_element panel_element_first panel_header">
+          <!--input type="search" data-role="button" value=""
+                 placeholder="Search" class="panel_search" /-->
+          <a href="#menu" class="panel-close" data-role="button"
+             data-iconpos="notext" data-icon="remove"
+             data-rel="close">Close</a>
+        </div>
+
+        <!--div class="panel_element">
+          <ul data-role="listview" class="listview" data-theme="slapos-black">
+            <li data-role="list-divider">Modules</li>
+            <li class="listview_item listview_icon">
+              <a href="webpages.html">
+                <span
+                  class="ui-li-icon ui-li-icon-custom ui-icon-file-alt ui-icon"
+                    >&nbsp;</span>
+                <h3>Webpages</h3>
+                <p>Generated Webpages</p>
+              </a>
+            </li>
+          </ul>
+        </div-->
+
+        <div class="panel_element">
+          <ul data-role="listview" class="listview" data-theme="slapos-black">
+            <li data-role="list-divider">Connection</li>
+            <li class="listview_item listview_icon">
+              <a href="#/login/">
+    <span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
+      >&nbsp;</span>
+                <h3>Login</h3>
+              </a>
+            </li>
+            <li data-role="list-divider">Dream</li>
+            <li class="listview_item listview_icon">
+              <a href="#/graph/">
+    <span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
+      >&nbsp;</span>
+                <h3>Graph editor</h3>
+              </a>
+            </li>
+            <li class="listview_item listview_icon">
+              <a href="#/simulation/">
+    <span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
+      >&nbsp;</span>
+                <h3>Simulation</h3>
+              </a>
+            </li>
+            <li data-role="list-divider">General</li>
+            <li class="listview_item listview_icon">
+              <a href="#/about/">
+    <span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
+      >&nbsp;</span>
+                <h3>About</h3>
+              </a>
+            </li>
+            <li class="listview_item listview_icon">
+              <a href="#/contact/">
+    <span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
+      >&nbsp;</span>
+                <h3>Contact Us</h3>
+              </a>
+            </li>
+            <!--li class="listview_item listview_icon">
+              <a href="">
+    <span class="ui-li-icon ui-li-icon-custom ui-icon-folder-open-alt ui-icon"
+      >&nbsp;</span>
+                <h3>Software</h3>
+              </a>
+            </li>
+            <li class="listview_item listview_icon">
+              <a href="">
+              <span class="ui-li-icon ui-li-icon-custom ui-icon-book ui-icon"
+                >&nbsp;</span>
+              <h3>Documentation</h3>
+              </a>
+            </li>
+            <li class="listview_item listview_icon">
+              <a href=""><span
+          class="ui-li-icon ui-li-icon-custom ui-icon-cloud-download ui-icon"
+                >&nbsp;</span><h3>Download</h3></a></li>
+            <li class="listview_item listview_icon"><a href=""><span
+              class="ui-li-icon ui-li-icon-custom ui-icon-comments ui-icon"
+              >&nbsp;</span><h3>Forum</h3></a></li>
+            <li class="listview_item listview_icon"><a href=""><span
+              class="ui-li-icon ui-li-icon-custom ui-icon-microphone ui-icon"
+              >&nbsp;</span><h3>Blog</h3></a></li-->
+          </ul>
+        </div>
+        <div class="panel_element" data-theme="slapos-black">
+          <ul class="list mini">
+            <li><a href="http://nexedi.com/">Nexedi &copy; 2013</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <!-- gadget header -->
+      <div id="headergadget" data-role="header" data-position="fixed">
+        <div class="wrap left">
+          <div data-role="controlgroup" data-type="horizontal"
+               class="buttongroup">
+            <a href="#menu_computers" data-rel="panel" data-role="button"
+               data-icon="reorder" class="responsive">Navigate</a>
+          </div>
+        </div>
+        <h1 class="ui-title"></h1>
+        <div class="wrap right">
+          <div data-role="controlgroup" data-type="horizontal"
+               class="buttongroup">
+            <a href="#/login/" data-position-to="window" data-role="button"
+               data-icon="user" class="responsive">Login</a>
+          </div>
+        </div>
+      </div>
+
+      <div id="iogadget"></div>
+      
+      <!-- content -->
+      <div class="ui-content">
+          <!--table class="erp5_table" data-type="Computer">
+          </table-->
+      </div>
+      <!-- IO manager -->
+      <!-- <div id="io" class="wrap left buttongroup" data-type="horizontal" data-role="controlgroup"> -->
+      <!--   <div data-role="fieldcontain"> -->
+      <!--     <textarea name="Filename" id="io-doc" placeholder="Filename"></textarea> -->
+      <!--   </div> -->
+      <!--   <span href="" id="save-doc" data-role="button" href="#page1"> -->
+      <!--     Save -->
+      <!--   </span> -->
+      <!--   <span href="" id="load-doc" data-role="button" href="#page1"> -->
+      <!--     Load -->
+      <!--   </span> -->
+      <!--   <span href="" id="new-doc" data-role="button" href="#page1"> -->
+      <!--     New -->
+      <!--   </span>   -->
+      <!-- </div> -->
+      <!-- Interactor -->
+      <div id="interactorgadget"></div>
+
+      <!-- footer -->
+      <div id="footergadget" data-role="footer" data-position="fixed">
+        <div data-role="navbar" class="navbar">
+            <!--ul>
+              <li>
+                <a href="#" data-rel="popup" data-icon="compass">Browse</a>
+              </li>
+              <li>
+                <a class="new_item" href="computer.html?mode=add"
+                   data-rel="popup" data-icon="plus">
+                   <span class="navbar_add">Add</span>/<span
+                     class="navbar_clone">Clone</span>
+                 </a>
+               </li>
+              <li><a class="remove_item" href="#" data-rel="popup"
+                     data-icon="minus">Remove</a></li>
+              <li><a href="#" data-rel="popup" data-icon="cog">Action</a></li>
+              <li><a href="#" data-rel="popup"
+                     data-icon="share">Import/Export</a></li>
+            </ul-->
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript">
+      // force reload iframe in development environment
+      //$('#ui-content iframe').first().contentWindow.location.reload(true);
+    </script>
+  </body>
+</html>

dream/platform/static/gadget/io.html

+<html>
+  <head>
+    <title>IO</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+
+    <!-- Jquery -->
+    <script src="../lib/jquery.js" type="text/javascript"></script>
+    <!-- renderjs -->
+    <script src="../lib/jschannel.js" type="text/javascript"></script>
+    <script src="../lib/renderjs.js" type="text/javascript"></script>
+
+    <!-- JIO -->
+    <script src="../lib/md5.amd.js" type="text/javascript"></script>
+    <script src="../lib/jio.js" type="text/javascript"></script>
+    <script src="../lib/complex_queries.js" type="text/javascript"></script>
+    <script src="../lib/localstorage.js" type="text/javascript"></script>
+
+    <script src="../js/gadget_io.js" type="text/javascript"></script>
+
+    <link rel="http://www.renderjs.org/rel/interface"
+          href="http://www.renderjs.org/interface/io"/>
+  </head>
+  <body>
+    <input type="text" name="fileName" id="svg-edit_docid" value="" placeholder="File name here">
+    <button id="save-doc" type="submit" class="btn btn-primary">
+      <i class="icon-download-alt icon-white"></i>
+      Save
+    </button>
+    <button id="load-doc" type="submit" class="btn btn-primary">
+      <i class="icon-download-alt icon-white"></i>
+      Load
+    </button>
+    <button id="new-doc" type="submit" class="btn btn-primary">
+      <i class="icon-download-alt icon-white"></i>
+      New document
+    </button>
+  </body>
+</html>

dream/platform/static/gadget/login.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Login</title>
+
+    <!-- Jquery -->
+    <script src="../lib/jquery.js" type="text/javascript"></script>
+    <!-- renderjs -->
+    <script src="../lib/jschannel.js" type="text/javascript"></script>
+    <script src="../lib/renderjs.js" type="text/javascript"></script>
+    <!-- custom script -->
+    <script src="../js/gadget_login.js" type="text/javascript"></script>
+  </head>
+  <body>
+
+    <div class="content_element">
+      <h2>Login</h2>
+
+      <p>Please enter your jIO localstorage username and validate.</p>
+      <form id="connect">
+        <input type="text" value="" name="username"
+               placeholder="jIO local username" spellcheck="false"
+               required autofocus="autofocus" />
+        <input type="submit" value="Login" data-inline="True" />
+      </form>
+
+    </div>
+
+  </body>
+</html>

dream/platform/static/js/gadget_dream.js

+/* ===========================================================================
+ * Copyright 2013 Nexedi SA and Contributors
+ *
+ * This file is part of DREAM.
+ *
+ * DREAM is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * DREAM is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with DREAM.  If not, see <http://www.gnu.org/licenses/>.
+ * =========================================================================== */
+
+/*jslint indent: 2, maxlen: 80, nomen: true */
+/*global window, jQuery, rJS*/
+
+(function (window, $, rJS) {
+  "use strict";
+
+  $.widget("dream.grapheditor", {
+    options: {
+      node_class: "graph_node", // CSS class for nodes
+      node_data_key: "grapheditor_node_data", // Key to store data on nodes using $.data
+      // XXX is it good idea to use
+      // $.data ???
+      draggable_nodes: true // Can nodes be dragged
+    },
+
+    _create: function () {
+      this.nodes = {};
+      this.edges = {};
+
+      if (this.options.graph) {
+        this.graph(this.options.graph);
+      }
+    },
+
+    destroy: function () {
+      this.clear();
+      this._destroy();
+    },
+
+    clear: function () {
+      this.edges = {};
+      $.each(this.nodes, $.proxy(function (node_id, node) {
+        jsPlumb.remove(node);
+        delete(this["nodes"][node_id]);
+      }, this));
+    },
+
+    create_node_element: function (node_id, node_data) {
+      // Create an element for a node, and add it to the main element.
+      return $('<div>')
+        .uniqueId()
+        .addClass(this.options.node_class)
+        .text(node_data['name'] || node_id)
+        .appendTo(this.element);
+    },
+
+    add_node: function (node_id, node_data) {
+      /* add a node */
+      var element = this.create_node_element(node_id, node_data);
+      if (this.options.draggable_nodes) {
+        // make the node draggable
+        jsPlumb.draggable(element, {
+          containment: this.element,
+          stop: $.proxy(function (node_id, event) {
+            this.node_position(node_id, this.node_position(node_id));
+            this._trigger("node_moved", event, node_id);
+          }, this, node_id)
+        });
+      }
+      this.nodes[node_id] = element;
+      this.node_position(node_id, node_data);
+      this.node_data(node_id, node_data);
+      this._trigger('node_added', node_id);
+    },
+
+    create_edge_element: function (edge_id, source_node_id,
+      destination_node_id, edge_data) {
+      // Create an element for an edge
+      var edge_label = edge_data['name'] || "";
+      jsPlumb.connect({
+        source: this.nodes[source_node_id].attr("id"),
+        target: this.nodes[destination_node_id].attr("id"),
+        paintStyle: {
+          lineWidth: 1,
+          strokeStyle: "#000"
+        }, // XXX make this an option
+        overlays: [
+          ["Label", {
+            label: edge_label
+          }]
+        ]
+      });
+    },
+
+    add_edge: function (edge_id, source_node_id, destination_node_id,
+      edge_data) {
+      /* add an edge */
+      this.create_edge_element(edge_id, source_node_id,
+        destination_node_id, edge_data);
+      this.edges[edge_id] = [source_node_id, destination_node_id,
+        edge_data
+      ];
+      this._trigger('edge_added', edge_id);
+    },
+
+    node_data: function (node_id, node_data) {
+      /* get or set data for a node */
+      var node = this.nodes[node_id];
+      if (node_data === undefined) {
+        return node.data(this.options.node_data_key);
+      }
+      this.nodes[node_id].data(this.options.node_data_key, node_data);
+      this._trigger("node_data_changed", node_id);
+      return this;
+    },
+
+    edge_data: function (edge_id, edge_data) {
+      /* get or set data for an edge */
+      var edge = this.edges[edge_id];
+      if (edge_data === undefined) {
+        return edge[2];
+      }
+      this.edges[edge_id] = [edge[0], edge[1], edge_data];
+      this._trigger("edge_data_changed", edge_id);
+      return this;
+    },
+
+    node_position: function (node_id, position) {
+      /* Get or set the position of a node with position given on a 0..1 scale */
+      var node = this.nodes[node_id],
+        node_position = node.position(),
+        element_position = this.element.position();
+      if (position === undefined) {
+        return {
+          "top": (node_position.top - element_position.top) / (this.element
+            .height() - node.height()),
+          "left": (node_position.left - element_position.left) / (this.element
+            .width() - node.width())
+        };
+      }
+      node.css({
+        "top": element_position.top +
+          Math.floor(position.top * (this.element.height() - node.height())) +
+          "px",
+        "left": element_position.left +
+          Math.floor(position.left * (this.element.width() - node.width())) +
+          "px"
+      });
+      // update node data with position
+      this.node_data(node_id, $.extend(this.node_data(node_id), {
+        top: position.top,
+        left: position.left
+      }));
+      jsPlumb.repaintEverything();
+      return this;
+    },
+
+    graph: function (value) {
+      // get or set the graph data
+      if (value === undefined) {
+        // get
+        var graph = {
+          "nodes": {},
+          "edges": {}
+        };
+        $.each(this.nodes, $.proxy(function (node_id, node) {
+          graph["nodes"][node_id] = node.data(this.options.node_data_key);
+        }, this));
+        $.each(this.edges, $.proxy(function (edge_id, edge) {
+          graph["edges"][edge_id] = this.edges[edge_id];
+        }, this));
+        return graph;
+      }
+
+      this.clear();
+      $.each(value.nodes, $.proxy(function (node_id, node) {
+        this.add_node(node_id, node);
+      }, this));
+      $.each(value.edges, $.proxy(function (edge_id, edge) {
+        this.add_edge(edge_id, edge[0], edge[1], edge[2] || {});
+      }, this));
+      return this;
+    }
+  });
+
+  jsPlumb.bind("ready", function () {
+
+    /* Initialize jsPlumb defaults
+     */
+    // TODO: default for connections ?
+    jsPlumb.setRenderMode(jsPlumb.SVG);
+    jsPlumb.importDefaults({
+      Endpoint: ["Dot", {
+        radius: 2
+      }],
+      ConnectionOverlays: [
+        ["Arrow", {
+          location: 1,
+          width: 10
+        }]
+      ],
+      Anchor: "Continuous"
+    });
+
+    $.getJSON("../JSONInputs/Topology01.json", function (data) {
+      $("#main").grapheditor({
+        graph: data,
+        node_moved: function (event, node_id) {
+          $("#debug_zone").val(JSON.stringify(
+            $("#main").grapheditor("graph"), undefined, " "));
+        }
+      });
+
+      // Access the nodes
+      var grapheditor = $("#main").data("dreamGrapheditor");
+      $.each(grapheditor.nodes, function (node_id, node) {
+        // test: click to add a property
+        node.click(function (e) {
+          $.mobile.changePage("#dialog", {
+            role: "dialog"
+          });
+          $("#main").grapheditor("node_data", node_id,
+            $.extend($("#main").grapheditor("node_data", node_id), {
+              "dbclick": 1
+            }));
+        });
+      });
+
+      // reload from json
+      $("#load_json").click(function () {
+        $("#main").grapheditor("graph",
+          JSON.parse($("#debug_zone").val()));
+      });
+
+    });
+
+  });
+
+  function init() {
+  }
+
+  rJS(window).declareMethod('getContent', function () {
+    return JSON.stringify($('#main').grapheditor('graph'), undefined, ' ');
+  })
+
+    .declareMethod('setContent', function (content) {
+      $('#main').grapheditor('graph', JSON.parse(content));
+    })
+
+    .declareMethod('clearContent', function () {
+      $('#main').grapheditor('clear');
+    })
+
+    .ready(function () {
+      init.apply(rJS(this));
+    });
+
+}(window, jQuery, rJS));
+
+

dream/platform/static/js/gadget_index.js

+/*global window, jQuery, rJS */
+"use strict";
+(function (window, $, rJS) {
+
+  $.mobile.ajaxEnabled = false;
+  $.mobile.linkBindingEnabled = false;
+  $.mobile.hashListeningEnabled = false;
+  $.mobile.pushStateEnabled = false;
+
+  rJS(window).ready(function () {
+    var g = rJS(this),
+      body = g.context,
+      main_context = g.context.find('.ui-content').first(),
+      ioGadgetConfig = {"type": "local",
+                        "username": "officejs",
+                        "application_name": "officejs"
+                       },
+      jioGadget;
+
+    function setTitle(title) {
+      g.context.find("#headergadget").find("h1").text(title);
+      return $('title').text("OfficeJS | " + title);
+    }
+
+    function enhanceGadgetRendering(gadget) {
+      gadget.context.enhanceWithin();
+      return gadget.getTitle()
+        .then(setTitle);
+    }
+
+    function registerSaveButton(gadget) {
+      window.jqs = gadget;
+      $("#save-doc").click(function () {
+        var fileName = $("#iogadget input").val();
+        jioGadget.configureIO(ioGadgetConfig, fileName)
+          .then(gadget.getContent)
+          .then(function (o) {jioGadget.setIO(o); });
+      });
+      return gadget;
+    }
+
+    function registerLoadButton(gadget) {
+      $("#load-doc").click(function () {
+        var fileName = $("#iogadget input").val();
+        jioGadget.configureIO(ioGadgetConfig, fileName)
+          .then(jioGadget.getIO)
+          .then(gadget.setContent);
+      });
+      return gadget;
+    }
+
+    function registerClearButton(gadget) {
+      $("#new-doc").click(function () {
+        gadget.clearContent();
+      });
+    }
+
+    function registerIOButtons(gadget) {
+      registerSaveButton(gadget);
+      registerLoadButton(gadget);
+      registerClearButton(gadget);
+    }
+
+    function initializeRoute() {
+      body
+        .route("add", "", 1)
+        .done(function () {
+          $.url.redirect('/login/');
+        });
+
+      body
+        .route("add", "/about/", 1)
+        .done(function () {
+          g.declareGadget('./about.html', main_context)
+            .then(enhanceGadgetRendering);
+        });
+
+      body
+        .route("add", "/contact/", 1)
+        .done(function () {
+          g.declareGadget('./contact.html', main_context)
+            .then(enhanceGadgetRendering);
+        });
+
+      body
+        .route("add", "/login/", 1)
+        .done(function () {
+          g.declareGadget('./login.html', main_context)
+            .then(enhanceGadgetRendering);
+        });
+
+      body
+        .route("add", "/graph/", 1)
+        .done(function () {
+          g.declareIframedGadget('./graph.html', main_context)
+            .then(registerIOButtons);
+        });
+
+      body
+        .route("add", "/simulation/", 1)
+        .done(function () {
+          g.declareIframedGadget('./simulation.html', main_context)
+            .then(registerIOButtons);
+        });
+    }
+
+    g.declareGadget('./io.html', g.context.find("#iogadget"))
+      .done(function (ioGadget) {
+        window.jio = ioGadget;
+        jioGadget = ioGadget;
+        // Trigger route change
+        initializeRoute();
+        $.url.onhashchange(function () {
+          body.route("go", $.url.getPath())
+            .fail(function () {
+              g.declareGadget('./error.html', main_context)
+                .then(enhanceGadgetRendering)
+                .then(initializeRoute);
+            });
+        });
+      });
+  });
+
+}(window, jQuery, rJS));

dream/platform/static/js/gadget_io.js

+/*global window, jQuery, jIO, rJS */
+/*jslint unparam: true*/
+"use strict";
+(function (window, $, jIO, rJS) {
+
+  var gk = rJS(window);
+
+  gk.declareMethod('configureIO', function (json_configuration, key) {
+    rJS(this).jio = jIO.newJio(json_configuration);
+    rJS(this).jio_key = key;
+    //console.log(rJS(this).jio);
+    return key;
+  })
+
+    .declareMethod('getIO', function () {
+      var deferred = $.Deferred(),
+        default_value = "",
+        gadget = rJS(this);
+
+      gadget.jio.getAttachment({
+        "_id": gadget.jio_key,
+        "_attachment": "body.txt"
+      }, function (err, response) {
+        if (err) {
+          if (err.status === 404) {
+            deferred.resolve(default_value);
+          } else {
+            deferred.reject(err);
+          }
+        } else {
+          //console.log("getIO: " + response);
+          deferred.resolve(response || default_value);
+        }
+      });
+
+      return deferred.promise();
+    })
+
+    .declareMethod('setIO', function (value) {
+      //console.log("couscous");
+      var deferred = $.Deferred(),
+        gadget = rJS(this);
+      gadget.jio.put({"_id": gadget.jio_key},
+        function (err, response) {
+          if (err) {
+            deferred.reject(err);
+          } else {
+            gadget.jio.putAttachment({
+              "_id": gadget.jio_key,
+              "_attachment": "body.txt",
+              "_data": value,
+
+              "_mimetype": "text/plain"
+            }, function (err, response) {
+              if (err) {
+                deferred.reject(err);
+              } else {
+                //console.log("putIO: " + value);
+                deferred.resolve();
+              }
+            });
+          }
+        });
+      return deferred.promise();
+    });
+
+}(window, jQuery, jIO, rJS));