Introduction to XML

Get a Great Programming Editor

You write XML in ordinary human language, so you can create and modify XML documents in Notepad or any other plain text editor. True, these simple editors save .txt files by default, although it's easy to make them into .xml files. All you have to do is change the file name extension from .txt to .xml.

But why not use one of the best programming editors around? VS has special tools to help you efficiently write XML and programs to manage XML.

Which Version Should You Choose?

It's best to use the Visual Studio Express 2015 for Windows Desktop version. It works with Windows 7, 8, or 10. If you're using a pre-Windows 7 computer, you can download Visual Basic Express 2010, which works with Windows XP and Vista. All the programming code throughout this course will work exactly the same in the VS 2010, 2013, or 2015 versions. However, you'll face a bit of extra work when setting up the 2010 editor later in this lesson, because menus and other features differ somewhat from the later versions. If you have any questions, just ask them in the Discussion Area, and I'll be glad to help.

To get a copy of VS 2015, go to this Web page:

https://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

Got it? Great! Let's walk through the steps of the download together.

Click to download Visual Studio Express

1. Scroll down until you see the Download link under Express for Desktop. Clicking this link will save a file named wdexpress_full.exe to your download folder in File Explorer. If asked whether you want to Run or Save, choose Run and skip step 2.
2. Using File Explorer, locate wdexpress_full.exe wherever you downloaded it. Double-click that filename and the installation will begin.
3. If asked, fill in your name, email, and country. (Steps like this one may not occur if you've previously installed a Microsoft product.)
4.  If a dialog box appears asking if you want to allow this program to make changes, click Yes. The installation takes a few minutes, even on a fast computer. VS is huge!
5. After the installation, run Visual Studio. If a message appears asking you to sign in, do so. At this point, at long last, the editor unfolds before your astonished eyes.

Installing the Earlier 2010 or 2013 Versions

Note: If you prefer to use the 2013 version of Visual Studio, that's fine, too. You can download it here:

http://www.microsoft.com/en-us/download/details.aspx?id=44914

You can simultaneously have 2010, 2013, and 2015 versions on the same computer if you wish. They're all free, and they don't interfere with each other.

Note to XP and Vista users: If you're using Windows XP or Vista, you can download the Visual Studio 2010 .iso file from here:

http://go.microsoft.com/?linkid=9709969

You'll find Microsoft's instructions on installing from this .iso file here:

https://www.microsoft.com/Licensing/servicecenter/Help/FAQDetails.aspx?id=134

Editor ready for your first project

Customizing the Editor

When you first start VS, you'll see various links and announcements. Don't worry about these. We're going to dive right in and start our XML project.

1. Click the New Project link.
2. The Visual Basic and Windows Forms Application options should be selected (highlighted) by default. If not, click them to select them.

New projects start here

3. Change the name to Cookbook, and change the location to c:\XML Projects.
   
4. Click OK. The editor will create a new folder named c:\XML Projects and will store your new cookbook project in that folder.

This is probably a good time to mention our project for this course. You guessed it—a cookbook. Throughout this course, you'll be creating your own personalized cookbook with recipes stored in the XML format. I'll give you some more details in the next chapter, but for now, take a look at the editor window:

One view of VS editor

Don't worry if your editor doesn't look exactly like the one shown here. We'll fix it in a minute.

What do we need, and what can we hide? We don't need to use the Solution Explorer just yet. It's most useful for larger programs.

1. Click the x in the upper-right corner of the Solution Explorer to hide its window.
2. Now, close the Properties window. We'll use it later on, but we won't need it right now.
3. On the far left, you'll see a Data Sources tab. Hide that too by clicking the tab and then clicking the x in its upper-right corner.
   

   Leave the Toolbox. We'll use it a lot in later lessons. And we'll also want to view the Error List window. If there's a problem in your XML code, this window identifies it for you by listing its line number. That way, you'll know where the error is. And the Error List also tells you what the problem is.

4. To open the Error List, click the View menu, and then click Error List. A new window opens in the bottom of the editor.

Here's how your editor should look after you've finished making these adjustments:

Error List shows where and how to fix bugs

While we're at it, let's customize the editor just a little bit more. First, you'll want to turn line numbering on, because the Error List refers to line numbers.

1. Click the Tools menu, and then click Options.
2. Type XML in the Search Options field in the upper left of the Options dialog box.
3. Then Click General under the XML entry.
4. On the right side of the Options dialog box, click the Line Numbers check box.
5. Also, on this same page in the dialog box, click the Word Wrap check box. That will keep lines of text from running off the right side of the editor window.

If you don't like Consolas, the default font, you can change it, too. I changed it to Courier New for this course. Go to Tools>Options>Environment>Fonts and Colors.

And you're done! Click OK to close the Options dialog box.  

Options dialog box where you turn on line numbering and word wrap

In the next chapter, you'll create your first XML document!

Creating Your First XML Document

We've now got the editor in great shape—personalized to suit our needs. The workbench is clean with only the few tools we'll need for our project.

So now you're ready to open the XML editor and write your first XML code. Let's get started!

Click File > New File, and then double-click XML File in the New File dialog box. You'll see the VS editor transform into an XML editor, and then the editor opens a brand-new XML document.

The editor automatically names your new file XMLFile1.xml and displays this name on the yellow tab above the editing window. The editor also inserts a line of code:

<?xml version="1.0" encoding="utf-8"?>

This is just a preliminary housekeeping task, because most XML documents start like this.

Editor where you enter your XML code

The Excitable Error List

Did you notice the error and that alarming red circle ? What's up? What have we done?

It's not our fault—and it'll disappear from the Error List when we type in our first XML element in a minute. The VS Error List tool is like an extremely diligent but tightly wound teacher. It's often very helpful, but sometimes it freaks out. It's always watching the code, and it can be a bit overcareful, like this warning about a missing root level element. You just created this new file, so you haven't had time yet to add the root element.

In other words, don't worry.

This first line in an XML document announces and specifies a few things:

• First, that the file is in fact an XML document.
• Second, that it's version 1. Everybody uses version 1. There is no version 2.
• And third, the character set, or what kind of letters are used. Utf-8 is a universal standard that can handle everything from American English characters to Japanese or Greek. (Don't worry about this utf-8 encoding. That's pretty much universal as well. Just let the editor insert this line for you whenever you start a new XML file, and then forget about it.)

Building Your Personal Database

Okay, so good so far. As mentioned, you'll be creating a personal cookbook in this course—a collection of recipes stored in the XML format. And we'll write our own XML app to access and manage the recipes. You'll even be able to search for anything—leftovers, Mexican, heart healthy, microwave, tomato, 2015—whatever. It'll be like your own personal Google.

What's more, XML is so flexible that the cookbook project is easy to modify. Later in the course, I'll show you how to quickly change your project into various apps to store, organize, and display pretty much any kind of information.

This will be your project. You build this app from the ground up. So you can always change what you store in it and how you display it.

I'm sure you've noticed little annoyances (and some not so little) when you use commercial apps. One of my big issues with Word is that they've "streamlined" it. Its current designers think Word should display as little information as possible. For example, if you search a document, they show you a list of the results. That's great, but the minute you try to edit the document, they hide the results list. Why? You sometimes want to look at that list.

To me, this is extremely unhelpful. So I wish I could get into Word and delete the programming lines that do this.

One of the coolest things about programming—about writing your own program as we'll do in this course—is that you can totally customize it: what it looks like, what it does, how it does it. In other words, you tell the machine how to behave.

So let's get started. We'll begin by describing the structure of our data. By structure, I mean how we want to organize and label our data. What kinds of information do we want to include? Stop and think a minute about the elements of a simple cookbook. It's a collection of recipes, so what are the main components of any recipe?

Nesting Elements

For our cookbook, let's keep it really simple at this point. Each recipe will have only two elements: its title and its instructions.

XML stores information in nested elements: elements within elements.

Nested structures, like tables, one within another

XML is like a set of nested tables. Our cookbook has a parent element, the <recipe>. And nested within each parent recipe are the two child elements—the <title> and the <instructions>.

You could come up with other structures that would work fine. And you could use different names for your XML elements too:

<name>, <ingredients>, <procedure>

Remember, with XML, you're in charge of organizing and labeling things how you want.

But for our cookbook, let's stick with <recipe>, <title>, and <instructions>. That way we're all building the same project:

<cookbook>


            <recipe>


                        <title>


                        <instructions>

Each XML element must start and end with the same word, called a tag. So the tags for our XML structure look like this:

[*START]


            <recipe>


                        <title></title>


                        <instructions></instructions>


            </recipe>


[*END]

Notice that end tags always have a slash ( / ) character.

This labeling with tags is quite similar to the way you'd describe the information on a business card:

But these phone numbers are confusing because they have no identifying labels. Which one is the FAX number, for instance? So we label them on a business card like this:

XML takes this a little further, labeling both the start and the end of every piece of information, like this:

XML tag names can even include numbers or symbols like%*!#. But there are four rules:

• Tag names can't start with xml.
• Tag names can't start with a number or punctuation character.
• Tag names must be a single word. They can't contain spaces. But lots of people use a workaround: an underline character is fine to use as to separate words like this: first_name.
• Don't use hyphens, colons, or periods. They have special meanings in computer languages and can be misinterpreted. For example, some XML programs would think you were subtracting if you used a hyphen like this: first-name

Auto-Completion

Among the VS editor's many helpful tools is a feature called auto-completion. That's a fancy way of saying that it completes code lines for you. You type in the first half of an element, the start tag. But the editor knows that every XML start tag must also have a matching end tag. So the editor types in all the end tags by itself. Let's see how this works.

We'll type in the root level element that the Error List was upset about earlier. This is the first element. It contains all the other elements, so its two tags appear only at the start and end of the entire document. (It's called the root because structures like XML's are sometimes described as tree structures: They start out with the root, then the branches, then twigs, then smaller twigs. This is just another way to visualize nested elements.)

XML structure, like a tree

1. Click your mouse in the editor to position the insertion cursor at the start of the second line. (The insertion cursor is the blinking vertical line | symbol displayed whenever you're typing something into the computer. It shows you where your next keypress will appear.)
   
   
2. Now type <cookbook>. In other words, type a less-than character (<) followed by our root-level element tag cookbook, and finish by typing the greater-than symbol (>).  (Ignore the editor's drop-down list showing !--, !DOCTYPE, and ?. We'll explore these features later in the course.)

The editor completing the code line

As soon as you type the greater-than symbol (>) to finish the start tag, the editor automatically adds the end tag </cookbook>. You get the whole XML element but only have to type in the start tag. Pretty nice.

Editor Reminds You to Save Your Work

The editor also visually reminds you to save your work. When you typed in the first character on line 2, the less-than symbol (<), your document was changed (so it probably should be saved at some point). The editor does two things to remind you that you've modified this document: A yellow bar appears to the left of the changed line, and an asterisk (*) appears next to the filename on the yellow tab, like this: XMLFile1.xml*. Both of these cues show that you've modified, but not yet saved, this code file. The yellow bar means an unsaved line, and the asterisk signals that the whole file is unsaved.

Press CTRL + S to save the form you're working on. Or click the disk icon just below the menus. When the file is saved, the yellow bar changes to green.

Adding a Second Element

After the editor auto-completes your element, it positions the insertion cursor right between the start tag and end tag of the cookbook element. The cursor is blinking at you and waiting for your next move. This is exactly where the cursor should be for you to add your next element, recipe. You want this first recipe in between the two cookbook tags. (In fact, all of the recipes will be between the root cookbook tags.)

1. Type <recipe>.

   Again auto-completion kicks in and adds the end tag, </recipe>. The editor also helpfully indents the recipe element to illustrate that the recipes are children, nested within their cookbook element parent.

   So at this point, your code looks like this:

[*START]


    <cookbook>


      <recipe>|</recipe>


    </cookbook>


[*END]

Now it's time to finish the cookbook's structure by adding the final two elements, title and recipe.

2. Type <title> between the <recipe> tags to add that element:

[*START]


    <cookbook>


      <recipe>


        <title>|</title>

     
      </recipe>


    </cookbook>


[*END]

The <instructions></instructions> element isn't nested inside the title. The <instructions> are part of the recipe, not the title.

[*START]


    <cookbook>


      <recipe>


        <title></title><instructions>


      </recipe>


    </cookbook>


[*END]

3. Use the right-arrow key to move your cursor to the end of line 4, just past </title>. You must move over here because you don't want the <instructions> element nested within the <title> element.

These two elements—title and instructions—are alike. They're on the same level in the hierarchical XML structure. They share the same parent. Technically, they're called siblings.

This is somewhat hard to visualize at first, but the giveaway is that the editor indents siblings the same amount under the parent they share. Like this:

[*START]


    <recipe>


        <title></title>


        <instructions></instructions>


    </recipe>


[*END]

All right, so you know the main relationships between elements in XML: parent, child, and sibling.

4. At the end of line 4, type <instructions>, and you've finished creating the complete recipe structure! It should look like this:

Complete XML structure

If your code looks different, edit it to fix it.

That was easy, wasn't it? Thanks to the editor, you only had to type half the tags, and you didn't need to do any of the indenting.

Good work. We've defined the cookbook's structure, the template for each recipe. So now it's time to enter some actual content.

Let's Chat!

To keep things simple, we're using only two elements for each recipe in this lesson. But can you think of any additional recipe elements that would be useful in a cookbook program? Pop into the Discussion Area to share your ideas. This is a great way to get to know your classmates!

Filling in Content and Viewing the Project

Before we get started adding content to our template, try your hand at this quick game to see how much you remember so far. 

Ready? We're going to begin filling in the content, the actual data, by specifying your first recipe's title.

1. Type The Secret to Perfect Coleslaw in between the <title> and </title> tags.
   

   Great. Now, the instructions for this recipe are lengthy, so instead of typing everything into the VS editor, just copy and paste it from this lesson.

2. Drag your mouse to select the instructions, and press CTRL + C to copy it.

3. Click your mouse to position the editor's blinking insertion cursor between the >< symbols in the center of the <instructions></instructions> element.

4. Press CTRL + V to paste the text in.

Here's the content to put between the <instructions></instructions> tags:

Finished XML recipe element, complete with both structure and content

Adding more recipes to this XML cookbook document will be even easier than this first one. Why? The structure doesn't change, only the content (the actual recipe names and directions). So you never need to type in the tags again—just copy and paste the same template for each new recipe.

Use Only Lowercase Letters in Your Tags

Remember that when entering content, you don't have to worry about uppercase and lowercase letters. You can freely capitalize any way you want.

But XML tags are case sensitive, so XML considers <Recipe> and <recipe> two different tags.

Some experts think it's a good idea to always stick with lowercase letters so you can avoid certain kinds of errors. We'll follow that good advice in our project and never use uppercase letters in our tags.

Saving Your Work

Before trying a few experiments with our brand new XML document, let's first save our work. Remember that the editor automatically named your first new XML file XMLFile1.xml. If you open a second XML file, the editor will name it XMLFile2, and so on.

But these default names aren't too descriptive are they? So let's save our file as recipes.xml.

1. Click File > Save XMLFILE1.xml As. The SaveFileAs dialog box opens with the default name highlighted.
2. Change xmlfile1.xml to recipes.xml.
   

   Also, Visual Studio will try to save recipes.xml in its VS default folder. But we want it in the Cookbook folder with the rest of our project.

3. On the left side of the Save File As dialog box, click the c:\ drive and the XML Projects\Cookbook folder.
4. Then, click Save. The dialog box closes.

Saving recipes.xml to your c:\XML Projects\Cookbook folder

Now that you've saved your XML file, you can close Visual Studio. Just click the X in the upper-right corner of the VS window.

Viewing the Cookbook Project

Most applications now use XML to store, manipulate, and transmit information. But it's also the dominant format for information on the Internet. So let's play around a little to see how some applications and browsers deal with the XML file we just created.

We'll start with the Internet Explorer (IE) browser.

1. Open IE, and in its address field at the top type c:\XML Projects\Cookbook\recipes.xml.
   
   
2. Press ENTER. This loads the XML file into the IE browser.

The result looks pretty much as it does in the VS editor: You see the raw XML code.

recipes.xml file in IE

Other browsers display the tags too. But Chrome, Firefox, and Maxthon add a comment: "This XML file does not appear to have any style information associated with it. The document tree is shown below."

Although browsers refuse to make a guess at how you want to display your XML data, some applications do take a stab at it. If you open an XML file in Excel or Word, you'll see that they style it as best they can—hiding the tags and even doing some simple formatting.

You don't need to actually open the XML in Word, Excel, or Access unless you want to. I'll show you what happens in these next few examples.

If you open recipes.xml in Excel, it asks which of three renderings you prefer: a table, a workbook, or a task pane.

Choosing between three ways to display your file in Excel

Word's different. Word does strip off the tags, and it also displays each element as a separate paragraph. If you choose File > Open and then load in the recipes.xml file, Word first cautions you that your file includes "custom XML elements" (meaning you have tags like <recipe> and <title> that Word doesn't understand). Word also warns you that if you save this file, Word will permanently remove these so-called elements of yours. Word can be so harsh!

Word imports XML, but reluctantly

Attempt to open the file in Access, and the application gets in a twist. It totally refuses to display XML files in any format, raw or rendered. At first glance this is surprising because Access specializes in storing data, just as XML does. But Access clings to old, proprietary database technologies that XML is (more or less) replacing.

To be fair, Access does have excellent data analysis tools—something that XML is still working on. But try to open recipes.xml in Access, and the program tells you that this is an unrecognized database format. The only way to import recipes.xml into Access is to write a custom program to translate your XML into what Access thinks is the proper structure.

Take a look at this video, and I'll show you what it looks like when you try opening the cookbook in these different applications:

Click here to download the video transcript