1 / 28

3.3 DOM Examples

3.3 DOM Examples. 1. DOM processing in a Web browser a toy "XML database browser" with JavaScript and MS Internet Explorer 2. Stand-alone DOM processing creating and updating XML files with Java and SUN JAXP implementation of DOM. A Very Short Introduction to JavaScript.

medge-gillespie
Download Presentation

3.3 DOM Examples

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 3.3 DOM Examples 1. DOM processing in a Web browser • a toy "XML database browser" • with JavaScript and MS Internet Explorer 2. Stand-alone DOM processing • creating and updating XML files • with Java and SUN JAXP implementation of DOM Notes 3.3: DOM Examples

  2. A Very Short Introduction to JavaScript • a simple object-orientedscripting language • for computations in a host environment (e.g. a browser or a server) • depends on host objects for central tasks like input and output • used to manipulate, customise and automate facilities of an existing system • originally a Web scripting language • core language independent of host environments • standardised version called ECMAScript (Aug. 1998) Notes 3.3: DOM Examples

  3. Basic components of JavaScript • Objects: collections of properties: • other objects, primitive values, or methods • Methods: functions associated to an object • Primitive values • Undefined,Null,numbers (ints and floats) • Strings:"Hi world!", 'Type "Y" for yes' • Booleanstrue and false • true != 1andfalse != 0, but • if (1)andif (2)succeed , whileif (0)fails Notes 3.3: DOM Examples

  4. Syntax, data types and variables • JavaScript syntax resembles Java • JavaScript is loosely typed • variables need not be declared; normally created by assigning a value • Global and local variables: function newFunction() { var loop=1; // local variable total=0; // global variable ...additional statements... } Notes 3.3: DOM Examples

  5. Web Scripting in a Browser • The client-side host environment provides • objects for UI components: windows, menus, pop-ups, dialog boxes, text areas, anchors, frames, history, cookies, and input/output • means to attach scripting code to events • actions occurring on the Web page:mouse actions, page and image loading, selection, form submission,… • Scripting code resides in the HTML page • reactive to user interaction; no need for a main program Notes 3.3: DOM Examples

  6. Event Handlers • Scripts normally event-driven, triggered by actions on the Web page • Event handlers attached to elements corresponding to UI objects which notify events: <tagName attr1="…" attr2="…" ... onEventName="JavaScript code;"> • Events part of the DOM • standardised in DOM Level 2 Notes 3.3: DOM Examples

  7. Some Common Events & Handlers • click & onClick (on a form element or link) • change & onChange (of text, textarea, or select element) • focus & onFocus and blur & onBlur: • input focus given to or removed from a form element • load & onLoad andunload & onUnload • User loads or exits the page Notes 3.3: DOM Examples

  8. A JavaScript-DOM example • A simple database browser • Technical basis • msxml parser included in MS IE 5 browser • exposes XML documents to JavaScript as a DOM-compliant ActiveX object Notes 3.3: DOM Examples

  9. DOM example: UI frames • The UI consists of two HTML frames: one for control buttons, the other for display <HTML><HEAD> <TITLE>XML DOM Database viewer</TITLE> </HEAD> <FRAMESET COLS="*,2*"> <!-- 1/3 of width for controls frame and 2/3 for display frame --> <FRAME SRC="controls.html"> <FRAME ID="display" SRC="display.html"> <!-- an originally empty HTML page --> </FRAMESET> </HTML> Notes 3.3: DOM Examples

  10. The Example Database File <?xml version="1.0" encoding="ISO-8859-1" ?> <db><person idnum="1234"><last >Kilpeläinen</last><first>Pekka</first></person> <person idnum="5678"><last >Möttönen</last><first>Matti</first></person> <person idnum="9012"><last >Möttönen</last><first>Maija</first></person> <person idnum="3456"><last >Römppönen</last><first>Maija</first></person> </db> Notes 3.3: DOM Examples

  11. Main data structures (Script begins) • In controls.html: <SCRIPT LANGUAGE="JScript"> <!-- // Script begins; Variables: var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); var displStr; /* string for HTML display of xmldoc */ var current; // index of current row var displayFrame; var persons; /* list of person elements in xmldoc */ Notes 3.3: DOM Examples

  12. Body of the controls frame <BODY onLoad="initFrames()"> <!-- Slightly simplified! --> <H2>XML DOM Database Viewer</H2> <B>Enter the location of the XML file: </B> <INPUT ID="XMLFile" TYPE="text" SIZE="30" VALUE="db.xml"></INPUT> <INPUT TYPE="button" onClick="loadXML()" VALUE="Load XML and Display DB"></INPUT> <BUTTON onClick="displayDB()"> Refresh Display</BUTTON> <!-- Show XML button omitted ... --> Notes 3.3: DOM Examples

  13. Controls Frame: navigation buttons <BUTTON OnClick="if (persons==null) alert('Empty database'); else { if ( checkPrev(persons,current) ) showPerson(--current); else alert('At the first person') }"> Previous Person</BUTTON> <BUTTON OnClick="if (persons==null) alert('Empty database'); else {if ( checkNext(persons,current) ) showPerson(++current); else alert('No more persons') }"> Next Person</BUTTON> </BODY> Notes 3.3: DOM Examples

  14. Helper functions (Script continues) function initFrames() // on load { displayFrame = parent.display; displayFrame.document.open(); displayFrame.document.write(""); displayFrame.document.close();} function checkPrev(list, index) { return (index > 0); } function checkNext(list, index) { return (index < list.length - 1);}/* DOM Core features emphasised */ Notes 3.3: DOM Examples

  15. DB Viewer: XML loading function loadXML(){ … xmldoc.load(XMLFile.value); if (xmldoc.documentElement != null) { persons= xmldoc.getElementsByTagName("person"); current = 0; displayDB(); } } Notes 3.3: DOM Examples

  16. Generating the HTML display (1) function displayDB(){ //... // addhtml() collects result to displStr displStr = ""; var rows = xmldoc.documentElement.childNodes; addhtml('<TABLE>'); for (var i = 0; i < rows.length; i++) { // generate HTML for each row; // See loop body below Notes 3.3: DOM Examples

  17. Generating the HTML display (2) var currRow = rows.item(i); addhtml('<TR>'); addhtml('<TD>' + ((i == current)?'*** ':' ') + '</TD>'); // print stars in front of current addhtml('<TD>' + currRow.getAttribute("idnum") + '</TD>'); addhtml('<TD>' + // contents of element ‘last’ currRow.firstChild.firstChild.nodeValue + '</TD>'); addhtml('<TD>' + // contents of element ‘first’ currRow.lastChild.firstChild.nodeValue + '</TD>'); addhtml('</TR>'); }; // end loop through rows Notes 3.3: DOM Examples

  18. Generating the HTML display (3) // Complete the HTML display: addhtml('</TABLE>'); displayFrame.document.open(); displayFrame.document.write(displStr); displayFrame.document.close(); } // end displayDB() // Wrapper for displaying current person: function showPerson(pers){ displayDB() // simply display all } Notes 3.3: DOM Examples

  19. A Java-DOM example • A stand-alone toy application BuildXml • either creates a new db document with two person elements, or adds them to an existing db document • based on the example in Sect. 8.6 of Deitel et al: XML - How to program • Technical basis • DOM support of the Java-based JAXP XML processor implementation • native XML document initialisation and storage methods of the JAXP 1.1 default parser (Apache Crimson) Notes 3.3: DOM Examples

  20. Code of BuildXml (1) • Begin by importing necessary packages: import java.io.*; import org.w3c.dom.*; import org.xml.sax.*; import javax.xml.parsers.*; // Native (parse and write) methods of the // JAXP 1.1 default parser (Apache Crimson): import org.apache.crimson.tree.XmlDocument; Notes 3.3: DOM Examples

  21. Code of BuildXml (2) • Class for modifying the document in file fileName: public class BuildXml { private Document document; public BuildXml(String fileName) { File docFile = new File(fileName); Element root = null; // doc root elemen // Obtain a SAX-based parser: DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); DocumentBuilder builder; /* … */ Notes 3.3: DOM Examples

  22. Code of BuildXml (3) • (After a succestul try to get a new documentBuilder builder from factory:)if (!docFile.exists()) { //create new doc document = builder.newDocument(); // add a comment: Comment comment = document.createComment( "A simple personnel list"); document.appendChild(comment); // Create the root element: root = document.createElement("db"); document.appendChild(root); Notes 3.3: DOM Examples

  23. Code of BuildXml (4) … or if docFile already exists:} else { // access an existing doc try { // to parse docFile document = builder.parse(docFile); root = document.getDocumentElement(); } catch (SAXException se) { System.err.println("Error: " + se.getMessage() ); System.exit(1); } /* A similar catch for a possible IOException */ Notes 3.3: DOM Examples

  24. Code of BuildXml (5) • Create and add two child elements to root:Node personNode = createPersonNode(document, "1234", "Pekka", "Kilpeläinen"); root.appendChild(personNode); personNode = createPersonNode(document, "5678", "Irma", "Könönen"); root.appendChild(personNode); Notes 3.3: DOM Examples

  25. Code of BuildXml (6) • Finally, store the result document:try { // to write the // XML document to file fileName ((XmlDocument) document).write( new FileOutputStream(fileName)); } catch ( IOException ioe ) { ioe.printStackTrace(); } Notes 3.3: DOM Examples

  26. Subroutine to create person elements public Node createPersonNode(Document document, String idNum, String fName, String lName) { Element person = document.createElement("person"); person.setAttribute("idnum", idNum); Element firstName = document.createElement("first"); person.appendChild(firstName); firstName.appendChild( document.createTextNode(fName) ); /* … similarly for a lastName */ return person; } Notes 3.3: DOM Examples

  27. The main routine for BuildXml public static void main(String args[]){ if (args.length > 0) { String fileName = args[0]; BuildXml buildXml = new BuildXml(fileName); } else { System.err.println( "Give filename as argument"); }; } // main Notes 3.3: DOM Examples

  28. Summary of XML APIs • XML processors make the structure and contents of XML documents available to applications through APIs • Event-based APIs • notify application through parsing events • e.g., the SAX callback interfaces • Object-model (or tree) based APIs • provide a full parse tree • e.g, DOM, W3C Recommendation • more convenient, but may require too much resources with the largest documents • Major parsers support both SAX and DOM Notes 3.3: DOM Examples

More Related