Week 5: Using XML IN HTML

 

.
Reading Assignments
BOOK PAGES
XML in easy stepsN/A

LINKS TO XML RELATED SITES

  1. XML.COM
  2. MSDN'S XML DEVELOPER SITE
  3. IBM's XML WEBSITE
  4. IBM'S ALPHAWORKS WEBSITE
  5. W3 Schools XML Tutorial
  6. Kickstart XML Tutorial
XML INSIDE AN HTML DOCUMENT
  1. Data Island IE5 supports inserting XML document inside an HTML document. To support this added feature, IE5 has added a new HTML tag, <XML>. This tag is analogous to <SCRIPT>, or <STYLE>. Both of these tags isolate and identify a region of an HTML document as a separate entity.
  2. External XML Just like <SCRIPT>, and <STYLE> the content inside the <XML> can be external.
  3. Multiple Islands Again, just like <SCRIPT>, and <STYLE> we can have multiple instances of <XML> tags. This way we can access two or more data source at once.
  4. Identifying Islands As you just seen, we can have several data islands. The question is how we would be able to identify them. The "id" attribute is the answer. Each <XML> can be identified by the value assigned to the "id" attribute.
DATA BINDING
  1. SPAN Data binding is a powerful feature. It allows the data (information inside the tags) to be displayed as if they were inside HTML tags. This allows for a simple separation of data and display. However, not every HTML tag can be used for this purpose. Your reading material has a list of HTML tag that the xml data can bind to. In this example we have displayed the first name of the student. To bind the "first_name" tag to the span tag we had to take the following steps. First, we had to identify our XML document by, setting the "id" to "studentsList". Once he had identified the XML document we needed to tell the "SPAN" tag the particular XML document. Assigning "datasrc" attribute to the id of the XML document handles this necessity. Please remember to put a pound sign (#) before the XML id. To specify the tag where data is retrieved from we assign the element name ("first_name") to the "datafld" attribute.
  2. BINDING ALL ELEMENTS Now, all of our elements have been bounded to the span tags. As you can see the process is the same.
  3. ADDING MORE RECORDS Now, we have added another student to our record, but as you can see only our first student is displayed.
  4. DUPLICATING THE SPANS The question is, will we see both students if the SPAN structure has been duplicated? As you can see, no! SPAN has no way of moving down the XML record. To solve this problem we need to have tabular binding
TABULAR BINDING
  1. TABLE As you saw, we were unable to display a record of students. The TABLE tag in IE5 automatically allocates enough rows for all of our data. Unfortunately it creates a header for each row as well
  2. THEAD, TBODY As, you saw in the above example the headers were repeated as many times as there were records (3 rows). IE5 has two tags that belong to the TABLE tags which can help to eliminate the above problem. By discerning the head of a TABLE from the body of the table using the TBODY and THEAD tag we have stopped IE5 from repeating the header of the table.
  3. LEDGERS We can use the above technique to create ledgers. Since we now everything inside the TBODY region will be looped as many times as the number of the record. We can then create empty rows that would make reading a long record easier.
  4. TABULAR NESTING Up to now we have had a very simple data. However, XML allows for a very complicated hierarchical data structure. In this case we have added the "homework" element. Each "homework" contains a "number" and a "score" element. To represent this kind of structural nesting we need to nest the TABLE as well.
  5. ADDING MORE We have added more students to the XML data. What is worth noting is that student do not have the same number of homework done.
  6. SAME RULES APPLY To clarify the numbers inside the homework we have given the heading to the columns. Just like the main table the nested table is also loops through its records and needs to have THEAD and TBODY.
  7. LIMITING THE SIZE As you saw in the previous example a data can have several records and thus We may want to limit the length of the records displayed. To limit the display length of our record we can use the "datapagesize" attribute of the TABLE tag and set it to the length we would like to display, in this case to 1.
MOVING THROUGH DATA
  1. NEXTPAGE We can move through the records of the table by using the "nextPage()" method. To access this method we need to assign an id to the "id" attribute of the TABLE, ("student_table"). Afterwards is just as simple as using the "onclick" event handler to call "student_table.nextPage()".
  2. PREVIOUSPAGE We can as easily move backward in a record by calling "student_table.previousPage()"
  3. LASTPAGE AND FIRSTPAGE We also have two other methods, "lastPage()" and "firstPage()"
  4. LIMITING HOMEWORK Just as we had done previously we have limited the display length of the table using "datapagesize" for the nested table that contains the homework.
  5. MOVING THROUGH HOMEWORK We have used the same set of methods to move through the homework records.
  6. ADDING TO OUR RECORD We have copied the previous data several times to illustrate the usefulness of "datapagesize". By increasing the "datapagesize" to 3 we are able to view 3 data at the time and the underlying functions all us to scroll through our data
  7. USING THE INPUT TAG We can use the input tag as another element to bind the xml to. In this example we are using three separate input tags to display first_name, last_name, and id.
  8. MOVING THROUGH DATA Just like we did with the TABLE we can move through our record by invoking another built-in method, "moveNext()"
HOMEWORK