<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WireIt - WiringEditor</title>
<link rel="icon" href="../favicon.ico" type="image/png" />
<link rel="SHORTCUT ICON" href="../favicon.ico" type="image/png" />
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css" />
<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />
<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />
<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../assets/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />
<style>
div.WireIt-Container {
width: 350px; /* Prevent the modules from scratching on the right */
}
div.WireIt-InOutContainer {
width: 150px;
}
div.WireIt-InputExTerminal {
float: left;
width: 21px;
height: 21px;
position: relative;
}
div.WireIt-InputExTerminal div.WireIt-Terminal {
top: -3px;
left: -7px;
}
div.inputEx-Group div.inputEx-label {
width:100px;
}
div.WireIt-ImageContainer {
width: auto;
}
div.Bubble div.body {
width: 70px;
height: 45px;
opacity: 0.8;
cursor: move;
}
.WiringEditor-module span {
position: relative;
top: -3px;
}
</style>
<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../../lib/yui/tabview/tabview-min.js"></script>
<!-- InputEx with wirable options (WirableField-beta) -->
<script src="../../lib/inputex/js/inputex.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/Field.js" type='text/javascript'></script>
<script type="text/javascript" src="../../js/inputex/WirableField-beta.js"></script>
<script src="../../lib/inputex/js/Group.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/Visus.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/StringField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/Textarea.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/SelectField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/EmailField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/UrlField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/ListField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/CheckBox.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/InPlaceEdit.js" type='text/javascript'></script>
<!-- YUI-Accordion -->
<script src="../../lib/accordionview/accordionview.js" type='text/javascript'></script>
<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../../js/WireIt.js"></script>
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../js/Wire.js"></script>
<script type="text/javascript" src="../../js/Terminal.js"></script>
<script type="text/javascript" src="../../js/DD.js"></script>
<script type="text/javascript" src="../../js/DDResize.js"></script>
<script type="text/javascript" src="../../js/Container.js"></script>
<script type="text/javascript" src="../../js/Layer.js"></script>
<script type="text/javascript" src="../../js/inputex/FormContainer-beta.js"></script>
<script type="text/javascript" src="../../js/LayerMap.js"></script>
<script type="text/javascript" src="../../js/Grouper.js"></script>
<script type="text/javascript" src="../../js/BaseEditor.js"></script>
<script type="text/javascript" src="../../js/ModuleProxy.js"></script>
<script type="text/javascript" src="../../js/WiringEditor.js"></script>
<script type="text/javascript" src="../../js/ImageContainer.js"></script>
<script type="text/javascript" src="../../js/InOutContainer.js"></script>
<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
<script type="text/javascript" src="../../js/RubberBand.js"></script>
<script type="text/javascript" src="../../js/GroupUtils.js"></script>
<script type="text/javascript" src="../../js/GroupFormContainer.js"></script>
<script type="text/javascript" src="../../js/Group.js"></script>
<script type="text/javascript" src="embedded.js"></script>
<style>
/* Comment Module */
div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }
</style>
<script>
// InputEx needs a correct path to this image
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";
var editor, layer;
YAHOO.util.Event.onDOMReady( function() {
editor = new WireIt.WiringEditor(embeddedLanguage);
// Open the infos panel
editor.accordionView.openPanel(2);
});
</script>
</head>
<body class="yui-skin-sam">
<div id="top">
<div class="logo">WiringEditor</a></div>
<div id="toolbar"></div>
<div class="topright">
<span>Hello there !</span> |
<a href="../..">back to WireIt</a>
</div>
</div>
<div id="left">
<ul id="modulesAccordionView">
<li>
<h2>Main</h2>
<div>
<div id='module-category-main'></div>
</div>
</li>
<li>
<h2>Form Modules</h2>
<div>
<div id='module-category-form'></div>
</div>
</li>
<li>
<h2>Image Modules</h2>
<div>
<div id='module-category-images'></div>
</div>
</li>
</ul>
</div>
<div id="right">
<ul id="accordionView">
<li>
<h2>Properties</h2>
<div>
<div id="propertiesForm"></div>
</div>
</li>
<li>
<h2>Minimap</h2>
<div style='position: relative;'>
<div id="layerMap"></div>
</div>
</li>
<li>
<h2>Infos</h2>
<div>
<div style="padding: 10px;">
<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
<br />
<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
<br />
<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
</div>
</div>
</li>
<li>
<h2>Grouping</h2>
<div>
<div id="groupBody">
Select some containers using the G in the top right corner then click to make the group
<button id="makeGroupButton" onclick="editor.layer.grouper.makeGroup()">Make</button>
</div>
<br />
<div id="groupConfig"></div>
</div>
</li>
</ul>
</div>
<div id="center">
</div>
<div id="helpPanel">
<div class="hd">Welcome to the WiringEditor demonstration</div>
<div class="bd" style="text-align: left;">
<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
<br />
<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
<br />
<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
<br />
<p>Close this dialog to test the WiringEditor</p>
</div>
</div>
</body>
</html>
| # |
Change |
User |
Description |
Committed |
|
|
#1
|
16445 |
christiane_renck |
Rename/move file(s) |
|
|
|
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/plugins/grouping/examples/WiringEditor/embedded.html |
|
#1
|
16444 |
christiane_renck |
Adding MergeQuestJS to the Workshop. |
|
|