| <!-- |
| * 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 class="delayed"> |
| |
| <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" title="Component name" style="position: relative; width: 200px;"/> |
| <input id="propValue" type="text" value="property value" title="Component property value" style="position: relative; width: 300px;"/> |
| <input type="button" id="autoplayButton" title="Turn preview on/off" style="font-weight: bold;" Value="Preview is on"/> |
| <span id="compValue" style="position: relative; font-weight: normal;"></span> |
| <span id="compDebug" style="position: relative; font-weight: normal;"></span> |
| </th> |
| |
| <th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;"> |
| <input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/> |
| </th> |
| </tr> |
| |
| <tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"> |
| </td></tr> |
| </table> |
| |
| <div style="position:absolute; top: 40px; left: 240px; right: 0px; height: 5000px;"> |
| <iframe id="dataFrame" class="databg" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0"></iframe> |
| </div> |
| |
| </div> |
| |
| <script type="text/javascript"> |
| 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 and component names. |
| */ |
| var appname = ui.queryParams()['app']; |
| var compname = ''; |
| |
| /** |
| * 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.readATOMEntry(mklist(doc)); |
| if (isNil(entry)) |
| return mklist(); |
| var content = namedElementChild("'content", car(entry)); |
| if (content == null) |
| return mklist(); |
| return elementChildren(content); |
| } |
| |
| /** |
| * 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, oncompselect, g); |
| |
| // Track the saved composite XML |
| savedcomposxml = car(writeXML(composite, false)); |
| |
| // Show the page |
| ui.showbody(); |
| }); |
| } |
| |
| /** |
| * 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">' + |
| savedcomposxml + '</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; |
| } |
| |
| /** |
| * Return the link to a component value. |
| */ |
| function compvaluelink(appname, cname) { |
| if (cname == '' || isNil(cname)) |
| return ''; |
| var protocol = window.location.protocol; |
| var host = window.location.hostname; |
| var port = ':' + window.location.port; |
| if (port == ':80' || port == ':443' || port == ':') |
| port = ''; |
| var link = protocol + '//' + appname + '.' + host + port + '/data/?component=' + cname; |
| return link; |
| } |
| |
| /** |
| * Return the link to a component raw data. |
| */ |
| function compdebuglink(appname, cname) { |
| if (cname == '' || isNil(cname)) |
| return ''; |
| var protocol = window.location.protocol; |
| var host = window.location.hostname; |
| var port = ':' + window.location.port; |
| if (port == ':80' || port == ':443' || port == ':') |
| port = ''; |
| var link = protocol + '//' + appname + '.' + host + port + '/components/' + cname; |
| return link; |
| } |
| |
| /** |
| * Track whether we're always showing the result data of the selected component. |
| */ |
| var autoplay = true; |
| |
| /** |
| * Show the result data of a component. |
| */ |
| function showData(cname) { |
| var rframe = $('dataFrame'); |
| if (cname == '') { |
| rframe.src = ''; |
| return true; |
| } |
| rframe.src = compvaluelink(appname, cname); |
| return true; |
| } |
| |
| /** |
| * Handle a component select event. |
| */ |
| function oncompselect(appname, cname) { |
| if (cname == compname) |
| return true; |
| compname = cname; |
| var link = compvaluelink(appname, cname); |
| $('compValue').innerHTML = link != ''? '<input type="button" id="playButton" title="View the component value" style="font-weight: bold;" value="View" onclick="playcomp()"/>' : ''; |
| $('compDebug').innerHTML = link != ''? '<input type="button" id="debugButton" title="View the component raw data" style="font-weight: bold;" value="URL" onclick="debugcomp()"/>' : ''; |
| |
| if (autoplay) |
| return showData(cname); |
| return true; |
| } |
| |
| /** |
| * Play the current component. |
| */ |
| function playcomp() { |
| var link = compvaluelink(appname, compname); |
| return window.open(link, '_' + appname + '_' + compname); |
| } |
| |
| /** |
| * Debug the current component. |
| */ |
| function debugcomp() { |
| var link = compdebuglink(appname, compname); |
| return window.open(link, '_' + appname + '_' + compname); |
| } |
| |
| /** |
| * Handle autoplay on/off click event. |
| */ |
| $('autoplayButton').onclick = function(e) { |
| if (autoplay) { |
| autoplay = false; |
| showData(''); |
| $('autoplayButton').value = 'Autorun is off'; |
| return true; |
| } |
| autoplay = true; |
| showData(compname); |
| $('autoplayButton').value = 'Autorun is on'; |
| return true; |
| }; |
| |
| // Init the play app button |
| |
| |
| // Create editor graph area |
| var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue')); |
| 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('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('http', 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('logic', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('math', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| installpalette('python', pos.rmove(0, 40), g, bg, spalette, gpalettes); |
| |
| // Get and display the current app |
| getapp(appname, g); |
| |
| </script> |
| </body> |
| </html> |