You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-commits@incubator.apache.org by bb...@apache.org on 2006/07/12 19:33:36 UTC

svn commit: r421385 - in /incubator/xap/trunk/WebContent/examples/html-xmodify: ./ index.xal

Author: bbuffone
Date: Wed Jul 12 12:33:36 2006
New Revision: 421385

URL: http://svn.apache.org/viewvc?rev=421385&view=rev
Log:
Checking in the first version of the xModify against the HTML DOM.

Also added and fixed xModify jsunit tests for both 
xmodify against reagular dom and HTML dom

Sample application to test and demo how to use xModify against the 
HTML dom

Added:
    incubator/xap/trunk/WebContent/examples/html-xmodify/
    incubator/xap/trunk/WebContent/examples/html-xmodify/index.xal

Added: incubator/xap/trunk/WebContent/examples/html-xmodify/index.xal
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/WebContent/examples/html-xmodify/index.xal?rev=421385&view=auto
==============================================================================
--- incubator/xap/trunk/WebContent/examples/html-xmodify/index.xal (added)
+++ incubator/xap/trunk/WebContent/examples/html-xmodify/index.xal Wed Jul 12 12:33:36 2006
@@ -0,0 +1,287 @@
+<xal 
+    xmlns:xal="http://www.openxal.org/xal"
+    xmlns:mco="http://www.openxal.org/mco"
+    xmlns:macro="http://www.openxal.org/macro"
+    xmlns:xm="http://www.openxal.org/xmodify">
+    
+   <!--
+        Macro will change the text of all input fields in the browser to Yeppie!
+    -->
+    <macro:macro id="changeInputValues">
+        <xm:modifications document="html">
+            <xm:set-attribute select="//INPUT[@type='text']">
+                <xm:attribute name="value" value="Yeppie!"/>
+            </xm:set-attribute>
+        </xm:modifications>
+    </macro:macro>
+    
+    <!--
+        Disables all text input fields in the application
+    -->
+    <macro:macro id="disableInputText">
+        <xm:modifications document="html">
+            <xm:set-attribute select="//INPUT[@type='text']">
+                <xm:attribute name="disabled" value="true"/>
+            </xm:set-attribute>
+        </xm:modifications>
+    </macro:macro>
+    
+    <!--
+        Enable all text input fields in the application
+    -->
+    <macro:macro id="enableInputText">
+        <xm:modifications document="html">
+            <xm:set-attribute select="//INPUT[@type='text']">
+                <xm:attribute name="disabled" value="false"/>
+            </xm:set-attribute>
+            <xm:remove-attribute select="//INPUT[@type='text']">
+                <xm:attribute name="disabed"/>
+            </xm:remove-attribute>
+        </xm:modifications>
+    </macro:macro>
+    
+    <!--
+        Macro will remove all the input text and password fields.
+    -->
+    <macro:macro id="removeAllInputFields">
+        <xm:modifications document="html">
+            <xm:remove-element select="//INPUT[@type='text']"/>
+            <xm:remove-element select="//INPUT[@type='password']"/>
+        </xm:modifications>
+    </macro:macro>
+    
+    <!--
+        Macro will change the text of all input fields in the browser to Yeppie!
+    -->
+    <macro:macro id="clearTable">
+        <xm:modifications document="html">
+            <xm:remove-element select="//TR[@type='data']"/>
+        </xm:modifications>
+    </macro:macro>
+    
+    <macro:macro id="fillTable">
+        <xm:modifications document="html">
+            <xm:append select="//TABLE[@id='myTable']/TBODY">
+                <tr type="data">
+                    <td>10</td>
+                    <td>Robert</td>
+                    <td>bbuffone@nexaweb.com</td>
+                    <td>555 Boston Road Boston, MA</td>
+                    <td>555-555-5555</td>
+                    <td>20</td>
+                </tr>
+                <tr type="data">
+                    <td>19</td>
+                    <td>Robert</td>
+                    <td>bbuffone@nexaweb.com</td>
+                    <td>555 Boston Road Boston, MA</td>
+                    <td>555-555-5555</td>
+                    <td>20</td>
+                </tr>
+                <tr type="data">
+                    <td>18</td>
+                    <td>Robert</td>
+                    <td>bbuffone@nexaweb.com</td>
+                    <td>555 Boston Road Boston, MA</td>
+                    <td>555-555-5555</td>
+                    <td>20</td>
+                </tr>
+            </xm:append>
+        </xm:modifications>
+    </macro:macro>
+    
+    <macro:macro id="insertBefore">
+        <xm:modifications document="html">
+            <xm:insert-before select="//TR[@type='insertRow']">
+                <tr type="data">
+                    <td colspan="6">This row was inserted using the insert before modification statement</td>
+                </tr>
+            </xm:insert-before>
+        </xm:modifications>
+    </macro:macro>
+    
+    <macro:macro id="insertAfter">
+        <xm:modifications document="html">
+            <xm:insert-after select="//TR[@type='insertRow']">
+                <tr type="data">
+                    <td colspan="6">This row was inserted using the insert after modification statement </td>
+                </tr>
+            </xm:insert-after>
+        </xm:modifications>
+    </macro:macro>
+    
+    <!--
+        Macros handles the mouse overs for all controls. 
+    --> 
+    <macro:macro id="onmouseoverdisable">
+        <xm:modifications document="html">
+            <xm:replace select="id('mouseInArea')">
+                <div style="100%;width:100%background-color:#ff0000" id="mouseOverArea">
+                    <![CDATA[
+                    This button will disable all the fields.
+                    ]]>
+                </div>
+            </xm:replace>
+        </xm:modifications>
+    </macro:macro>
+    
+    <!--
+        Macro will change the text of all input fields in the browser to Yeppie!
+    -->
+    <macro:macro id="onmouseout">
+        <xm:modifications document="html">
+            <xm:replace select="id('mouseOverArea')">
+                <div style="100%;width:100%background-color:#ff0000" id="mouseInArea">
+                    Mouse over a button to see the macro call.
+                </div>
+            </xm:replace>
+        </xm:modifications>
+    </macro:macro>
+       
+    <!--
+        Using percentages in a splitter will not work well in IE, it is better to use a
+        pixel value for splitPosition.
+    -->    
+    <xal:tabPane width="100%" height="100%">        	
+        <xal:tab id="userTab" text="Test&amp;nbsp;Tab">
+            <xal:textView><![CDATA[
+						<div style="valign:top; background-color: #FFFFFF; width: 100%; height: 100%">
+		    		        <table height="100%" style="width:100%">
+		    		            <tr><td valign="top" width="50%">
+    		    		            <table cellPadding="10" cellSpacing="10" height="100%" width="100%">
+    		    		                <tr><td class="surroundCell">
+    		    		                    <table height="100%" width="100%">
+                		    		            <tr height="28px"><td colspan="2"><h1>Embedded HTML:</h1>
+                            		    		        <hr/>
+                            		    		</td></tr>
+                    		    		        <tr height="20px"><td valign="top">   		    		        
+                    		    		        	<table width="100%">
+                	    		    		        	<tr>
+                		    		    		            <td class="fieldName" height="20px" width="100px">Email</td>
+                		    		    		            <td height="20px"><input style="width:100%; height:20px" type="text" id="username"></td>
+                		    		    		        </tr>
+                		    		    		        <tr height="20px">
+                		    		    		            <td class="fieldName" width="100px">Password</td>
+                		    		    		            <td height="20px"><input style="width:100%; height:20px" type="password" id="password"></td>
+                		    		    		        </tr>
+                		    		    		        <tr height="20px">
+                		    		    		            <td class="fieldName" width="100px">Password Confirm</td>
+                		    		    		            <td height="20px"><input style="width:100%; height:20px" type="password" id="passwordConfirm"></td>
+                		    		    		        </tr>
+                		    		    		        <tr height="20px">
+                		    		    		            <td class="fieldName" width="100px">First name</td>
+                		    		    		            <td height="20px"><input style="width:100%; height:20px" type="text" id="firstName"></td>
+                		    		    		        </tr>
+                		    		    		        <tr height="20px">
+                		    		    		            <td class="fieldName" width="100px">Last name</td>
+                		    		    		            <td height="20px"><input style="width:100%; height:20px" type="text" id="lastName"></td>
+                		    		    		        </tr>
+                		            		    	</table>
+        		            		            </td></tr>
+        		            		          </table>
+                    		            </td></tr>
+                    		         </table>       		            		       
+    		            		    </td><td valign="top" width="50%">
+    		    		                <table cellPadding="10" cellSpacing="10" height="100%" width="100%"><tr><td class="surroundCell"><table height="100%" width="100%">
+            		    		            <tr height="28px"><td colspan="2"><h1>HTML Macros:</h1>
+                        		    		        <hr/>
+                        		    		</td></tr>
+                        		    	    <tr>
+                        		    	        <td valign="top"><table><tr><td>
+                        		    	           <input type="submit" value="Change Input Fields" onclick="handleMacro('changeInputValues')">
+            		    		    		       </td>
+            		    		    		       <td width="60%" rowspan="4" valign="top">
+            		    		    		           <div style="100%;width:100%" id="mouseOverArea">
+            		    		    		               Mouse over the "Disable Input Fields" button to see the macro call.
+            		    		    		           </div>
+            		    		    		       </td>
+            		    		    		       </tr><tr><td><input type="submit" value="Disable Input Fields" onclick="handleMacro('disableInputText')" onmouseout="handleMacro('onmouseout')" onmouseover="handleMacro('onmouseoverdisable')">
+            		    		    		       </td></tr><tr><td><input type="submit" value="Enable Input Fields" onclick="handleMacro('enableInputText');alert('Can\'t re-enable fields becuase need to set property not attribute')">
+            		    		    		       </td></tr><tr><td><input type="submit" value="Delete Input Fields" onclick="handleMacro('removeAllInputFields')">
+            		    		    		       </td></tr></table>
+                        		    	        </td>
+                        		    	    </tr>
+                        		    	</table>  
+     		            		    </td></tr></table>
+     		            		</td></tr>
+		            		    <tr height="50%"><td colspan="2">
+		    		                <table cellPadding="10" cellSpacing="10" height="100%" width="100%"><tr><td class="surroundCell"><table height="100%" width="100%">
+        		    		            <tr height="28px"><td colspan="2"><h1>HTML table paging using Macros and xModify:</h1>
+                    		    		        <hr/>
+                    		    		</td></tr>
+                    		    	    <tr>
+                    		    	        <td valign="top"><table width="100%" height="100%" id="myTable">
+                    		    	            <tr>
+                    		    	                <th style="border-bottom: 1px solid #000000">Customer ID</th>
+                    		    	                <th style="border-bottom: 1px solid #000000">Name</th>
+                    		    	                <th style="border-bottom: 1px solid #000000">Email</th>
+                    		    	                <th style="border-bottom: 1px solid #000000">Address</th>
+                    		    	                <th style="border-bottom: 1px solid #000000">Phone Number</th>
+                    		    	                <th style="border-bottom: 1px solid #000000">Pending Orders</th>
+                    		    	            </tr>
+                    		    	            <tr type="insertRow">
+                    		    	                <td colspan="2"">This row will is the index for insert before and after macros.</td>
+                    		    	            </tr>
+                    		    	            <tr type="data">
+                    		    	                <td>1</td>
+                    		    	                <td>Robert</td>
+                    		    	                <td>bbuffone@nexaweb.com</td>
+                    		    	                <td>555 Boston Road Boston, MA</td>
+                    		    	                <td>555-555-5555</td>
+                    		    	                <td>20</td>
+                    		    	            </tr>
+                    		    	            <tr type="data">
+                    		    	                <td>1</td>
+                    		    	                <td>Robert</td>
+                    		    	                <td>bbuffone@nexaweb.com</td>
+                    		    	                <td>555 Boston Road Boston, MA</td>
+                    		    	                <td>555-555-5555</td>
+                    		    	                <td>20</td>
+                    		    	            </tr>
+                    		    	            <tr type="data">
+                    		    	                <td>1</td>
+                    		    	                <td>Robert</td>
+                    		    	                <td>bbuffone@nexaweb.com</td>
+                    		    	                <td>555 Boston Road Boston, MA</td>
+                    		    	                <td>555-555-5555</td>
+                    		    	                <td>20</td>
+                    		    	            </tr>
+                    		    	            <tr type="data">
+                    		    	                <td>1</td>
+                    		    	                <td>Robert</td>
+                    		    	                <td>bbuffone@nexaweb.com</td>
+                    		    	                <td>555 Boston Road Boston, MA</td>
+                    		    	                <td>555-555-5555</td>
+                    		    	                <td>20</td>
+                    		    	            </tr>
+                    		    	            <tr type="data">
+                    		    	                <td>1</td>
+                    		    	                <td>Robert</td>
+                    		    	                <td>bbuffone@nexaweb.com</td>
+                    		    	                <td>555 Boston Road Boston, MA</td>
+                    		    	                <td>555-555-5555</td>
+                    		    	                <td>20</td>
+                    		    	            </tr>
+                    		    	            <tr height="95%">
+                    		    	               <td colspan="6" style="border-top:1px solid #000000">                   		    	         
+                    		    	               </td>
+                    		    	            </tr>
+                    		    	        </table></td>
+                    		    	        <td width="30%" valign="top" align="right">
+                    		    	           <input type="submit" value="Clear Table" onclick="handleMacro('clearTable')">
+                    		    	           <input type="submit" value="Fill Table" onclick="handleMacro('fillTable')">
+                    		    	           <input type="submit" value="Insert Before" onclick="handleMacro('insertBefore')">
+                    		    	           <input type="submit" value="Insert After" onclick="handleMacro('insertAfter')">
+                   		    	            </td>
+                    		    	    </tr>
+                    		    	</table>  
+ 		            		    </td></tr>
+		            		 </table>        		
+		            	</div>
+		        ]]></xal:textView>
+        </xal:tab>
+        <xal:tab text="Macro">
+            <xal:button text="Macro" onCommand="macro:xalButton"/>
+        </xal:tab>
+    </xal:tabPane>
+</xal>