Add sample widget components and a page to edit them, plus minor user interaction fixes.

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

22 files changed, 510 insertions, 115 deletions

diff --git a/sca-cpp/trunk/modules/edit/apps/relay/app.html b/sca-cpp/trunk/modules/edit/apps/relay/app.html
new file mode 100644
index 0000000000..31ef5db0be
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/apps/relay/app.html
@@ -0,0 +1,27 @@
+<!--
+    * 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.    
+-->
+<div id="page">
+
+<span id="html" style="position:absolute; left: 0px; top: 0px"><input type="button" value="Sample HTML Request"/></span>
+<span id="jsontwit" style="position:absolute; left: 0px; top: 40px"><input type="button" value="Sample Twitter JSON Request"/></span>
+<span id="xmltwit" style="position:absolute; left: 0px; top: 80px"><input type="button" value="Sample Twitter XML Request"/></span>
+<span id="rsstwit" style="position:absolute; left: 0px; top: 120px"><input type="button" value="Sample Twitter RSS Request"/></span>
+<span id="jsonfb" style="position:absolute; left: 0px; top: 160px"><input type="button" value="Sample Facebook JSON Request"/></span>
+
+</div>
diff --git a/sca-cpp/trunk/modules/edit/apps/store/app.html b/sca-cpp/trunk/modules/edit/apps/store/app.html
new file mode 100644
index 0000000000..542023613a
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/apps/store/app.html
@@ -0,0 +1,32 @@
+<!--
+    * 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.    
+-->
+<div id="page">
+
+<span id="storeh1" style="position:absolute; left: 0px; top: 0px"><h1>Store</h1></span>
+<span id="catalogh2" style="position:absolute; left: 0px; top: 40px"><h2>Catalog</h2></span>
+<span id="addToCart" style="position:absolute; left: 0px; top: 160px"><input type="button" value="Add to Cart"/></span>
+  
+<span id="carth2" style="position:absolute; left: 0px; top: 200px"><h2>Your Shopping Cart</h2></span>
+<span id="total" style="position:absolute; left: 0px; top: 300px"><span>total</span></span>
+
+<span id="checkout" style="position:absolute; left: 0px; top: 340px"><input type="button" value="Checkout"/></span>
+<span id="empty" style="position:absolute; left: 120px; top: 340px"><input type="button" value="Empty"/></span>
+<span id="feed" style="position:absolute; left: 240px; top: 340px"><a href="shoppingCart/">(feed)</a></span>
+
+</div>
diff --git a/sca-cpp/trunk/modules/edit/apps/store2/app.html b/sca-cpp/trunk/modules/edit/apps/store2/app.html
new file mode 100644
index 0000000000..542023613a
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/apps/store2/app.html
@@ -0,0 +1,32 @@
+<!--
+    * 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.    
+-->
+<div id="page">
+
+<span id="storeh1" style="position:absolute; left: 0px; top: 0px"><h1>Store</h1></span>
+<span id="catalogh2" style="position:absolute; left: 0px; top: 40px"><h2>Catalog</h2></span>
+<span id="addToCart" style="position:absolute; left: 0px; top: 160px"><input type="button" value="Add to Cart"/></span>
+  
+<span id="carth2" style="position:absolute; left: 0px; top: 200px"><h2>Your Shopping Cart</h2></span>
+<span id="total" style="position:absolute; left: 0px; top: 300px"><span>total</span></span>
+
+<span id="checkout" style="position:absolute; left: 0px; top: 340px"><input type="button" value="Checkout"/></span>
+<span id="empty" style="position:absolute; left: 120px; top: 340px"><input type="button" value="Empty"/></span>
+<span id="feed" style="position:absolute; left: 240px; top: 340px"><a href="shoppingCart/">(feed)</a></span>
+
+</div>
diff --git a/sca-cpp/trunk/modules/edit/apps/store3/app.html b/sca-cpp/trunk/modules/edit/apps/store3/app.html
new file mode 100644
index 0000000000..542023613a
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/apps/store3/app.html
@@ -0,0 +1,32 @@
+<!--
+    * 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.    
+-->
+<div id="page">
+
+<span id="storeh1" style="position:absolute; left: 0px; top: 0px"><h1>Store</h1></span>
+<span id="catalogh2" style="position:absolute; left: 0px; top: 40px"><h2>Catalog</h2></span>
+<span id="addToCart" style="position:absolute; left: 0px; top: 160px"><input type="button" value="Add to Cart"/></span>
+  
+<span id="carth2" style="position:absolute; left: 0px; top: 200px"><h2>Your Shopping Cart</h2></span>
+<span id="total" style="position:absolute; left: 0px; top: 300px"><span>total</span></span>
+
+<span id="checkout" style="position:absolute; left: 0px; top: 340px"><input type="button" value="Checkout"/></span>
+<span id="empty" style="position:absolute; left: 120px; top: 340px"><input type="button" value="Empty"/></span>
+<span id="feed" style="position:absolute; left: 240px; top: 340px"><a href="shoppingCart/">(feed)</a></span>
+
+</div>
diff --git a/sca-cpp/trunk/modules/edit/apps/travel/app.html b/sca-cpp/trunk/modules/edit/apps/travel/app.html
new file mode 100644
index 0000000000..e83ec5aedd
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/apps/travel/app.html
@@ -0,0 +1,24 @@
+<!--
+    * 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.    
+-->
+<div id="page">
+
+<span id="header" style="position:absolute; left: 0px; top: 0px"><h1>Welcome to SCATours Online Travel</h1></span>
+<span id="book" style="position:absolute; left: 0px; top: 60px"><input type="button" value="Book a Trip"/></span>
+
+</div>
diff --git a/sca-cpp/trunk/modules/edit/edit.composite b/sca-cpp/trunk/modules/edit/edit.composite
index 49a5c84a56..90d53b56b6 100644
--- a/sca-cpp/trunk/modules/edit/edit.composite
+++ b/sca-cpp/trunk/modules/edit/edit.composite
@@ -41,6 +41,7 @@
         <reference name="dashboard" target="Dashboard"/>
         <reference name="palettes" target="Palettes"/>
         <reference name="apps" target="Apps"/>
