| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|---|
| 2 | <!-- saved from url=(0050)http://www.petetracey.com/jsxml/documentation.html -->
|
|---|
| 3 | <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|---|
| 4 | <title>JSXML XML Tools</title>
|
|---|
| 5 |
|
|---|
| 6 | <style>
|
|---|
| 7 | BODY, TD { font-family: arial; font-size: 12px }
|
|---|
| 8 | .navpane {
|
|---|
| 9 | font-family: arial;
|
|---|
| 10 | font-size: 14px;
|
|---|
| 11 | border-right: #666666 2px solid;
|
|---|
| 12 | padding-top: 5 px;
|
|---|
| 13 | padding-right: 3 px;
|
|---|
| 14 | padding-left: 5 px;
|
|---|
| 15 | }
|
|---|
| 16 | .contentspane {
|
|---|
| 17 | font-family: arial;
|
|---|
| 18 | font-size: 12px;
|
|---|
| 19 | padding-top: 5 px;
|
|---|
| 20 | padding-right: 3 px;
|
|---|
| 21 | padding-left: 5 px;
|
|---|
| 22 | }
|
|---|
| 23 | .code {
|
|---|
| 24 | background-color:#FFFFE8;
|
|---|
| 25 | padding-left: 2px;
|
|---|
| 26 | padding-top: 2px;
|
|---|
| 27 | padding-bottom: 2px;
|
|---|
| 28 | }
|
|---|
| 29 | </style>
|
|---|
| 30 |
|
|---|
| 31 | <meta name="Keywords" content="javascript, xml, jscript, script, xparse, msxml, parser, jsxml, extensible, rexml, iterator, peter, tracey, regular, expression, expressions, w3c">
|
|---|
| 32 | <meta name="Description" content="JSXML is a library of XML tools written in JavaScript. It includes REXML, a regular expression-based XML that outperforms every existing JavaScript XML parser.">
|
|---|
| 33 |
|
|---|
| 34 | <style type="text/css"></style></head>
|
|---|
| 35 |
|
|---|
| 36 | <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
|
|---|
| 37 | <!-- * header * -->
|
|---|
| 38 | <table cellspacing="0" cellpadding="0" width="100%" height="100%"><tbody><tr><td valign="top" class="navpane">
|
|---|
| 39 |
|
|---|
| 40 | <a href="http://www.petetracey.com/jsxml/index.html">Home</a><br>
|
|---|
| 41 | <b>Documentation</b><br>
|
|---|
| 42 | <a href="http://www.petetracey.com/jsxml/download.html">Download</a><br>
|
|---|
| 43 | <br><br>
|
|---|
| 44 | <a href="http://www.askuschat.com/service/chat/BJFB/client/client.php" target="askusBJFB" onclick="oWin=window.open("","askusBJFB","scrollbars=no,status=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,width=540,height=300");"><img src="./jsxml-documentation_files/launch.php" border="0" alt=""></a>
|
|---|
| 45 | <br><br>
|
|---|
| 46 | </td><td class="contentspane" valign="top">
|
|---|
| 47 | <!-- * /header * -->
|
|---|
| 48 |
|
|---|
| 49 |
|
|---|
| 50 | <form name="Form">
|
|---|
| 51 | <span style="font-size: 14px; font-weight: 600;">JSXML XML Tools</span>
|
|---|
| 52 | <br><br>
|
|---|
| 53 | <span style="font-size: 12px; font-weight: 600;">
|
|---|
| 54 | Version 1.2 Documentation<br><br>
|
|---|
| 55 | </span>
|
|---|
| 56 | <ul>
|
|---|
| 57 | <li> <b><a href="http://www.petetracey.com/jsxml/documentation.html#REXML">REXML</a> </b>
|
|---|
| 58 | <ul>
|
|---|
| 59 | <li> Objects </li>
|
|---|
| 60 | <li> Methods </li>
|
|---|
| 61 | <li> Properties </li>
|
|---|
| 62 | </ul>
|
|---|
| 63 | </li>
|
|---|
| 64 | <li> <b><a href="http://www.petetracey.com/jsxml/documentation.html#JSXMLBuilder">JSXMLBuilder</a> </b>
|
|---|
| 65 | <ul>
|
|---|
| 66 | <li> Objects </li>
|
|---|
| 67 | <li> Methods </li>
|
|---|
| 68 | <li> Properties </li>
|
|---|
| 69 | </ul>
|
|---|
| 70 | </li>
|
|---|
| 71 | <li> <b><a href="http://www.petetracey.com/jsxml/documentation.html#JSXMLIterator">JSXMLIterator</a> </b>
|
|---|
| 72 | <ul>
|
|---|
| 73 | <li> Methods </li>
|
|---|
| 74 | <li> Properties </li>
|
|---|
| 75 | </ul>
|
|---|
| 76 | </li>
|
|---|
| 77 | </ul>
|
|---|
| 78 | <br>
|
|---|
| 79 | <br>
|
|---|
| 80 | <a name="REXML">
|
|---|
| 81 | <b>REXML</b><br><br>
|
|---|
| 82 | The first step to accessing an XML document through the REXML parser is creating the object, passing it the XML document.
|
|---|
| 83 | <div class="Code">
|
|---|
| 84 | <br>
|
|---|
| 85 | var xmlDoc = new REXML(strXML);<br>
|
|---|
| 86 | <br>
|
|---|
| 87 | </div>
|
|---|
| 88 | <br>
|
|---|
| 89 | Alternatively, the parser object can be created, the <b>XML</b> property set, and the <b>parse</b> method called.
|
|---|
| 90 | <div class="Code">
|
|---|
| 91 | <br>
|
|---|
| 92 | var xmlDoc = new REXML();<br>
|
|---|
| 93 | ...<br>
|
|---|
| 94 | xmlDoc.XML = strXML;<br>
|
|---|
| 95 | xmlDoc.parse();<br>
|
|---|
| 96 | <br>
|
|---|
| 97 | </div>
|
|---|
| 98 | <br>
|
|---|
| 99 | Once the object is created and XML parsed, the following objects, methods, and properties are used to access the XML.
|
|---|
| 100 | <br>
|
|---|
| 101 | <br>
|
|---|
| 102 | <b>Objects</b>
|
|---|
| 103 | <br>
|
|---|
| 104 | <ul>
|
|---|
| 105 | <b>XMLElement</b>
|
|---|
| 106 | <br>
|
|---|
| 107 | <br>
|
|---|
| 108 | Each node in the XML document is exposed by an XMLElement object.
|
|---|
| 109 | <br>
|
|---|
| 110 | <br>
|
|---|
| 111 | <b>XMLElement Properties</b>
|
|---|
| 112 | <ul>
|
|---|
| 113 | <li>type The type of the element can be:</li>
|
|---|
| 114 | <ul>
|
|---|
| 115 | <li>element</li>
|
|---|
| 116 | <li>text</li>
|
|---|
| 117 | <li>comment</li>
|
|---|
| 118 | <li>pi</li>
|
|---|
| 119 | <li>cdata</li>
|
|---|
| 120 | </ul>
|
|---|
| 121 | <li>name If the type is "element," the tag name</li>
|
|---|
| 122 | <li>childElements[] An array of <b>XMLElement</b>s</li>
|
|---|
| 123 | <li>parentElement The XML Element's parent XML Element</li>
|
|---|
| 124 | <li>text The concatenated value of all text and cdata elements for the element</li>
|
|---|
| 125 | </ul>
|
|---|
| 126 | <b>XMLElement Methods</b>
|
|---|
| 127 | <ul>
|
|---|
| 128 | <li>getText() Returns all text and cdata of all child elements</li>
|
|---|
| 129 | <li>childElement(strElementName) Takes the elements tag name and returns the <b>XMLElement</b> if it's found in the element's children</li>
|
|---|
| 130 | <li>attribute(strAttributeName) Takes the attribute name and returns the value, if found. Returns an empty string if the attribute isn't found.</li>
|
|---|
| 131 | </ul>
|
|---|
| 132 | </ul>
|
|---|
| 133 | <b>Methods</b>
|
|---|
| 134 | <ul>
|
|---|
| 135 | <b>parse()</b>
|
|---|
| 136 | <br>
|
|---|
| 137 | <br>
|
|---|
| 138 | The <b>parse</b> method is called for you if you pass the REXML object a string of XML. Otherwise you must call the parse method before you begin working with the XML.
|
|---|
| 139 | </ul>
|
|---|
| 140 | <b>Properties</b>
|
|---|
| 141 | <ul>
|
|---|
| 142 | <b>rootElement</b>
|
|---|
| 143 | <br>
|
|---|
| 144 | <br>
|
|---|
| 145 | The <b>rootElement</b> property is the entry point, returning the XMLElement for the first node of the document. To work with an XML document the next thing to do after creating the object is to access the rootElement property and use its properties and methods to navigate through the XML.
|
|---|
| 146 | <br>
|
|---|
| 147 | <br>
|
|---|
| 148 | </ul>
|
|---|
| 149 | <div class="Code">
|
|---|
| 150 | function ShowXML(strXML) {<br>
|
|---|
| 151 | var xmlDoc = new REXML(strXML);<br>
|
|---|
| 152 | <br>
|
|---|
| 153 | alert("The root element " + xmlDoc.rootElement.name + " has " xmlDoc.rootElement.childElements.length + " child elements.");<br>
|
|---|
| 154 | for (var i=0; i<xmlDoc.rootElement.childElements.length; i++) {<br>
|
|---|
| 155 | alert("Child element of type " + xmlDoc.rootElement.childElements[i].type);<br>
|
|---|
| 156 | }<br>
|
|---|
| 157 | }<br>
|
|---|
| 158 | </div>
|
|---|
| 159 | <br>
|
|---|
| 160 | <br>
|
|---|
| 161 | </a><a name="JSXMLBuilder">
|
|---|
| 162 | <b>JSXMLBuilder</b><br><br>
|
|---|
| 163 | To manipulate the XML you use the JSXMLBuilder object. Rather than using the structure of the API to give the elements position in the document, the position is given as a vertical and horizontal index (think rows and columns). This makes coding GUIs that manipulate XML a simpler matter, it's the reason there is a separation between the parser that reads and the builder that builds. The specialized roles make REXML a great JavaScript parser, and JSXMLBuilder a great way to manipulate XML through a user interface.
|
|---|
| 164 | <br>
|
|---|
| 165 | <br>
|
|---|
| 166 | <b>Objects</b>
|
|---|
| 167 | <br>
|
|---|
| 168 | <ul>
|
|---|
| 169 | <b>XMLElement</b>
|
|---|
| 170 | <br>
|
|---|
| 171 | <br>
|
|---|
| 172 | Each node in the XML document is exposed by an XMLElement object.
|
|---|
| 173 | <br>
|
|---|
| 174 | <br>
|
|---|
| 175 | <b>XMLElement Properties</b>
|
|---|
| 176 | <ul>
|
|---|
| 177 | <li>type The type is always "element," JSXMLBuilder only supports normal ("tag") elements since support for CDATA, comment, etc would add to code size without any benefit.</li>
|
|---|
| 178 | <li>name The element name</li>
|
|---|
| 179 | <li>text The text of the element</li>
|
|---|
| 180 | <li>index The vertical index of the element in the document</li>
|
|---|
| 181 | <li>level The horizontal index of the element in the document</li>
|
|---|
| 182 | <li>xmlBuilder A reference back to the xmlBuilder object</li>
|
|---|
| 183 | </ul>
|
|---|
| 184 | <b>XMLElement Methods</b>
|
|---|
| 185 | <ul>
|
|---|
| 186 | <li>attribute(sAttributeName) Returns attribute value by name</li>
|
|---|
| 187 | <li>setAttribute(sAttributeName, sValue) edits or adds an attribute</li>
|
|---|
| 188 | <li>removeAttribute(sAttributeName) Removes an attribute</li>
|
|---|
| 189 | <li>parentElement() Returns the elements parent element</li>
|
|---|
| 190 | <li>childElement(Child) Returns a child element by name or number (0 is the first child element, 1 is the second, etc)</li>
|
|---|
| 191 | </ul>
|
|---|
| 192 | </ul>
|
|---|
| 193 | <b>Methods</b>
|
|---|
| 194 | <ul>
|
|---|
| 195 | <b>addElementAt(strElement,Attributes,strText,iElemIndex,iElemLevel)</b><br><br>
|
|---|
| 196 | Inserts the element at the specified level and index, after elements at the same level<br><br>
|
|---|
| 197 | <b>insertElementAt(strElement,Attributes,strText,iElemIndex,iElemLevel)</b><br><br>
|
|---|
| 198 | Inserts the element at the specified level and index<br><br>
|
|---|
| 199 | <b>removeElement(iElemIndex)</b><br><br>
|
|---|
| 200 | removes the element at the specified index<br><br>
|
|---|
| 201 | <b>moveElement(iElem1Index,iElem2Index)</b><br><br>
|
|---|
| 202 | moves the element and child elements at index 1 to index 2.<br><br>
|
|---|
| 203 | <b>generateXML()</b><br><br>
|
|---|
| 204 | returns an updated string of XML.<br><br>
|
|---|
| 205 | </ul>
|
|---|
| 206 | <b>Properties</b>
|
|---|
| 207 | <br>
|
|---|
| 208 | <ul>
|
|---|
| 209 | <b>XML</b><br><br>
|
|---|
| 210 | The string of XML. This is not updated when a change is made, <b>generateXML</b> must be called to get the new XML.<br><br>
|
|---|
| 211 | <b>elements</b><br><br>
|
|---|
| 212 | an array of JSXMLBuilder <b>XMLElements</b>. This is the entry point into the XML document, navigating through this array and associating indexes of nodes to pieces of the user interface looks something like this:<br><br>
|
|---|
| 213 | </ul>
|
|---|
| 214 | <div class="Code">
|
|---|
| 215 | xmlForm = new JSXMLBuilder();<br>
|
|---|
| 216 | xmlForm.load(document.Form.FormXML.value,xmlpForm.rootElement);<br><br>
|
|---|
| 217 | // draws interface for adding, deleting, and resizing columns (column slider)<br>
|
|---|
| 218 | function DrawTabs() { <br>
|
|---|
| 219 | var L = "";<br>
|
|---|
| 220 | var iIndex = LayoutRowSelector.Key;<br>
|
|---|
| 221 | var iTab = 0;<br>
|
|---|
| 222 | for (var i=iIndex+1; i<xmlForm.elements.length && xmlForm.element(i).level > xmlForm.element(iIndex).level; i++) {<br>
|
|---|
| 223 | xmleElem = xmlForm.element(i);<br>
|
|---|
| 224 | if (xmleElem.name == "CELL") {<br>
|
|---|
| 225 | L += '<td style="width:' + xmleElem.attribute("WIDTH") + '"'<br>
|
|---|
| 226 | + ' index=' + i<br>
|
|---|
| 227 | + ' tab=' + iTab<br>
|
|---|
| 228 | + ' onmousedown="StartDrag(this);" class="HashTD"'<br>
|
|---|
| 229 | + ' onclick=AddTab() style="font-size:12px"><br>
|
|---|
| 230 | + '<img scr="../images/spacer.gif" width=4 height=10 style="cursor:move" class="DragSpacerGif"></td>';<br>
|
|---|
| 231 | iTab++;<br>
|
|---|
| 232 | }<br>
|
|---|
| 233 | }<br>
|
|---|
| 234 | L = '<table id=TabSettings border=1 bordercolor="#0033ff" bgcolor="#ffffff" cellspacing=0 cellpadding=0 '<br>
|
|---|
| 235 | + 'style="TABLE-LAYOUT:fixed; overflow: hidden;'<br>
|
|---|
| 236 | + ' border: 1px thin; border-left: #0033ff 1px solid; border-right: #0033ff 1px solid" class="TabTable">'<br>
|
|---|
| 237 | + '<tr tabcount=' + iTab + '>'<br>
|
|---|
| 238 | + L<br>
|
|---|
| 239 | + '</tr></table>';<br>
|
|---|
| 240 | <br>
|
|---|
| 241 | document.all["TabsHTML"].innerHTML = L;<br>
|
|---|
| 242 | document.all["TabSettingPane"].style.display = 'inline';<br>
|
|---|
| 243 | }<br>
|
|---|
| 244 | </div>
|
|---|
| 245 |
|
|---|
| 246 | <ul>
|
|---|
| 247 | <b>load</b><br><br>
|
|---|
| 248 | Takes either a REXML XML Element or a string of XML, if a string of XML is passed it will still need REXML to load the XML.<br><br>
|
|---|
| 249 | </ul>
|
|---|
| 250 |
|
|---|
| 251 |
|
|---|
| 252 | <br>
|
|---|
| 253 | <br>
|
|---|
| 254 | </a><a name="JSXMLIterator">
|
|---|
| 255 | <b>JSXMLIterator</b><br><br>
|
|---|
| 256 | JSXMLIterator iterates through the tree structure of a REXML XMLElement object without using recursion. It's easy to iterate tree structures with recursion, but costly. Avoiding recursion saves valuable time.
|
|---|
| 257 | <br>
|
|---|
| 258 | <br>
|
|---|
| 259 | This example is the same as above but instead of only revealing the child elements of the root element it shows all the elements in the document.
|
|---|
| 260 | <div class="Code">
|
|---|
| 261 | function ShowXML(strXML) {<br>
|
|---|
| 262 | var xmlDoc = new REXML(strXML);<br>
|
|---|
| 263 | <br>
|
|---|
| 264 | for (var xmlIterator=new JSXMLIterator(xmlDoc.rootElement); xmlIterator.getNextNode();) {<br>
|
|---|
| 265 | alert("Child element of type " + xmlIterator.xmleElem.type);<br>
|
|---|
| 266 | }<br>
|
|---|
| 267 | }<br>
|
|---|
| 268 | </div>
|
|---|
| 269 | <br>
|
|---|
| 270 | <br>
|
|---|
| 271 | <b>Methods</b>
|
|---|
| 272 | <ul>
|
|---|
| 273 | <b>getNextNode()</b><br><br>
|
|---|
| 274 | Moves to the next element and sets xmleElem<br>
|
|---|
| 275 | Returns true if there is a next element, false if the end of the document has been reached.
|
|---|
| 276 | </ul>
|
|---|
| 277 | <b>Properties</b>
|
|---|
| 278 | <br>
|
|---|
| 279 | <ul>
|
|---|
| 280 | <b>xmleElem</b><br><br>The current XML Element
|
|---|
| 281 | </ul>
|
|---|
| 282 |
|
|---|
| 283 |
|
|---|
| 284 | </a></form></td></tr></tbody></table>
|
|---|
| 285 |
|
|---|
| 286 |
|
|---|
| 287 | </body></html>
|
|---|
