diff options
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) { |