+        <reference name="pages" target="Pages"/>
     </component>
     
     <component name="Dashboard">
@@ -60,6 +61,14 @@
         <reference name="cache" target="AppCache"/>
     </component>
     
+    <component name="Pages">
+        <t:implementation.python script="pages.py"/>
+        <service name="Pages">
+            <t:binding.http uri="pages"/>
+        </service>
+        <reference name="cache" target="AppCache"/>
+    </component>
+    
     <component name="Palettes">
         <t:implementation.python script="palettes.py"/>
         <service name="Palettes">
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
index 60d869abde..b45c0ffe24 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
@@ -44,9 +44,9 @@
 </table>
 <br>
 
-<table>
-<tr><td>App name:</td><td><input type="text" id="appName" size="50"/></td></td><td>e.g. mycoolapp</td></tr>
-<tr><td>Title:</td><td><input type="text" id="appTitle" size="50"/></td></td><td>e.g. My really cool app</td></tr>
+<table width="100%">
+<tr><td>App name:</td><td><input type="text" id="appName" size="10"/></td></tr>
+<tr><td>Title:</td><td><input type="text" id="appTitle" size="20"/></td></tr>
 </table>
 <input id="addAppButton" type="button" value="Add"/>
 </form>
@@ -105,6 +105,7 @@ function getapps(sync) {
 $('addAppLink').onclick = function() {
     var div = $('newApp');
     div.style.visibility = div.style.visibility == 'hidden'? 'visible' : 'hidden';
+    $('appName').focus();
     return false;
 };
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
index d1da06d71c..b9ad29b235 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
@@ -19,9 +19,10 @@
 <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>
+<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="/ui.js"></script>
 </head>
 <body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
index 618d638e7d..a7d185da42 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
@@ -30,9 +30,13 @@
 </head>  
 <body>
 
+<div>
+<span style="position: absolute; left: 0px; top: 0px"><h2>Palette</h2></span>
+<span style="position: absolute; left: 350px; top: 0px"><h2>App</h2></span>
+</div>
+
 <script type="text/javascript">
 var editWidget = sca.component("EditWidget");
-var dashboard = sca.reference(editWidget, "dashboard");
 var palettes = sca.reference(editWidget, "palettes");
 var apps = sca.reference(editWidget, "apps");
 
@@ -53,46 +57,46 @@ function atomcomposite(doc) {
 }
 
 /**
- * Load and display an app.
+ * Get and display an app.
  */
 function getapp(name, g) {
     if (isNil(name))
         return;
     apps.get(name, function(doc) {
-        graph.append(graph.composite(atomcomposite(doc), graph.mkpath().move(300,0)), g);
+        appendNodes(graph.composite(atomcomposite(doc), graph.mkpath().move(350,0)), g);
     });
 }
 
 /**
- * Load and display a palette content.
+ * Get and display a palette of components.
  */
-
 function getpalette(name, g, bg, palette, gpalettes) {
     if (isNil(name))
         return;
     palettes.get(name, function(doc) {
         gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(150,0));
-        graph.append(gpalettes[name], name == spalette? g : bg);
+        appendNodes(gpalettes[name], name == spalette? g : bg);
     });
 }
 
 /**
- * Install a palette button and content.
+ * Install a palette, including a button to select the palette, and
+ * the palette content.
  */
 function installpalette(name, pos, g, bg, palette, gpalettes) {
     var b = graph.mkbutton(name, pos);
-    graph.append(mklist(b), g);
+    appendNodes(mklist(b), g);
     b.onclick = function() {
         // Display the selected palette
         spalette = name;
         for (var pn in gpalettes)
-            graph.append(gpalettes[pn], pn == spalette? g : bg);
+            appendNodes(gpalettes[pn], pn == spalette? g : bg);
     }
     getpalette(name, g, bg, palette, gpalettes);
 }
 
 // Create editor graph area
