Minor improvements of the edit module. Refactored HTML pages, added a menu, and login over HTTPS. Improved vertical layout of components a bit and added two sample composites.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1056190 13f79535-47bb-0310-9956-ffa450edef68

17 files changed, 446 insertions, 83 deletions

diff --git a/sca-cpp/trunk/modules/edit/Makefile.am b/sca-cpp/trunk/modules/edit/Makefile.am
index baa715b475..f2827ee8c5 100644
--- a/sca-cpp/trunk/modules/edit/Makefile.am
+++ b/sca-cpp/trunk/modules/edit/Makefile.am
@@ -16,7 +16,7 @@
 #  under the License.
 
 
-moddir = $(prefix)/modules/js
-nobase_dist_mod_DATA = htdocs/*.html htdocs/main/*.html htdocs/edit/*.html htdocs/edit/*.js
-EXTRA_DIST = htdocs/*.html htdocs/main/*.html htdocs/edit/*.html htdocs/edit/*.js
+moddir = $(prefix)/modules/edit
+nobase_dist_mod_DATA = htdocs/*.html htdocs/dash/*.html htdocs/edit/*.html htdocs/edit/*.js htdocs/login/*.html htdocs/logout/*.html
+EXTRA_DIST = htdocs/*.html htdocs/dash/*.html htdocs/edit/*.html htdocs/edit/*.js htdocs/login/*.html htdocs/logout/*.html
 
diff --git a/sca-cpp/trunk/modules/edit/domains/relay/app.composite b/sca-cpp/trunk/modules/edit/domains/relay/app.composite
index 8a02ed7cd7..1e5015315c 100644
--- a/sca-cpp/trunk/modules/edit/domains/relay/app.composite
+++ b/sca-cpp/trunk/modules/edit/domains/relay/app.composite
@@ -28,7 +28,7 @@
     <service name="HTML" promote="HTML"/>
     <service name="JSONFB" promote="JSONFB"/>
 
-    <component name="JSONTwit" color="red">
+    <component name="JSONTwit" t:color="red">
         <t:implementation.python script="relay.py"/>
         <service name="Relay">
             <t:binding.http uri="jsontwit"/>
@@ -38,7 +38,7 @@
         </reference>
     </component>
     
-    <component name="XMLTwit" color="green">
+    <component name="XMLTwit" t:color="green">
         <t:implementation.python script="relay.py"/>
         <service name="Relay">
             <t:binding.http uri="xmltwit"/>
@@ -48,7 +48,7 @@
         </reference>
     </component>
     
-    <component name="RSSTwit" color="blue">
+    <component name="RSSTwit" t:color="blue">
         <t:implementation.python script="relay.py"/>
         <service name="Relay">
             <t:binding.http uri="rsstwit"/>
@@ -58,7 +58,7 @@
         </reference>
     </component>
     
-    <component name="HTML" color="yellow">
+    <component name="HTML" t:color="yellow">
         <t:implementation.python script="relay.py"/>
         <service name="Relay">
             <t:binding.http uri="html"/>
@@ -68,7 +68,7 @@
         </reference>
     </component>
     
-    <component name="JSONFB" color="orange">
+    <component name="JSONFB" t:color="orange">
         <t:implementation.python script="relay.py"/>
         <service name="Relay">
             <t:binding.http uri="jsonfb"/>
diff --git a/sca-cpp/trunk/modules/edit/domains/store/app.composite b/sca-cpp/trunk/modules/edit/domains/store/app.composite
index 6db5af61ce..ec3fa32fa4 100644
--- a/sca-cpp/trunk/modules/edit/domains/store/app.composite
+++ b/sca-cpp/trunk/modules/edit/domains/store/app.composite
@@ -25,7 +25,7 @@
     <service name="Store" promote="Store"/>
     <service name="ShoppingCart" promote="ShoppingCart"/>
 
-    <component name="Store" color="green">
+    <component name="Store" t:color="green">
         <t:implementation.python script="store.py"/>
         <service name="Widget">
             <t:binding.http uri="store"/>
@@ -35,7 +35,7 @@
         <reference name="shoppingTotal" target="ShoppingCart"/>
     </component>
     
-    <component name="Catalog" color="yellow">
+    <component name="Catalog" t:color="yellow">
         <t:implementation.python script="fruits-catalog.py"/> 
         <property name="currencyCode">USD</property>
         <service name="Catalog">
@@ -44,7 +44,7 @@
         <reference name="currencyConverter" target="CurrencyConverter"/>
     </component> 
      
-    <component name="ShoppingCart" color="magenta">
+    <component name="ShoppingCart" t:color="magenta">
         <t:implementation.python script="shopping-cart.py"/>
         <service name="ShoppingCart">
             <t:binding.http uri="shoppingCart"/>
@@ -52,14 +52,14 @@
         <reference name="cache" target="Cache"/>
     </component>
     
-    <component name="CurrencyConverter" color="blue">
+    <component name="CurrencyConverter" t:color="blue">
         <t:implementation.python script="currency-converter.py"/>
         <service name="CurrencyConverter">
             <t:binding.jsonrpc uri="currencyConverter"/>
         </service>        
     </component>     
 
-    <component name="Cache" color="orange">
+    <component name="Cache" t:color="orange">
         <implementation.cpp path="../../components/cache" library="libmemcache"/>
         <service name="Cache">
             <t:binding.atom uri="cache"/>
diff --git a/sca-cpp/trunk/modules/edit/domains/store2/app.composite b/sca-cpp/trunk/modules/edit/domains/store2/app.composite
new file mode 100644
index 0000000000..afec3cb1d3
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/domains/store2/app.composite
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912"
+  xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"
+  targetNamespace="http://store"
+  name="store">
+
+    <service name="Store" promote="Store"/>
+    <service name="ShoppingCart" promote="ShoppingCart"/>
+
+    <component name="Store" t:color="green">
+        <t:implementation.python script="store.py"/>
+        <service name="Widget">
+            <t:binding.http uri="store"/>
+        </service>
+        <reference name="catalog" target="Catalog" t:align="bottom"/>
+        <reference name="shoppingCart" target="ShoppingCart"/>
+        <reference name="shoppingTotal" target="ShoppingCart"/>
+    </component>
+    
+    <component name="Catalog" t:color="yellow">
+        <t:implementation.python script="fruits-catalog.py"/> 
+        <property name="currencyCode">USD</property>
+        <service name="Catalog" t:align="top">
+            <t:binding.jsonrpc uri="catalog"/>
+        </service>
+        <reference name="currencyConverter" t:align="bottom" target="CurrencyConverter"/>
+    </component> 
+     
+    <component name="ShoppingCart" t:color="magenta">
+        <t:implementation.python script="shopping-cart.py"/>
+        <service name="ShoppingCart">
+            <t:binding.http uri="shoppingCart"/>
+        </service>        
+        <reference name="cache" target="Cache"/>
+    </component>
+    
+    <component name="CurrencyConverter" t:color="blue">
+        <t:implementation.python script="currency-converter.py"/>
+        <service name="CurrencyConverter" t:align="top">
+            <t:binding.jsonrpc uri="currencyConverter"/>
+        </service>        
+    </component>     
+
+    <component name="Cache" t:color="orange">
+        <implementation.cpp path="../../components/cache" library="libmemcache"/>
+        <service name="Cache">
+            <t:binding.atom uri="cache"/>
+        </service>
+        <property name="servers">localhost:11211</property>
+    </component>     
+
+</composite>
diff --git a/sca-cpp/trunk/modules/edit/domains/store3/app.composite b/sca-cpp/trunk/modules/edit/domains/store3/app.composite
new file mode 100644
index 0000000000..7cba2c19e1
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/domains/store3/app.composite
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912"
+  xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"
+  targetNamespace="http://store"
+  name="store">
+
+    <service name="Store" promote="Store"/>
+    <service name="ShoppingCart" promote="ShoppingCart"/>
+
+    <component name="Store" t:color="green">
+        <t:implementation.python script="store.py"/>
+        <service name="Widget">
+            <t:binding.http uri="store"/>
+        </service>
+        <reference name="catalog" target="Catalog"/>
+        <reference name="shoppingCart" target="ShoppingCart"/>
+        <reference name="shoppingTotal" target="ShoppingCart"/>
+    </component>
+    
+    <component name="Catalog" t:color="yellow">
+        <t:implementation.python script="fruits-catalog.py"/> 
+        <property name="currencyCode">USD</property>
+        <service name="Catalog">
+            <t:binding.jsonrpc uri="catalog"/>
+        </service>
+        <reference name="currencyConverter" t:align="bottom" target="CurrencyConverter"/>
+    </component> 
+     
+    <component name="ShoppingCart" t:color="magenta">
+        <t:implementation.python script="shopping-cart.py"/>
+        <service name="ShoppingCart">
+            <t:binding.http uri="shoppingCart"/>
+        </service>        
+        <reference name="cache" target="Cache"/>
+    </component>
+    
+    <component name="CurrencyConverter" t:color="blue">
+        <t:implementation.python script="currency-converter.py"/>
+        <service name="CurrencyConverter" t:align="top">
+            <t:binding.jsonrpc uri="currencyConverter"/>
+        </service>        
+    </component>     
+
+    <component name="Cache" t:color="orange">
+        <implementation.cpp path="../../components/cache" library="libmemcache"/>
+        <service name="Cache">
+            <t:binding.atom uri="cache"/>
+        </service>
+        <property name="servers">localhost:11211</property>
+    </component>     
+
+</composite>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/main/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
index b69c760c99..b69c760c99 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/main/dashboard.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
diff --git a/sca-cpp/trunk/modules/edit/htdocs/main/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
index 6242309ab9..0abb384d75 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/main/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
@@ -19,16 +19,23 @@
 <html>
 <head>
 <title>App Dashboard</title>
+<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/> 
 <link rel="stylesheet" type="text/css" href="/ui.css">
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 </head>
 <body>
+<div id="menu"></div>
+
 <h1>Welcome to your App Dashboard!</h1>
 <div id="dashboard"></div>
+
+<iframe id="menuFrame" src="/menu.html"></iframe>
 <iframe id="dashboardFrame" src="dashboard.html"></iframe>
 
 <script type="text/javascript">
+ui.bindwidget('menuFrame', 'menu');
+
 // Display the dashboard widget
 ui.bindwidget('dashboardFrame', 'dashboard');
 </script>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/edit/graph.js b/sca-cpp/trunk/modules/edit/htdocs/edit/graph.js
index e800a3327b..d2d5dab172 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/edit/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/edit/graph.js
@@ -168,9 +168,14 @@ if (graph.supportsVML()) {
             return false;
         };
 
-        graph.textWidthDiv = document.createElement('span');
-        graph.textWidthDiv.style.visibility = 'hidden'
-        div.appendChild(graph.textWidthDiv);
+        graph.comptitlewidthdiv = document.createElement('span');
+        graph.comptitlewidthdiv.style.visibility = 'hidden'
+        graph.comptitlewidthdiv.style.fontWeight = 'bold'
+        div.appendChild(graph.comptitlewidthdiv);
+
+        graph.reftitlewidthdiv = document.createElement('span');
+        graph.reftitlewidthdiv.style.visibility = 'hidden'
+        div.appendChild(graph.reftitlewidthdiv);
 
         return vmlg;
     };
@@ -214,7 +219,7 @@ if (graph.supportsVML()) {
     /**
      * Return an element representing the title of a component.
      */
