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

18 files changed, 468 insertions, 91 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" ()))
diff --git a/sca-cpp/trunk/modules/js/htdocs/scdl.js b/sca-cpp/trunk/modules/js/htdocs/scdl.js
index 08cde5ed3d..d0b229cae6 100644
--- a/sca-cpp/trunk/modules/js/htdocs/scdl.js
+++ b/sca-cpp/trunk/modules/js/htdocs/scdl.js
@@ -53,17 +53,31 @@ scdl.promote = function(l) {
 };
 
 /**
- * Returns the name of a component, service or reference.
+ * Returns the name of a component, componentType, service or reference.
  */
 scdl.name = function(l) {
     return namedAttributeValue("'name", l);
 };
 
 /**
- * Returns the color of a component.
+ * Returns the color of a component or componentType.
  */
 scdl.color = function(l) {
-    return namedAttributeValue("'color", l);
+    return namedAttributeValue("'t:color", l);
+};
+
+/**
+ * Returns the x position of a component.
+ */
+scdl.x = function(l) {
+    return namedAttributeValue("'t:x", l);
+};
+
+/**
+ * Returns the y position of a component.
+ */
+scdl.y = function(l) {
+    return namedAttributeValue("'t:y", l);
 };
 
 /**
@@ -81,7 +95,7 @@ scdl.implementation = function(l) {
 };
 
 /**
- * Returns the type of an implementation.
+ * Returns the type of a component or componentType implementation.
  */
 scdl.implementationType = function(l) {
     return elementName(l).substring(1);
@@ -98,18 +112,18 @@ scdl.uri = function(l) {
  * Returns the align attribute of a service or reference.
  */
 scdl.align = function(l) {
-    return namedAttributeValue("'align", l);
+    return namedAttributeValue("'t:align", l);
 };
 
 /**
- * Returns a list of services in a component.
+ * Returns a list of services in a component or componentType.
  */
 scdl.services = function(l) {
     return namedElementChildren("'service", l);
 };
 
 /**
- * Returns a list of references in a component.
+ * Returns a list of references in a component or componentType.
  */
 scdl.references = function(l) {
     return namedElementChildren("'reference", l);
@@ -159,7 +173,7 @@ scdl.target = function(l) {
 };
 
 /**
- * Returns a list of properties in a component.
+ * Returns a list of properties in a component or componentType.
  */
 scdl.properties = function(l) {
     return namedElementChildren("'property", l);