| <!-- |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| --> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="/ui.css"> |
| <script type="text/javascript" src="/util.js"></script> |
| <script type="text/javascript" src="/elemutil.js"></script> |
| <script type="text/javascript" src="/xmlutil.js"></script> |
| <script type="text/javascript" src="/atomutil.js"></script> |
| <script type="text/javascript" src="/scdl.js"></script> |
| <script type="text/javascript" src="/ui.js"></script> |
| <script type="text/javascript" src="/component.js"></script> |
| <script type="text/javascript" src="graph.js"></script> |
| </head> |
| <body> |
| |
| <div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> |
| |
| <table style="width: 100%;"> |
| <tr> |
| <th class="thl" style="width: 225px; min-width: 225px;">Palette</th> |
| |
| <th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;"> |
| <input id="compName" type="text" value="component name" style="position: relative; width: 200px;"/> |
| <input id="propValue" type="text" value="property value" style="position: relative; width: 300px;"/> |
| <span id="compValue" style="position: relative"></span> |
| </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="Saved"/> |
| </th> |
| </tr> |
| |
| <tr style="height: 5000px;"><td class="tdl"></td><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"); |
| |
| // Setup remote log |
| //rconsole = sca.defun(sca.reference(editWidget, "log"), "log"); |
| |
| /** |
| * The current app name. |
| */ |
| var appname = ui.queryParams()['app']; |
| $('source').innerHTML = '[<a href="/apps/' + appname + '">atom</a> <a href="/appcache/' + appname + '/app.composite">json</a>]'; |
| |
| /** |
| * The current app composite and corresponding saved XML content. |
| */ |
| var savedcomposxml = ''; |
| var composite; |
| |
| /** |
| * Return the composite in an ATOM entry. |
| */ |
| function atomcomposite(doc) { |
| var entry = atom.readATOMEntryDocument(doc); |
| var item = caddr(entry); |
| return cddr(item); |
| } |
| |
| /** |
| * Get and display an app. |
| */ |
| function getapp(name, g) { |
| if (isNil(name)) |
| return; |
| apps.get(name, function(doc) { |
| composite = atomcomposite(doc); |
| if (isNil(composite)) { |
| |
| // Create a default empty composite if necessary |
| var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' + |
| 'targetNamespace="http://' + name + '" ' + |
| 'name="' + name + '">' + |
| '</composite>'; |
| composite = readXML(mklist(x)); |
| } |
| graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, g); |
| |
| // Track the saved composite XML |
| savedcomposxml = car(writeXML(composite, false)); |
| }); |
| } |
| |
| /** |
| * 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(80,0)); |
| graph.display(gpalettes[name], name == spalette? g : bg); |
| }); |
| } |
| |
| /** |
| * 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.display(mklist(b), g); |
| b.onclick = function() { |
| |
| // Display the selected palette |
| spalette = name; |
| for (var pn in gpalettes) |
| graph.display(gpalettes[pn], pn == spalette? g : bg); |
| } |
| getpalette(name, g, bg, palette, gpalettes); |
| } |
| |
| /** |
| * Handle save button click event. |
| */ |
| $('saveButton').onclick = function(e) { |
| return save(); |
| }; |
| |
| /** |
| * Save the current composite. |
| */ |
| function save() { |
| $('saveButton').value = 'Saving'; |
| savedcomposxml = car(writeXML(composite, false)); |
| var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' + |
| '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml"><item>' + |
| savedcomposxml + '</item></content></entry>'; |
| apps.put(appname, entry, function() { |
| if (savedcomposxml == car(writeXML(composite, false))) |
| $('saveButton').value = 'Saved'; |
| return true; |
| }); |
| return true; |
| } |
| |
| /** |
| * Handle a composite change event |
| */ |
| function oncomposchange() { |
| if (savedcomposxml == car(writeXML(composite, false))) |
| return false; |
| $('saveButton').value = 'Save now'; |
| |
| // Autosave after 3 seconds |
| setTimeout(function() { |
| if (savedcomposxml == car(writeXML(composite, false))) |
| return false; |
| return save(); |
| }, 3000); |
| return true; |
| } |
| |
| // Create editor graph area |
| var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'), $('compValue')); |
| var bg = graph.mkgroup(graph.mkpath()); |
| |
| // Install the palettes |
| var gpalettes = new Array(); |
| var spalette = 'event'; |
| var pos = graph.mkpath(); |
| installpalette('event', pos.rmove(0,0), g, bg, spalette, gpalettes); |
| installpalette('value', pos.rmove(0,40), g, bg, spalette, gpalettes); |
| installpalette('url', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('list', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('transform', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('text', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('logic', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('math', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('talk', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('social', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('search', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('sensor', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| |
| // Get and display the current app |
| getapp(appname, g); |
| |
| </script> |
| </body> |
| </html> |