Introduction to ClientSide Web Development Introduction to ClientSide

Introduction to Client-Side Web Development Introduction to Client-Side programming using Java. Script XML and Java. Script 26 th March 2004 Bogdan L. Vrusias b. vrusias@surrey. ac. uk 26 th March 2004 Bogdan L. Vrusias © 2004

Introduction to Client-Side Web Development Contents • Java. Script and XML • Examples 26

Introduction to Client-Side Web Development Introduction • … as you are already familiar with XML from the previous lecture, … we will now look into how XML is related to client-side processing and Java. Script in general. 26 th March 2004 Bogdan L. Vrusias © 2004 3

Introduction to Client-Side Web Development Uses of XML on the client-side • Populating lists – Handling XML documents gives the ability to dynamically populate list values in the HTML page, instead of hard-coding them. This become even more useful especially if a specific list is used over many pages. • Dynamic data – You can dynamically read XML documents and build data tables, either by HTML and Java. Script, or XSL. • Preventing round-trips – The user can sort or filter that data without having to return to the server. The data can be sorted or filtered on the client's browser. 26 th March 2004 Bogdan L. Vrusias © 2004 4

Introduction to Client-Side Web Development Java. Script for reading XML documents • The Java. Script code is different from platform to platform. The two most popular browsers (Internet Explorer and Netscape) use different Java. Script to load XML. – Loading the XML in Internet Explorer (uses Microsoft XML parser) function read. XML() { xml. Doc = new Active. XObject("Microsoft. XMLDOM"); xml. Doc. async = false; xml. Doc. load("page. xml"); } – Loading the XML in Netscape (uses DOM) function read. XML() { xml. Doc = document. implementation. create. Document("", null); xml. Doc. onload = ""; xml. Doc. load("page. xml"); } • After the XML document is loaded, the processing is the same for both browsers 26 th March 2004 Bogdan L. Vrusias © 2004 5

Introduction to Client-Side Web Development Example of reading XML documents function read. XML(xml. File. Name) { if (document. implementation && document. implementation. create. Document) { xml. Doc = document. implementation. create. Document("", null); xml. Doc. onload = ""; xml. Doc. load(xml. File. Name); } else if (document. Element && document. Element. apply. Element) { xml. Doc = new Active. XObject("Microsoft. XMLDOM"); xml. Doc. async = false; xml. Doc. load(xml. File. Name); } else { alert("Your need IE 5 or Netscape 6 or higher to display this page. "); } } 26 th March 2004 Bogdan L. Vrusias © 2004 6

Introduction to Client-Side Web Development Java. Script for navigating XML documents • Navigating XML documents can be easily done after the XML document has been loaded into an object variable. function build. XMLTable() { var e = xml. Doc. get. Elements. By. Tag. Name("users") for (i=0; i<e. child. Nodes. length; i++) { if (e[0]. child. Nodes[i]. node. Type == 1) { alert(e[0]. child. Nodes[i]. node. Name); } } } 26 th March 2004 Bogdan L. Vrusias © 2004 7

Introduction to Client-Side Web Development Building dynamic tables from XML • Now that the XML is loaded into the memory and we know what methods to use to get information from it, we can build data tables. • On the next pages we will look into how to build dynamic HTML tables from an XML document. 26 th March 2004 Bogdan L. Vrusias © 2004 8

Introduction to Client-Side Web Development Building dynamic tables from XML function build. Table() { var ele = xml. Doc. get. Elements. By. Tag. Name("course"); var new. Table = document. create. Element("table"); var new. Table. Body = document. create. Element("tbody"); new. Table. append. Child(new. Table. Body); var row = document. create. Element("tr"); row. set. Attribute("class", "even"); for (var j = 0; j < ele[0]. child. Nodes. length; j++) { if (ele[0]. child. Nodes[j]. node. Type == 1) { var header = document. create. Element("th"); var data = document. create. Text. Node(ele[0]. child. Nodes[j]. node. Name); header. append. Child(data); row. append. Child(header); } } new. Table. Body. append. Child(row); (… to be continued) 26 th March 2004 Bogdan L. Vrusias © 2004 9

Introduction to Client-Side Web Development Building dynamic tables from XML (… continued) for (var i=0; I < ele. length; i++) { row = document. create. Element("tr"); for (j = 0; j < ele[i]. child. Nodes. length; j++) { if (ele[0]. child. Nodes[j]. node. Type == 1) { var column = document. create. Element("td"); var data = document. create. Text. Node(ele[i]. child. Nodes[j]. first. Child. node. Value); column. append. Child(data); row. append. Child(column); } } new. Table. Body. append. Child(row); row. set. Attribute("class", "odd"); } document. get. Element. By. Id("course. List"). append. Child(new. Table); } 26 th March 2004 Bogdan L. Vrusias © 2004 10