Refactor and cleanup edit module, add text components, store page and app run page.

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

46 files changed, 1281 insertions, 189 deletions

diff --git a/sca-cpp/trunk/modules/edit/Makefile.am b/sca-cpp/trunk/modules/edit/Makefile.am
index 4378013d93..13f6f9c891 100644
--- a/sca-cpp/trunk/modules/edit/Makefile.am
+++ b/sca-cpp/trunk/modules/edit/Makefile.am
@@ -20,7 +20,7 @@ if WANT_PYTHON
 moddir = $(prefix)/modules/edit
 dist_mod_SCRIPTS = start stop ssl-start mkapplinks
 
-nobase_dist_mod_DATA = edit.composite *.py htdocs/*.html htdocs/dash/*.html htdocs/app/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/app.html dashboards/*
-EXTRA_DIST = edit.composite *.py htdocs/*.html htdocs/dash/*.html htdocs/app/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/app.html dashboards/*
+nobase_dist_mod_DATA = edit.composite *.py htdocs/*.html htdocs/dash/*.html htdocs/data/*.html htdocs/app/*.html htdocs/store/*.html htdocs/props/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/app.html dashboards/* store/*
+EXTRA_DIST = edit.composite *.py htdocs/*.html htdocs/dash/*.html htdocs/data/*.html htdocs/app/*.html htdocs/store/*.html htdocs/props/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/app.html dashboards/* store/*
 
 endif
diff --git a/sca-cpp/trunk/modules/edit/apps.py b/sca-cpp/trunk/modules/edit/apps.py
index 29b470255c..600a841ed5 100644
--- a/sca-cpp/trunk/modules/edit/apps.py
+++ b/sca-cpp/trunk/modules/edit/apps.py
@@ -33,6 +33,10 @@ def mkapplink(id):
         os.mkdir('apps/' + car(id) + '/htdocs')
         os.symlink('../../../htdocs/login', 'apps/' + car(id) + '/htdocs/login');
         os.symlink('../../../htdocs/logout', 'apps/' + car(id) + '/htdocs/logout');
+        os.symlink('../../../htdocs/public', 'apps/' + car(id) + '/htdocs/public');
+        os.symlink('../../../htdocs/data', 'apps/' + car(id) + '/htdocs/data');
+        os.symlink('../../../htdocs/app/index.html', 'apps/' + car(id) + '/htdocs/index.html');
+        os.symlink('../app.html', 'apps/' + car(id) + '/htdocs/app.html');
     except:
         pass
     return True
diff --git a/sca-cpp/trunk/modules/edit/apps/test/app.html b/sca-cpp/trunk/modules/edit/apps/test/app.html
index 5c7c7219bb..a43eca03e0 100644
--- a/sca-cpp/trunk/modules/edit/apps/test/app.html
+++ b/sca-cpp/trunk/modules/edit/apps/test/app.html
@@ -17,4 +17,19 @@
  * specific language governing permissions and limitations
  * under the License.    
 -->
-<DIV id="page"/>
+<DIV id="page">
+ <SPAN id="table" class="table" style="position: absolute; top: 116px; left: 65px; ">
+  <TABLE class="datatable">
+   <TBODY>
+    <TR>
+     <TD>name</TD>
+     <TD>value</TD>
+    </TR>
+    <TR>
+     <TD>name</TD>
+     <TD>value</TD>
+    </TR>
+   </TBODY>
+  </TABLE>
+ </SPAN>
+</DIV>
diff --git a/sca-cpp/trunk/modules/edit/apps/testsocial/app.composite b/sca-cpp/trunk/modules/edit/apps/testsocial/app.composite
index d1121d9206..b2db2e0ee6 100644
--- a/sca-cpp/trunk/modules/edit/apps/testsocial/app.composite
+++ b/sca-cpp/trunk/modules/edit/apps/testsocial/app.composite
@@ -31,11 +31,6 @@
    <t:binding.http uri="https://graph.facebook.com"/>
   </reference>
  </component>
- <component t:x="169" t:y="17" name="name" t:title="name" t:color="orange1">
-  <t:implementation.python script="nuvem/name.py"/>
-  <service name="name"/>
-  <property>facebook</property>
- </component>
  <component t:x="66" t:y="14" name="name3" t:title="name" t:color="orange1">
   <t:implementation.python script="nuvem/name.py"/>
   <service name="name"/>
@@ -50,16 +45,9 @@
  <service name="page" promote="page"/>
  <component t:x="0" t:y="12" name="page" t:title="when page opened" t:color="green1">
   <t:implementation.python script="nuvem/page.py"/>
-  <service name="page" t:visible="false">
-   <t:binding.http uri="index.html"/>
-  </service>
+  <service name="page" t:visible="false"/>
   <reference target="me360" name="content"/>
  </component>
- <component t:x="404" t:y="162" name="name2" t:title="name" t:color="orange1">
-  <t:implementation.python script="nuvem/name.py"/>
-  <service name="name"/>
-  <property>twitter</property>
- </component>
  <component t:x="505" t:y="204" name="text3" t:title="text" t:color="orange1">
   <t:implementation.python script="nuvem/text.py"/>
   <service name="text"/>
@@ -80,16 +68,26 @@
   <reference target="assoc2" name="item" t:clonable="true"/>
   <reference name="item" t:clonable="true"/>
  </component>
- <component t:x="260" t:y="57" name="assoc" t:title="assoc" t:color="orange1">
-  <t:implementation.python script="nuvem/assoc.py"/>
-  <service name="assoc"/>
-  <reference target="name" name="name"/>
-  <reference target="fbprofile" name="value"/>
- </component>
  <component t:x="262" t:y="152" name="assoc2" t:title="assoc" t:color="orange1">
   <t:implementation.python script="nuvem/assoc.py"/>
   <service name="assoc"/>
   <reference target="name2" name="name"/>
   <reference target="twprofile" name="value"/>
  </component>
+ <component t:x="311" t:y="148" name="name2" t:title="name" t:color="orange1">
+  <t:implementation.python script="nuvem/name.py"/>
+  <service name="name"/>
+  <property>twprofile</property>
+ </component>
+ <component t:x="311" t:y="52" name="name" t:title="name" t:color="orange1">
+  <t:implementation.python script="nuvem/name.py"/>
+  <service name="name"/>
+  <property>fbprofile</property>
+ </component>
+ <component t:x="256" t:y="52" name="assoc" t:title="assoc" t:color="orange1">
+  <t:implementation.python script="nuvem/assoc.py"/>
+  <service name="assoc"/>
+  <reference target="name" name="name"/>
+  <reference target="fbprofile" name="value"/>
+ </component>
 </composite>
diff --git a/sca-cpp/trunk/modules/edit/apps/testsocial/app.html b/sca-cpp/trunk/modules/edit/apps/testsocial/app.html
index 5c7c7219bb..bd02e095b0 100644
--- a/sca-cpp/trunk/modules/edit/apps/testsocial/app.html
+++ b/sca-cpp/trunk/modules/edit/apps/testsocial/app.html
@@ -17,4 +17,42 @@
  * specific language governing permissions and limitations
  * under the License.    
 -->
-<DIV id="page"/>
+<DIV id="page">
+ <SPAN id="twprofile" class="table" style="position: absolute; top: 314px; left: 3px; ">
+  <TABLE class="datatable">
+   <TBODY>
+    <TR>
+     <TD>name</TD>
+     <TD>value</TD>
+    </TR>
+    <TR>
+     <TD>name</TD>
+     <TD>value</TD>
+    </TR>
+   </TBODY>
+  </TABLE>
+ </SPAN>
+ <SPAN id="h1" class="h1" style="position: absolute; top: 6px; left: 0px; ">
+  <H1>My social profiles</H1>
+ </SPAN>
+ <SPAN id="fbsection" class="section" style="position: absolute; top: 51px; left: 3px; ">
+  <SPAN>Facebook profile</SPAN>
+ </SPAN>
+ <SPAN id="fbprofile" class="table" style="position: absolute; top: 88px; left: 3px; ">
+  <TABLE class="datatable">
+   <TBODY>
+    <TR>
+     <TD>name</TD>
+     <TD>value</TD>
+    </TR>
+    <TR>
+     <TD>name</TD>
+     <TD>value</TD>
+    </TR>
+   </TBODY>
+  </TABLE>
+ </SPAN>
+ <SPAN id="section" class="section" style="position: absolute; top: 281px; left: 0px; ">
+  <SPAN>Twitter profile</SPAN>
+ </SPAN>
+</DIV>
diff --git a/sca-cpp/trunk/modules/edit/apps/testtext/app.composite b/sca-cpp/trunk/modules/edit/apps/testtext/app.composite
index f286689590..bcc16ccad4 100644
--- a/sca-cpp/trunk/modules/edit/apps/testtext/app.composite
+++ b/sca-cpp/trunk/modules/edit/apps/testtext/app.composite
@@ -19,7 +19,7 @@
 -->
 <composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1" targetNamespace="http://testtext" name="testtext">
  <service name="contains" promote="contains"/>
- <component t:x="34" t:y="14" name="contains" t:title="contains" t:color="magenta1">
+ <component t:x="34" t:y="33" name="contains" t:title="contains" t:color="magenta1">
   <t:implementation.python script="nuvem/contains.py"/>
   <service name="contains"/>
   <reference target="text10" name="search"/>
@@ -33,14 +33,14 @@
   <reference target="text12" name="string"/>
  </component>
  <service name="join" promote="join"/>
- <component t:x="543" t:y="20" name="join" t:title="join" t:color="magenta1">
+ <component t:x="488" t:y="25" name="join" t:title="join" t:color="magenta1">
   <t:implementation.python script="nuvem/join.py"/>
   <service name="join"/>
   <reference target="text6" name="separator"/>
   <reference target="list2" name="list"/>
  </component>
  <service name="replace" promote="replace"/>
- <component t:x="310" t:y="21" name="replace" t:title="replace" t:color="magenta1">
+ <component t:x="220" t:y="31" name="replace" t:title="replace" t:color="magenta1">
   <t:implementation.python script="nuvem/replace.py"/>
   <service name="replace"/>
   <reference target="text4" name="from"/>
@@ -48,13 +48,13 @@
   <reference target="text3" name="string"/>
  </component>
  <service name="lowercase" promote="lowercase"/>
- <component t:x="305" t:y="307" name="lowercase" t:title="lowercase" t:color="magenta1">
+ <component t:x="34" t:y="317" name="lowercase" t:title="lowercase" t:color="magenta1">
   <t:implementation.python script="nuvem/lowercase.py"/>
   <service name="lowercase"/>
   <reference target="text2" name="string"/>
  </component>
  <service name="uppercase" promote="uppercase"/>
- <component t:x="306" t:y="222" name="uppercase" t:title="uppercase" t:color="magenta1">
+ <component t:x="34" t:y="253" name="uppercase" t:title="uppercase" t:color="magenta1">
   <t:implementation.python script="nuvem/uppercase.py"/>
   <service name="uppercase"/>
   <reference target="text" name="string"/>
@@ -126,4 +126,101 @@
   <service name="text"/>
   <property>def</property>
  </component>
+ <service name="format" promote="format"/>
+ <component t:x="225" t:y="192" name="format" t:title="format" t:color="magenta1">
+  <t:implementation.python script="nuvem/format_.py"/>
+  <service name="format"/>
+  <reference target="text13" name="pattern"/>
+  <reference target="list" name="values"/>
+ </component>
+ <service name="format2" promote="format2"/>
+ <component t:x="493" t:y="207" name="format2" t:title="format" t:color="magenta1">
+  <t:implementation.python script="nuvem/format_.py"/>
+  <service name="format"/>
+  <reference target="text14" name="pattern"/>
+  <reference target="list3" name="values"/>
+ </component>
+ <component t:x="365" t:y="194" name="text13" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>The {0} brown {1}</property>
+ </component>
+ <component t:x="369" t:y="238" name="list" t:title="make list" t:color="yellow1">
+  <t:implementation.python script="nuvem/list_.py"/>
+  <service name="list"/>
+  <reference target="text15" name="item" t:clonable="true"/>
+  <reference target="text16" name="item" t:clonable="true"/>
+  <reference name="item" t:clonable="true"/>
+ </component>
+ <component t:x="444" t:y="236" name="text15" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>quick</property>
+ </component>
+ <component t:x="438" t:y="274" name="text16" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>fox</property>
+ </component>
+ <component t:x="599" t:y="198" name="text14" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>The {a} brown {b}</property>
+ </component>
+ <component t:x="603" t:y="239" name="list3" t:title="make list" t:color="yellow1">
+  <t:implementation.python script="nuvem/list_.py"/>
+  <service name="list"/>
+  <reference target="assoc" name="item" t:clonable="true"/>
+  <reference target="assoc2" name="item" t:clonable="true"/>
+  <reference name="item" t:clonable="true"/>
+ </component>
+ <component t:x="675" t:y="243" name="assoc" t:title="assoc" t:color="orange1">
+  <t:implementation.python script="nuvem/assoc.py"/>
+  <service name="assoc"/>
+  <reference target="name" name="name"/>
+  <reference target="text17" name="value"/>
+ </component>
+ <component t:x="673" t:y="287" name="assoc2" t:title="assoc" t:color="orange1">
+  <t:implementation.python script="nuvem/assoc.py"/>
+  <service name="assoc"/>
+  <reference target="name2" name="name"/>
+  <reference target="text18" name="value"/>
+ </component>
+ <component t:x="727" t:y="238" name="name" t:title="name" t:color="orange1">
+  <t:implementation.python script="nuvem/name.py"/>
+  <service name="name"/>
+  <property>a</property>
+ </component>
+ <component t:x="727" t:y="326" name="name2" t:title="name" t:color="orange1">
+  <t:implementation.python script="nuvem/name.py"/>
+  <service name="name"/>
+  <property>b</property>
+ </component>
+ <component t:x="727" t:y="278" name="text17" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>quick</property>
+ </component>
+ <component t:x="727" t:y="366" name="text18" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>fox</property>
+ </component>
+ <service name="parse" promote="parse"/>
+ <component t:x="37" t:y="388" name="parse" t:title="parse" t:color="magenta1">
+  <t:implementation.python script="nuvem/parse.py"/>
+  <service name="parse"/>
+  <reference target="text19" name="regexp"/>
+  <reference target="text20" name="string"/>
+ </component>
+ <component t:x="89" t:y="428" name="text20" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>city San Francisco state CA</property>
+ </component>
+ <component t:x="89" t:y="388" name="text19" t:title="text" t:color="orange1">
+  <t:implementation.python script="nuvem/text.py"/>
+  <service name="text"/>
+  <property>city (.*) state (.*)</property>
+ </component>
 </composite>
diff --git a/sca-cpp/trunk/modules/edit/apps/testvalues/app.composite b/sca-cpp/trunk/modules/edit/apps/testvalues/app.composite
index be3f503243..d0bb61b129 100644
--- a/sca-cpp/trunk/modules/edit/apps/testvalues/app.composite
+++ b/sca-cpp/trunk/modules/edit/apps/testvalues/app.composite
@@ -188,11 +188,6 @@
   <reference target="valueof" name="value1"/>
   <reference target="number6" name="value2"/>
  </component>
- <component t:x="254" t:y="287" name="reverse" t:title="reverse" t:color="yellow1">
-  <t:implementation.python script="nuvem/reverse.py"/>
-  <service name="reverse"/>
-  <reference target="range" name="list"/>
- </component>
  <component t:x="280" t:y="264" name="valueof" t:title="value of" t:color="orange1">
   <t:implementation.python script="nuvem/valueof.py"/>
   <service name="valueof"/>
@@ -263,4 +258,9 @@
   <reference target="multiply" name="transform"/>
   <reference target="reverse" name="list"/>
  </component>
+ <component t:x="252" t:y="352" name="reverse" t:title="reverse" t:color="yellow1">
+  <t:implementation.python script="nuvem/reverse.py"/>
+  <service name="reverse"/>
+  <reference target="range" name="list"/>
+ </component>
 </composite>
diff --git a/sca-cpp/trunk/modules/edit/edit.composite b/sca-cpp/trunk/modules/edit/edit.composite
index 3a8c67f9bc..0243542035 100644
--- a/sca-cpp/trunk/modules/edit/edit.composite
+++ b/sca-cpp/trunk/modules/edit/edit.composite
@@ -44,6 +44,7 @@
     <component name="EditWidget">
         <t:implementation.widget location="/index.html"/>
         <reference name="dashboard" target="Dashboard"/>
+        <reference name="store" target="AppStore"/>
         <reference name="palettes" target="Palettes"/>
         <reference name="apps" target="Apps"/>
         <reference name="pages" target="Pages"/>
@@ -59,6 +60,14 @@
         <reference name="cache" target="DashboardCache"/>
     </component>
     
+    <component name="AppStore">
+        <t:implementation.python script="store.py"/>
+        <service name="AppStore">
+            <t:binding.http uri="appstore"/>
+        </service>        
+        <reference name="cache" target="StoreCache"/>
+    </component>
+    
     <component name="Apps">
         <t:implementation.python script="apps.py"/>
         <service name="Apps">
@@ -103,6 +112,26 @@
         </service>
     </component>
 
+    <component name="StoreCache">
+        <implementation.cpp path="../../components/cache" library="libdatacache"/>
+        <service name="StoreCache">
+            <t:binding.http uri="storecache"/>
+        </service>
+        <reference name="l1reader" target="Memcache"/>
+        <reference name="l1writer" target="Memcache"/>
+        <reference name="l2reader" target="StoreDB"/>
+        <reference name="l2writer" target="StoreDB"/>
+    </component>
+
+    <component name="StoreDB">
+        <implementation.cpp path="../../components/filedb" library="libfiledb"/>
+        <property name="dbname">store</property>
+        <property name="format">scheme</property>
+        <service name="StoreDB">
+            <t:binding.http uri="storedb"/>
+        </service>
+    </component>
+
     <component name="AppCache">
         <implementation.cpp path="../../components/cache" library="libdatacache"/>
         <service name="AppCache">
diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/index.html b/sca-cpp/trunk/modules/edit/htdocs/app/index.html
index 633031b2b3..29f9efae65 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/app/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/app/index.html
@@ -18,46 +18,132 @@
 -->
 <html>
 <head>
-<title>App Settings</title>
+<title>App</title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
 <link rel="stylesheet" type="text/css" href="/ui.css"/>
 <script type="text/javascript" src="/util.js"></script>
+<script type="text/javascript" src="/elemutil.js"></script>
+<script type="text/javascript" src="/xmlutil.js"></script>
+<script type="text/javascript" src="/atomutil.js"></script>
+<script type="text/javascript" src="/jsonutil.js"></script>
+<script type="text/javascript" src="/scdl.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/component.js"></script>
 </head>
-<body>
-<div id="menu"></div>
+<body class="delayed">
+<div id="app"></div>
+<span id="appFrame"></span>
 
 <script type="text/javascript">
+if (ui.isIE()) $('bodydiv').style.right = -20;
 
-// Get the app name
-var appname = ui.queryParams()['app'];
+/**
+ * The main page component.
+ */
+var comp = sca.component('page');
 
-// Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname);
-</script>
+/**
+ * Returns the text value of a data element.
+ */
+function datatext(dv) {
+    return elementHasValue(dv)? elementValue(dv) : '';
+}
 
-<h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1>
-<br/>
+/**
+ * Set a data value into a widget.
+ */
+function setwidgetvalue(e, dv) {
+    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') {
+        car(childElements(e)).innerHTML = datatext(dv);
+        return t;
+    }
+    if (e.className == 'button' || e.className == 'entry' || e.className == 'password') {
+        car(childElements(e)).value = datatext(dv);
+        return t;
+    }
+    if (e.className == 'checkbox') {
+        var t = datatext(dv);
+        car(childElements(e)).value = t;
+        map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = t; return n; }, nodeList(e.childNodes));
+        return t;
+    }
+    if (e.className == 'list') {
+        var t = datatext(dv);
+        var ce = car(childElements(car(childElements(e))));
+        ce.value = t;
+        ce.innerHTML = t;
+        return t;
+    }
+    if (e.className == 'link') {
+        var t = datatext(dv);
+        var ce = car(childElements(car(childElements(e))));
+        ce.href = t;
+        ce.innerHTML = t;
+        return t;
+    }
+    if (e.className == 'table') {
+        var t = ui.datatable(mklist(dv));
+        car(childElements(e)).innerHTML = t;
+        return t;
+    }
+    return '';
+};
 
