Xmodify - dojo.E

Xmodify

> > >

Xmodify gives developers a complete set of HTML DOM and Dojo component modification instructions. Xmodify can be either embedded in a Macro or in a response to a dojoe.processRequest() call. The modification engine processes the the markup and executes any of the instructions contained with in. Developers supply the instruction, query attribute and any instruction specific information. The engine will handle the complexities with determining how to blend the content into the HTML DOM or Dojo component.

Together Macros and Xmodify really simplify the complexities of build building and modifications. Using the buttons below modify the containers to the left.

Xmodify Directives

prepend, append, add-class, insert-after, insert-at, insert-before, remove-attribute, remove-class, remove-element, replace, replace-children, set-attribute, set-innerhtml, set-style

Accordian Modifications

 
<div style="float:left;width:350px">
<script type="dojoe/xml" dojoType="dojoe.XmlScript">
   <ui>
      <dijit.layout.AccordionContainer id="accordianModify"
         duration="200" style="float:left;width:320px;height:300px;overflow:hidden;">
         <dijit.layout.AccordionPane title="Emails" id="emailDrawer">
             <div style="text-align:center;margin-top:1em;">
             <b>Hello, World!</b></div>
             <dijit.form.Button onclick="alert('hello')" label="Hello"/>
         </dijit.layout.AccordionPane>
         <dijit.layout.AccordionPane title="Contacts" id="panelTwo">
             <div style="text-align:center;margin-top:1em;">
             <b>Hello Again!</b></div>
         </dijit.layout.AccordionPane>
       </dijit.layout.AccordionContainer>
   </ui>
</script> 
</div>
<div style="float:left">
 <div><b>Accordian Modifications</b></div>
 <div dojoType="dijit.form.Button" label="Add to Contacts" onclick="dojoe.macros.append.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Append a draw" onclick="dojoe.macros.AccordionContainerMacro.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Remove appended draw" onclick="dojoe.macros.RemoveAccordainPane.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Insert a draw before the Contacts" onclick="dojoe.macros.InsertBefore.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Insert a draw after the Contacts" onclick="dojoe.macros.InsertAfter.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Replace Email Drawer" onclick="dojoe.macros.Replace.execute()"></div><br/>
