Html element in xml
With Internet Explorer 5.0, XML can be embedded within HTML pages in Data Islands.
The unofficial tag is used to embed XML data within HTML.
XML data can be embedded directly in an HTML page like this:
T
oveJani Reminder
Don’t forget me this weekend!
Or a separate XML file can be embedded like this:
Note that the tag is an HTML element, not an XML element.
Data Islands can be bound to HTML elements (like HTML tables).
In the example below, an XML Data Island with an ID «cdcat» is loaded from an external XML file. An HTML table is bound to the Data Island with a data source attribute, and finally the tabledata elements are bound to the XML data with a data field attribute inside a span.
The Microsoft XML Parser
To read and update — create and manipulate — an XML document, you need an XML parser
The Microsoft XML parser comes with Microsoft Internet Explorer 5.0.
Once you have installed IE 5.0, the parser is available to scripts, both inside HTML documents, and inside ASP files. The parser features a language-neutral programming model that supports:
JavaScript, VBScript, Perl, VB, Java, C++ and more
If you are using JavaScript in IE 5.0, you can create an XML document object with the following code:
var xmlDoc = new ActiveXObject(«Microsoft.XMLDOM»)
If you are using VBScript you create the XML document object with the following code:
set xmlDoc = CreateObject(«Microsoft.XMLDOM»)
If you are using VBScript in an Active Server Page (ASP), you can use the following code:
set xmlDoc = Server.CreateObject(«Microsoft.XMLDOM»)
Loading an XML file into the parser
XML files can be loaded into the parser using script code.
The following code loads an XML document (note.xml) into the XML parser:
The first line of this script creates an instance of the Microsoft XML parser.
The second line turns off asynchronized loading, to make sure that the parser will not continue execution before the document is fully loaded.
The third line tells the parser to load an XML document called note.xml.
Loading pure XML text into the parser
XML text can also be loaded from a text string.
The following code loads a text string into the XML parser:
var text=»» text=text+»Tove Jani »
text=text+»Reminder »
text=text+»Don’t forget me this weekend!»
text=text+»»
var xmlDoc = new ActiveXObject(«Microsoft.XMLDOM»)
xmlDoc.async=»false»
xmlDoc.loadXML(text)
// . processing the document goes here
Note that the «loadXML» method (instead of the «load» method) is used to load a text string.
Displaying XML with JavaScript
To display XML you can use JavaScript.
JavaScript (or VBScript) can be used to import data from an XML file, and display the XML data inside an HTML page.
Some real-life examples how XML can be used to carry information.
XMLNews is a specification for exchanging news and other information.
Using such a standard, makes it easier for both news producers and news consumers to produce, receive, and archive any kind of news information across different hardware, software and programming languages.
An example XML News document:
Authoring XML Data Islands
What is an XML data island?
A data island is an XML document that exists within an HTML page. It allows you to script against the XML document without having to load it through script or through the tag. Almost anything that can be in a well-formed XML document can be inside a data island.
Displaying the XMl from within the HTML gives you the best of two words: data storage in an XML document, with its flexible way of structuring data and labeling every piece of information, plus the established formatting richness and dynamic portability of HTML.
The XML element marks the beginning of the data island, and its ID attribute provides a name you can use to reference the data island.
The XML for a data island can be either inline:
Mark Hanson
81422
or referenced through a SRC attribute on the XML tag:
You can also use the SCRIPT tag to create a data island:
Mark Hanson
81422
1. Linking the XML document to the HTML page in which you want to display the XML data.
a.
b. Binding HTML elemtns to XML elements
The Adventures of Huckleberry Finn Mark Twain mass market paperback 298 $5.49
Book Description
Book Description
Title:
DATAFLD=»TITLE»>Author:
Binding type:
Number of pages:
Price:
How the XML Data is Stored
IE 5 creates a programming object called DSO (data source object) which stores or caches the XML data and provide access tp this data. The DSO stores the XML data as recordser. When you bind an HTML element to an XML element, the DSO automatically supplies the value of the XML element and handles the details.
The DSO also lets you to directly access and maipulate the stored recordset through a collection of methods, properties and events.
You can bind your HTML elements to XML elements by using
1. Table data binding
2. Single record data binding
Table Data binding:Using the inventory XML
Book Inventory
Book Inventory
Title Author Binding Pages Price
STYLE=»font-style:italic»>
You can add the following to navigate through the recordsets
Where datapagesize means home many records at a time you want to see
Book Inventory
Book Inventory
DATAPAGESIZE=»5″ BORDER=»1″ CELLPADDING=»5″>
Title Author Binding Pages Price
STYLE=»font-style:italic»>
Using a Nested Table to Display a Hierarchical Recordset
In the previous example you saw how to show a simple XML document structured as a simple recordset, where each recor contains a fixed set
of fields, all of which can stor character only.
In an hierarchical record set each record can contain in addition to the ficed set of fields, a variable number of occurrences (sero or more) of a nested record.
To manipulate this
| Classic English Literature | |||||
|---|---|---|---|---|---|
| Title | Author | Binding | Pages | Price | |
| STYLE=»font-style:italic»> |
For a Single_record Data binding
Book Inventory
Book Description
Title:
STYLE=»font-weight:bold»>Author:
Binding type:
Number of pages:
Price:
Other Binding elements
- Here you will learn how to bind other HTML elements to XML fields
- How to render HTML Markup contained in XML fields
- How to update the cached XML data
- In the following table you can see all of the HTML elements you can use for single record binding (all except the table element)
HTML ELEMENT
PURPOSE
BOUND PROPERTY OF THE ELEMENT THAT IS BOUND TO THE XML FIELD
WHETHER THE ELEMENT CAN RENDER ANY html MARKUP CONTAINED IN THE XML FIELD IT IS BOUND TO
CAN UPDATE THE CONTENTS OF THE XML FIELDS
A
ACHOR ELEMENT
Href
NO
NO
APPLET
JAVA APPLET
Paral
NO
Yes
BUTTON
BUTTON CONTROL
InnerHTML and innerText
Yes
NO
DIV
USED TO FORMAT A DIVISION OF A DOCUMENT
InnerHTML and innerText
Yes
NO
FRAME
Src
NO
NO
IFRAME
CONTAINS AN INLINE FLOATING FRAME
Src
NO
NO
IMG
Src
NO
NO
INPUT TYPE=CHECKBOX
Checked
NO
Yes
INPUT TYPE=HIDDEN
Value
NO
Yes
INPUT TYPE=PASSWORD
Value
NO
Yes
INPUT TYPE=RADIO
Checked
NO
Yes
INPUT TYPE=TEXT
Value
NO
Yes
LABEL
TEXT LABEL
Src
Yes
NO
MARQUE
SCROLLING TEXT
Src
Yes
NO
SELECT
Text property of the selected list item
NO
Yes
SPAN
Src
Yes
NO
TEXTAREA
Value
NO
Yes
Yes
All of the fields that have an inner text property, sets the text that the element displays, and is bound to the XML field
The innerHTML property sets or retrieves the entire content of the element, including anyHTML markup
Click here for reviews
With a bound checkbox type the checked propert is bound to the XML field
Whenever the INSTOCK field contains anyother text except 0 or false the checkbox is checked.
In the IMG element the src is bound to the XML field.
Moby.bmp Moby-Dick Herman Melville hardcover 724 $9.95
Book Inventory
Book Inventory
Cover Title Author Binding Pages Price
STYLE=»font-style:italic»>
By default if an XML field�s character data happens to include HTML markup, the HTML element bound to that field treats and displays the markup characters as literal text.
If you have
THE wouldn�t be treated as HTML but rather as literal text.
With some HTML elements such as SPANs you can assign DATAFORMATS attribute �HTML� to cause the browser to process any HTML tags.
Updating the Cached XML Data
The XML DSO allows you to modufy the XML data in several ways. These techniques only modify the copy of the XML data that the DSO has temporarily cached in memory, not the original XML document on the server.
You can also have methods to add or remove entire record from the cached record set
AddNew dsoInventory.recordset.addNew()
Delete dsoInventory.recordset.delete()
CancelUpdate dsoInventory.recordset.cancelUpdate()
Using DTD with Data Binding
Create a valid DTD for the following example
[
!ELEMENT AUTHOR (#PCDATA)>
]
>Middle Ages The Canterbury Tales Geoffrey Chaucer hardcover 692 $18.95 Piers Plowman William Langland trade paperback 385 $10.95
Inventory of Classic English Literature
Classic English Literature
BORDER=0 CELLSPACING=10>
Title Author Binding Pages Price
STYLE=»font-style:italic»>
Binding HTML Elements to attributes
Attributes add a bit of complexity to data binding.