diff options
author | jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> | 2011-01-16 23:49:31 +0000 |
---|---|---|
committer | jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> | 2011-01-16 23:49:31 +0000 |
commit | f90791f2f7b48d7e08ce08f7ead498e1191a96b8 (patch) | |
tree | a829513568b183d718280c1a81428adc5637e0ac /sca-cpp/trunk/modules/edit/htdocs/page/page.html | |
parent | 999c66e0e2398c38007b437f8c14154b725203a9 (diff) |
Add sample widget components and a page to edit them, plus minor user interaction fixes.
git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1059710 13f79535-47bb-0310-9956-ffa450edef68
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs/page/page.html')
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.html | 74 |
1 files changed, 66 insertions, 8 deletions
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> |