-<div id="app"></div>
+/**
+ * Display data on the app page.
+ */
+function display(l) {
+    if (isNil(l))
+        return false;
+    var v = car(l);
 
-<script type="text/javascript">
+    // For each widget in the app page, look for a data element with the widget id
+    // then set the data value into the widget
+    function datavalue(id) {
+        var dv = namedElementChild("'" + id, v);
+        return dv;
+    }
+
+    function updatewidget(e) {
+        var dv = datavalue(e.id);
+        if (dv == null || isNil(dv))
+            return e;
+        setwidgetvalue(e, dv);
+        return e;
+    }
+
+    var e = map(updatewidget, filter(function(e) { return !isNil(e.id); }, nodeList(ui.elementByID($('app'), 'page').childNodes)));
+
+    // Make the page visible
+    ui.showbody();
+    return true;
+}
 
 /**
- * Display the page editor for an app.
+ * Get the contents of the main page component.
  */
-function editapp(name) {
-    if (isNil(name))
-        return;
-    ui.loadiframe('app', 'app.html?app=' + name);
+function getdata() {
+    $('app').innerHTML = $('appFrame').contentDocument.body.innerHTML;
+
+    var doc = comp.get('', function(doc) {
+
+        if (json.isJSON(mklist(doc)))
+            return display(json.readJSON(mklist(doc)));
+
+        if (atom.isATOMEntry(mklist(doc)))
+            return display(atom.readATOMEntry(mklist(doc)));
+
+        if (atom.isATOMFeed(mklist(doc)))
+            return display(atom.readATOMFeed(mklist(doc)));
+
+        return display(doc);
+    });
 }
 
-// Display the editor for the current app
-document.title = 'App - ' + appname;
-$('appNameHeader').innerHTML = ' - ' + appname;
-editapp(appname);
+// Load the app frame
+$('app').innerHTML = '<iframe id="appFrame" class="widgetFrame" src="app.html" onload="getdata()"></iframe>';
 
 </script>
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
index a261f75057..89091c0517 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
@@ -33,13 +33,13 @@
 
 <div id="apps"></div>
 <br/>
-<input type="button" id="createAppButton" value="Create App"/>
+<input type="button" id="createAppButton" value="Create App" title="Create a new app"/>
 <br/>
 <br/>
 
 <div id="newApp" style="visibility: hidden; height: 100%;">
 <table style="width: 100%;">
-<tr><th id="newAppHeader" class="thl thr" style="border-style: none;">Create an App</th></tr>
+<tr><th id="newAppHeader" class="thl thr" style="padding-top: 4px; padding-bottom:4px; border-style: none;">Create an App</th></tr>
 <tr><td></td></tr>
 </table>
 <br/>
@@ -48,13 +48,13 @@
 <tr><td><b>App Name:</b></td></tr>
 <tr><td><input type="text" id="appName" size="10"/></td></tr>
 <tr><tr><td><b>App Title:</b></td></tr>
-<tr><td><input type="text" id="appTitle" size="30"/></td></tr>
+<tr><td><input type="text" id="appTitle" size="80"/></td></tr>
 <tr><tr><td><b>Category:</b></td></tr>
 <tr><td><input type="text" id="appCategory" size="15" value="Cool Apps"/></td></tr>
 <tr><tr><td><b>Description:</b></td></tr>
-<tr><td><textarea id="appDescription" cols="30" rows="5">Enter a short description of your app here</textarea></td></tr>
+<tr><td><textarea id="appDescription" cols="80" rows="5">Enter a short description of your app here</textarea></td></tr>
 <tr><td>
-<input id="createAppOKButton" type="button" style="font-weight: bold;" value="Create"/>
+<input id="createAppOKButton" type="submit" style="font-weight: bold;" value="Create" title="Create the app"/>
 <input id="createAppCancelButton" type="button" value="Cancel"/>
 </td></tr>
 </table>
@@ -77,9 +77,9 @@ var dashboard = sca.reference(editWidget, "dashboard");
 function getapps(sync) {
     function display(doc) {
         var apps = '<table style="width: 100%;">';
-        apps += '<tr><th class="thl thr">App</th>' +
-            '<th class="thr thl">Title</th>' +
-            '<th class="thr thl" style="padding-top: 4px; padding-bottom: 4px; padding-right: 2px; text-align: right;"></th></tr>';
+        apps += '<tr><th class="thl thr" style="width: 225px; min-width: 225px; padding-top: 4px; padding-right: 4px;">App</th>' +
+            '<th class="thr thl" style="width: 100%;">Title</th>' +
+            '<th class="thl thr" style="width: 30px;">Sharing</th></tr>';
 
         var feed = car(elementsToValues(atom.readATOMFeed(mklist(doc))));
         var entries = cadr(assoc("'entry", cdr(feed)));
@@ -87,10 +87,14 @@ function getapps(sync) {
             var entry = entries[i];
             title = cadr(assoc("'title", entry))
             name = cadr(assoc("'id", entry))
-
-            apps += '<tr>';
-            apps += '<td><a href=\"' + '/graph/?app=' + name + '\" target=\"_parent\">' + name + '</a></td>';
-            apps += '<td class="tdw" colspan="2">' + title + '</td>';
+            hreflink = '<a href=\"' + '/graph/?app=' + name + '\" target=\"_parent\">';
+            sharing = 'Shared with everybody';
+
+            apps += '<tr class="trb"><td>';
+            apps += hreflink + '<img src="/public/app.png" style="width: 50px; height: 50px; margin-right: 10px; vertical-align: middle;"></img>' + '</a>';
+            apps += '&nbsp;' + hreflink + name + '</a></td>';
+            apps += '<td class="tdw">' + title + '</td>';
+            apps += '<td>' + sharing + '</td>';
             apps += '</tr>';
         }
         apps += '</table>';
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
index 308afdb13a..281e2afff2 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
@@ -26,13 +26,13 @@
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 </head>
-<body>
+<body class="delayed">
 <div id="menu"></div>
 
 <script type="text/javascript">
 
 // Load the menu bar
-ui.loadwidget('menu', '/menu.html');
+ui.loadwidget('menu', '/menu.html', ui.showbody);
 </script>
 
 <h1>App Edit</h1>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/data/index.html b/sca-cpp/trunk/modules/edit/htdocs/data/index.html
new file mode 100644
index 0000000000..9fe5b1b5a0
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/data/index.html
@@ -0,0 +1,89 @@
+<!--
+    * 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>  
+<title>Results</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<link rel="stylesheet" type="text/css" href="/ui.css">
+<script type="text/javascript" src="/util.js"></script>
+<script type="text/javascript" src="/elemutil.js"></script>
+<script type="text/javascript" src="/xmlutil.js"></script>
+<script type="text/javascript" src="/atomutil.js"></script>
+<script type="text/javascript" src="/jsonutil.js"></script>
+<script type="text/javascript" src="/scdl.js"></script>
+<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/component.js"></script>
+</head>  
+<body>
+
+<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
+
+</div>
+
+<script type="text/javascript">
+if (ui.isIE()) $('bodydiv').style.right = -20;
+
+/**
+ * The current component.
+ */
+var cname = ui.queryParams()['component'];
+var comp = sca.component(cname);
+
+/**
+ * Display an HTML element.
+ */
+function display(e) {
+    $('bodydiv').innerHTML = e;
+    return true;
+}
+
+/**
+ * Wrap a document in an HTML table.
+ */
+function mkdoctable(doc) {
+    var tr = '<tr><td class="datatdl">' + 'value' + '</td>' + '<td class="datatdr">' + doc + '</td></tr>';
+    return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + tr + '</table>';
+}
+
+/**
+ * Get and display the contents of the current component.
+ */
+function getdata() {
+    comp.get('', function(doc) {
+
+        if (json.isJSON(mklist(doc)))
+            return display(ui.datatable(json.readJSON(mklist(doc))));
+
+        if (atom.isATOMEntry(mklist(doc)))
+            return display(ui.datatable(atom.readATOMEntry(mklist(doc))));
+
+        if (atom.isATOMFeed(mklist(doc)))
+            return display(ui.datatable(atom.readATOMFeed(mklist(doc))));
+
+        return display(mkdoctable(doc));
+    });
+}
+
+getdata();
+
+</script>
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
index 4a973a1ed6..0e2a1bf2d2 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
@@ -37,19 +37,25 @@
 <th class="thl" style="width: 225px; min-width: 225px;">Palette</th>
 
 <th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;">
-<input id="compName" type="text" value="component name" style="position: relative; width: 200px;"/>
-<input id="propValue" type="text" value="property value" style="position: relative; width: 300px;"/>
-<span id="compValue" style="position: relative"></span>
+<input id="compName" type="text" value="component name" title="Component name" style="position: relative; width: 200px;"/>
+<input id="propValue" type="text" value="property value" title="Component property value" style="position: relative; width: 300px;"/>
+<input type="button" id="autoplayButton" title="Turn autoplay on/off" style="font-weight: bold;" Value="Autoplay is on"/>
+<span id="compValue" style="position: relative; font-weight: normal;"></span><br/>
 </th>
 
 <th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
-<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/>
+<input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/>
 </th>
 </tr>
 
-<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"></td></tr>
+<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2">
+</td></tr>
 </table>
 
+<div style="position:absolute; top: 40px; left: 240px; right: 0px; height: 5000px;">
+<iframe id="dataFrame" class="databg" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0"></iframe>
+</div>
+
 </div>
 
 <script type="text/javascript">
@@ -63,9 +69,10 @@ var apps = sca.reference(editWidget, "apps");
 //rconsole = sca.defun(sca.reference(editWidget, "log"), "log");
 
 /**
- * The current app name.
+ * The current app and component names.
  */
 var appname = ui.queryParams()['app'];
+var compname = '';
 
 /**
  * The current app composite and corresponding saved XML content.
@@ -103,7 +110,7 @@ function getapp(name, g) {
                 '</composite>';
             composite = readXML(mklist(x));
         }
-        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, g);
+        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, oncompselect, g);
 
         // Track the saved composite XML
         savedcomposxml = car(writeXML(composite, false));
@@ -164,7 +171,7 @@ function save() {
 }
 
 /**
- * Handle a composite change event
+ * Handle a composite change event.
  */
 function oncomposchange() {
     if (savedcomposxml == car(writeXML(composite, false)))
@@ -180,8 +187,72 @@ function oncomposchange() {
     return true;
 }
 
+/**
+ * Return the link to a component value.
+ */
+function compvaluelink(appname, cname) {
+    if (cname == '' || isNil(cname))
+        return '';
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/data/?component=' + cname;
+    return link;
+}
+
+/**
+ * Track whether we're always showing the result data of the selected component.
+ */
+var autoplay = true;
+
+/**
+ * Show the result data of a component.
+ */
+function showData(cname) {
+    var rframe = $('dataFrame');
+    if (cname == '') {
+        rframe.src = '';
+        return true;
+    }
+    rframe.src = compvaluelink(appname, cname);
+    return true;
+}
+
+/**
+ * Handle a component select event.
+ */
+function oncompselect(appname, cname) {
+    if (cname == compname)
+        return true;
+    compname = cname;
+    var link = compvaluelink(appname, cname);
+    $('compValue').innerHTML = link != ''? '<a href="' + link + '" target="_blank">' + 'Results' + '</a>' : '';
+
+    if (autoplay)
+        return showData(cname);
+    return true;
+}
+
+/**
+ * Handle autoplay on/off click event.
+ */
+$('autoplayButton').onclick = function(e) {
+    if (autoplay) {
+        autoplay = false;
+        showData('');
+        $('autoplayButton').value = 'Autoplay is off';
+        return true;
+    }
+    autoplay = true;
+    showData(compname);
+    $('autoplayButton').value = 'Autoplay is on';
+    return true;
+};
+
 // Create editor graph area
-var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'), $('compValue'));
+var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'));
 var bg = graph.mkgroup(graph.mkpath());
 
 // Install the palettes
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
index 724720b19f..3535dce0df 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
@@ -114,7 +114,7 @@ if (ui.isIE()) {
     /**
      * Make a VML graph.
      */
-    graph.mkgraph = function(pos, cname, pvalue, cvalue) {
+    graph.mkgraph = function(pos, cname, pvalue) {
 
         // Create div element to host the graph
         var div = document.createElement('div');
@@ -160,7 +160,9 @@ if (ui.isIE()) {
                 // Reset current selection
                 cname.value = '';
                 pvalue.value = '';
-                cvalue.innerHTML = '';
+
+                // Trigger component select event
+                vmlg.oncompselect('');
                 return false;
             }
 
@@ -186,7 +188,9 @@ if (ui.isIE()) {
             // Update the component name and property value fields
             cname.value = graph.selected.id;
             pvalue.value = graph.property(graph.selected.comp);
-            cvalue.innerHTML = graph.compvaluelink(vmlg.appname, graph.selected.id);
+
+            // Trigger component select event
+            vmlg.oncompselect(vmlg.appname, graph.selected.id);
             return false;
         };
 
@@ -234,7 +238,9 @@ if (ui.isIE()) {
                     graph.selected = null;
                     cname.value = '';
                     pvalue.value = '';
-                    cvalue.innerHTML = '';
+
+                    // Trigger component select event
+                    vmlg.oncompselect('');
                 }
 
                 // Trigger composite change event
@@ -287,9 +293,11 @@ if (ui.isIE()) {
             var compos = scdl.composite(vmlg.compos);
             cname.value = graph.ucid(cname.value, compos);
             graph.selected.id = cname.value;
-            cvalue.innerHTML = graph.compvaluelink(vmlg.appname, graph.selected.id);
             setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value));
 
+            // Trigger component select event
+            vmlg.oncompselect(vmlg.appname, graph.selected.id);
+
             // Refresh the composite
             graph.refresh(vmlg);
 
@@ -588,7 +596,7 @@ if (ui.isIE()) {
     /**
      * Make an SVG graph.
      */
-    graph.mkgraph = function(pos, cname, pvalue, cvalue) {
+    graph.mkgraph = function(pos, cname, pvalue) {
 
         // Create a div element to host the graph
         var div = document.createElement('div');
@@ -637,7 +645,9 @@ if (ui.isIE()) {
                 // Reset current selection
                 cname.value = '';
                 pvalue.value = '';
-                cvalue.innerHTML ='';
+
+                // Trigger component select event
+                svg.oncompselect('');
                 return false;
             }
 
@@ -663,7 +673,9 @@ if (ui.isIE()) {
             // Update the component name and property value fields
             cname.value = graph.selected.id;
             pvalue.value = graph.property(graph.selected.comp);
-            cvalue.innerHTML = graph.compvaluelink(svg.appname, graph.selected.id);
+            
+            // Trigger component select event
+            svg.oncompselect(svg.appname, graph.selected.id);
             return false;
         };
 
@@ -714,7 +726,9 @@ if (ui.isIE()) {
                     graph.selected = null;
                     cname.value = '';
                     pvalue.value = '';
-                    cvalue.innerHTML = '';
+
+                    // Trigger component select event
+                    svg.oncompselect('');
                 }
             }
 
@@ -785,9 +799,11 @@ if (ui.isIE()) {
             var compos = scdl.composite(svg.compos);
             cname.value = graph.ucid(cname.value, compos);
             graph.selected.id = cname.value;
-            cvalue.innerHTML = graph.compvaluelink(svg.appname, graph.selected.id);
             setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value));
 
+            // Trigger component select event
+            svg.oncompselect(svg.appname, graph.selected.id);
+
             // Refresh the composite
             graph.refresh(svg);
 
@@ -946,6 +962,7 @@ if (ui.isIE()) {
         var shape = document.createElementNS(graph.svgns, 'path');
         shape.setAttribute('d', d);
         shape.setAttribute('fill', graph.color(comp));
+        shape.setAttribute('fill-opacity', '0.60');
 
         // Create an overlay contour shape
         var contour = document.createElementNS(graph.svgns, 'path');
@@ -998,6 +1015,7 @@ if (ui.isIE()) {
         var shape = document.createElementNS(graph.svgns, 'path');
         shape.setAttribute('d', path);
         shape.setAttribute('fill', graph.colors.lightgray);
+        shape.setAttribute('fill-opacity', '0.60');
 
         // Create an overlay contour shape
         var contour = document.createElementNS(graph.svgns, 'path');
@@ -1855,6 +1873,16 @@ graph.display = function(nodes, g) {
 };
 
 /**
+ * Hide a graph.
+ */
+graph.hide = function(g) {
+
+    // Remove nodes from the graph
+    map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { g.removeChild(n); } return n; }, nodeList(g.childNodes));
+    return g;
+};
+
+/**
  * Refresh a graph.
  */
 graph.refresh = function(g) {
@@ -1869,28 +1897,17 @@ graph.refresh = function(g) {
  * Display and enable editing of a composite and the graphical
  * nodes that represent it.
  */
-graph.edit = function(appname, compos, nodes, onchange, g) {
+graph.edit = function(appname, compos, nodes, onchange, onselect, g) {
 
     // Store the appname and composite in the graphical canvas
     g.appname = appname;
     g.compos = compos;
+
+    // Store event listeners
     g.oncomposchange = onchange;
+    g.oncompselect = onselect;
 
     // Display the composite nodes
     return graph.display(nodes, g);
 };
 
-/**
- * Return the link to a component value.
- */
-graph.compvaluelink = function(appname, cname) {
-    var protocol = window.location.protocol;
-    var host = window.location.hostname;
-    var port = ':' + window.location.port;
-    if (port == ':80' || port == ':443' || port == ':')
-        port = '';
-    var link = protocol + '//' + appname + '.' + host + port + '/components/' + cname;
-    return '<a href="' + link + '">' + link + '</a>';
-
-};
-
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
index ac9cf2f3b1..9484946f72 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
@@ -26,7 +26,7 @@
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 </head>
-<body>
+<body class="delayed">
 <div id="menu"></div>
 
 <script type="text/javascript">
@@ -35,7 +35,7 @@
 var appname = ui.queryParams()['app'];
 
 // Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname);
+ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
 </script>
 
 <h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/home.png b/sca-cpp/trunk/modules/edit/htdocs/home.png
new file mode 100644
index 0000000000..e091b99c9f
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/home.png
diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html
index 6a4c055295..eb331ea406 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/index.html
@@ -26,13 +26,13 @@
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 </head>
-<body>
+<body class="delayed">
 <div id="menu"></div>
 
 <script type="text/javascript">
 
 // Load the menu bar
-ui.loadwidget('menu', '/menu.html');
+ui.loadwidget('menu', '/menu.html', ui.showbody);
 </script>
 
 <h1>App Edit</h1>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/login/index.html b/sca-cpp/trunk/modules/edit/htdocs/login/index.html
index 816046be82..8ba796643f 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/login/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/login/index.html
@@ -23,11 +23,22 @@
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
 <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>
 <h1>Sign in</h1>
 <br/>
 
+<form name="formSignin" method="POST" action="/login/dologin">
+<table border="0">
+<tr><td>Username:</td><td><input type="text" id="httpd_username" name="httpd_username" value=""/></td></tr>
+<tr><td>Password:</td><td><input type="password" name="httpd_password" value=""/></td></tr>
+<tr><td><input type="submit" onclick="submitFormSignin()" value="Sign in"/></td><td></td></tr>
+</table>
+<input type="hidden" name="httpd_location" value="/"/>
+</form>
+
 <script type="text/javascript">
 function queryParams() {
     qp = new Array();
@@ -62,16 +73,9 @@ function submitFormSignin() {
     document.formSignin.httpd_location.value = oauthReferrer();
     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>
+$('httpd_username').focus();
+</script>
 
 </body>
 </html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
index 81991aa7c1..ff27f5a8cb 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
@@ -23,19 +23,26 @@
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
 <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>
 <h1>Sign out</h1>
 <br/>
 
 <form name="signout" action="/login" method="GET">
+<input type="submit" onclick="submitSignout()" id="signOut" value="Sign out"/>
+</form>
+
 <script type="text/javascript">
 function submitSignout() {
     document.cookie = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';path=/;secure=TRUE';
     document.signout.submit();
     return true;
 }
+
+$('signOut').focus();
 </script>
-<input type="button" onclick="submitSignout()" value="Sign out"/>
-</form>
-</body></html>
+
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/main.html b/sca-cpp/trunk/modules/edit/htdocs/main.html
index ddd89b6bab..ee9f0d3fd6 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/main.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/main.html
@@ -26,21 +26,19 @@
 
 <div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
 
-<div>This module implements simple App editing tools to help you create Tuscany apps.</div>
-<div>The user interface is minimalistic, by design.</div>
-<br/>
+<div style="margin-left: auto; margin-right: auto; text-align: center;">
+<br/><br/><br/>
 
-<h2>App Dashboard</h2>
-<p>Try the <a href="dash" target="_parent">App Dashboard</a> to manage your collection of apps.</p>
+<a href="dash" target="_parent"><img src="home.png" style="width: 426px; height: 145px;"></img></a>
 
-<h2>Composition Editor</h2>
-<p>Try the <a href="graph/?app=testvalues" target="_parent">Composition Editor</a> to compose the logic of an app.</p>
+<br/><br/>
 
-<h2>Page Editor</h2>
-<p>Try the <a href="page/?app=testvalues" target="_parent">Page Editor</a> to draw an app page.</p>
+<h1><a href="dash" target="_parent">Get Started</a></h1>
 
-<h2>App Settings Editor</h2>
-<p>Try the <a href="app/?app=testvalues" target="_parent">App Settings Editor</a> to edit the settings of app.</p>
+<br/><br/><br/>
+<div>This module implements a simple App store to help you create and share Tuscany apps.</div>
+<div>The user interface is minimalistic, by design.</div>
+</div>
 
 </div>
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html
index d60d80b1cb..6346075df3 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/menu.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/menu.html
@@ -55,9 +55,9 @@ function appname() {
 var mdiv = $('menu'); 
 var name = appname();
 mdiv.innerHTML = ui.menubar(
-    append(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash')),
-            (isNil(name) || name == 'undefined')? mklist() : mklist(ui.menu('Composition', '/graph/?app=' + name), ui.menu('Page', '/page/?app=' + name), ui.menu('Settings', '/app/?app=' + name))),
-    mklist(userMenu(), ui.menu('Sign out', '/logout')));
+    append(mklist(ui.menu('Home', '/'), ui.menu('Store', '/store'), ui.menu('Dashboard', '/dash')),
+            (isNil(name) || name == 'undefined')? mklist() : mklist(ui.menu('Composition', '/graph/?app=' + name), ui.menu('Page', '/page/?app=' + name), ui.menu('Settings', '/props/?app=' + name))),
+    mklist(userMenu(), ui.menu('Account', '/account'), ui.menu('Sign out', '/logout')));
 
 </script>
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
index 23aeeb9e2a..a328998177 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
@@ -26,7 +26,7 @@
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 </head>
-<body>
+<body class="delayed">
 <div id="menu"></div>
 
 <script type="text/javascript">
@@ -35,7 +35,7 @@
 var appname = ui.queryParams()['app'];
 
 // Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname);
+ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
 </script>
 
 <h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
index 297e5c5a69..6cd828ea74 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
@@ -34,15 +34,15 @@
 
 <table style="width: 100%;">
 <tr>
-<th class="thl" style="width: 225px; min-width: 225px;">Palette</th>
+<th class="thl" style="width: 225px; min-width: 225px; padding-top: 4px; padding-bottom: 4px;">Palette</th>
 
 <th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;">
-<input id="widgetName" type="text" value="widget name" style="position: relative; width: 200px;"/>
-<input id="widgetText" type="text" value="widget text" style="position: relative; width: 300px;"/>
+<input id="widgetName" type="text" value="widget name" title="Widget name" style="position: relative; width: 200px;"/>
+<input id="widgetText" type="text" value="widget text" title="Widget text" style="position: relative; width: 300px;"/>
 </th>
 
 <th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
-<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/>
+<input type="button" id="saveButton" title="Save the page" style="font-weight: bold;" Value="Saved"/>
 </th>
 </tr>
 
@@ -53,14 +53,18 @@
 
 <span class="h1" id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1>Header1</h1></span>
 <span class="h2" id="palette:h2" style="position: absolute; left: 0px; top: 40px;"><h2>Header2</h2></span>
-<span class="button" id="palette:button" style="position: absolute; left: 0px; top: 80px;"><input type="button" value="button"/></span>
-<span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 120px;"><input type="text" value="field" size="5"/></span>
-<span class="password" id="palette:password" style="position: absolute; left: 0px; top: 160px;"><input type="password" value="password" size="5"/></span>
-<span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 200px;"><input type="checkbox" value="checkbox"/><span>checkbox</span></span>
-<span class="list" id="palette:list" style="position: absolute; left: 0px; top: 240px;"><select><option value="list">list</option></select></span>
-<span class="link" id="palette:link" style="position: absolute; left: 0px; top: 280px;"><a href="/"><span>link</span></a></span>
-<span class="text" id="palette:text" style="position: absolute; left: 0px; top: 320px;"><span>text</span></span>
-<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 360px;"><img src=""/></span>
+<span class="section" id="palette:section" style="position: absolute; left: 0px; top: 80px;"><span class="section">section</span></span>
+<span class="button" id="palette:button" style="position: absolute; left: 0px; top: 120px;"><input type="button" value="button"/></span>
+<span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 160px;"><input type="text" value="field" size="5"/></span>
+<span class="password" id="palette:password" style="position: absolute; left: 0px; top: 200px;"><input type="password" value="password" size="5"/></span>
+<span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 240px;"><input type="checkbox" value="checkbox"/><span>checkbox</span></span>
+<span class="list" id="palette:list" style="position: absolute; left: 0px; top: 280px;"><select><option value="list">list</option></select></span>
+<span class="table" id="palette:table" style="position: absolute; left: 0px; top: 320px;">
+<table class="datatable"><tr><td class="datatdl">name</td><td class="datatdr">value</td></tr><tr><td class="datatdl">name</td><td class="datatdr">value</td></tr></table>
+</span>
+<span class="link" id="palette:link" style="position: absolute; left: 0px; top: 380px;"><a href="/"><span>link</span></a></span>
+<span class="text" id="palette:text" style="position: absolute; left: 0px; top: 420px;"><span>text</span></span>
+<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 460px;"><img src=""/></span>
 
 </div>
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
index 6e886fb774..1fb136236b 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
@@ -335,14 +335,16 @@ if (ui.isIE()) {
  * Return the text of a widget.
  */
 page.text = function(e) {
-    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text')
-        return e.childNodes[0].innerHTML;
+    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section')
+        return car(childElements(e)).innerHTML;
     if (e.className == 'button' || e.className == 'entry' || e.className == 'password' || e.className == 'checkbox')
-        return e.childNodes[0].value;
+        return car(childElements(e)).value;
     if (e.className == 'list')
-        return e.childNodes[0].childNodes[0].value;
+        return car(childElements(car(childElements(e)))).value;
     if (e.className == 'link')
-        return e.childNodes[0].childNodes[0].innerHTML;
+        return car(childElements(car(childElements(e)))).innerHTML;
+    if (e.className == 'table')
+        return '';
     return '';
 };
 
@@ -350,29 +352,34 @@ page.text = function(e) {
  * Set the text of a widget.
  */
 page.settext = function(e, t) {
-    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text') {
-        e.childNodes[0].innerHTML = t;
+    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') {
+        car(childElements(e)).innerHTML = t;
         return t;
     }
     if (e.className == 'button' || e.className == 'entry' || e.className == 'password') {
-        e.childNodes[0].value = t;
+        car(childElements(e)).value = t;
         return t;
     }
     if (e.className == 'checkbox') {
-        e.childNodes[0].value = t;
+        car(childElements(e)).value = t;
         map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = t; return n; }, nodeList(e.childNodes));
         return t;
     }
     if (e.className == 'list') {
-        e.childNodes[0].childNodes[0].value = t;
-        e.childNodes[0].childNodes[0].innerHTML = t;
+        var ce = car(childElements(car(childElements(e))));
+        ce.value = t;
+        ce.innerHTML = t;
         return t;
     }
     if (e.className == 'link') {
-        e.childNodes[0].childNodes[0].href = t;
-        e.childNodes[0].childNodes[0].innerHTML = t;
+        var ce = car(childElements(car(childElements(e))));
+        ce.href = t;
+        ce.innerHTML = t;
         return t;
     }
+    if (e.className == 'table') {
+        return '';
+    }
     return '';
 };
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/props/index.html b/sca-cpp/trunk/modules/edit/htdocs/props/index.html
new file mode 100644
index 0000000000..650c68a350
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/props/index.html
@@ -0,0 +1,65 @@
+<!--
+    * 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>
+<title>App Settings</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<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 class="delayed">
+<div id="menu"></div>
+
+<script type="text/javascript">
+
+// Get the app name
+var appname = ui.queryParams()['app'];
+
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
+</script>
+
+<h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1>
+<br/>
+
+<div id="props"></div>
+
+<script type="text/javascript">
+
+/**
+ * Display the properties editor for an app.
+ */
+function editapp(name) {
+    if (isNil(name))
+        return;
+    ui.loadiframe('props', 'props.html?app=' + name);
+}
+
+// Display the editor for the current app
+document.title = 'App - ' + appname;
+$('appNameHeader').innerHTML = ' - ' + appname;
+editapp(appname);
+
+</script>
+</body>
+</html>
+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/app.html b/sca-cpp/trunk/modules/edit/htdocs/props/props.html
index faf0372179..36d4e075ad 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/app/app.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/props/props.html
@@ -33,10 +33,10 @@
 
 <table style="width: 100%;">
 <tr>
-<th class="thl thr">Settings</th>
+<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px;">Settings</th>
 
 <th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
-<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/>
+<input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/>
 </th>
 </tr>
 </table>
@@ -46,13 +46,13 @@
 <form id="appForm">
 <table style="width: 100%;">
 <tr><tr><td><b>App Title:</b></td></tr>
-<tr><td><input type="text" id="appTitle" size="30"/></td></tr>
+<tr><td><input type="text" id="appTitle" size="80"/></td></tr>
 <tr><tr><td><b>Category:</b></td></tr>
 <tr><td><input type="text" id="appCategory" size="15"/></td></tr>
 <tr><tr><td><b>Updated:</b></td></tr>
 <tr><td><span id="appUpdated"></span></td></tr>
 <tr><tr><td><b>Description:</b></td></tr>
-<tr><td><textarea id="appDescription" cols="30" rows="5"></textarea></td></tr>
+<tr><td><textarea id="appDescription" cols="80" rows="5"></textarea></td></tr>
 </table>
 </form>
 </div>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/app.png b/sca-cpp/trunk/modules/edit/htdocs/public/app.png
new file mode 100644
index 0000000000..bae5415d0c
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/app.png
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html
new file mode 100644
index 0000000000..f49c914057
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html
@@ -0,0 +1,56 @@
+<!--
+    * 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>
+<title>App Edit - Sorry</title>
+<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<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 class="delayed">
+<div id="menu"></div>
+
+<script type="text/javascript">
+
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html', ui.showbody);
+</script>
+
+<h1>App Edit</h1>
+<br/>
+<div class="hd1">Sorry, you're not authorized to view this page.</div>
+
+<form name="signout" action="/public/notauth.html" 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;
+}
+
+if (window.top.location.pathname != '/public/notauth.html')
+    submitSignout();
+</script>
+</form>
+
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html
new file mode 100644
index 0000000000..980d1e1960
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html
@@ -0,0 +1,44 @@
+<!--
+    * 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>
+<title>App Edit - Page not found</title>
+<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<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 class="delayed">
+<div id="menu"></div>
+
+<script type="text/javascript">
+
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html', ui.showbody);
+</script>
+
+<h1>App Edit</h1>
+<br/>
+<div class="hd1">Sorry, that page was not found.</div>
+<div>You may have clicked an expired link or mistyped the address.</div>
+
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/oops.html b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html
new file mode 100644
index 0000000000..f4f23d2f60
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html
@@ -0,0 +1,43 @@
+<!--
+    * 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>
+<title>App Edit - Oops</title>
+<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<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 class="delayed">
+<div id="menu"></div>
+
+<script type="text/javascript">
+
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html', ui.showbody);
+</script>
+
+<h1>App Edit</h1>
+<br/>
+<div class="hd1">Oops, something went wrong...</div>
+
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/store/index.html b/sca-cpp/trunk/modules/edit/htdocs/store/index.html
new file mode 100644
index 0000000000..f425c0117a
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/store/index.html
@@ -0,0 +1,52 @@
+<!--
+    * 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>
+<title>App Store</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<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 class="delayed">
+<div id="menu"></div>
+
+<script type="text/javascript">
+
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html', ui.showbody);
+</script>
+
+<h1>App Edit</h1>
+<br/>
+
+<div id="store"></div>
+
+<script type="text/javascript">
+
+// Load the store
+$('store').innerHTML =
+    '<iframe id="storeFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="store.html"></iframe>';
+
+</script>
+</body>
+</html>
+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/store/store.html b/sca-cpp/trunk/modules/edit/htdocs/store/store.html
new file mode 100644
index 0000000000..d8b0f44e01
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/store/store.html
@@ -0,0 +1,111 @@
+<!--
+    * 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="/elemutil.js"></script>
+<script type="text/javascript" src="/xmlutil.js"></script>
+<script type="text/javascript" src="/atomutil.js"></script>
+<script type="text/javascript" src="/scdl.js"></script>
+<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/component.js"></script>
+</head>  
+<body>
+
+<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
+
+<table style="width: 100%;">
+<tr>
+<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px;">Cool Apps</th>
+</tr>
+</table>
+
+<div id="apps"></div>
+<br/>
+
+<script type="text/javascript">
+if (ui.isIE()) $('bodydiv').style.right = -20;
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var store = sca.reference(editWidget, "store");
+
+/**
+ * Return the link to an app.
+ */
+function applink(appname) {
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/index.html';
+    return link;
+}
+
+/**
+ * Get and display list of apps.
+ */
+function getapps(sync) {
+    function display(doc) {
+        var apps = '<div>';
+        var feed = car(elementsToValues(atom.readATOMFeed(mklist(doc))));
+        var entries = cadr(assoc("'entry", cdr(feed)));
+        for (var i = 0; i < length(entries); i++) {
+            var entry = entries[i];
+            title = cadr(assoc("'title", entry))
+            name = cadr(assoc("'id", entry))
+            author = 'joe@localhost';
+            hreflink = '<a href=\"' + applink(name) + '\" target=\"_parent\">';
+
+            apps += '<div class="box" style="width: 250px; display: inline-block; border: 1px; border-style: solid; border-color: #dcdcdc; border-collapse: collapse; margin: 5px; padding: 10px; vertical-align: top;">'
+            apps += '<table><tr>';
+            apps += '<td>';
+            apps += '<div>' + hreflink + '<img src="/public/app.png" style="height: 50px; width: 50px; vertical-align: top; margin-right: 10px; margin-bottom: 5px;"></img>' + '</a></div>';
+            apps += '<div><input type="button" id="cloneApp" value="Clone" title="Clone this app"></div>';
+            apps += '</td>';
+            apps += '<td class="tdw">';
+            apps += '<div style="font-weight: bold">' + hreflink + name + '</a></div>';
+            apps += '<div>' + 'by&nbsp;' + '<span style="font-weight: bold;">' + author + '</span></div>';
+            apps += '<br/>';
+            apps += '<div>' + title + '</div>';
+            apps += '</td>';
+            apps += '</tr></table>';
+            apps += '</div>';
+        }
+        apps += '</div>';
+        $('apps').innerHTML = apps;
+    }
+
+    if (sync) {
+        display(store.get('coolapps'));
+    } else {
+        store.get('coolapps', function(doc) {
+            display(doc);
+        });
+    }
+}
+
+// Get and display the list of apps
+getapps(true);
+
+</script>
+</body>
+</html>
diff --git a/sca-cpp/trunk/modules/edit/mkapplinks b/sca-cpp/trunk/modules/edit/mkapplinks
index 3a9cd67e60..9114210d8c 100755
--- a/sca-cpp/trunk/modules/edit/mkapplinks
+++ b/sca-cpp/trunk/modules/edit/mkapplinks
@@ -35,6 +35,10 @@ for n in `ls apps | awk '{ printf "apps/%s/htdocs\n", $1 }'`; do
         mkdir "$n"
         ln -s ../../../htdocs/login "$n/login"
         ln -s ../../../htdocs/logout "$n/logout"
+        ln -s ../../../htdocs/public "$n/public"
+        ln -s ../../../htdocs/data "$n/data"
+        ln -s ../../../htdocs/app/index.html "$n/index.html"
+        ln -s ../app.html "$n/app.html"
     fi
 done
 
diff --git a/sca-cpp/trunk/modules/edit/palettes/event/palette.composite b/sca-cpp/trunk/modules/edit/palettes/event/palette.composite
index 6f55d30639..c887b17d57 100644
--- a/sca-cpp/trunk/modules/edit/palettes/event/palette.composite
+++ b/sca-cpp/trunk/modules/edit/palettes/event/palette.composite
@@ -28,9 +28,7 @@
 
     <component name="page" t:title="when page opened" t:color="green1">
         <t:implementation.python script="nuvem/page.py"/>
-        <service name="page" t:visible="false">
-            <t:binding.http uri="index.html"/>
-        </service>
+        <service name="page" t:visible="false"/>
         <reference name="content"/>
     </component>
     
diff --git a/sca-cpp/trunk/modules/edit/palettes/text/palette.composite b/sca-cpp/trunk/modules/edit/palettes/text/palette.composite
index 3550a6507c..bef3a84a1b 100644
--- a/sca-cpp/trunk/modules/edit/palettes/text/palette.composite
+++ b/sca-cpp/trunk/modules/edit/palettes/text/palette.composite
@@ -28,6 +28,8 @@
     <service name="replace" promote="replace"/>
     <service name="lowercase" promote="lowercase"/>
     <service name="uppercase" promote="uppercase"/>
+    <service name="format" promote="format"/>
+    <service name="parse" promote="parse"/>
 
     <component name="contains" t:title="contains" t:color="magenta1">
         <t:implementation.python script="nuvem/contains.py"/>
@@ -70,4 +72,18 @@
         <reference name="string"/>
     </component>
     
+    <component name="format" t:title="format" t:color="magenta1">
+        <t:implementation.python script="nuvem/format_.py"/>
+        <service name="format"/>
+        <reference name="pattern"/>
+        <reference name="values"/>
+    </component>
+    
+    <component name="parse" t:title="parse" t:color="magenta1">
+        <t:implementation.python script="nuvem/parse.py"/>
+        <service name="parse"/>
+        <reference name="regexp"/>
+        <reference name="string"/>
+    </component>
+    
 </composite>
diff --git a/sca-cpp/trunk/modules/edit/ssl-start b/sca-cpp/trunk/modules/edit/ssl-start
index 73491e8fdc..383041d74b 100755
--- a/sca-cpp/trunk/modules/edit/ssl-start
+++ b/sca-cpp/trunk/modules/edit/ssl-start
@@ -43,6 +43,15 @@ jsprefix=`readlink -f $here/../js`
 ../../modules/server/server-conf tmp
 ../../modules/python/python-conf tmp
 
+# Configure error pages
+cat >>tmp/conf/svhost-ssl.conf <<EOF
+# Error pages
+ErrorDocument 404 /public/notfound.html
+ErrorDocument 401 /public/notauth.html
+ErrorDocument 500 /public/oops.html
+
+EOF
+
 # Configure app home pages
 cat >>tmp/conf/dvhost.conf <<EOF
 # Redirect to app home page
diff --git a/sca-cpp/trunk/modules/edit/start b/sca-cpp/trunk/modules/edit/start
index bd1ef8380e..6dc387a902 100755
--- a/sca-cpp/trunk/modules/edit/start
+++ b/sca-cpp/trunk/modules/edit/start
@@ -31,6 +31,15 @@ jsprefix=`readlink -f $here/../js`
 ../server/server-conf tmp
 ../python/python-conf tmp
 
+# Configure error pages
+cat >>tmp/conf/svhost.conf <<EOF
+# Error pages
+ErrorDocument 404 /public/notfound.html
+ErrorDocument 401 /public/notauth.html
+ErrorDocument 500 /public/oops.html
+
+EOF
+
 # Configure app home pages
 cat >>tmp/conf/dvhost.conf <<EOF
 # Redirect to app home page
diff --git a/sca-cpp/trunk/modules/edit/store.py b/sca-cpp/trunk/modules/edit/store.py
new file mode 100644
index 0000000000..052605d2d6
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/store.py
@@ -0,0 +1,91 @@
+#  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.
+
+# stores collection implementation
+import uuid
+import sys
+from util import *
+
+# Convert a particular store tag to a store id
+def storeid(tag):
+    return ("'" + tag,)
+
+# Get a store from the cache
+def getstore(id, cache):
+    store = cache.get(id)
+    if isNil(store):
+        return ()
+    return store
+
+# Post a new app to a store
+def post(collection, app, cache):
+    tag = car(collection)
+    id = (str(uuid.uuid1()),)
+    newapp = list("'entry", cadr(car(app)), list("'id", id), cadddr(car(app)))
+    store = cons(newapp, getstore(storeid(tag), cache))
+    cache.put(storeid(tag), store)
+    return id
+
+# Put an app into a store
+def put(key, app, cache):
+    def putapp(app, store):
+        if isNil(store):
+            return app
+        if cadr(caddr(car(app))) == cadr(caddr(car(store))):
+            return cons(car(app), cdr(store))
+        return cons(car(store), putapp(app, cdr(store)))
+
+    tag = car(key)
+    store = putapp(app, getstore(storeid(tag), cache))
+    cache.put(storeid(tag), store)
+    return True
+
+# Get apps from a store
+def get(key, cache):
+    tag = car(key)
+    id = cdr(key)
+
+    def findapp(id, store):
+        if isNil(store):
+            return None
+        if car(id) == cadr(caddr(car(store))):
+            return (car(store),)
+        return findapp(id, cdr(store))
+
+    if isNil(id):
+        return ((("'feed", ("'title", "App Store"), ("'id", tag)) + getstore(storeid(tag), cache)),)
+    return findapp(id, getstore(storeid(tag), cache))
+
+# Delete apps from a store
+def delete(key, cache):
+    tag = car(key)
+    id = cdr(key)
+
+    if isNil(id):
+        return cache.delete(storeid(tag))
+
+    def deleteapp(id, store):
+        if isNil(store):
+            return ()
+        if car(id) == cadr(caddr(car(store))):
+            return cdr(store)
+        return cons(car(store), deleteapp(id, cdr(store)))
+
+    store = deleteapp(id, getstore(storeid(tag), cache))
+    cache.put(storeid(tag), store)
+    return True
+
diff --git a/sca-cpp/trunk/modules/edit/store/coolapps b/sca-cpp/trunk/modules/edit/store/coolapps
new file mode 100644
index 0000000000..9c40c7bd58
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/store/coolapps
@@ -0,0 +1 @@
+((entry (title "An Empty Test App") (id "test")) (entry (title "Test Values and Lists") (id "testvalues")) (entry (title "Test Social Components") (id "testsocial")) (entry (title "Test URL Components") (id "testurl")) (entry (title "Test Logic Components") (id "testlogic")) (entry (title "Test Text Processing Components") (id "testtext")) (entry (title "Test HTTP Get Component") (id "testget")) (entry (title "An App that shows my Social Profiles") (id "me360")) (entry (title "An App that shows Friends Near Me") (id "nearme")))
diff --git a/sca-cpp/trunk/modules/js/htdocs/component.js b/sca-cpp/trunk/modules/js/htdocs/component.js
index 8e25292018..beef9357e5 100644
--- a/sca-cpp/trunk/modules/js/htdocs/component.js
+++ b/sca-cpp/trunk/modules/js/htdocs/component.js
@@ -102,9 +102,9 @@ JSONClient.toJSON = function(o) {
 /**
  * Construct an HTTPBindingClient.
  */
-function HTTPBindingClient(cname, uri, objectID) {
-    this.uri = "/references/" + cname + "/" + uri;
-    this.objectID = objectID;
+function HTTPBindingClient(name, uri) {
+    this.name = name;
+    this.uri = uri;
     this.apply = this.createApplyMethod();
 }
 
@@ -407,21 +407,17 @@ HTTPBindingClient.getHTTPRequest = function() {
 var sca = {};
 
 /**
- * Return a component.
+ * Return a component proxy.
  */
 sca.component = function(name) {
-    function ClientComponent(name) {
-        this.name = name;
-    }
-
-    return new ClientComponent(name);
+    return new HTTPBindingClient(name, '/components/' + name);
 };
 
 /**
  * Return a reference proxy.
  */
-sca.reference = function(comp, name) {
-    return new HTTPBindingClient(comp.name, name);
+sca.reference = function(comp, rname) {
+    return new HTTPBindingClient(comp.name + '/' + rname, "/references/" + comp.name + "/" + rname);
 };
 
 /**
diff --git a/sca-cpp/trunk/modules/js/htdocs/jsonutil.js b/sca-cpp/trunk/modules/js/htdocs/jsonutil.js
index 1a1a027e88..47e3ec4130 100644
--- a/sca-cpp/trunk/modules/js/htdocs/jsonutil.js
+++ b/sca-cpp/trunk/modules/js/htdocs/jsonutil.js
@@ -80,7 +80,7 @@ json.jsValToValue = function(jsv) {
     if (isList(jsv))
         return json.jsPropertiesToValues(mklist(), jsv, reverse(range(0, jsv.length)));
     if (typeof jsv == 'object')
-        return json.jsPropertiesToValues(mklist(), jsv, properties(jsv));
+        return json.jsPropertiesToValues(mklist(), jsv, reverse(properties(jsv)));
     if (typeof jsv == 'string')
         return '' + jsv;
     return jsv;
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css
index 88d1806aaa..9b960e95ca 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.css
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.css
@@ -22,10 +22,18 @@ white-space: margin: 0px;
 font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
 }
 
+.delayed {
+visibility: hidden;
+}
+
 table {
 border: 0px; border-collapse: collapse; border-color: #a2bae7; border-style: solid;
 font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
-overflow: hidden;
+overflow: visible;
+}
+
+.trb {
+border-bottom: 1px; border-bottom-style: solid; border-color: #dcdcdc;
 }
 
 th {
@@ -36,6 +44,14 @@ border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; bo
 overflow: hidden;
 }
 
+.section {
+font-weight: bold; background-color: #e5ecf9; color: #000000;
+text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; white-space: nowrap;
+border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px;
+border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #a2bae7; border-right-color: #a2bae7;
+overflow: hidden;
+}
+
 .thl {
 border-left: 0px;
 }
@@ -50,11 +66,10 @@ padding: 0px;
 
 td {
 padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; border: 0px;
-overflow: hidden;
 }
 
 .tdl {
-border-right: 1px; border-style: solid; border-color: #a2bae7;
+border-right: 1px; border-style: solid; border-color: #a2bae7; width: 10px;
 }
 
 .tdr {
@@ -65,6 +80,25 @@ border-left: 1px; border-style: solid; border-color: #a2bae7;
 padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top;
 }
 
+.datatdl {
+border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px;
+}
+
+.datatdr {
+border-left: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc;
+}
+
+.datatable {
+border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc;
+overflow: visible;
+}
+
+.databg {
+opacity: .6;  
+-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+filter: alpha(opacity=60);
+}
+
 .widgetframe {
 visibility: hidden; width: 0px; height: 0px; border: 0px;
 }
@@ -125,6 +159,10 @@ font-size: 200%; font-weight: bold;
 font-size: 150%; font-weight: bold;
 }
 
+img {
+border: 0px;
+}
+
 .imgbutton {
 width: 142px; height: 64px; margin-left: 20px; margin-right: 20px; padding: 0px; border: 1px;
 cursor: pointer; cursor: hand;
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.js b/sca-cpp/trunk/modules/js/htdocs/ui.js
index b2527dc66b..db8c439de4 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.js
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.js
@@ -233,19 +233,28 @@ ui.queryParams = function() {
 /**
  * Bind a widget iframe to an element.
  */
-ui.widgets = new Array();
+ui.widgets = {};
+ui.onload = {};
 
-ui.loadwidget = function(el, doc) {
+ui.loadwidget = function(el, doc, cb) {
     var f = el + 'Frame';
+    window.ui.widgets[f] = el;
+    window.ui.onload[f] = cb;
     var div = document.createElement('div');
     div.id = f + 'Div';
-    div.innerHTML = '<iframe id="' + f + '" class="widgetframe" scrolling="no" frameborder="0" src="' + doc + '"></iframe>';
+    div.innerHTML = '<iframe id="' + f + '" class="widgetframe" scrolling="no" frameborder="0" src="' + doc + '" onload="window.ui.onload[this.id]()"></iframe>';
     document.body.appendChild(div);
-    window.ui.widgets[f] = el;
     return f;
 };
 
 /**
+ * Show the current document body.
+ */
+ui.showbody = function() {
+    document.body.style.visibility = 'visible';
+};
+
+/**
  * Install a widget into the element bound to its iframe.
  */
 ui.installwidget = function() {
@@ -282,3 +291,43 @@ ui.csspos = function(p) {
     return Number(p.substr(0, p.length - 2));
 };
 
+/**
+ * Convert a list of elements to an HTML table.
+ */
+ui.datatable = function(l) {
+    log('datatable', writeValue(l));
+
+    function indent(i) {
+        if (i == 0)
+            return '';
+        return '&nbsp;&nbsp;' + indent(i - 1);
+    }
+
+    function rows(l, i) {
+        if (isNil(l))
+            return '';
+        var e = car(l);
+
+        if (!isList(e))
+            return rows(expandElementValues("'value", l), i);
+
+        if (elementHasValue(e)) {
+            var v = elementValue(e);
+            if (!isList(v)) {
+                return '<tr><td class="datatdl">' + indent(i) + elementName(e).slice(1) + '</td>' +
+                    '<td class="datatdr">' + v + '</td></tr>' +
+                    rows(cdr(l), i);
+            }
+
+            return rows(expandElementValues(elementName(e), v), i) + rows(cdr(l), i);
+        }
+
+        return '<tr><td class="datatdl">' + indent(i) + elementName(e).slice(1) + '</td>' +
+            '<td class="datatdr">' + '</td></tr>' +
+            rows(elementChildren(e), i + 1) +
+            rows(cdr(l), i);
+    }
+
+    return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
+}
+
diff --git a/sca-cpp/trunk/modules/js/htdocs/uicyan.css b/sca-cpp/trunk/modules/js/htdocs/uicyan.css
index 88d1806aaa..9b960e95ca 100644
--- a/sca-cpp/trunk/modules/js/htdocs/uicyan.css
+++ b/sca-cpp/trunk/modules/js/htdocs/uicyan.css
@@ -22,10 +22,18 @@ white-space: margin: 0px;
 font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
 }
 
+.delayed {
+visibility: hidden;
+}
+
 table {
 border: 0px; border-collapse: collapse; border-color: #a2bae7; border-style: solid;
 font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
-overflow: hidden;
+overflow: visible;
+}
+
+.trb {
+border-bottom: 1px; border-bottom-style: solid; border-color: #dcdcdc;
 }
 
 th {
@@ -36,6 +44,14 @@ border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; bo
 overflow: hidden;
 }
 
+.section {
+font-weight: bold; background-color: #e5ecf9; color: #000000;
+text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; white-space: nowrap;
+border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px;
+border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #a2bae7; border-right-color: #a2bae7;
+overflow: hidden;
+}
+
 .thl {
 border-left: 0px;
 }
@@ -50,11 +66,10 @@ padding: 0px;
 
 td {
 padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; border: 0px;
-overflow: hidden;
 }
 
 .tdl {
-border-right: 1px; border-style: solid; border-color: #a2bae7;
+border-right: 1px; border-style: solid; border-color: #a2bae7; width: 10px;
 }
 
 .tdr {
@@ -65,6 +80,25 @@ border-left: 1px; border-style: solid; border-color: #a2bae7;
 padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top;
 }
 
+.datatdl {
+border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px;
+}
+
+.datatdr {
+border-left: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc;
+}
+
+.datatable {
+border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc;
+overflow: visible;
+}
+
+.databg {
+opacity: .6;  
+-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+filter: alpha(opacity=60);
+}
+
 .widgetframe {
 visibility: hidden; width: 0px; height: 0px; border: 0px;
 }
@@ -125,6 +159,10 @@ font-size: 200%; font-weight: bold;
 font-size: 150%; font-weight: bold;
 }
 
+img {
+border: 0px;
+}
+
 .imgbutton {
 width: 142px; height: 64px; margin-left: 20px; margin-right: 20px; padding: 0px; border: 1px;
 cursor: pointer; cursor: hand;
diff --git a/sca-cpp/trunk/modules/js/htdocs/util.js b/sca-cpp/trunk/modules/js/htdocs/util.js
index 512e3c26d5..5697ad27d4 100644
--- a/sca-cpp/trunk/modules/js/htdocs/util.js
+++ b/sca-cpp/trunk/modules/js/htdocs/util.js
@@ -25,7 +25,9 @@
  * Scheme-like lists.
  */
 function cons(car, cdr) {
-    return new Array(car).concat(cdr);
+    var a = new Array();
+    a.push(car);
+    return a.concat(cdr);
 }
 
 function car(l) {
diff --git a/sca-cpp/trunk/modules/server/mod-eval.hpp b/sca-cpp/trunk/modules/server/mod-eval.hpp
index a389c713d7..efca2058e5 100644
--- a/sca-cpp/trunk/modules/server/mod-eval.hpp
+++ b/sca-cpp/trunk/modules/server/mod-eval.hpp
@@ -134,6 +134,8 @@ const failable<int> get(request_rec* r, const lambda<value(const list<value>&)>&
     // Write a simple value as a JSON value
     if (!isList(c)) {
         js::JSContext cx;
+        if (isSymbol(c))
+            return httpd::writeResult(json::writeJSON(valuesToElements(mklist<value>(mklist<value>("name", value(string(c))))), cx), "application/json", r);
         return httpd::writeResult(json::writeJSON(valuesToElements(mklist<value>(mklist<value>("value", c))), cx), "application/json", r);
     }