</div>
		<script type="dojoe/xml" dojoType="dojoe.XmlScript">
			  <declarations>
                <dojoe.Macro id="append">
		            <dojoe.Xmodify>
		                 <append query="div[id='panelTwo']">
							<div id="rating0Value">This will be the location of the ratings</div>
							<span dojoType="dijit.form.DateTextBox"></span>
							<br/>
							<dijit.form.DateTextBox/>						
		                 </append>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="AccordionContainerMacro">
		            <dojoe.Xmodify>
		                 <append query="div[id='accordianModify']">
			    			<dijit.layout.AccordionPane id="addedPane" title="Appended Pane">
								<div style="text-align:center;margin-top:1em;">
									<b>Hello Again!</b></div>
			    			</dijit.layout.AccordionPane>
		                 </append>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="InsertBefore">
		            <dojoe.Xmodify>
		                 <insert-before query="div[id='panelTwo]">
			    			<dijit.layout.AccordionPane title="Insert Before">
								<div style="text-align:center;margin-top:1em;">
									<b>Hello Again!</b></div>
			    			</dijit.layout.AccordionPane>
		                 </insert-before>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="InsertAfter">
		            <dojoe.Xmodify>
		                 <insert-after query="div[id='panelTwo']">
			    			<dijit.layout.AccordionPane title="Insert After">
								<div style="text-align:center;margin-top:1em;">
									<b>Hello Again!</b></div>
			    			</dijit.layout.AccordionPane>
		                 </insert-after>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="InsertAt">
		            <dojoe.Xmodify>
		                 <insert-at query="div[id='AccordionContainer']" index="0">
			    			<dijit.layout.AccordionPane title="Insert At">
								<div style="text-align:center;margin-top:1em;">
									<b>Hello Again!</b></div>
			    			</dijit.layout.AccordionPane>
		                 </insert-at>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="Replace">
		            <dojoe.Xmodify>
		                 <replace query="div[id='emailDrawer']">
			    			<dijit.layout.AccordionPane title="This is a replacement">
								<div style="text-align:center;margin-top:1em;">
								<b>I was replaced!</b></div>
				                <dijit.form.Button onclick="alert('hello')" label="I was Replaced"/>
			    			</dijit.layout.AccordionPane>
		                 </replace>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="RemoveAccordainPane">
		            <dojoe.Xmodify>
		                 <remove-element query="div[id='addedPane']"/>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="RemoveAccordainPane">
		            <dojoe.Xmodify>
		                 <remove-element query="div[id='addedPane']"/>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="appendDiv" format="dojo.string.substitute">
		            <dojoe.Xmodify>
		                 <append query="div[id='divModify']">
		                 	<div>I was just added</div>
							<dijit.form.DateTextBox/>	
							<div>${0}${1}${2}</div>					
		                 </append>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="replaceChildrenDiv">
		            <dojoe.Xmodify>
		                 <replace-children query="div[id='divModify']">
		                 </replace-children>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="setInnerHtmlDiv">
		            <dojoe.Xmodify>
		                 <set-innerhtml query="div[id='divModify']">
		                 	<div>Used the set-innerthtml directive</div>					
		                 </set-innerhtml>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="changeStyle">
		            <dojoe.Xmodify>
		                 <set-style query="div[id='divModify']">
		                 	<style name="border" value="2px dashed aaaaaa"/>					
		                 	<style name="padding" value="10px"/>					
		                 	<style name="width" value="380px"/>					
		                 </set-style>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="addClass">
		            <dojoe.Xmodify>
		                 <add-class query="div[id='divModify']" name="divClass"/>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="removeClass">
		            <dojoe.Xmodify>
		                 <remove-class query="div[id='divModify']" name="divClass"/>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="replaceDiv">
		            <dojoe.Xmodify>
		                 <replace query="div[id='divModify']">
							<div style="border:1px solid 000;width:400px;height:400px" id="divModify"></div>
		                 </replace>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="insertBeforeDiv">
		            <dojoe.Xmodify>
		                 <insert-before query="div[id='divModify']">
							<dijit.form.Button label="I was added before the div"/>	
		                 </insert-before>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="insertAfterDiv">
		            <dojoe.Xmodify>
		                 <insert-after query="div[id='divModify']">
							<dijit.form.DateTextBox/>	
		                 </insert-after>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
                <dojoe.Macro id="insertAtDiv">
		            <dojoe.Xmodify>
		                 <insert-at query="div[id='divModify']" index="2">
							<dijit.form.Button label="Me First"/>	
							<dijit.form.Button label="Me Second"/>	
							<dijit.form.Button label="Me Third"/>	
		                 </insert-at>
		            </dojoe.Xmodify>
		        </dojoe.Macro>
			</declarations>
		</script>

Div Modifications

 
 
<div style="float:left;width:400px">
<div style="border:1px solid RGB(0,0,0);width:350px;height:300px" id="divModify"></div>
</div>
 
<div style="margin-top:30px"><b>Div Modifications</b></div>
 <div dojoType="dijit.form.Button" label="Add to Div" onclick="appendSomething()"></div><br/>
 <div dojoType="dijit.form.Button" label="Replace Children" onclick="dojoe.macros.replaceChildrenDiv.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Set InnerHTML" onclick="dojoe.macros.setInnerHtmlDiv.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Change Style" onclick="dojoe.macros.changeStyle.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Add Class" onclick="dojoe.macros.addClass.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Remove Class" onclick="dojoe.macros.removeClass.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Replace the Div completely" onclick="dojoe.macros.replaceDiv.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Insert After Div" onclick="dojoe.macros.insertAfterDiv.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Insert Before Div" onclick="dojoe.macros.insertBeforeDiv.execute()"></div><br/>
 <div dojoType="dijit.form.Button" label="Insert At" onclick="dojoe.macros.insertAtDiv.execute()"></div><br/>