Computer Science Master [INF532] 2010/11

Web Programming
Vincent Labatut
Galatasaray University

Lab Session 2

APIs for XML

1 DOM for JavaScript

The DOM API can be used in different ways on an XML file. One consists in using DOM to fill an HTML page with data extracted from the XML document. A simple JavaScript function is enough to fulfill this goal. The first step consists in creating an object (here: docXML) implementing the DOM API. The problem is the various existing web browsers do not give access to the same implementations: Internet explorer :
docXML = new ActiveXObject("Microsoft.XMLDOM"); docXML.async = false; docXML.load("myfile.xml"); myFunction();

Mozilla Firefox :

docXML = document.implementation.createDocument("", "", null); docXML.onload = myFunction(); docXML.load("myfile.xml");

For IE, the first line allows creating the domXML object, the second one to this script being interpreted before the XML document has been completely loaded, and the third one to start loading this document. Once the loading is over, function myFonction is called. For FF, a handler function must be specified (2nd line), and there is no need to set the mode on synchronous.

Exercise 1
Create a JavaScript file called bd_2_1.js, and define a function loadXML() to open the XML document bd_1_4.xml, which is available on Kikencere (no need to modify it). This function loadXML must call a function displayXML (to be defined later) as soon as the XML document has been loaded. Note: you can manage both browsers in the same function, knowing the test if(window.ActiveXObject) is true only for IE.

Exercise 2
Create an HTML page bd_2_1.html and link it (using its header) to bd_2_1.js. Your HTML page should contain only a header and a body with the text "click here". In the body tag, put an onclick="loadXML()" event so that the XML page will be loaded when you will click on this text.

Web Programming

Computer Science Master [INF532] 2010/11

Lab Session 2 1/3

APIs for XML

Exercise 3
In the bd_2_1.js file, define a function displayXML() to display the list of the titles of the albums contained in the XML document, as well as the publication dates between parentheses. Use DOM to browse the XML document and extract the relevant information. The list should appear when you click on the "click here" text appearing when the web page is initially displayed. You should get something like:

Note: The XML DOMgetElementsByTagName(tag) function has some compatibility issues in JavaScript, depending on the browser: o On FF, it does not handle namespaces. You have to use the getElementsByTagNameNS(ns,tag) function for this purpose. It takes an additional parameter ns corresponding to the namespace name (usually an URI). You can use "*" (meaning: any namespace) if there is no ambiguity. o On IE, the function handles namespaces, you can directly use getElementsByTag("ns:tag"). To write in the current HTML page, you can use the HTML DOM object called document (which is implicitly declared). Its write method allows adding text in the body of the corresponding HTML body.

2 SAX for Java

As for DOM, the SAX API is implemented in many different programming languages. Here, we will use Java, which happens to be the language initially used to develop SAX. The first step consists in instantiating a parser object implementing SAX. We will use the default JDK parser (other SAX parsers exist though, such as Apache Xerces). First we build parser factory, and then we use to instantiate a new parser object:
SAXParserFactory factory = SAXParserFactory.newInstance(); SAXParser parser = factory.newSAXParser();

DefaultHandler handler) method, where source is the and handler is the object in charge of listening the parser:
parser.parse("mydocument.xml");

The parsing can then be launched thanks to the parse(String source, path towards the file to be parsed

Here, we only want to display onscreen a textual description of the parsed XML file. The start and end of the document and all its elements must be indicated, as well as the names and values of all their attributes, textual contents, processing instructions, and namespace declarations. You must each time display the position of the processed information in terms of column and line in the XML document. Finally, you also have to indent the displayed data in order to mimic the document structure. example: parsing of the bd_1_4.xml document.
(1,1) Beginning document. (53,2) Processing instruction: Target: 'xml-stylesheet'. Parameters: 'type="text/css" href="bd_1_3.css"'.

Web Programming

Computer Science Master [INF532] 2010/11

Lab Session 2 2/3

APIs for XML

(67,6) Beginning prefix declaration: Prefix: 'xsi'. Name: http://www.w3.org/2001/XMLSchema-instance. (67,6) Beginning prefix declaration: Prefix: 'tp'. Name: http://cel.mtf.gsu.edu.tr/INF532. (67,6) Beginning element 'tp:discographie': Attribute: Name: 'schemaLocation'. Value: 'http://cel.mtf.gsu.edu.tr/INF532 bd_1_2.xsd'. (20,7) Beginning element 'tp:disque': Attribute: Name: 'id'. Value: '1'. (32,8) Beginning element 'tp:interprete': Attribute: Name: 'groupe'. Value: 'true'. (15,9) Beginning element 'tp:prenom': (27,9) Ending element 'tp:prenom'. (12,10) Beginning element 'tp:nom': (24,10) Text: 'Led Zeppelin' (33,10) Ending element 'tp:nom'. (19,11) Ending element 'tp:interprete'. (13,12) Beginning element 'tp:titre': (31,12) Text: 'Houses of the Holy' (42,12) Ending element 'tp:titre'. (13,13) Beginning element 'tp:annee': (17,13) Text: '1973'............

Exercise 4
Write a class MyHandler containing a static method main whose purpose will be to initialize the SAX parser and launch the parsing. Your MyHandler class must be able to listen to SAX events and errors.

Exercise 5
Make your class inherit from DefaultHandler and overload the handler methods needed to get the above display. Note: you can define class fields to store an indentation value and a Locator object.

Exercise 6
Overload the handler methods dealing with errors. For each encountered error, you will log in an error.txt file: The error type: warning, regular, or fatal error. The error name: available from the getMessage() method from the SAXException object. The concerned line: available from the getLineNumber() method from the SAXException object. Note: you can use the FileWriter and BufferedWriter classes to write in a text file. example :
// declarations FileWriter fw; BufferedWriter bw; // open file fw = new FileWriter("erreurs.txt"); bw = new BufferedWriter(fw); // write text bw.write("blablabla\n"); // close file bw.flush(); bw.close(); fw.close();

Web Programming

Computer Science Master [INF532] 2010/11

Lab Session 2 3/3