-    graph.title = function(comp) {
+    graph.comptitle = function(comp) {
         var t = scdl.name(comp);
         var tsvcs = graph.tsvcs(comp);
         var lsvcs = graph.lsvcs(comp);
@@ -222,6 +227,7 @@ if (graph.supportsVML()) {
         title.style.left = '' + (isNil(lsvcs)? 5 : 25);
         title.style.top = '' + (isNil(tsvcs)? 5 : 25);
         title.style.position = 'absolute';
+        title.style.fontWeight = 'bold';
         var tnode = document.createTextNode(t);
         title.appendChild(tnode);
         return title;
@@ -230,11 +236,36 @@ if (graph.supportsVML()) {
     /**
      * Return the width of the title of a component.
      */
-    graph.titlewidth = function(comp) {
+    graph.comptitlewidth = function(comp) {
         var t = scdl.name(comp);
-        graph.textWidthDiv.innerHTML = t;
-        var twidth = graph.textWidthDiv.offsetWidth;
-        graph.textWidthDiv.innerHTML = '';
+        graph.comptitlewidthdiv.innerHTML = t;
+        var twidth = graph.comptitlewidthdiv.offsetWidth;
+        graph.comptitlewidthdiv.innerHTML = '';
+        return twidth;
+    };
+
+    /**
+     * Return an element representing the title of a reference.
+     */
+    graph.reftitle = function(ref) {
+        var t = scdl.name(ref);
+        var title = document.createElement('v:textbox');
+        title.style.left = '' + 25;
+        title.style.top = '' + 25;
+        title.style.position = 'absolute';
+        var tnode = document.createTextNode(t);
+        title.appendChild(tnode);
+        return title;
+    };
+
+    /**
+     * Return the width of the title of a reference.
+     */
+    graph.reftitlewidth = function(ref) {
+        var t = scdl.name(ref);
+        graph.reftitlewidthdiv.innerHTML = t;
+        var twidth = graph.reftitlewidthdiv.offsetWidth;
+        graph.reftitlewidthdiv.innerHTML = '';
         return twidth;
     };
 
@@ -242,7 +273,7 @@ if (graph.supportsVML()) {
      * Return a shape representing a component.
      */
     graph.compshape = function(comp, cassoc, pos) {
-        var title = graph.title(comp);
+        var title = graph.comptitle(comp);
 
         var d = graph.comppath(comp, cassoc).str();
 
@@ -356,11 +387,11 @@ if (graph.supportsSVG()) {
 
         svg.ontouchmove = svg.onmousemove;
 
-        graph.textWidthSvg = document.createElementNS(graph.svgns, 'svg');
-        graph.textWidthSvg.style.visibility = 'hidden';
-        graph.textWidthSvg.style.height = '0px';
-        graph.textWidthSvg.style.width = '0px';
-        div.appendChild(graph.textWidthSvg);
+        graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg');
+        graph.titlewidthsvg.style.visibility = 'hidden';
+        graph.titlewidthsvg.style.height = '0px';
+        graph.titlewidthsvg.style.width = '0px';
+        div.appendChild(graph.titlewidthsvg);
 
         return svg;
     };
@@ -404,24 +435,48 @@ if (graph.supportsSVG()) {
     /**
      * Return an element representing the title of a component.
      */
-    graph.title = function(comp) {
+    graph.comptitle = function(comp) {
         var t = scdl.name(comp);
         var title = document.createElementNS(graph.svgns, 'text');
         title.setAttribute('text-anchor', 'start');
         title.setAttribute('x', 5);
         title.setAttribute('y', 15);
+        title.style.fontWeight = 'bold';
         title.appendChild(document.createTextNode(t));
-        graph.textWidthSvg.appendChild(title);
         return title;
     };
 
     /**
      * Return the width of the title of a component.
      */
-    graph.titlewidth = function(comp) {
-        var title = graph.title(comp);
+    graph.comptitlewidth = function(comp) {
+        var title = graph.comptitle(comp);
+        graph.titlewidthsvg.appendChild(title);
         var width = title.getBBox().width;
-        graph.textWidthSvg.removeChild(title);
+        graph.titlewidthsvg.removeChild(title);
+        return width;
+    };
+
+    /**
+     * Return an element representing the title of a reference.
+     */
+    graph.reftitle = function(ref) {
+        var t = scdl.name(ref);
+        var title = document.createElementNS(graph.svgns, 'text');
+        title.setAttribute('text-anchor', 'start');
+        title.setAttribute('x', 5);
+        title.setAttribute('y', 15);
+        return title;
+    };
+
+    /**
+     * Return the width of the title of a reference.
+     */
+    graph.reftitlewidth = function(ref) {
+        var title = graph.reftitle(ref);
+        graph.titlewidthsvg.appendChild(title);
+        var width = title.getBBox().width;
+        graph.titlewidthsvg.removeChild(title);
         return width;
     };
 
@@ -429,7 +484,7 @@ if (graph.supportsSVG()) {
      * Return a shape representing a component.
      */
     graph.compshape = function(comp, cassoc, pos) {
-        var title = graph.title(comp);
+        var title = graph.comptitle(comp);
 
         var d = graph.comppath(comp, cassoc).str();
 
@@ -484,26 +539,35 @@ graph.rrefs = function(comp) {
 graph.color = function(comp) {
     var c = scdl.color(comp);
     return c == null? graph.colors.blue : graph.colors[c];
-}
+};
 
 /**
- * Return the height of a reference.
+ * Return the height of a reference on the right side of a component.
  */
-graph.refheight = function(ref, cassoc) {
+graph.rrefheight = function(ref, cassoc) {
     var target = assoc(scdl.target(ref), cassoc);
     if (isNil(target))
         return 60;
-    return graph.compheight(cadr(target), cassoc);
-}
+    return graph.compclosureheight(cadr(target), cassoc);
+};
 
 /**
- * Return the total height of a list of references.
+ * Return the total height of the references on the right side of a component.
  */
-graph.refsheight = function(refs, cassoc) {
+graph.rrefsheight = function(refs, cassoc) {
     if (isNil(refs))
         return 0;
-    return graph.refheight(car(refs), cassoc) + graph.refsheight(cdr(refs), cassoc);
-}
+    return graph.rrefheight(car(refs), cassoc) + graph.rrefsheight(cdr(refs), cassoc);
+};
+
+/**
+ * Return the max height of the references on the bottom side of a component.
+ */
+graph.brefsheight = function(refs, cassoc) {
+    if (isNil(refs))
+        return 0;
+    return Math.max(graph.rrefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc));
+};
 
 /**
  * Return the height of a component.
@@ -512,48 +576,75 @@ graph.compheight = function(comp, cassoc) {
     var lsvcs = graph.lsvcs(comp);
     var lsvcsh = Math.max(1, length(lsvcs)) * 60 + 20;
     var rrefs = graph.rrefs(comp);
-    var rrefsh = graph.refsheight(rrefs, cassoc) + 20;
+    var rrefsh = graph.rrefsheight(rrefs, cassoc) + 20;
     var height = Math.max(lsvcsh, rrefsh);
     return height;
 };
 
 /**
- * Return the width of a reference.
+ * Return the height of a component and the components wired to its bottom side.
+ */
+graph.compclosureheight = function(comp, cassoc) {
+    var brefs = graph.brefs(comp);
+    var height = graph.compheight(comp, cassoc) + graph.brefsheight(brefs, cassoc);
+    return height;
+};
+
+/**
+ * Return the width of a reference on the bottom side of a component.
  */
-graph.refwidth = function(ref, cassoc) {
+graph.brefwidth = function(ref, cassoc) {
     var target = assoc(scdl.target(ref), cassoc);
     if (isNil(target))
         return 60;
     return graph.compwidth(cadr(target), cassoc);
-}
+};
 
 /**
- * Return the total width of a list of references.
+ * Return the total width of the references on the bottom side of a component.
  */
-graph.refswidth = function(refs, cassoc) {
+graph.brefswidth = function(refs, cassoc) {
     if (isNil(refs))
         return 0;
-    return graph.refwidth(car(refs), cassoc) + graph.refswidth(cdr(refs), cassoc);
-}
+    return graph.brefwidth(car(refs), cassoc) + graph.brefswidth(cdr(refs), cassoc);
+};
+
+/**
+ * Return the max width of the references on the right side of a component.
+ */
+graph.rrefswidth = function(refs, cassoc) {
+    if (isNil(refs))
+        return 0;
+    return Math.max(graph.brefwidth(car(refs), cassoc), graph.rrefswidth(cdr(refs), cassoc));
+};
 
 /**
  * Return the width of a component.
  */
 graph.compwidth = function(comp, cassoc) {
-    var twidth = graph.titlewidth(comp) + 20;
+    var twidth = graph.comptitlewidth(comp) + 20;
     var tsvcs = graph.tsvcs(comp);
     var tsvcsw = Math.max(1, length(tsvcs)) * 60 + 20;
     var brefs = graph.brefs(comp);
-    var brefsw = graph.refswidth(brefs, cassoc) + 20;
+    var brefsw = graph.brefswidth(brefs, cassoc) + 20;
     var width = Math.max(twidth, Math.max(tsvcsw, brefsw));
     return width;
 };
 
 /**
+ * Return the width of a component and all the components wired to its right side.
+ */
+graph.compclosurewidth = function(comp, cassoc) {
+    var rrefs = graph.rrefs(comp);
+    var width = graph.compwidth(comp, cassoc) + graph.rrefswidth(rrefs, cassoc);
+    return height;
+};
+
+/**
  * Return a path representing a reference positioned to the right of a component.
  */
 graph.rrefpath = function(ref, cassoc, path) {
-    var height = graph.refheight(ref, cassoc);
+    var height = graph.rrefheight(ref, cassoc);
     var ypos = path.ypos();
     return path.rline(0,10).rline(0,10).rcurve(0,5,-5,0).rcurve(-5,0,0,-5).rcurve(0,-5,-5,0).rcurve(-5,0,0,5).rline(0,20).rcurve(0,5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,5).line(path.xpos(),ypos + height);
 };
@@ -562,7 +653,7 @@ graph.rrefpath = function(ref, cassoc, path) {
  * Return a path representing a reference positioned at the bottom of a component.
  */
 graph.brefpath = function(ref, cassoc, path) {
-    var width = graph.refwidth(ref, cassoc);
+    var width = graph.brefwidth(ref, cassoc);
     var xpos = path.xpos();
     return path.line(xpos - width + 60,path.ypos()).rline(-10,0).rline(-10,0).rcurve(-5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,-5,0).rline(-20,0).rcurve(-5,0,0,5).rcurve(0,5,5,0).rcurve(5,0,0,5).rcurve(0,5,-5,0).line(xpos - width,path.ypos());
 };
@@ -606,8 +697,8 @@ graph.comppath = function(comp, cassoc) {
     path = path.line(width - 10,path.ypos()).rcurve(10,0,0,10);
     path = renderpath(rrefs, graph.rrefpath, cassoc, path);
 
-    var brefs = graph.brefs(comp);
-    var boffset = 10 + graph.refswidth(brefs, cassoc);
+    var brefs = reverse(graph.brefs(comp));
+    var boffset = 10 + graph.brefswidth(brefs, cassoc);
     path = path.line(path.xpos(),height - 10).rcurve(0,10,-10,0).line(boffset, path.ypos());
     path = renderpath(brefs, graph.brefpath, cassoc, path);
 
@@ -646,10 +737,7 @@ graph.composite = function(compos) {
             }
 
             function rendermove(ref, cassoc, pos) {
-                var target = assoc(scdl.target(ref), cassoc);
-                if (isNil(target))
-                    return pos;
-                return pos.clone().rmove(0, graph.compheight(cadr(target), cassoc));
+                return pos.clone().rmove(0, graph.rrefheight(ref, cassoc));
             }
 
             if (isNil(refs))
@@ -665,17 +753,25 @@ graph.composite = function(compos) {
                 return rendercomp(cadr(target), cassoc, pos);
             }
 
+            function rendermove(ref, cassoc, pos) {
+                return pos.clone().rmove(graph.brefwidth(ref, cassoc), 0);
+            }
+
             if (isNil(refs))
                 return mklist();
             return append(renderbref(car(refs), cassoc, pos), renderbrefs(cdr(refs), cassoc, pos));
         }
 
         var gcomp = graph.compshape(comp, cassoc, pos);
+
         var rrefs = graph.rrefs(comp);
         var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0);
         appendg(renderrrefs(rrefs, cassoc, rpos), gcomp);
+
         var brefs = graph.brefs(comp);
-        appendg(renderbrefs(brefs, cassoc, rpos), gcomp);
+        var bpos = graph.mkpath().rmove(0 , graph.compheight(comp, cassoc));
+        appendg(renderbrefs(brefs, cassoc, bpos), gcomp);
+
         return mklist(gcomp);
     }
 
@@ -691,7 +787,7 @@ graph.composite = function(compos) {
             var comp = assoc(scdl.promote(svc), cassoc);
             if (isNil(comp))
                 return pos;
-            return pos.clone().rmove(0, graph.compheight(cadr(comp), cassoc) + 20);
+            return pos.clone().rmove(0, graph.compclosureheight(cadr(comp), cassoc) + 20);
         }
 
         if (isNil(svcs))
diff --git a/sca-cpp/trunk/modules/edit/htdocs/edit/index.html b/sca-cpp/trunk/modules/edit/htdocs/edit/index.html
index e4ea555322..2d88c1acad 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/edit/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/edit/index.html
@@ -19,15 +19,22 @@
 <html>
 <head>
 <title>App Editor</title>
+<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/> 
 <link rel="stylesheet" type="text/css" href="/ui.css">
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 </head>
 <body>
+<div id="menu"></div>
+
 <h1><span id="titleDiv"></span></h1>
 <div id="editDiv"></div>
 
+<iframe id="menuFrame" src="/menu.html"></iframe>
+
 <script type="text/javascript">
+ui.bindwidget('menuFrame', 'menu');
+
 /**
  * Return the current app name.
  */
diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html
index dffcf2d416..52ed6259c7 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/index.html
@@ -19,20 +19,28 @@
 <html>
 <head>
 <title>App Edit Tools</title>
+<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/> 
 <link rel="stylesheet" type="text/css" href="/ui.css">
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 </head>
 <body>
+<div id="menu"></div>
+
 <h1>App Edit Tools</h1>
 <p>This module implements simple tools to help you create Tuscany apps.</p>
 
 <h2>App Dashboard</h2>
-<p>Try the <a href="main">App Dashboard</a> to manage your collection of apps.</p>
+<p>Try the <a href="dash">App Dashboard</a> to manage your collection of apps.</p>
 
 <h2>App Editor</h2>
 <p>Try the <a href="edit/?app=store">App Editor</a> to edit an app.</p>
 
+<iframe id="menuFrame" src="menu.html"></iframe>
+
+<script type="text/javascript">
+ui.bindwidget('menuFrame', 'menu');
+</script>
 </body>
 </html>
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/login/index.html b/sca-cpp/trunk/modules/edit/htdocs/login/index.html
new file mode 100644
index 0000000000..3f312e4ca4
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/login/index.html
@@ -0,0 +1,40 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you under the Apache License, Version 2.0 (the
+   "License"); you may not use this file except in compliance
+   with the License.  You may obtain a copy of the License at
+   
+     http://www.apache.org/licenses/LICENSE-2.0
+     
+   Unless required by applicable law or agreed to in writing,
+   software distributed under the License is distributed on an
+   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+   KIND, either express or implied.  See the License for the
+   specific language governing permissions and limitations
+   under the License.
+-->
+
+<html><body><h1>Sign in</h1>
+
+<script type="text/javascript">
+function submitFormSignin() {
+    document.cookie = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';path=/;secure=TRUE';
+    document.formSignin.httpd_location.value = '/';
+    document.formSignin.submit();
+}
+</script>
+
+<form name="formSignin" method="POST" action="/login/dologin">
+<table border="0">
+<tr><td>Username:</td><td><input type="text" name="httpd_username" value=""/></td></tr>
+<tr><td>Password:</td><td><input type="password" name="httpd_password" value=""/></td></tr>
+<tr><td><input type="button" onclick="submitFormSignin()" value="Sign in"/></td><td></td></tr>
+</table>
+<input type="hidden" name="httpd_location" value="/"/>
+</form>
+
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
new file mode 100644
index 0000000000..02a92d1b31
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
@@ -0,0 +1,33 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you under the Apache License, Version 2.0 (the
+   "License"); you may not use this file except in compliance
+   with the License.  You may obtain a copy of the License at
+   
+     http://www.apache.org/licenses/LICENSE-2.0
+     
+   Unless required by applicable law or agreed to in writing,
+   software distributed under the License is distributed on an
+   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+   KIND, either express or implied.  See the License for the
+   specific language governing permissions and limitations
+   under the License.
+-->
+
+<html><body>
+<h1>Sign out</h1>
+
+<form name="signout" action="/login" method="GET">
+<script type="text/javascript">
+function submitSignout() {
+    document.cookie = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';path=/;secure=TRUE';
+    document.signout.submit();
+    return true;
+}
+</script>
+<input type="button" onclick="submitSignout()" value="Sign out"/>
+</form>
+</body></html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html
new file mode 100644
index 0000000000..a4addf1f96
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/menu.html
@@ -0,0 +1,35 @@
+<!--
+    * Licensed to the Apache Software Foundation (ASF) under one
+    * or more contributor license agreements.  See the NOTICE file
+    * distributed with this work for additional information
+    * regarding copyright ownership.  The ASF licenses this file
+    * to you under the Apache License, Version 2.0 (the
+    * "License"); you may not use this file except in compliance
+    * with the License.  You may obtain a copy of the License at
+    * 
+    *   http://www.apache.org/licenses/LICENSE-2.0
+    * 
+    * Unless required by applicable law or agreed to in writing,
+    * software distributed under the License is distributed on an
+    * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    * KIND, either express or implied.  See the License for the
+    * specific language governing permissions and limitations
+    * under the License.    
+-->
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="/ui.css">
+<script type="text/javascript" src="/util.js"></script>
+<script type="text/javascript" src="/ui.js"></script>
+</head>
+<body>
+<div id="menu"></div>
+
+<script type="text/javascript">
+ui.installwidget();
+
+var mdiv = $('menu'); 
+mdiv.innerHTML = ui.menubar(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash'), ui.menu('Editor', '/edit?app=store')), mklist(ui.menu('Sign out', '/logout')));
+</script>
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/edit-conf b/sca-cpp/trunk/modules/edit/ssl-start
index 042dd9e139..b8e73438e7 100755
--- a/sca-cpp/trunk/modules/edit/edit-conf
+++ b/sca-cpp/trunk/modules/edit/ssl-start
@@ -17,21 +17,21 @@
 #  specific language governing permissions and limitations
 #  under the License.
 
-# Generate a server conf
-here=`readlink -f $0`; here=`dirname $here`
-mkdir -p $1
-root=`readlink -f $1`
-
-cat >>$root/conf/httpd.conf <<EOF
-# Generated by: edit-conf $*
-
-# Serve JavaScript client scripts
-Alias /graph.js $here/htdocs/graph.js
-
-<Location /graph.js>
-AuthType None
-Require all granted
-</Location>
+../../modules/http/ssl-ca-conf tmp localhost
+../../modules/http/ssl-cert-conf tmp localhost
+../http/httpd-conf tmp localhost 8090 htdocs
+../../modules/http/httpd-ssl-conf tmp 8453
+../../modules/http/open-auth-conf tmp
+../../modules/http/passwd-auth-conf tmp foo foo
+../server/server-conf tmp
+../python/python-conf tmp
+cat >>tmp/conf/httpd.conf <<EOF
+# Configure SCA Composite
+SCAContribution `pwd`/
+SCAComposite edit.composite
 
 EOF
 
+../../components/cache/memcached-start 11211
+../http/httpd-start tmp
+
diff --git a/sca-cpp/trunk/modules/edit/start-test b/sca-cpp/trunk/modules/edit/start
index f541ffba9b..7750571423 100755
--- a/sca-cpp/trunk/modules/edit/start-test
+++ b/sca-cpp/trunk/modules/edit/start
@@ -17,13 +17,9 @@
 #  specific language governing permissions and limitations
 #  under the License.
 
-# Setup
-../../components/cache/memcached-start 11211
-
 ../http/httpd-conf tmp localhost 8090 htdocs
 ../server/server-conf tmp
 ../python/python-conf tmp
-./edit-conf tmp
 cat >>tmp/conf/httpd.conf <<EOF
 # Configure SCA Composite
 SCAContribution `pwd`/
@@ -31,5 +27,6 @@ SCAComposite edit.composite
 
 EOF
 
+../../components/cache/memcached-start 11211
 ../http/httpd-start tmp
 
diff --git a/sca-cpp/trunk/modules/edit/stop-test b/sca-cpp/trunk/modules/edit/stop
index bc831c18a6..bc831c18a6 100755
--- a/sca-cpp/trunk/modules/edit/stop-test
+++ b/sca-cpp/trunk/modules/edit/stop
diff --git a/sca-cpp/trunk/modules/edit/workspaces/joe@localhost b/sca-cpp/trunk/modules/edit/workspaces/joe@localhost
index 7e36c9a5a1..02c1af1263 100644
--- a/sca-cpp/trunk/modules/edit/workspaces/joe@localhost
+++ b/sca-cpp/trunk/modules/edit/workspaces/joe@localhost
@@ -1 +1 @@
-(("Sample Online Store App" "store" ()) ("Sample HTTP Relay App" "relay" ()))
\ No newline at end of file
+(("Sample Online Store App" "store" ()) ("Layout Variation of the Online Store App" "store2" ()) ("Another Variation of the Online Store App" "store3" ()) ("Sample HTTP Relay App" "relay" ()))