An Introduction to XML - Create Items in the XML File
(Page 4 of 4 )
Now you are ready to create a couple of news items to your XML file. Add the following code:
<news>
<article ArticleNumber="001">
<headline>Squirrel Voted in As Mayor Of London!</headline>
<story>In a shock landslide poll result, the new Mayor of London was announced yesterday to be, for the first time in history, a rodent. The existing Mayor will serve out the rest of his term this week before standing down to one of a rare breed of red squirrel. The new Mayor was reluctant to speak to us yesterday, but our sources confirm he is serious and committed to his new role. Public opinion seems mixed at this point, one bystander said "This is nuts".</story>
</article>
</article ArticleNumber="002">
<headline>Microsoft Announce New Super-Stable OS</headline>
<story>Bill Gates yesterday announced the next realease of the popular Windows operating system will be the "most stable yet". Extensive User Testing has been successful so far, with only 765489652554, hang-ups, freezes or crashes on the prototype OS since testing began yesterday.</story> </article>
</news>
You can add as many of these articles to your XML document as you like, there are no limits or boundaries. For reference, the whole file should now look like this:
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE News [
<!ELEMENT News (article)>
<!ELEMENT Article (Headline+, story+)>
<!ELEMENT Headline (#PCDATA)>
<!ELEMENT Story (#PCDATA)>
<!ATTLIST Article ArticleNumber ID #REQUIRED>
]>
<news>
<article ArticleNumber="001">
<headline></headline>
<story></story>
</article>
<article ArticleNumber="002">
<headline></headline>
<story></story>
</article>
</news>
Test it in a Browser
Save the file as news.xml, and once you have done this you can see how this file looks in a browser. I've used Internet Explorer 5.5, which has an XML parser, if you are using a different browser, you need to ensure it offers support for XML. Once the document has loaded in your browser, you should see the xml declaration at the top, followed by the first line of the DTD, followed in turn by your news articles. This indicates that it works!
We now need to create an HTML file that makes use of this information and presents it in a slightly better way. There are several ways of reading an XML data source, some involving JavaScript. The easiest way by far however, can be achieved using just HTML. But before this will work, you need to remove the DTD you have just spent some time perfecting. DTD's are an integral part of XML, which is why I've chosen to show you how to create one, but for a simple document such as this it is not needed. Reopen news.xml in Notepad and remove the DTD (everything from <!DOCTYPE to ]>) and save it as news2.xml. You can still view this file in a browser, and it will still be classed as well-formed.
Now, back in Notepad, open a new file and fill it with the default HTML tags:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
There are two stages to this part, we need to make the HTML page read the information from the XML file, and we need to format the information taken from the XML file and present it. The data can be read using the <xml> tag in the body of the document
<xml id="news" src="news2.xml"></xml>
This will read the xml file. To present it, you need to create a table and a span data field for each of the bottom level child elements. Add the following code directly below the <xml> tag:
<table border="0" datasrc="#news">
<tr>
<td><span datafld="headline"></span></td>
</tr>
<tr>
<td><span datafld="story"></span></td>
</tr>
</table>
Now save the file as news.htm and open it in a browser. As if by magic, your two headlines and associated news stories should appear on the page. You can add as many of these headline and story pairs to the xml file without modifying the HTML document, and they will be displayed as subsequent rows in the table. This approach is called XML data islands and can be used in a separate file, as shown here, or embedded within the HTML document. I find it better to use a separate file as you’re hardly serating content from format when using one file.
Conclusion
You have some basic control over the formatting of the HTML document when adding CSS or formatting tags such as <b>, <I> or <font> to control the appearance of the content. You can take this a little further with JavaScript, but for ultimate control, you need XSL or eXtensible Stylesheet Language, which is another article in itself. I hope that this example has highlighted some of the power and usefulness as XML, the language that is reported to be the future of the Internet.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 23 