-var g = graph.mkgraph();
+var g = graph.mkgraph(graph.mkpath().move(0,50));
 var bg = graph.mkgroup(graph.mkpath());
 
 // Install the palettes.
@@ -104,7 +108,7 @@ installpalette('operators', graph.mkpath().move(0,150), g, bg, spalette, gpalett
 installpalette('social', graph.mkpath().move(0,220), g, bg, spalette, gpalettes);
 installpalette('sensors', graph.mkpath().move(0,290), g, bg, spalette, gpalettes);
 
-// Display the current app
+// Get and display the current app
 getapp(appname(), g);
 
 </script>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
index 88a2efd50b..1d3b730539 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
@@ -223,7 +223,6 @@ if (ui.isIE()) {
         var tnode = document.createTextNode(t);
         title.appendChild(tnode);
         return title;
-        return title;
     };
 
     /**
@@ -373,9 +372,12 @@ if (ui.isIE()) {
     /**
      * Make a graph.
      */
-    graph.mkgraph = function() {
+    graph.mkgraph = function(pos) {
         var div = document.createElement('div');
         div.id = 'svgdiv';
+        div.style.position = 'absolute';
+        div.style.left = pos.xpos();
+        div.style.top = pos.ypos();
         document.body.appendChild(div);
 
         var svg = document.createElementNS(graph.svgns, 'svg');
@@ -410,23 +412,25 @@ if (ui.isIE()) {
                 return false;
             bringtotop(graph.dragging);
             var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            graph.dragX = pos.clientX;
-            graph.dragY = pos.clientY;
+            graph.dragX = pos.screenX;
+            graph.dragY = pos.screenY;
             return false;
         };
 
         svg.ontouchstart = svg.onmousedown;
 
-        svg.onmouseup = function(e) {
+        window.onmouseup = function(e) {
             if (graph.dragging == null)
                 return false;
             graph.dragging = null;
             return false;
         };
 
-        svg.ontouchend = svg.onmouseup;
+        window.top.onmouseup = window.onmouseup;
+        window.ontouchend = window.onmouseup;
+        window.top.ontouchend = window.onmouseup;
 
-        svg.onmousemove = function(e) {
+        window.onmousemove = function(e) {
             if (graph.dragging == null)
                 return false;
             var pmatrix = graph.dragging.parentNode.getCTM();
@@ -434,10 +438,16 @@ if (ui.isIE()) {
             var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e);
             var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f);
             var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            var newX = curX + (pos.clientX - graph.dragX);
-            var newY = curY + (pos.clientY - graph.dragY);
-            graph.dragX = pos.clientX;
-            graph.dragY = pos.clientY;
+            var newX = curX + (pos.screenX - graph.dragX);
+            var newY = curY + (pos.screenY - graph.dragY);
+            if (newX >= 0)
+                graph.dragX = pos.screenX;
+            else
+                newX = 0;
+            if (newY >= 0)
+                graph.dragY = pos.screenY;
+            else
+                newY = 0;
 
             if (graph.dragging.id.substring(0, 8) == 'palette:') {
                 // Clone an element dragged from the palette
@@ -449,7 +459,9 @@ if (ui.isIE()) {
             return false;
         };
 
-        svg.ontouchmove = svg.onmousemove;
+        window.top.onmousemove = window.onmousemove;
+        window.ontouchmove = window.onmousemove;
+        window.top.ontouchmove = window.onmousemove;
 
         graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg');
         graph.titlewidthsvg.style.visibility = 'hidden';
@@ -630,7 +642,7 @@ graph.title = function(e) {
 graph.tsvcs = function(comp) {
     return memo(comp, 'tsvcs', function() {
         var svcs = scdl.services(comp);
-        var l = filter(function(s) { return scdl.align(s) == 'top'; }, svcs);
+        var l = filter(function(s) { return scdl.align(s) == 'top' && scdl.visible(s) != 'false'; }, svcs);
         if (isNil(l))
             return mklist();
         return mklist(car(l));
@@ -642,7 +654,11 @@ graph.lsvcs = function(comp) {
         var svcs = scdl.services(comp);
         if (isNil(svcs))
             return mklist(mklist("'element","'service","'attribute","'name",scdl.name(comp)));
-        var l = filter(function(s) { var a = scdl.align(s); return a == null || a == 'left'; }, svcs);
+        var l = filter(function(s) {
+                var a = scdl.align(s);
+                var v = scdl.visible(s);
+                return (a == null || a == 'left') && v != 'false';
+            }, svcs);
         if (isNil(l))
             return mklist();
         if (!isNil(graph.tsvcs(comp)))
@@ -677,7 +693,7 @@ graph.color = function(comp) {
  * Return the height of a reference on the right side of a component.
  */
 graph.rrefheight = function(ref, cassoc) {
-    return memo(ref, 'height', function() {
+    return memo(ref, 'rheight', function() {
         var target = assoc(scdl.target(ref), cassoc);
         if (isNil(target))
             return 60;
@@ -686,6 +702,18 @@ graph.rrefheight = function(ref, cassoc) {
 };
 
 /**
+ * Return the height of a reference on the bottom side of a component.
+ */
+graph.brefheight = function(ref, cassoc) {
+    return memo(ref, 'bheight', function() {
+        var target = assoc(scdl.target(ref), cassoc);
+        if (isNil(target))
+            return 0;
+        return graph.compclosureheight(cadr(target), cassoc);
+    });
+};
+
+/**
  * Return the total height of the references on the right side of a component.
  */
 graph.rrefsheight = function(refs, cassoc) {
@@ -700,7 +728,7 @@ graph.rrefsheight = function(refs, cassoc) {
 graph.brefsheight = function(refs, cassoc) {
     if (isNil(refs))
         return 0;
-    return Math.max(graph.rrefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc));
+    return Math.max(graph.brefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc));
 };
 
 /**
@@ -870,16 +898,6 @@ graph.buttonpath = function(t) {
 };
 
 /**
- * Append a list of graphical elements to a parent.
- */
-graph.append = function(nodes, p) {
-    if (isNil(nodes))
-        return p;
-    p.appendChild(car(nodes));
-    return graph.append(cdr(nodes), p);
-};
-
-/**
  * Render a composite.
  */
 graph.composite = function(compos, pos) {
@@ -927,11 +945,11 @@ graph.composite = function(compos, pos) {
 
         var rrefs = graph.rrefs(comp);
         var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0);
-        graph.append(renderrrefs(rrefs, cassoc, rpos), gcomp);
+        appendNodes(renderrrefs(rrefs, cassoc, rpos), gcomp);
 
         var brefs = graph.brefs(comp);
         var bpos = graph.mkpath().rmove(0 , graph.compheight(comp, cassoc));
-        graph.append(renderbrefs(brefs, cassoc, bpos), gcomp);
+        appendNodes(renderbrefs(brefs, cassoc, bpos), gcomp);
 
         return mklist(gcomp);
     }
@@ -951,7 +969,7 @@ graph.composite = function(compos, pos) {
         }
 
         function rendermove(comp, cassoc, pos) {
-            return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + 20);
+            return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + 40);
         }
 
         if (isNil(svcs))
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
index 105e240389..c02f7b44d0 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
@@ -19,7 +19,9 @@
 <html>
 <head>
 <title>App Editor</title>
-<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/> 
+<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>
@@ -32,8 +34,6 @@
 <div id="graph"></div>
 
 <script type="text/javascript">
-ui.loadwidget('menu', '/menu.html');
-
 /**
  * Return the current app name.
  */
@@ -41,6 +41,9 @@ function appname() {
     return ui.queryParams()['app'];
 }
 
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html?app=' + appname());
+
 /**
  * Display the editor for an app.
  */
diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html
index d9791a8b78..a9e149c7b1 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/index.html
@@ -19,8 +19,10 @@
 <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">
+<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>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html
index 7bf2ef931e..50bc2371fb 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/menu.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/menu.html
@@ -28,8 +28,21 @@
 <script type="text/javascript">
 ui.installwidget();
 
+/**
+ * Return the current app name.
+ */
+function appname() {
+    return ui.queryParams()['app'];
+}
+
+// Display the menu bar
 var mdiv = $('menu'); 
-mdiv.innerHTML = ui.menubar(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash')), mklist(ui.menu('Sign out', '/logout')));
+var name = appname();
+mdiv.innerHTML = ui.menubar(
+    append(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash')),
+            isNil(name)? mklist() : mklist(ui.menu('App', '/graph/?app=' + name), ui.menu('Page', '/page/?app=' + name))),
+    mklist(ui.menu('Sign out', '/logout')));
+
 </script>
 </body>
 </html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
index e34aca0bea..839c246122 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
@@ -19,22 +19,47 @@
 <html>
 <head>
 <title>App Page 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">
+<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>
 <div id="menu"></div>
 
-<h1>Editing: HTML Page</h1>
+<h1><span id="title"></span></h1>
+
 <div id="page"></div>
 
 <script type="text/javascript">
-ui.loadwidget('menu', '/menu.html');
+/**
+ * Return the current app name.
+ */
+function appname() {
+    return ui.queryParams()['app'];
+}
+
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html?app=' + appname());
+
+/**
+ * Display the page editor for an app.
+ */
+function editapp(name) {
+    if (isNil(name))
+        return;
+    $('title').innerHTML = 'Editing: ' + name;
+    $('page').innerHTML =
+        '<iframe id="pageFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="page.html?' +
+        'app=' + name +
+        '"></iframe>';
+}
+
+// Display the editor for the current app
+editapp(appname());
 
-// Display the page widget
-ui.loadwidget('page', 'page.html');
 </script>
 </body>
 </html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
index 75405ce163..ca2d51af19 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
@@ -30,20 +30,78 @@
 </head>  
 <body>
 
-<div id="page" style="position: absolute; width: 5000px; height: 5000px;">
+<div>
+<span style="position: absolute; left: 0px; top: 0px;"><h2>Palette</h2></span>
+<span style="position: absolute; left: 350px; top: 0px;"><h2>Page</h2></span>
+</div>
+
+<div id="page" style="position: absolute; top: 60px; left: 0px; width: 5000px; height: 5000px;">
 
-<input id="palette:button" type="button" value="sample button" style="position: absolute; left:20px; top: 20px;"/>
-<input id="palette:entry" type="text" value="sample value" style="position: absolute; left:20px; top: 60px;"/>
-<span id="palette:text" style="position: absolute; left:20px; top: 100px;">sample text</span>
+<span id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1 style="margin: 0px;">Header1</h1></span>
+<span id="palette:h2" style="position: absolute; left: 0px; top: 40px;"><h2 style="margin: 0px;">Header2</h2></span>
+<span id="palette:button" style="position: absolute; left: 0px; top: 80px;"><input type="button" value="button"/></span>
+<span id="palette:entry" style="position: absolute; left: 0px; top: 120px;"><input type="text" value="field" size="5"/></span>
+<span id="palette:password" style="position: absolute; left: 0px; top: 160px;"><input type="password" value="password" size="5"/></span>
+<span id="palette:checkbox" style="position: absolute; left: 0px; top: 200px;"><input type="checkbox" value="checkbox"/>checkbox</span>
+<span id="palette:select" style="position: absolute; left: 0px; top: 240px;"><select><option value="list">list</option></select></span>
+<span id="palette:link" style="position: absolute; left: 0px; top: 280px;"><a href="">link</a></span>
+<span id="palette:text" style="position: absolute; left: 0px; top: 320px;"><span>text</span></span>
+<span id="palette:img" style="position: absolute; left: 0px; top: 360px;"><img/></span>
 
 </div>
 
+<div id="buffer" style="visibility: hidden; width: 0px; height: 0px">
+</div>
+
 <script type="text/javascript">
-// Install the widget
-ui.installwidget();
+var editWidget = sca.component("EditWidget");
+var pages = sca.reference(editWidget, "pages");
+
+/**
+ * Return the current app name.
+ */
+function appname() {
+    return ui.queryParams()['app'];
+}
+
+/**
+ * Return the page in an ATOM entry.
+ */
+function atompage(doc) {
+    var entry = atom.readATOMEntryDocument(doc);
+    var item = caddr(entry);
+    return cddr(item);
+}
+
+/**
+ * Get and display an app page.
+ */
+function getpage(name, e) {
+    if (isNil(name))
+        return;
+    pages.get(name, function(doc) {
+        // Convert the page to XML
+        var x = writeStrings(writeXML(atompage(doc), false));
+
+        // Prepare page DOM in hidden buffer
+        var buffer = $('buffer');
+        buffer.innerHTML = x;
+
+        // Append page nodes to editor
+        map(function(e) {
+                e.style.left = ui.posn(e.style.left) + 350;
+                pageedit.appendChild(e);
+                return page.cover(e);
+            }, nodeList(buffer.childNodes[0].childNodes));
+    });
+}
+
+// Initialize the page editor
+var pageedit = $('page');
+page.initpage(pageedit);
 
-// Enable drag&drop on sample UI elements
-page.initpage($('page'));
+// Get and display the current app page
+getpage(appname(), pageedit);
 
 </script>
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
index e4554195c1..25f6399075 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
@@ -25,7 +25,7 @@ var page = new Object();
 if (ui.isIE()) {
 
     /**
-     * Init a page.
+     * Init a page editor.
      */
     page.initpage = function(elem) {
         page.dragging = null;
@@ -35,14 +35,14 @@ if (ui.isIE()) {
                 return null;
             if (n.id != '')
                 return n;
+            if (n.covered)
+                return n.covered;
             return draggable(n.parentNode);
         }
 
         function bringtotop(n) {
-            if (n == elem)
-                return null;
             n.parentNode.appendChild(n);
-            return bringtotop(n.parentNode);
+            n.cover.parentNode.appendChild(n.cover);
         }
 
         elem.onmousedown = function() {
@@ -68,12 +68,18 @@ if (ui.isIE()) {
         elem.onmousemove = function() {
             if (page.dragging == null)
                 return false;
-            var origX = page.dragging.coordorigin.X;
-            var origY = page.dragging.coordorigin.Y;
-            var newX = origX - (window.event.clientX - page.dragX);
-            var newY = origY - (window.event.clientY - page.dragY);
-            page.dragX = window.event.clientX;
-            page.dragY = window.event.clientY;
+            var curX = ui.posn(page.dragging.style.left);
+            var curY = ui.posn(page.dragging.style.top);
+            var newX = curX + (window.event.clientX - page.dragX);
+            var newY = curY + (window.event.clientY - page.dragY);
+            if (newX >= 0)
+                page.dragX = window.event.clientX;
+            else
+                newX = 0;
+            if (newY >= 0)
+                page.dragY = window.event.clientY;
+            else
+                newY = 0;
 
             if (page.dragging.id.substring(0, 8) == 'palette:') {
                 // Clone the dragged element
@@ -81,16 +87,21 @@ if (ui.isIE()) {
             }
             page.dragging.style.left = newX;
             page.dragging.style.top = newY;
-            return false;
+            page.dragging.cover.style.left = newX;
+            page.dragging.cover.style.top = newY;
+
         };
 
+        // Cover child elements with span elements
+        map(page.cover, nodeList(elem.childNodes));
+
         return elem;
     };
 
 } else {
 
     /**
-     * Init a page.
+     * Init a page editor.
      */
     page.initpage = function(elem) {
         page.dragging = null;
@@ -100,14 +111,14 @@ if (ui.isIE()) {
                 return null;
             if (n.id != '')
                 return n;
+            if (n.covered)
+                return n.covered;
             return draggable(n.parentNode);
         }
 
         function bringtotop(n) {
-            if (n == elem)
-                return null;
             n.parentNode.appendChild(n);
-            return bringtotop(n.parentNode);
+            n.cover.parentNode.appendChild(n.cover);
         }
 
         elem.onmousedown = function(e) {
@@ -120,32 +131,40 @@ if (ui.isIE()) {
                 return false;
             bringtotop(page.dragging);
             var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            page.dragX = pos.clientX;
-            page.dragY = pos.clientY;
+            page.dragX = pos.screenX;
+            page.dragY = pos.screenY;
             return false;
         };
 
         elem.ontouchstart = elem.onmousedown;
 
-        elem.onmouseup = function(e) {
+        window.onmouseup = function(e) {
             if (page.dragging == null)
                 return false;
             page.dragging = null;
             return false;
         };
 
-        elem.ontouchend = elem.onmouseup;
+        window.top.onmouseup = window.onmouseup;
+        window.ontouchend = window.onmouseup;
+        window.top.ontouchend = window.onmouseup;
 
-        elem.onmousemove = function(e) {
+        window.onmousemove = function(e) {
             if (page.dragging == null)
                 return false;
             var curX = ui.posn(page.dragging.style.left);
             var curY = ui.posn(page.dragging.style.top);
             var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            var newX = curX + (pos.clientX - page.dragX);
-            var newY = curY + (pos.clientY - page.dragY);
-            page.dragX = pos.clientX;
-            page.dragY = pos.clientY;
+            var newX = curX + (pos.screenX - page.dragX);
+            var newY = curY + (pos.screenY - page.dragY);
+            if (newX >= 0)
+                page.dragX = pos.screenX;
+            else
+                newX = 0;
+            if (newY >= 0)
+                page.dragY = pos.screenY;
+            else
+                newY = 0;
 
             if (page.dragging.id.substring(0, 8) == 'palette:') {
                 // Clone the dragged element
@@ -153,42 +172,50 @@ if (ui.isIE()) {
             }
             page.dragging.style.left = newX;
             page.dragging.style.top = newY;
+            page.dragging.cover.style.left = newX;
+            page.dragging.cover.style.top = newY;
             return false;
         };
 
-        elem.ontouchmove = elem.onmousemove;
+        window.top.onmousemove = window.onmousemove;
+        window.ontouchmove = window.onmousemove;
+        window.top.ontouchmove = window.onmousemove;
+
+        // Cover child elements with span elements
+        map(page.cover, nodeList(elem.childNodes));
 
         return elem;
     };
 }
 
 /**
- * Clone an HTML element.
+ * Cover a page element with a <span> element to prevent mouse events to reach it.
  */
-page.elemcount = 0;
+page.cover = function(e) {
+    if (e.id == '' || isNil(e.style))
+        return e;
+    var cover = document.createElement('span');
+    cover.style.position = 'absolute';
+    cover.style.left = ui.posn(e.style.left) - 5;
+    cover.style.top = ui.posn(e.style.top) - 5;
+    cover.style.width = e.clientWidth + 10;
+    cover.style.height = e.clientHeight + 10;
+    cover.style.visibility = 'visible';
+    cover.covered = e;
+    e.cover = cover;
+    e.parentNode.appendChild(cover);
+    return e;
+}
 
+/**
+ * Clone a page element.
+ */
 page.clone = function(e) {
     function mkclone(e) {
-        if (e.nodeName == 'INPUT' && e.type == 'button') {
-            var ne = document.createElement('input');
-            ne.type = 'button';
-            ne.id = 'button' + (++page.elemcount);
-            ne.value = ne.id;
-            return ne;
-        }
-        if (e.nodeName == 'INPUT' && e.type == 'text') {
-            var ne = document.createElement('input');
-            ne.type = 'text';
-            ne.id = 'entry' + (++page.elemcount);
-            ne.value = ne.id;
-            return ne;
-        }
-        if (e.nodeName == 'SPAN') {
-            var ne = document.createElement('span');
-            ne.id = 'text' + (++page.elemcount);
-            ne.innerHTML = ne.id;
-            return ne;
-        }
+        var ne = document.createElement('span');
+        ne.id = e.id.substr(8);
+        ne.innerHTML = e.innerHTML;
+        return ne;
     }
 
     function posclone(ne, e) {
@@ -196,6 +223,7 @@ page.clone = function(e) {
         ne.style.left = ui.posn(e.style.left);
         ne.style.top = ui.posn(e.style.top);
         e.parentNode.appendChild(ne);
+        page.cover(ne);
         return ne;
     }
 
diff --git a/sca-cpp/trunk/modules/edit/pages.py b/sca-cpp/trunk/modules/edit/pages.py
new file mode 100644
index 0000000000..1e81a67332
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/pages.py
@@ -0,0 +1,48 @@
+#  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.
+
+# App pages collection implementation
+import uuid
+import sys
+from util import *
+
+# Convert an id to an app id
+def appid(id):
+    return ("'" + car(id), "'app.html")
+
+# Post a new app page to the apps db
+def post(collection, app, cache):
+    id = appid((str(uuid.uuid1()),))
+    cache.put((id,), app)
+    return id
+
+# Put an app page into the apps db
+def put(id, app, cache):
+    cache.put(appid(id), app)
+    return True
+
+# Get an app page from the apps db
+def get(id, cache):
+    if isNil(id):
+        return ("Pages", "pages")
+    return (car(id), car(id), cache.get(appid(id)))
+
+# Delete an app page from the apps db
+def delete(id, cache):
+    cache.delete(appid(id))
+    return True
+
diff --git a/sca-cpp/trunk/modules/edit/palettes/control/palette.composite b/sca-cpp/trunk/modules/edit/palettes/control/palette.composite
index 21aa631217..56c50a4e48 100644
--- a/sca-cpp/trunk/modules/edit/palettes/control/palette.composite
+++ b/sca-cpp/trunk/modules/edit/palettes/control/palette.composite
@@ -22,10 +22,28 @@
   targetNamespace="http://control"
   name="palette">
         
+    <service name="page" promote="page"/>
+    <service name="every" promote="every"/>
     <service name="if" promote="if"/>
     <service name="ifelse" promote="ifelse"/>
     <service name="foreach" promote="foreach"/>
 
+    <component name="page" t:color="yellow">
+        <documentation>when page requested</documentation>
+        <t:implementation.python script="page.py"/>
+        <service name="page" t:visible="false"/>
+        <reference name="url"/>
+        <reference name="do" t:align="bottom"/>
+    </component>
+    
+    <component name="every" t:color="yellow">
+        <documentation>every n seconds</documentation>
+        <t:implementation.python script="every.py"/>
+        <service name="every" t:visible="false"/>
+        <reference name="seconds"/>
+        <reference name="do" t:align="bottom"/>
+    </component>
+    
     <component name="if" t:color="yellow">
         <t:implementation.python script="if_.py"/>
         <service name="if" t:align="top"/>
diff --git a/sca-cpp/trunk/modules/js/htdocs/scdl.js b/sca-cpp/trunk/modules/js/htdocs/scdl.js
index 561a3e446b..df661a29ba 100644
--- a/sca-cpp/trunk/modules/js/htdocs/scdl.js
+++ b/sca-cpp/trunk/modules/js/htdocs/scdl.js
@@ -143,6 +143,13 @@ scdl.align = function(l) {
 };
 
 /**
+ * Returns the visible attribute of a service or reference.
+ */
+scdl.visible = function(l) {
+    return namedAttributeValue("'t:visible", l);
+};
+
+/**
  * Returns a list of services in a component or componentType.
  */
 scdl.services = function(l) {
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css
index 014cc5110d..1b74708b79 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.css
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.css
@@ -43,7 +43,7 @@ padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; ve
 }
 
 .widgetframe {
-visibility: hidden; width: 0px; height: 0px;
+visibility: hidden; width: 0px; height: 0px; border: 0px;
 }
 
 input {
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.js b/sca-cpp/trunk/modules/js/htdocs/ui.js
index 60ca01568e..483aef6f9f 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.js
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.js
@@ -43,6 +43,9 @@ ui.menu = function(name, href) {
 
         this.content = function() {
             function complete(uri) {
+                var q = uri.indexOf('?');
+                if (q != -1)
+                    return complete(uri.substr(0, q));
                 if (uri.match('.*\.html$'))
                     return uri;
                 if (uri.match('.*/$'))
@@ -236,7 +239,7 @@ ui.loadwidget = function(el, doc) {
     var f = el + 'Frame';
     var div = document.createElement('div');
     div.id = f + 'Div';
-    div.innerHTML = '<iframe id="' + f + '" class="widgetframe" src="' + doc + '"></iframe>';
+    div.innerHTML = '<iframe id="' + f + '" class="widgetframe" scrolling="no" frameborder="0" src="' + doc + '"></iframe>';
     document.body.appendChild(div);
     window.ui.widgets[f] = el;
     return f;
diff --git a/sca-cpp/trunk/modules/js/htdocs/xmlutil.js b/sca-cpp/trunk/modules/js/htdocs/xmlutil.js
index 0edaf400af..d8a20e7cae 100644
--- a/sca-cpp/trunk/modules/js/htdocs/xmlutil.js
+++ b/sca-cpp/trunk/modules/js/htdocs/xmlutil.js
@@ -34,6 +34,16 @@ function nodeList(n) {
 }
 
 /**
+ * Append a list of nodes to a parent node.
+ */
+function appendNodes(nodes, p) {
+    if (isNil(nodes))
+        return p;
+    p.appendChild(car(nodes));
+    return appendNodes(cdr(nodes), p);
+};
+
+/**
  * Return the child attributes of an element.
  */
 function childAttributes(e) {