| Home |
XML Tutorial
(C) S Projects. Any distribution of any parts of this site is strictly prohibited, unless explicitly stated in text.
All contents of this site is provided strictly on the AS IS basis. The author should not be held responsible for any negative effects that may result from reading or applying the information or using software provided here. The author does not make any medical, financial or other claims - all statements are author's opinions ONLY. Use your own judgment.
|
|
Introduction
What is this book?
This is a "practical guide" to XML. It provides some XML basics. Very often people need to do very simple things with their software or web sites, and usually they have to read rather advanced tutorials, hoping that they may find the answers accidentally. This book is about common tasks and simple ways to perform them.
The book will help you to get hands-on experience, as well as some working code that you can use on your own sites and for your own projects.
When you read different online XML (not only XML) tutorials, you might notice, that they are incomplete - one tutorial is missing something, while the other tutorial has this "something" - and missing something else.
It is inevitable, and I am not going to tell you that this tutorial is complete because it is not. However in this book I pulled together the bits and pieces that I consider most important, so that - being incomplete - it is nevertheless SUFFICIENT for a beginner.
For the same reason I will focus entirely on XSLT in this tutorial, as I consider it the most powerfull and the most simple part of "practical XML".
You will need IE 6.0 or later to view the examples.
What is XML?
It is a language that allows you to take raw data and present them in easy to read format. Well... Technically, there is more in XML, but for this tutorial we can agree, that it is just that. A description of a text formatting language.
For example, you may have a list of addresses, with name, surname, phone and so on. Applying one XSLT program (through the Internet Explorer, for example) you will see the cards that the dentist may use in his database, applying another XSLT program, you will arrange the same data as a table, instead of cards...
Why is it so great for a web designer? Because the XSLT file may be small, and when you change it, the look of your entire web site changes.
Why is it so great for a programmer? Because you can use XML, together with the Internet Explorer (as a tool to dislpay the result) or (most development environments support it) with the Internet Explorer Control, that can be incorporated in your program as one of the windows. And instead of woirking with hard to design and hard to change Windows resources, you suddenly have input-output pages that are using all the power of XML.
The sceleton
We will consider the simple approach, that is using separate XML file with data and XSLT (XSL) file with format description.
XML and XSL files
The 1.xml is an example of a bare minimum you need to include to your XML file. Including XML code in HTML page (one you are reading) is not fun at all, so in future examples I am going to use links to samples instead. To view the sample, click on the link, it will open in a new window. To view the code, click on View / Source in the browser.
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="1.xsl"?>
<root>
</root>
The first line tells the browser that it is XML, and not text, Word or C++.
The second line points to the XSL file, containing the formatting instructions.
The "root" tag can be replaced with any non-reserved name, like "main", "my_tag" and so on. The point is that whatever data you have, should be between the <root> and </root>
The 1.xsl that we refered to in the XML header looks like
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"?>
<xsl:output method="html"/?>
</xsl:stylesheet?>
Again, the first 3 lines are used by the Browser and should always be present, the last line is a closing tag for the second line.
Working with data.
The file above had no data. If we want to add something to it, we need to put it in XML file. Let's create the address book.
The data should have tree-like structure, so we place people at the root and people's data inside "person" tag ( 2.xml):
<person>
<name>John</name>
<surname>Smith</surname>
<phone>111-2233</phone>
</person>
The XSL file should support this new data structure. Let's create a simple one, that lists people in a card-like format ( 2.xsl). This file has some new lines:
<xsl:template match="/">
We have few choices. We can look for "people" and then for "name". Or we can look for
"people/name". The match="/" is for the first approach (the second will be covered
later) - we are using the path relative to the root.
<html>
<HEAD>
<TITLE>Address book</TITLE>
</HEAD>
<body style="background:silver;">
This is HTML formatting! We can use it in XSL to make our page look the way it should. Except, it is much strict here, we cannot miss or mismatch tags. If you make a mistake, the IE will give you detail message, so it is easy to fix.
<xsl:for-each select="//root/person">
<p/><xsl:value-of select="."/>
</xsl:for-each>
Together with the match="/", this instruction will iterate through all elements of the "root" tag, applying whatever code we have between the opening and closing tags, to every "person". So the 1 megabyte .xml database can be formatted using few lines of .xsl code.
Note that "." means the "current tag", and there is a closing "/" in tags that are not closed by </tag>. If you miss it - you will get an error message.
What if we don't want to see all info we have in the database? Or if we don't want to see it as a single line? Or what if we want to have name in one color, surname in another color and so on? (3.xml and 3.xsl):
<p/><font color="red"><xsl:value-of select="name"/></font>
<p/><font color="green"><xsl:value-of select="surname"/></font>
<p/><font color="blue"><xsl:value-of select="phone"/></font>
Note that all 3 records are formatted with the same XSL code.
To make formatting a little more complex, let's create a table (4.xml and 4.xsl). As you can see, it is a very simple task. Later in this class we will create forms, hyperlinks and so on.
Forms
Forms are used for input - output, and should be backed up with some "engine". It can be a simple JavaScript code, a CGI program, a database - anything capable of accepting the "input" and producing the "output".
Let's create a simple form (5.xml and 5.xsl).
Note, that the xml file changed - it contains the information for a single person. It is not a requirement, we can easily produce a form that will edit more than one person's data in a time. But now we don't need it.
As you can see, it is really simple. We use the "input" tag, the only difference between it and what you would do in HTML is the way elements (name, value) are presented, it is self-explainatory.
The form we created does nothing, because it has no "engine" behind it. It is not something specific to XML, the HTML form behaves exactly same way. In the real life application, you may want to change the "action" of the form. Right now it will redirect the user to 3.xml file, no matter what button you click. But it can be action="edit_user.cgi", that will take the form's data, check them for accuracy, and add them to the database. Then it will recreate the 3.xml file, so that it contains new data, and only then it will return this file, so the user can see the changes. There are many ways of creating CGI programs, see for example the Introduction to Perl.
If you are a software developer, you need to intercept the input in your program. Let's say you have the IE control as one of the program's windows. The moment your user clicks "submit", the OnBeforeNavigate event is produced. You can then deal with it as you normally deal with Windows messages.
A word of caution. The "post" method can handle large amounts of data, while the "get" is limited to something like 3K. So if your form has more than just few fields, use "post".
JavaScript
Let's add some JavaScript functionality to the address book. To do it, we will introduce two extra fields - birth_date, and birth_time (6.xml and 6.xsl).
First, we added two JavaScript functions to the XSL header section. I realize, by the way, that it is not exactly XML, I am talking about, but this code may be used as a starting point in your own projects, so why not?
This function uses the Windows calendar control, so if (not very probable) your Windows have different control, use it's id instead.
xsl:include
The reason we separated XML and XSL files is because sometimes we want to use the same formatting on more than one file. However, sometimes we have many XSL files that contain the same elements, so we want to move the common part to a single file. The reason is the same - it is much easier to maintain one file than 1000.
Let's create some "common" formatting and place it in format.xsl file. Note that it is XSL, and it should have the same required elements, like a header.
Now we can use this file from other XSL file, by including it (7.xml and 7.xsl).
Note that the place and all the little syntax details are important. First, we included the file, and then we used it, by calling it (fron within the head tag).
xsl:value-of
It was already used in examples above, but I probably have to provide more info. The xsl:for or some other iterators will go through all records in xml file, one after another. The way to access the data is through the use of xsl:value-of (3.xml and 3.xsl).
xsl:if
Sometimes we need to show the information with different colors, ot to produce different text, or to take different actions, depending on the value we found. (8.xml and 8.xsl).
In the example above, red color is used for negatibe values (if it is part of a balance sheet, you may use JavaScript to do summation). Note that in order to put the color inside the "td" tag, we had to present "td" tag in the less HTML and more XML form:
<td> <xsl:attribute name="align">center</xsl:attribute> <xsl:if test="balance < 0"> <xsl:attribute name="bgcolor">red</xsl:attribute> </xsl:if> <xsl:value-of select="name"/>
Any parameters that we normally list inside the tag, can be presented as set of xsl:attribute tags, and in this form - modified, using xsl:if.
Combo box (option)
This control is used frequently in HTML forms, and when you want your XML file to interact with the database, you may need it too.
The following file contains an example of use of the options (9.xml and 9.xsl).
Note that we need to provide data for each line of the combo box, and to mark somehow the selected line. Also note the way we can refer to the parameter, using the "@" sign.
Checkbox
Another useful control (10.xml and 10.xsl).
List box
It is possible to use list box control in XML. To make it more exciting, let's create the "mover" control (11.xml and 11.xsl).
Conclusion
This was a very brief introduction to XML. It will allow you to begin working in the area. There are many things that I haven't explained. Please keep in mind, that this was only an introduction.
|
|
|
|
|
Building a Small
|
|
Free NLP, Hypnosis and
|
|
Free Stock trading Course
|
|
Free Course
|
|
Free Modern Manipulation
|