From DPCanadaWiki
This SDK tries to explain in as much detail as possible how the XML files for Distributed Proofreaders Canada are created as well as focusing mostly on how to implement these XML feeds into your site.
If you are further interested in XML you may want to look into the follow sites as well:
This is a beta document. If you have comments, find errors, or just have questions, please contact XML Feeds jgruber@tampabay.rr.com.
</blockquote>
From the World Wide Web Consortium:
"Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere."
I personally find it very difficult to explain to someone exactly what XML is but the best way I can describe it is a format that looks a lot like HTML with tags (called elements) that you define in a file called a DTD or XSD.? XML files allow a lot of flexibility on what data can be included in them but are very specific on how you write the code to implement that data.
We here at Distributed Proofreaders have implemented two different types of XML files based upon the DTD definition format.? The first is a very common XML format called RSS a.k.a. Really Simple Syndication.? This basically is a standard format used by a lot of news aggregators to pull information from various XML feeds across the World Wide Web.? The most recent version of RSS is 2.0 which includes a lot of new features however we are using version 0.91 due to a large number of news aggregators/syndicators still depending upon version 0.91.? Some examples of these sites & programs are Syndic8.com and Trillian Instant Messenger.? Hopefully, over the next few months everyone will move to the latest RSS standard.
We then have another XML format which we have designed for our own purposes here at Distributed Proofreaders.? There is no official name for it like there is for RSS however it includes the same features and a lot more than RSS does.? Because XML allows us to create our own elements we can split the XML file into author, title, date posted & much more.? This allows much more flexibility for sites who are willing to implement the code that we are going to discuss below into their site.? It includes more data for your end user as well as providing you more options on how to display the data.? This feed is again based upon the DTD definition format and you can see our DTD here.
There are many ways you can implement the various feeds we create on your site.? Further down we'll get into some examples of how you can incorporate them but you may be asking now what you should do with them.? There are many different ways of putting our content on your site.? Here are just a few examples:
- A "slashbox".? A term coined by the site Slashdot.org to describe a small table to the side of a page listing small bits of information.? E.G.: The names of the last ten projects posted to Project Gutenberg Canada with links to our library.
- An online library.? A dedicated page on your site to display a list of projects sorted by authors name.? You can include links to download the text file or the zip file or the html file, etc...? Allow a user to resort the display by the books name!
- Distributed Proofreaders Canada Updates.? Develop a program that runs in a users system tray that keeps a user up to date with any news updates from their favorite sites.? Our news updates are syndicated here at Distributed Proofreaders Canada!
These are only a small listing of the types of ways you can use our feeds.? There are many more ways you can implement the feeds, much more than we can list here.? We would appreciate however if you let us know of any great ways that you are using Distributed Proofreader Canada feeds on your site or application.
As stated above there are two different feeds we implement, RSS & our own format which is yet to be named.? Below are the links to the different feeds as well as the type of feed it is.
- http://www.pgdpcanada.net/c/feeds/backend.php?content=projects
--The last ten projects posted to Project Gutenberg Canada in our proprietary XML format.
- http://www.pgdpcanada.net/c/feeds/backend.php?content=projects&type=rss
--The last ten projects posted to Project Gutenberg Canada in RSS format.
- http://www.pgdpcanada.net/c/feeds/backend.php?content=news
--News headlines for the Distributed Proofreaders Canada site in RSS format.*
- http://www.pgdpcanada.net/c/feeds/backend.php?content=news&type=rss
--News headlines for the Distributed Proofreaders Canada site in RSS format.*
*There was seen no reason to have a DTD drawn up for our news headlines since the headlines fit perfectly into the RSS format.? Both feed locations utilize the same XML files so there is no difference in which one you use.
Lastly, this is a beta document so far.? I work on it when I don't have anything to code or my boss isn't looking at work.? If there are any typos or mistakes please let me know by contacting me at jgruber@tampabay.rr.com.? If there are any problems with the example code that we have please let us know as well as letting us know of any ways to improve upon the code.? While I don't know every language by heart that we have listed examples for here we have done our best to make sure they are correct.? However, we do not take any responsibility for any damages or unintended consequences caused by using the code listed here.
</blockquote>
If you do not have physical access to the web server on which you wish to implement a feed you may not be able to install server side scripting language programs such as PHP or ASP.? The are two ways you can still display our content on your site and one of those is by using JavaScript.? The other is CSS, discussed further below, however JavaScript is preferred due to it being able to be used by most browsers out there.? CSS only works with more recent browsers (Internet Explorer 5.5 & Netscape 6.0. or later)
Of course we'll start our parsing the XML file by letting the browser know this is JavaScript code:
<script language="JavaScript">
|
We'll then create the XML document object which will use Microsoft's XMLDOM parser.
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
The next few lines are a function that will load the XML feed into the parser.? It takes the value xmlFile that was passed to it & loads the file.? The xmlDoc.async line ensures the script does not continue until the file is completely loaded.
function loadXML(xmlFile)
{
xmlDoc.async="false";
xmlDoc.load(xmlFile);
xmlObj=xmlDoc.documentElement;
}
|
We'll then call the above function with the following line.? Be sure to replace XML_FEED_URL with the URL to the feed you would like to serve.
Next, we'll then loop through the amount of nodes that are in the feed & display them all.? There is more to this section of code but I'll explain that in more detail in a minute.
i = 0;
numNodes = xmlObj.childNodes.length-1;
while (i <= numNodes)
{
if (xmlObj.childNodes(i).childNodes(1).hasChildNodes != false) {
document.write("Title: ");
document.write(xmlObj.childNodes(i).childNodes(1).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(2).hasChildNodes != false) {
document.write("Author: ");
document.write(xmlObj.childNodes(i).childNodes(2).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(3).hasChildNodes != false) {
document.write("Language: ");
document.write(xmlObj.childNodes(i).childNodes(3).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(4).hasChildNodes != false) {
document.write("Genre: ");
document.write(xmlObj.childNodes(i).childNodes(4).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(0).hasChildNodes != false) {
document.write("Text Download: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(0).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(0).firstChild.text);
document.write("</a><br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(1).hasChildNodes != false) {
document.write("Zip Download: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(1).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(1).firstChild.text);
document.write("</a><br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(2).hasChildNodes != false) {
document.write("HTML Download: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(2).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(2).firstChild.text);
document.write("</a><br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(3).hasChildNodes != false) {
document.write("Library Reference: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(3).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(3).firstChild.text);
document.write("</a><br>");
}
document.write("<br><hr width='75%')<br>");
i++;
}
|
Lastly, let's make sure to let the browser know we are done writing JavaScript
Now you may be wondering about that large section of code right before we ended with the </script> tag.? There's actually a lot to it but I'll try to explain as best as I can.? The first thing you'll see is numNodes = xmlObj.childNodes.length-1;. This line puts in the variable numNodes how many nodes or listings are in the XML feed.? We then start a while loop to go through each and every one of them.
if (xmlObj.childNodes(i).childNodes(1).hasChildNodes != false) {
document.write("Title: ");
document.write(xmlObj.childNodes(i).childNodes(1).firstChild.text);
document.write("<br>");
}
|
The above code we'll use explain the rest of the code.? First thing it does is check to see if xmlObj.childNodes(i)... is empty.? If it is not empty then we'll display the information in that element otherwise that part of the code will be skipped over.? You can access the information in an element by using xmlObj.childNodes(i).childNodes(1).firstChild.text.? Now the second childNodes(1) can be incremented for each additional element.? Elements below elements would be expressed as xmlObj.childNodes(i).childNodes(0).childNodes(1).firstChild.text. Depending upon which feed you are using will determine how many of these you use as well as specifically how you use them.
This should give you a basic overview on how to use JavaScript to include XML feeds on your site.? While this isn't a complete lesson on XML Parsing with JavaScript it does cover the basics.? The code displayed here is a very generic display and you should definitely format it to make it look best on your own site.? You should be able to figure out now how to do this using the code we've went over.? See below for both the output from the above code as well as the full source code.
Image:Output js.png
<script language="JavaScript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
xmlDoc.async="false";
xmlDoc.load(xmlFile);
xmlObj=xmlDoc.documentElement;
}
loadXML('http://www.josephgruber.com/dp-devel/feeds/backend.php?content=posted');
i = 0;
numNodes = xmlObj.childNodes.length-1;
while (i <= numNodes)
{
if (xmlObj.childNodes(i).childNodes(1).hasChildNodes != false) {
document.write("Title: ");
document.write(xmlObj.childNodes(i).childNodes(1).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(2).hasChildNodes != false) {
document.write("Author: ");
document.write(xmlObj.childNodes(i).childNodes(2).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(3).hasChildNodes != false) {
document.write("Language: ");
document.write(xmlObj.childNodes(i).childNodes(3).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(4).hasChildNodes != false) {
document.write("Genre: ");
document.write(xmlObj.childNodes(i).childNodes(4).firstChild.text);
document.write("<br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(0).hasChildNodes != false) {
document.write("Text Download: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(0).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(0).firstChild.text);
document.write("</a><br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(1).hasChildNodes != false) {
document.write("Zip Download: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(1).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(1).firstChild.text);
document.write("</a><br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(2).hasChildNodes != false) {
document.write("HTML Download: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(2).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(2).firstChild.text);
document.write("</a><br>");
}
if (xmlObj.childNodes(i).childNodes(5).childNodes(3).hasChildNodes != false) {
document.write("Library Reference: <a href='");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(3).firstChild.text);
document.write("'>");
document.write(xmlObj.childNodes(i).childNodes(5).childNodes(3).firstChild.text);
document.write("</a><br>");
}
document.write("<br><hr width='75%')<br>");
i++;
}
</script>
? |
