|Page (1) of 1 - 05/25/10||email article||print page|
Real-World XML: Part 11 of 12Creating Sarissa examples
XML technologies offer web developers and designers more flexibility than ever before. In Real-World XML, industry expert Joe Marini covers the best programming practices with XML, including the tools needed to build effective XML structures. He demonstrates the implementation of XML formats, how these formats work in real-world situations, and how they can facilitate project planning and development.
XML Essential Training is a prerequisite for getting the most out of this course.
- Understanding the Sitemap index format
- Integrating XML and design
- Using XML effectively in Firefox and Internet Explorer
- Avoiding common design mistakes
- Understanding and implementing DOM algorithms
- Building an XML tag set
- Using XML with RSS and Atom
- Processing XML data with XSLT
Creating Sarissa examples
Okay, so here we are in the code. In this example, we're going to use the Sarissa library to go back and rewrite our earlier Firefox and IE examples using this cross-browser library for handing XML.
You can see here in the code that this is pretty much the same document that we started out with both in the Firefox and IE examples with one major difference.
I have included the Sarissa library here using this script tag. Again, I've provided the URL for downloading Sarissa in the slides part of the section.
So you can go ahead and do that on your computer and just get the sarissa.js library and you'll be good to go. Let's go ahead and start rewriting our example to use the Sarissa library and see if it works cross-browser, like it says it does.
For creating a document, what we need to do is have a variable named xmlDoc.
Now remember that what we're going to do here is use the Sarissa version of getting a DOM document. So I'm going to type Sarissa.getDomDocument and I'm going to pass in two empty strings.
Okay, so now that I have the document, I'm going to go ahead and start creating the document content using the DOM. So I'm going to write xmlDoc.appendChild.
We're going to create a root element named myroot. We're going to create the paragraph tag, like we did in the last examples. We'll create the TextNode.
Okay, so far so good. We'll put the text inside the paragraph and we'll put the paragraph inside the document.
Click Play or press spacebar to start or stop video
Now we're going to do the serialization trick, so that we can display an alert containing the XML's document content.
So we're going to say alert (new XMLSerializer().serializeToString()) and that is going to take the XML document as an argument. Okay, it looks like we're ready to test this out. We are creating the document, creating some content and then calling this XMLSerializer().serializeToString.
Now this looks pretty much like the Firefox example we did earlier, except for this code right here which instantiates the document using Sarissa.
So we'll try it in Firefox first to see what happens.
Okay, you can see that it worked. Here we have the XML document and it's being displayed in this alert.
All right, so now the real test is does this work in IE? So let's see if that works. Okay, and it does. So now we've created a document using a cross-browser syntax that works in both IE and Firefox. All right, let's continue onto the next example.
So in the next example we're going to use Sarissa to load an XML document. So let me comment out the previous example right there.
Okay, so for loading a document, remember, this is the easy part. So we need to create the document. So I'm going to go ahead and copy the line from up here that does that.
We're going to use the same serialization trick to show the content. So I'll copy that line and paste that in down here.
Now to load the document, we need to set the async property to false to make sure that we load it synchronously. Then it should be a simple matter of saying xmlDoc.load. We're going to load the same businesscard.xml file that we loaded in the previous examples.
Okay, so let's make sure that we've got that function being called and it is.
So let's first try it in Firefox. Okay, there it is and you can see it's working.
Now let's try the same thing in IE. Okay, so far so good. We're two for two. Let's move on to the asynchronous example. So I'll comment out the previous one here.
The asynchronous example follows IE's model. So we're going to go ahead and copy the line where we instantiate the document. In this case, we're going to be doing this asynchronously. So let's say async = true. Now what we need to do is define the onreadystatechange(). So I'll write xmlDoc.onreadystatechange = function().
In the onreadystatechange, we need to check to see if the xmlDoc's readyState property is equal to 4. If it is, we're going to do our little serialization tick to show that it loaded. So we'll copy that guy there, paste it in down here. Then all we need to do after the readystatechange is load the document.
So I'll say xmlDoc.load and it's the same businesscard.xml file we've been using in our example so far. Okay, so that should be pretty much all I need to do in order to test the asynchronous loading. So let's bring this up in Firefox first. Make sure I've got it running and I do, okay good. Let's bring up Firefox. All right, there it is. So far so good. One more time in IE, okay.
This is looking pretty good.
So far we've made through three of the examples and the cross-browser promise is holding up. So the final example is parsing the XML document from a string.
Now the Sarissa library implements a cross-browser version of the DOMParser object. So that's what we're going to use. We'll write var oParser = new DOMParser(); We'll write var xmlDoc = oParser.parseFromString();
Remember that when we call parseFromString(), it takes two arguments. We need to pass in the string that we want parsed as well as the MIME type. So, we'll pass in "application/xml" as the MIME type. We're going to type in our <myroot>, paragraph tags, and This is some text.
Okay, so now we're rewritten the example to look pretty much like it did in the Firefox example using the DOMParser object. The only thing we would love to do here is the serialization alert trick. So I'll copy that and paste it in here.
All right, let's hold our breath. Try it out in Firefox.
All right, so it worked in Firefox. We were able to parse from a string. That's good news. Finally, let's try it in Internet
Explorer and there it is. So using the Sarissa library you can see how we were able to implement cross-browser examples of handing XML code.
So I strongly encourage you go download this Sarissa library. It's free.
You can download it from SourceForge.net and I've provided the URL. It provides pretty robust handing of XML content across browsers.
www.lynda.com is an award-winning provider of educational materials, including Hands-On Training instructional books, the Online Training Library, CD- and DVD-based video training, and events for creative designers, instructors, students, and hobbyists. The lynda.com Online Training Library and CD-ROM titles include such subjects as Photoshop, Flash, Dreamweaver, Illustrator, Office, digital photography, Web design, digital video, and many others. lynda.com's all-star team of trainers and teachers provides comprehensive and unbiased movie-based training to an international membership of tens of thousands of subscribers. Considering the speed at which technology evolves, the Online Training Library is a great solution for keeping your skills current. Library subscriptions begin as low as $25 a month, with no long-term commitment required.
Joe Marini is the director for Microsoft's Visual Studio Industry Partner program, and has been active in the Web and graphics industries for more than 15 years. He was an original member of the Dreamweaver engineering team at Macromedia, and has also held prominent roles in creating products such as QuarkXPress, mFactory's mTropolis, and Extensis QX-Tools. He is regularly a featured speaker at industry conferences and has authored or co-authored several books on Web development. His book The Document Object Model is widely regarded as the definitive resource for working with the DOM.
Related Keywords:xml, Extensible Mark-Up Language, xml training, xml tutorial, xml techniques, xml design, web design, web site design, Sarissa library