diff options
24 files changed, 711 insertions, 176 deletions
diff --git a/sca-cpp/trunk/modules/edit/apps/relay/app.html b/sca-cpp/trunk/modules/edit/apps/relay/app.html index 31ef5db0be..1b255b8199 100644 --- a/sca-cpp/trunk/modules/edit/apps/relay/app.html +++ b/sca-cpp/trunk/modules/edit/apps/relay/app.html @@ -18,10 +18,10 @@ --> <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> +<span id="html" class="button" style="position:absolute; left: 0px; top: 0px"><input type="button" value="Sample HTML Request"/></span> +<span id="jsontwit" class="button" style="position:absolute; left: 0px; top: 40px"><input type="button" value="Sample Twitter JSON Request"/></span> +<span id="xmltwit" class="button" style="position:absolute; left: 0px; top: 80px"><input type="button" value="Sample Twitter XML Request"/></span> +<span id="rsstwit" class="button" style="position:absolute; left: 0px; top: 120px"><input type="button" value="Sample Twitter RSS Request"/></span> +<span id="jsonfb" class="button" 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 index ba64d84958..3a57127751 100644 --- a/sca-cpp/trunk/modules/edit/apps/store/app.html +++ b/sca-cpp/trunk/modules/edit/apps/store/app.html @@ -18,15 +18,15 @@ --> <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="storeh1" class="h1" style="position:absolute; left: 0px; top: 0px"><h1>Store</h1></span> +<span id="catalogh2" class="h2" style="position:absolute; left: 0px; top: 40px"><h2>Catalog</h2></span> +<span id="addToCart" class="button" 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="carth2" class="h2" style="position:absolute; left: 0px; top: 200px"><h2>Your Shopping Cart</h2></span> +<span id="total" class="text" 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/"><span>(feed)</span></a></span> +<span id="checkout" class="button" style="position:absolute; left: 0px; top: 340px"><input type="button" value="Checkout"/></span> +<span id="empty" class="button" style="position:absolute; left: 120px; top: 340px"><input type="button" value="Empty"/></span> +<span id="feed" class="link" style="position:absolute; left: 240px; top: 340px"><a href="shoppingCart/"><span>(feed)</span></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 index ba64d84958..3a57127751 100644 --- a/sca-cpp/trunk/modules/edit/apps/store2/app.html +++ b/sca-cpp/trunk/modules/edit/apps/store2/app.html @@ -18,15 +18,15 @@ --> <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="storeh1" class="h1" style="position:absolute; left: 0px; top: 0px"><h1>Store</h1></span> +<span id="catalogh2" class="h2" style="position:absolute; left: 0px; top: 40px"><h2>Catalog</h2></span> +<span id="addToCart" class="button" 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="carth2" class="h2" style="position:absolute; left: 0px; top: 200px"><h2>Your Shopping Cart</h2></span> +<span id="total" class="text" 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/"><span>(feed)</span></a></span> +<span id="checkout" class="button" style="position:absolute; left: 0px; top: 340px"><input type="button" value="Checkout"/></span> +<span id="empty" class="button" style="position:absolute; left: 120px; top: 340px"><input type="button" value="Empty"/></span> +<span id="feed" class="link" style="position:absolute; left: 240px; top: 340px"><a href="shoppingCart/"><span>(feed)</span></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 index ba64d84958..3a57127751 100644 --- a/sca-cpp/trunk/modules/edit/apps/store3/app.html +++ b/sca-cpp/trunk/modules/edit/apps/store3/app.html @@ -18,15 +18,15 @@ --> <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="storeh1" class="h1" style="position:absolute; left: 0px; top: 0px"><h1>Store</h1></span> +<span id="catalogh2" class="h2" style="position:absolute; left: 0px; top: 40px"><h2>Catalog</h2></span> +<span id="addToCart" class="button" 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="carth2" class="h2" style="position:absolute; left: 0px; top: 200px"><h2>Your Shopping Cart</h2></span> +<span id="total" class="text" 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/"><span>(feed)</span></a></span> +<span id="checkout" class="button" style="position:absolute; left: 0px; top: 340px"><input type="button" value="Checkout"/></span> +<span id="empty" class="button" style="position:absolute; left: 120px; top: 340px"><input type="button" value="Empty"/></span> +<span id="feed" class="link" style="position:absolute; left: 240px; top: 340px"><a href="shoppingCart/"><span>(feed)</span></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 index e83ec5aedd..f016acfe51 100644 --- a/sca-cpp/trunk/modules/edit/apps/travel/app.html +++ b/sca-cpp/trunk/modules/edit/apps/travel/app.html @@ -18,7 +18,7 @@ --> <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> +<span id="header" class="h1" style="position:absolute; left: 0px; top: 0px"><h1>Welcome to SCATours Online Travel</h1></span> +<span id="book" class="button" style="position:absolute; left: 0px; top: 60px"><input type="button" value="Book a Trip"/></span> </div> diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/app.html b/sca-cpp/trunk/modules/edit/htdocs/app/app.html index 7a6330102a..7d95dcdd63 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/app/app.html +++ b/sca-cpp/trunk/modules/edit/htdocs/app/app.html @@ -29,18 +29,31 @@ </head> <body> -<div style="position: absolute; top: 0px; left: 0px; right: 0px;"> +<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> -<table width="100%"> -<tr><th><span id="appname"></span><span style="padding-top: 0px; padding-bottom:0px; position: absolute; top: 2px; right: 8px;"><input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/></span></th></tr> +<table style="width: 100%;"> +<tr> +<th class="thl thr">Properties</th> + +<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;"> +<span id="source" style="font-weight: normal;">[atom]</span> +<input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/> +</th> +</tr> </table> <br> <div> <form id="appForm"> -<table width="100%"> +<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><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>Updated:</b></td></tr> +<tr><td><span id="appUpdated">Feb 4, 2011</span></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> </table> </form> </div> @@ -48,6 +61,7 @@ </div> <script type="text/javascript"> +if (ui.isIE()) $('bodydiv').style.right = -20; // Init service references var editWidget = sca.component("EditWidget"); @@ -57,7 +71,7 @@ var dashboard = sca.reference(editWidget, "dashboard"); * The current app name. */ var appname = ui.queryParams()['app']; -$('appname').innerHTML = 'App: ' + appname; +$('source').innerHTML = '[<a href="/apps/' + appname + '">atom</a>]'; /** * Get and display an app. diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/index.html b/sca-cpp/trunk/modules/edit/htdocs/app/index.html index f79229d17e..b4478dc8dd 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/app/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/app/index.html @@ -38,6 +38,9 @@ var appname = ui.queryParams()['app']; ui.loadwidget('menu', '/menu.html?app=' + appname); </script> +<h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1> +<br/> + <div id="app"></div> <script type="text/javascript"> @@ -52,6 +55,8 @@ function editapp(name) { } // Display the editor for the current app +document.title = 'App - ' + appname; +$('appNameHeader').innerHTML = ' - ' + appname; editapp(appname); </script> diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html index 5b5d758f31..11c0b95979 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html @@ -29,21 +29,22 @@ </head> <body> -<div style="position: absolute; top: 0px; left: 0px; right: 0px;"> +<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> <div id="apps"></div> <br/> <input type="button" id="createAppButton" value="Create App"/> +<br/> +<br/> <div id="newApp" style="visibility: hidden;"> -<form id="newAppForm"> -<table width="100%"> -<tr><th>Create an App</th></tr> +<table style="width: 100%;"> +<tr><th class="thl thr">Create an App</th></tr> <tr><td></td></tr> </table> -<br> +<br/> -<table width="100%"> +<table style="width: 100%;"> <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> @@ -53,12 +54,13 @@ <input id="createAppCancelButton" type="button" value="Cancel"/> </td></tr> </table> -</form> </div> </div> <script type="text/javascript"> +if (ui.isIE()) $('bodydiv').style.right = -20; + // Init service references var editWidget = sca.component("EditWidget"); var dashboard = sca.reference(editWidget, "dashboard"); @@ -68,8 +70,13 @@ var dashboard = sca.reference(editWidget, "dashboard"); */ function getapps(sync) { function display(doc) { - var apps = '<table width="100%">'; - apps += '<tr><th>App</th><th>Title</th></tr>'; + 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;">' + + '<span style="font-weight: normal;">' + + '[<a href="/dashboard">atom</a> <a href="/dashboardcache/joe@localhost">json</a>]' + + '</span></th></tr>'; var entries = cddr(atom.readATOMFeedDocument(doc)); for (var i = 0; i < length(entries); i++) { @@ -84,7 +91,7 @@ function getapps(sync) { apps += '<tr>'; //apps += '<td><input name="apps" type="checkbox" value="' + name + '">' + '<a href=\"' + '/app/?app=' + name + '\">' + name + '</a></td>'; apps += '<td><a href=\"' + '/app/?app=' + name + '\" target=\"_parent\">' + name + '</a></td>'; - apps += '<td class="tdw">' + title + '</td>'; + apps += '<td class="tdw" colspan="2">' + title + '</td>'; apps += '</tr>'; } apps += '</table>'; @@ -104,8 +111,7 @@ function getapps(sync) { * Display create app form. */ $('createAppButton').onclick = function() { - var div = $('newApp'); - div.style.visibility = 'visible'; + $('newApp').style.visibility = 'visible'; $('appName').focus(); return false; }; @@ -130,8 +136,7 @@ $('createAppOKButton').onclick = function() { * Cancel creating an app. */ $('createAppCancelButton').onclick = function() { - var div = $('newApp'); - div.style.visibility = 'hidden'; + $('newApp').style.visibility = 'hidden'; $('appName').value = ''; $('appTitle').title = ''; 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 d3add792d6..834bca6201 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html @@ -35,6 +35,9 @@ ui.loadwidget('menu', '/menu.html'); </script> +<h1>App Edit</h1> +<br/> + <div id="dashboard"></div> <script type="text/javascript"> diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html index 1572262627..3ca104a122 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html @@ -30,15 +30,31 @@ </head> <body> -<div style="position: absolute; top: 0px; left: 0px; right: 0px;"> +<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> -<table width="100%"> -<tr><th style="width: 338px;">Components</th><th style="padding-top: 0px; padding-bottom: 0px;"><span id="appname"></span><span style="position: absolute; top: 2px; right: 8px;"><input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/></span></th></tr> +<table style="width: 100%;"> +<tr> +<th class="thl" style="width: 330px; min-width: 330px;">Palette</th><th class="ths" style="width: 3px; min-width: 3px;"></th> + +<th class="thr" style="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;"/> +</th> + +<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;"> +<span id="source" style="font-weight: normal;">[atom json]</span> +<input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/> +</th> +</tr> + +<tr style="height: 5000px;"><td class="tdl"></td><th class="ths"></th><td class="tdr" colspan="2"></td></tr> </table> </div> <script type="text/javascript"> +if (ui.isIE()) $('bodydiv').style.right = -20; + var editWidget = sca.component("EditWidget"); var palettes = sca.reference(editWidget, "palettes"); var apps = sca.reference(editWidget, "apps"); @@ -50,7 +66,7 @@ var apps = sca.reference(editWidget, "apps"); * The current app name. */ var appname = ui.queryParams()['app']; -$('appname').innerHTML = 'Composition: ' + appname; +$('source').innerHTML = '[<a href="/apps/' + appname + '">atom</a> <a href="/appcache/' + appname + '/app.composite">json</a>]'; /** * The current app composite. @@ -122,17 +138,17 @@ $('saveButton').onclick = function(e) { }; // Create editor graph area -var g = graph.mkgraph(graph.mkpath().move(0,50)); +var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue')); var bg = graph.mkgroup(graph.mkpath()); -// Install the palettes. +// Install the palettes var gpalettes = new Array(); -var spalette = 'variables'; -installpalette('variables', graph.mkpath().move(0,10), g, bg, spalette, gpalettes); -installpalette('control', graph.mkpath().move(0,80), g, bg, spalette, gpalettes); -installpalette('operators', graph.mkpath().move(0,150), g, bg, spalette, gpalettes); -installpalette('social', graph.mkpath().move(0,220), g, bg, spalette, gpalettes); -installpalette('sensors', graph.mkpath().move(0,290), g, bg, spalette, gpalettes); +var spalette = 'values'; +installpalette('values', graph.mkpath().move(0,10), g, bg, spalette, gpalettes); +installpalette('control', graph.mkpath().move(0,60), g, bg, spalette, gpalettes); +installpalette('operators', graph.mkpath().move(0,110), g, bg, spalette, gpalettes); +installpalette('social', graph.mkpath().move(0,160), g, bg, spalette, gpalettes); +installpalette('sensors', graph.mkpath().move(0,210), g, bg, spalette, gpalettes); // Get and display the current app getapp(appname, g); diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js index 8c0419c8bd..e73c178267 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js @@ -31,6 +31,7 @@ graph.colors.black = '#000000'; graph.colors.blue = '#0000ff'; graph.colors.cyan = '#00ffff'; graph.colors.gray = '#808080' +graph.colors.lightgray = '#dcdcdc' graph.colors.green = '#00ff00'; graph.colors.magenta = '#ff00ff'; graph.colors.orange = '#ffa500'; @@ -101,7 +102,7 @@ if (ui.isIE()) { /** * Make a VML graph. */ - graph.mkgraph = function(pos) { + graph.mkgraph = function(pos, cname, pvalue) { // Create div element to host the graph var div = document.createElement('div'); @@ -118,8 +119,9 @@ if (ui.isIE()) { vmlg.coordsize = '5000,5000'; div.appendChild(vmlg); - // Keep track of the current dragged element + // Track element dragging and selection graph.dragging = null; + graph.selected = null; /** * Find the first draggable element in a hierarchy of elements. @@ -140,18 +142,25 @@ if (ui.isIE()) { // Find draggable element graph.dragging = draggable(window.event.srcElement); - if (graph.dragging == null) + graph.selected = graph.dragging; + if (graph.dragging == null) { + + // Reset current selection + cname.value = ''; + pvalue.value = ''; return false; + } // Clone component from the palette - if (graph.dragging.id.substring(0, 8) == 'palette:') - graph.dragging = graph.clonepalette(graph.dragging); + var compos = scdl.composite(vmlg.compos); + if (graph.dragging.id.substring(0, 8) == 'palette:') { + graph.dragging = graph.clonepalette(graph.dragging, compos); + graph.selected = graph.dragging; + } // Cut wire to component - if (graph.dragging.parentNode != vmlg) { - var compos = scdl.composite(vmlg.compos); + if (graph.dragging.parentNode != vmlg) setElement(compos, graph.cutwire(graph.dragging, compos, vmlg)); - } // Bring component to the top graph.bringtotop(graph.dragging, vmlg); @@ -160,6 +169,10 @@ if (ui.isIE()) { graph.dragX = window.event.clientX; graph.dragY = window.event.clientY; vmlg.setCapture(); + + // Update the component name and property value fields + cname.value = graph.selected.id; + pvalue.value = graph.property(graph.selected.comp); return false; }; @@ -172,7 +185,11 @@ if (ui.isIE()) { if (graph.dragging.parentNode == vmlg && graph.dragging.id.substring(0, 8) != 'palette:') { var gpos = graph.relpos(graph.dragging); - if (pos.xpos() >= 350) { + if (gpos.xpos() >= 330) { + + // If component close enough to editing area, move it there + if (gpos.xpos() < 350) + graph.move(graph.dragging, graph.mkpath().move(350, gpos.ypos())); // Add new dragged component to the composite if (isNil(graph.dragging.compos)) { @@ -198,6 +215,11 @@ if (ui.isIE()) { var compos = scdl.composite(vmlg.compos); setElement(compos, graph.removecomp(graph.dragging.comp, compos)); } + + // Reset current selection + graph.selected = null; + cname.value = ''; + pvalue.value = ''; } } @@ -205,10 +227,8 @@ if (ui.isIE()) { graph.dragging = null; vmlg.releaseCapture(); - // Remove and refresh the composite - map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { vmlg.removeChild(n); } return n; }, nodeList(vmlg.childNodes)); - graph.display(graph.composite(vmlg.compos, graph.mkpath().move(350,0)), vmlg); - + // Refresh the composite + graph.refresh(vmlg); return false; }; @@ -238,8 +258,38 @@ if (ui.isIE()) { return false; }; + /** + * Handle field on change events. + */ + cname.onchange = function() { + if (graph.selected == null) + return false; + + // Change component name and refactor references to it + var compos = scdl.composite(svg.compos); + cname.value = graph.ucid(cname.value, compos); + graph.selected.id = cname.value; + setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value)); + + // Refresh the composite + graph.refresh(svg); + return false; + }; + + pvalue.onchange = function() { + if (graph.selected == null) + return false; + + // Change the component property value + graph.setproperty(graph.selected.comp, pvalue.value); + + // Refresh the composite + graph.refresh(svg); + return false; + }; + // Create hidden spans to help compute the width of - // component and reference titles + // component, reference and property titles graph.comptitlewidthdiv = document.createElement('span'); graph.comptitlewidthdiv.style.visibility = 'hidden' graph.comptitlewidthdiv.style.fontWeight = 'bold' @@ -249,6 +299,10 @@ if (ui.isIE()) { graph.reftitlewidthdiv.style.visibility = 'hidden' div.appendChild(graph.reftitlewidthdiv); + graph.proptitlewidthdiv = document.createElement('span'); + graph.proptitlewidthdiv.style.visibility = 'hidden' + div.appendChild(graph.proptitlewidthdiv); + return vmlg; }; @@ -293,9 +347,10 @@ if (ui.isIE()) { */ graph.mktitle = function(t, bold, pos) { var title = document.createElement('v:textbox'); + title.style.position = 'absolute'; title.style.left = pos.xpos(); title.style.top = pos.ypos(); - title.style.position = 'absolute'; + title.inset = '' + 4 + 'px ' + pos.ypos() + 'px 0px 0px'; if (bold) title.style.fontWeight = 'bold'; var tnode = document.createTextNode(t); @@ -325,6 +380,27 @@ if (ui.isIE()) { }; /** + * Return an element representing the value of a property. + */ + graph.proptitle = function(comp) { + var tsvcs = graph.tsvcs(comp); + var lsvcs = graph.lsvcs(comp); + var pos = graph.mkpath().move(isNil(lsvcs)? 5 : 25, isNil(tsvcs)? 20 : 40); + return graph.mktitle(graph.property(comp), false, pos); + }; + + /** + * Return the width of the value of a property. + */ + graph.proptitlewidth = function(comp) { + var t = graph.property(comp); + graph.proptitlewidthdiv.innerHTML = t; + var twidth = graph.proptitlewidthdiv.offsetWidth; + graph.proptitlewidthdiv.innerHTML = ''; + return twidth; + }; + + /** * Return an element representing the title of a reference. */ graph.reftitle = function(ref) { @@ -347,8 +423,9 @@ if (ui.isIE()) { */ graph.compnode = function(comp, cassoc, pos) { - // Make the component title element + // Make the component and property title elements var title = graph.comptitle(comp); + var prop = graph.proptitle(comp); // Compute the component shape path var path = graph.comppath(comp, cassoc); @@ -388,13 +465,14 @@ if (ui.isIE()) { g.style.top = pos.ypos(); g.appendChild(shape); shape.appendChild(title); + shape.appendChild(prop); g.appendChild(contour) // Store the component and the positions of its services // and references in the component shape g.comp = comp; - g.refpos = path.refpos; - g.svcpos = path.svcpos; + g.refpos = reverse(path.refpos); + g.svcpos = reverse(path.svcpos); return g; }; @@ -426,7 +504,7 @@ if (ui.isIE()) { shape.style.height = 5000; shape.coordsize = '5000,5000'; shape.path = path; - shape.fillcolor = graph.colors.blue1; + shape.fillcolor = graph.colors.lightgray; shape.stroked = 'false'; // Create an overlay contour shape @@ -484,7 +562,7 @@ if (ui.isIE()) { /** * Make an SVG graph. */ - graph.mkgraph = function(pos) { + graph.mkgraph = function(pos, cname, pvalue) { // Create a div element to host the graph var div = document.createElement('div'); @@ -501,8 +579,9 @@ if (ui.isIE()) { svg.style.width = 5000; div.appendChild(svg); - // Keep track of current dragged element + // Track element dragging and selection graph.dragging = null; + graph.selected = null; /** * Find the first draggable element in a hierarchy of elements. @@ -526,18 +605,25 @@ if (ui.isIE()) { // Find draggable component graph.dragging = draggable(e.target); - if (graph.dragging == null) + graph.selected = graph.dragging; + if (graph.dragging == null) { + + // Reset current selection + cname.value = ''; + pvalue.value = ''; return false; + } // Clone component from the palette - if (graph.dragging.id.substring(0, 8) == 'palette:') - graph.dragging = graph.clonepalette(graph.dragging); + var compos = scdl.composite(svg.compos); + if (graph.dragging.id.substring(0, 8) == 'palette:') { + graph.dragging = graph.clonepalette(graph.dragging, compos); + graph.selected = graph.dragging; + } // Cut wire to component - if (graph.dragging.parentNode != svg) { - var compos = scdl.composite(svg.compos); + if (graph.dragging.parentNode != svg) setElement(compos, graph.cutwire(graph.dragging, compos, svg)); - } // Bring component to the top graph.bringtotop(graph.dragging, svg); @@ -546,6 +632,10 @@ if (ui.isIE()) { var pos = typeof e.touches != "undefined" ? e.touches[0] : e; graph.dragX = pos.screenX; graph.dragY = pos.screenY; + + // Update the component name and property value fields + cname.value = graph.selected.id; + pvalue.value = graph.property(graph.selected.comp); return false; }; @@ -561,7 +651,11 @@ if (ui.isIE()) { if (graph.dragging.parentNode == svg && graph.dragging.id.substring(0, 8) != 'palette:') { var gpos = graph.relpos(graph.dragging); - if (gpos.xpos() >= 350) { + if (gpos.xpos() >= 330) { + + // If component close enough to editing area, move it there + if (gpos.xpos() < 350) + graph.move(graph.dragging, graph.mkpath().move(350, gpos.ypos())); // Add new dragged component to the composite if (isNil(graph.dragging.compos)) { @@ -587,16 +681,19 @@ if (ui.isIE()) { var compos = scdl.composite(svg.compos); setElement(compos, graph.removecomp(graph.dragging.comp, compos)); } + + // Reset current selection + graph.selected = null; + cname.value = ''; + pvalue.value = ''; } } // Forget current dragged component graph.dragging = null; - // Remove and refresh the composite - map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { svg.removeChild(n); } return n; }, nodeList(svg.childNodes)); - graph.display(graph.composite(svg.compos, graph.mkpath().move(350,0)), svg); - + // Refresh the composite + graph.refresh(svg); return false; }; @@ -645,6 +742,36 @@ if (ui.isIE()) { window.ontouchmove = window.onmousemove; window.top.ontouchmove = window.onmousemove; + /** + * Handle field on change events. + */ + cname.onchange = function() { + if (graph.selected == null) + return false; + + // Change component name and refactor references to it + var compos = scdl.composite(svg.compos); + cname.value = graph.ucid(cname.value, compos); + graph.selected.id = cname.value; + setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value)); + + // Refresh the composite + graph.refresh(svg); + return false; + }; + + pvalue.onchange = function() { + if (graph.selected == null) + return false; + + // Change the component property value + graph.setproperty(graph.selected.comp, pvalue.value); + + // Refresh the composite + graph.refresh(svg); + return false; + }; + // Create a hidden SVG element to help compute the width // of component and reference titles graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg'); @@ -743,12 +870,33 @@ if (ui.isIE()) { }; /** + * Return an element representing the value of a property. + */ + graph.proptitle = function(comp) { + var title = graph.mktitle(graph.property(comp), false); + title.setAttribute('y', 30); + return title; + }; + + /** + * Return the width of the title of a property. + */ + graph.proptitlewidth = function(comp) { + var title = graph.proptitle(comp); + graph.titlewidthsvg.appendChild(title); + var width = title.getBBox().width; + graph.titlewidthsvg.removeChild(title); + return width; + }; + + /** * Return a node representing a component. */ graph.compnode = function(comp, cassoc, pos) { - // Make the component title + // Make the component and property title elements var title = graph.comptitle(comp); + var prop = graph.proptitle(comp); // Compute the path of the component shape var path = graph.comppath(comp, cassoc); @@ -775,6 +923,7 @@ if (ui.isIE()) { g.appendChild(shape); g.appendChild(contour); g.appendChild(title); + g.appendChild(prop); // Store the component and the positions of its services // and references in the component shape @@ -808,7 +957,7 @@ if (ui.isIE()) { // Create the main button shape var shape = document.createElementNS(graph.svgns, 'path'); shape.setAttribute('d', path); - shape.setAttribute('fill', graph.colors.blue1); + shape.setAttribute('fill', graph.colors.lightgray); // Create an overlay contour shape var contour = document.createElementNS(graph.svgns, 'path'); @@ -873,7 +1022,30 @@ graph.bringtotop = function(n, g) { */ graph.title = function(e) { var d = scdl.documentation(e); - return d != null? d : scdl.name(e); + if (d != null) + return d; + return scdl.name(e); +}; + +/** + * Return the property value of a SCDL component. + */ +graph.property = function(e) { + var p = scdl.properties(e); + if (isNil(p)) + return ''; + return scdl.propertyValue(car(p)); +}; + +/** + * Change the property value of a SCDL component. + */ +graph.setproperty = function(e, value) { + var p = scdl.properties(e); + if (isNil(p)) + return ''; + setElement(car(p), mklist(element, "'property", mklist(attribute, "'name", "property"), value)); + return value; }; /** @@ -1040,7 +1212,7 @@ graph.rrefswidth = function(refs, cassoc) { */ graph.compwidth = function(comp, cassoc) { return memo(comp, 'width', function() { - var twidth = graph.comptitlewidth(comp) + 20; + var twidth = Math.max(graph.comptitlewidth(comp), graph.proptitlewidth(comp)) + 20; var tsvcs = graph.tsvcs(comp); var tsvcsw = Math.max(1, length(tsvcs)) * 60 + 20; var brefs = graph.brefs(comp); @@ -1176,7 +1348,7 @@ graph.comppath = function(comp, cassoc) { * Return a path representing a button node. */ graph.buttonpath = function(t) { - var height = 60; + var height = 40; var width = 120; var path = graph.mkpath().move(10,0); path = path.line(width - 10,path.ypos()).rcurve(10,0,0,10); @@ -1352,14 +1524,39 @@ graph.composite = function(compos, pos) { }; /** + * Return a component unique id. + */ +graph.ucid = function(prefix, compos) { + + // Build an assoc list keyed by component name + var comps = map(function(c) { return mklist(scdl.name(c), c); }, namedElementChildren("'component", compos)); + + /** + * Find a free component id. + */ + function ucid(p, id) { + if (isNil(assoc(p + id, comps))) + return p + id; + return ucid(p, id + 1); + } + + if (isNil(assoc(prefix, comps))) + return prefix; + + return ucid(prefix == ''? 'comp' : prefix, 2); +}; + +/** * Clone a palette component node. */ -graph.clones = 0; -graph.clonepalette = function(e) { +graph.clonepalette = function(e, compos) { // Clone the SCDL component and give it a unique name - var comp = append(mklist(element, "'component", mklist(attribute, "'name", scdl.name(e.comp) + (++graph.clones))), + var comp = append(mklist(element, "'component", mklist(attribute, "'name", graph.ucid(scdl.name(e.comp), compos))), filter(function(c) { return !(isAttribute(c) && attributeName(c) == "'name")}, elementChildren(e.comp))); + var x = '<composite xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1">' + writeXML(mklist(comp), false) + '</composite>'; + var compos = readXML(mklist(x)); + comp = car(scdl.components(compos)); // Make a component node var gcomp = graph.compnode(comp, mklist(), graph.mkpath()); @@ -1396,6 +1593,41 @@ graph.removecomp = function(comp, compos) { }; /** + * Rename a component. + */ +graph.renamecomp = function(comp, compos, name) { + + /** + * Refactor references to a component. + */ + function refactorrefs(refs, oname, nname) { + if (isNil(refs)) + return true; + var ref = car(refs); + if (scdl.target(ref) != oname) + return refactorrefs(cdr(refs), oname, nname); + + // Change the reference's target attribute + setElement(ref, append(mklist(element, "'reference"), append(filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'target"); }, elementChildren(ref)), mklist(mklist(attribute, "'target", nname))))); + + return refactorrefs(cdr(refs), oname, nname); + } + + // Refactor all the references to the renamed component + var oname = scdl.name(comp); + map(function(c) { return refactorrefs(scdl.references(c), oname, name); }, namedElementChildren("'component", compos)); + + // Rename the SCDL promoted service and component + var proms = filter(function(s) { return scdl.name(s) == oname }, scdl.services(compos)); + if (!isNil(proms)) { + setElement(car(proms), mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name))); + } + setElement(comp, append(mklist(element, "'component"), cons(mklist(attribute, "'name", name), filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'name"); }, elementChildren(comp))))); + + return append(mklist(element, "'composite"), elementChildren(compos)); +}; + +/** * Cut the wire to a component node and make that node a * top level component node. */ @@ -1429,7 +1661,6 @@ graph.cutwire = function(node, compos, g) { return append(mklist(element, "'composite"), append(filter(function(c) {return !(isElement(c) && scdl.name(c) == name); }, elementChildren(compos)), mklist(prom, comp))); } - /** * Wire a component to the closest neighbor reference. */ @@ -1513,10 +1744,21 @@ graph.display = function(nodes, g) { }; /** + * Refresh a graph. + */ +graph.refresh = function(g) { + + // Remove nodes and redisplay the composite associated with the graph + map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { g.removeChild(n); } return n; }, nodeList(g.childNodes)); + graph.display(graph.composite(g.compos, graph.mkpath().move(350,0)), g); + return g; +}; + +/** * Display and enable editing of a composite and the graphical * nodes that represent it. */ -graph.edit = function(compos, nodes, g) { +graph.edit = function(compos, nodes, g, cname, pvalue) { // Store the composite in the graphical canvas g.compos = compos; diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html index dbe16d06bf..ac9cf2f3b1 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html @@ -38,6 +38,9 @@ var appname = ui.queryParams()['app']; ui.loadwidget('menu', '/menu.html?app=' + appname); </script> +<h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1> +<br/> + <div id="graph"></div> <script type="text/javascript"> @@ -55,6 +58,8 @@ function editapp(name) { } // Display the editor for the current app +document.title = 'Composition - ' + appname; +$('appNameHeader').innerHTML = ' - ' + appname; editapp(appname); </script> diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html index db5764781a..6a4c055295 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/index.html @@ -18,7 +18,7 @@ --> <html> <head> -<title>App Edit Tools</title> +<title>App Edit</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"/> @@ -35,8 +35,7 @@ ui.loadwidget('menu', '/menu.html'); </script> -<br/> -<h1>App Edit Tools</h1> +<h1>App Edit</h1> <br/> <div id="main"></div> diff --git a/sca-cpp/trunk/modules/edit/htdocs/main.html b/sca-cpp/trunk/modules/edit/htdocs/main.html index 65909c1a94..819af53c52 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/main.html +++ b/sca-cpp/trunk/modules/edit/htdocs/main.html @@ -24,9 +24,10 @@ </head> <body> -<div style="position: absolute; top: 0px; left: 0px; right: 0px;"> +<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> -<div>This module implements simple tools to help you create Tuscany apps.</div> +<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/> <h2>App Dashboard</h2> @@ -36,12 +37,16 @@ <p>Try the <a href="app/?app=store" target="_parent">App Editor</a> to edit an app.</p> <h2>Composition Editor</h2> -<p>Try the <a href="graph/?app=store" target="_parent">Composition Editor</a> to compose an app.</p> +<p>Try the <a href="graph/?app=store" target="_parent">Composition Editor</a> to compose the logic of an app.</p> <h2>Page Editor</h2> <p>Try the <a href="page/?app=store" target="_parent">Page Editor</a> to draw an app page.</p> </div> +<script type="text/javascript"> +if (ui.isIE()) $('bodydiv').style.right = -20; +</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 f8bfa273c7..23aeeb9e2a 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html @@ -38,6 +38,9 @@ var appname = ui.queryParams()['app']; ui.loadwidget('menu', '/menu.html?app=' + appname); </script> +<h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1> +<br/> + <div id="page"></div> <script type="text/javascript"> @@ -55,6 +58,8 @@ function editapp(name) { } // Display the editor for the current app +document.title = 'Page - ' + appname; +$('appNameHeader').innerHTML = ' - ' + appname; editapp(appname); </script> diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html index d0a26fdad0..f3fdb9def7 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html @@ -30,24 +30,38 @@ </head> <body> -<div style="position: absolute; top: 0px; left: 0px; right: 0px;"> +<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> -<table width="100%"> -<tr><th style="width: 338px;">Widgets</th><th style="padding-top: 0px; padding-bottom: 0px;"><span id="appname"></span><span style="position: absolute; top: 2px; right: 8px;"><input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/></span></th></tr> +<table style="width: 100%;"> +<tr> +<th class="thl thr" style="width: 330px; min-width: 330px;">Palette</th><th class="ths" style="width: 3px; min-width: 3px;"></th> + +<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px;"> +<input id="widgetName" type="text" value="widget name" style="position: relative; width: 150px;"/> +<input id="widgetText" type="text" value="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;"> +<span id="source" style="font-weight: normal;">[atom json]</span> +<input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/> +</th> +</tr> + +<tr style="height: 5000px;"><td class="tdl"></td><th class="ths"></th><td class="tdr" colspan="2"></td></tr> </table> -<div id="page" style="position: absolute; top: 60px; left: 0px; width: 5000px; height: 5000px;"> +<div id="page" style="position: absolute; top: 40px; left: 0px; width: 5000px; height: 5000px;"> -<span id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1>Header1</h1></span> -<span id="palette:h2" style="position: absolute; left: 0px; top: 40px;"><h2>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"></input><span>checkbox</span></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="/"><span>link</span></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> +<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"></input><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> </div> @@ -57,6 +71,8 @@ </div> <script type="text/javascript"> +if (ui.isIE()) $('bodydiv').style.right = -20; + var editWidget = sca.component("EditWidget"); var pages = sca.reference(editWidget, "pages"); @@ -64,7 +80,7 @@ var pages = sca.reference(editWidget, "pages"); * The current app name. */ var appname = ui.queryParams()['app']; -$('appname').innerHTML = 'Page: ' + appname; +$('source').innerHTML = '[<a href="/pages/' + appname + '">atom</a> <a href="/appcache/' + appname + '/app.html">json</a>]'; /** * Return the page in an ATOM entry. @@ -142,7 +158,7 @@ $('saveButton').onclick = function(e) { // Initialize the page editor var edit = $('page'); -page.initpage(edit); +page.edit(edit, $('widgetName'), $('widgetText')); // Get and display the current app page getpage(appname, edit); diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js index 4628ec1235..41273d9824 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -27,10 +27,11 @@ if (ui.isIE()) { /** * Init a page editor. IE-specific implementation. */ - page.initpage = function(elem) { + page.edit = function(elem, wname, wtext) { - // Keep track of the current dragged element + // Track element dragging and selection page.dragging = null; + page.selected = null; /** * Handle a mouse down event. @@ -40,8 +41,20 @@ if (ui.isIE()) { // Find a draggable element page.dragging = page.draggable(window.event.srcElement, elem); - if (page.dragging == null) + page.selected = page.dragging; + if (page.dragging == null) { + + // Reset current selection + wname.value = ''; + wtext.value = ''; return false; + } + + // Clone element dragged from palette + if (page.dragging.id.substring(0, 8) == 'palette:') { + page.dragging = page.clone(page.dragging); + page.selected = page.dragging; + } // Bring it to the top page.bringtotop(page.dragging); @@ -50,6 +63,10 @@ if (ui.isIE()) { page.dragX = window.event.clientX; page.dragY = window.event.clientY; elem.setCapture(); + + // Update the widget name and text fields + wname.value = page.selected.id; + wtext.value = page.text(page.selected); return false; }; @@ -61,8 +78,21 @@ if (ui.isIE()) { return false; // Discard element dragged out of page area - if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:') - page.dragging.parentNode.removeChild(page.dragging); + if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:') { + if (ui.csspos(page.dragging.style.left) >= 330) { + + // Unless it's close enough to page area, then move it there + page.dragging.style.left = 350; + page.dragging.cover.style.left = 350; + } else { + page.dragging.parentNode.removeChild(page.dragging); + + // Reset current selection + page.selected = null; + wname.value = ''; + wtext.value = ''; + } + } // Forget current dragged element page.dragging = null; @@ -91,16 +121,29 @@ if (ui.isIE()) { else newY = 0; - // Clone element dragged from palette - if (page.dragging.id.substring(0, 8) == 'palette:') - page.dragging = page.clone(page.dragging); - // Move dragged element page.dragging.style.left = newX; page.dragging.style.top = newY; page.dragging.cover.style.left = newX; page.dragging.cover.style.top = newY; + return false; + }; + + /** + * Handle field on change events. + */ + wname.onchange = wname.onblur = function() { + if (page.selected == null) + return false; + page.selected.id = wname.value; + return false; + }; + wtext.onchange = wtext.onblur = function() { + if (page.selected == null) + return false; + page.settext(page.selected, wtext.value); + return false; }; // Cover child elements with span elements to prevent @@ -115,8 +158,11 @@ if (ui.isIE()) { /** * Init a page editor. Generic implementation for all other browsers. */ - page.initpage = function(elem) { + page.edit = function(elem, wname, wtext) { + + // Track element dragging and selection page.dragging = null; + page.selected = null; /** * Handle a mouse down event. @@ -129,8 +175,20 @@ if (ui.isIE()) { // Find a draggable element page.dragging = page.draggable(e.target, elem); - if (page.dragging == null) + page.selected = page.dragging; + if (page.dragging == null) { + + // Reset current selection + wname.value = ''; + wtext.value = ''; return false; + } + + // Clone element dragged from palette + if (page.dragging.id.substring(0, 8) == 'palette:') { + page.dragging = page.clone(page.dragging); + page.selected = page.dragging; + } // Bring it to the top page.bringtotop(page.dragging); @@ -139,6 +197,10 @@ if (ui.isIE()) { var pos = typeof e.touches != "undefined" ? e.touches[0] : e; page.dragX = pos.screenX; page.dragY = pos.screenY; + + // Update the widget name and text fields + wname.value = page.selected.id; + wtext.value = page.text(page.selected); return false; }; @@ -152,9 +214,22 @@ if (ui.isIE()) { if (page.dragging == null) return false; - // Discard element if dragged out of page area - if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:') - page.dragging.parentNode.removeChild(page.dragging); + // Discard element dragged out of page area + if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:') { + if (ui.csspos(page.dragging.style.left) >= 330) { + + // Unless it's close enough to page area, then move it there + page.dragging.style.left = 350; + page.dragging.cover.style.left = 350; + } else { + page.dragging.parentNode.removeChild(page.dragging); + + // Reset current selection + page.selected = null; + wname.value = ''; + wtext.value = ''; + } + } // Forget dragged element page.dragging = null; @@ -188,11 +263,6 @@ if (ui.isIE()) { else newY = 0; - // Clone element dragged from palette - if (page.dragging.id.substring(0, 8) == 'palette:') { - page.dragging = page.clone(page.dragging); - } - // Move the dragged element page.dragging.style.left = newX; page.dragging.style.top = newY; @@ -206,6 +276,23 @@ if (ui.isIE()) { window.ontouchmove = window.onmousemove; window.top.ontouchmove = window.onmousemove; + /** + * Handle field on change events. + */ + wname.onchange = wname.onblue = function() { + if (page.selected == null) + return false; + page.selected.id = wname.value; + return false; + }; + + wtext.onchange = wtext.onblur = function() { + if (page.selected == null) + return false; + page.settext(page.selected, wtext.value); + return false; + }; + // Cover child elements with span elements to prevent // any input events to reach them map(page.cover, nodeList(elem.childNodes)); @@ -215,6 +302,51 @@ 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 == 'button' || e.className == 'entry' || e.className == 'password' || e.className == 'checkbox') + return e.childNodes[0].value; + if (e.className == 'list') + return e.childNodes[0].childNodes[0].value; + if (e.className == 'link') + return e.childNodes[0].childNodes[0].innerHTML; + return ''; +}; + +/** + * 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; + return t; + } + if (e.className == 'button' || e.className == 'entry' || e.className == 'password') { + e.childNodes[0].value = t; + return t; + } + if (e.className == 'checkbox') { + e.childNodes[0].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; + return t; + } + if (e.className == 'link') { + e.childNodes[0].childNodes[0].href = t; + e.childNodes[0].childNodes[0].innerHTML = t; + return t; + } + return ''; +}; + +/** * Find a draggable element in a hierarchy of elements. */ page.draggable = function(n, e) { @@ -269,7 +401,8 @@ page.clone = function(e) { // Skip the palette: prefix ne.id = e.id.substr(8); - // Copy the HTML content + // Copy the class and HTML content + ne.className = e.className; ne.innerHTML = e.innerHTML; return ne; } diff --git a/sca-cpp/trunk/modules/edit/palettes/variables/palette.composite b/sca-cpp/trunk/modules/edit/palettes/values/palette.composite index 1d10027f95..9a9ed0f087 100644 --- a/sca-cpp/trunk/modules/edit/palettes/variables/palette.composite +++ b/sca-cpp/trunk/modules/edit/palettes/values/palette.composite @@ -19,54 +19,62 @@ --> <composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1" - targetNamespace="http://variables" + targetNamespace="http://values" name="palette"> <service name="number" promote="number"/> <service name="text" promote="text"/> - <service name="set" promote="set"/> + <service name="nothing" promote="nothing"/> <service name="list" promote="list"/> <service name="first" promote="first"/> <service name="rest" promote="rest"/> + <service name="append" promote="append"/> <component name="number" t:color="orange1"> <t:implementation.python script="number.py"/> <service name="number"/> + <property name="property">0</property> </component> <component name="text" t:color="orange1"> <t:implementation.python script="text.py"/> <service name="text"/> + <property name="property">abc</property> </component> - <component name="set" t:color="orange1"> - <documentation>set variable</documentation> - <t:implementation.python script="set.py"/> - <service name="set"/> - <reference name="value"/> - <reference name="variable"/> + <component name="nothing" t:color="orange1"> + <t:implementation.python script="text.py"/> + <service name="nothing"/> </component> <component name="list" t:color="orange1"> - <documentation>make a list</documentation> + <documentation>list</documentation> <t:implementation.python script="list_.py"/> <service name="list"/> - <reference name="first"/> <reference name="rest"/> + <property name="property">abc</property> </component> <component name="first" t:color="orange1"> - <documentation>first of a list</documentation> + <documentation>first of list</documentation> <t:implementation.python script="first.py"/> <service name="first"/> <reference name="value"/> </component> <component name="rest" t:color="orange1"> - <documentation>rest of a list</documentation> + <documentation>rest of list</documentation> <t:implementation.python script="rest.py"/> <service name="rest"/> <reference name="value"/> </component> + <component name="append" t:color="orange1"> + <documentation>append lists</documentation> + <t:implementation.python script="list_.py"/> + <service name="append"/> + <reference name="first"/> + <reference name="second"/> + </component> + </composite> diff --git a/sca-cpp/trunk/modules/js/htdocs/elemutil.js b/sca-cpp/trunk/modules/js/htdocs/elemutil.js index 85eea29aa3..1c006e1e7c 100644 --- a/sca-cpp/trunk/modules/js/htdocs/elemutil.js +++ b/sca-cpp/trunk/modules/js/htdocs/elemutil.js @@ -164,7 +164,7 @@ function valueToElement(t) { var v = isNil(cdr(t))? mklist() : cadr(t); if (!isList(v)) { if (n.substring(0, 2) == atsign) - return mklist(attribute, n.substring(1), v); + return mklist(attribute, "'" + n.substring(2), v); return mklist(element, n, v); } if (isNil(v) || !isSymbol(car(v))) diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css index 2bb36f9319..5161bb0478 100644 --- a/sca-cpp/trunk/modules/js/htdocs/ui.css +++ b/sca-cpp/trunk/modules/js/htdocs/ui.css @@ -23,19 +23,42 @@ font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-si } table { -border: 1px; border-collapse: separate; +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; } th { -font-weight: bold; background-color: #e5ecf9; color: #598edd; -text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; -border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; -border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; +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: 1px; border-right: 1px; +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; +} + +.thr { +border-right: 0px; +} + +.ths { +padding: 0px; } td { padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; +overflow: hidden; +} + +.tdl { +border-right: 1px; +} + +.tdr { +border-left: 1px; } .tdw { @@ -53,9 +76,14 @@ margin: 0px; padding: 0px; input { vertical-align: middle; +font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px; -webkit-text-size-adjust: 140%; } +textarea { +font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px; +} + a:link { color: #598edd; } @@ -103,7 +131,7 @@ cursor: pointer; cursor: hand; .tbar { margin: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px; -border-bottom: 1px solid #a2bae7; +border-bottom: 1px solid #a2bae7; border-collapse: separate; } .ltbar { diff --git a/sca-cpp/trunk/modules/js/htdocs/uiblue.css b/sca-cpp/trunk/modules/js/htdocs/uiblue.css index 9d9eaaad77..4efde86a9a 100644 --- a/sca-cpp/trunk/modules/js/htdocs/uiblue.css +++ b/sca-cpp/trunk/modules/js/htdocs/uiblue.css @@ -23,7 +23,7 @@ font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-si } table { -border: 1px; border-collapse: separate; +border: 0px; border-collapse: collapse; border-color: #000000; border-style: solid; font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px; } @@ -34,10 +34,30 @@ border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; border-style: solid; border-top-color: #000000; border-bottom-color: #000000; } +.thl { +border-left: 0px; +} + +.thr { +border-right: 0px; +} + +.ths { +padding: 0px; +} + td { padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; } +.tdl { +border-right: 1px; +} + +.tdr { +border-left: 1px; +} + .tdw { padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top; } @@ -56,6 +76,10 @@ vertical-align: middle; -webkit-text-size-adjust: 140%; } +textarea { +font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px; +} + a:link { color: #3b5998; } @@ -103,7 +127,7 @@ cursor: pointer; cursor: hand; font-weight: bold; background-color: #3b5998; color: #ffffff; margin: 0px; padding-top: 4px; padding-left: 2px; padding-right: 8px; padding-bottom: 8px; vertical-align: text-top; -border-bottom: 1px solid #000000; +border-bottom: 1px solid #000000; border-collapse: separate; } .ltbar { diff --git a/sca-cpp/trunk/modules/js/htdocs/uicyan.css b/sca-cpp/trunk/modules/js/htdocs/uicyan.css index 2bb36f9319..5161bb0478 100644 --- a/sca-cpp/trunk/modules/js/htdocs/uicyan.css +++ b/sca-cpp/trunk/modules/js/htdocs/uicyan.css @@ -23,19 +23,42 @@ font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-si } table { -border: 1px; border-collapse: separate; +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; } th { -font-weight: bold; background-color: #e5ecf9; color: #598edd; -text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; -border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; -border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; +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: 1px; border-right: 1px; +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; +} + +.thr { +border-right: 0px; +} + +.ths { +padding: 0px; } td { padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; +overflow: hidden; +} + +.tdl { +border-right: 1px; +} + +.tdr { +border-left: 1px; } .tdw { @@ -53,9 +76,14 @@ margin: 0px; padding: 0px; input { vertical-align: middle; +font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px; -webkit-text-size-adjust: 140%; } +textarea { +font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px; +} + a:link { color: #598edd; } @@ -103,7 +131,7 @@ cursor: pointer; cursor: hand; .tbar { margin: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px; -border-bottom: 1px solid #a2bae7; +border-bottom: 1px solid #a2bae7; border-collapse: separate; } .ltbar { diff --git a/sca-cpp/trunk/modules/js/htdocs/xmlutil.js b/sca-cpp/trunk/modules/js/htdocs/xmlutil.js index cad780079a..b3fb34435a 100644 --- a/sca-cpp/trunk/modules/js/htdocs/xmlutil.js +++ b/sca-cpp/trunk/modules/js/htdocs/xmlutil.js @@ -47,8 +47,7 @@ function appendNodes(nodes, p) { * Return the child attributes of an element. */ function childAttributes(e) { - return filter(function(n) { - return n.nodeType == 2; }, nodeList(e.attributes)); + return filter(function(n) { return n.nodeType == 2; }, nodeList(e.attributes)); } /** diff --git a/sca-cpp/trunk/modules/wsgi/elemutil.py b/sca-cpp/trunk/modules/wsgi/elemutil.py index b4b28d5110..00b76c5c6e 100644 --- a/sca-cpp/trunk/modules/wsgi/elemutil.py +++ b/sca-cpp/trunk/modules/wsgi/elemutil.py @@ -120,7 +120,7 @@ def valueToElement(t): v = () if isNil(cdr(t)) else cadr(t) if not isList(v): if n[0:2] == atsign: - return (attribute, n[1:], v) + return (attribute, "'" + n[2:], v) return (element, n, v) if isNil(v) or not isSymbol(car(v)): return cons(element, cons(n, (valuesToElements(v),))) |