Dreamweaver - CS3

Lesson 39: Linking Spry element (1)

39/58 Lessons 

To XML file

XML pages are just like HTML pages composed of several Tag’s. Now this is not intended as a course to teach you XML quickly, but what you should know when you write xml, is that you can tag pages, but they must always begin with an opening tag, eg <name> and a closing tag, for example, </name>.
In the example below, this is clear, I think.
You have the <departement> tag where we have several <employee> tags in which we in turn find various tags such as <name>, <job>, <salaries>, and <image>.

You can see that each tag has its closing tag. If this is not the case, you would get an ERROR message in your browser window when you open the page with this xml page exchange data.

Each xml page starts with the top line that identifies it as the xml page and what version it is using. <?xml version=”1.0″ encoding=”utf-8″?>

But really you need not pay much attention to this, if you create a new xml page in Dreamweaver, make sure that this line is placed at the top of your code.
The only thing you need to do is to type in the different tags.


Enough about xml, if you wish to know more about it, then you should look for it in google.

Ok, if you’ve downloaded the files then you have an XML page that is saved in the xml, this is not the case then you make one yourself.

We will first define the dataset (the xml file).
Select the “Spry” tab in the “Insert” toolbar and click the “Spry XML Data Set”.

This opens a dialog box.
In the upper section of the window you give the dataset a name, no matter what, but because we are all good students, we know that it is best to choose a meaningful name.

Click the “Browse” button and navigate to the XML file.
Click the “Get Schema” button.
This will show all tags listed in the xml file.

From the upper window select the “employee” tag. This will show us a list in the page we go later, with all employees plus their underlying data (read tags).

The lower window may all remain as it is and this is important, we need the data type of the column with the picture image, so change it to “image link”.
This will make the browser know that it has to make a link to the image in the sitemap and not the image tag in the xml file.
You sort by one column and determine the “Ascending” or “Descending” sort order in “Direction”.

Click the OK button

Then we open an existing page or create a new one, where we insert our table with the data from the xml file.

Click the “Spry table” button under the “Spry” tab in the “Insert” toolbar.

In the “Insert Spry Table” dialog that appears in the upper box, select the dataset that you had just created. You may work with different data sets, that is why it is useful to give an appropriate name.

Remove the columns that you do not want to appear in the table by selecting them and clicking on the minus sign button.
The check box “sort column when header is clicked” might be handy. This will sort the column when you click on the column title
The next four boxes allow us to use four different CSS styles for four different events. These seem obvious to me.
Click the OK button.

Dreamweaver will ask if it needs to add a Spry region.
Since I still have no area available in the blank new page, I click Yes.

As you can see in the image below, the table is inserted into the page. You can format it using CSS rules or through the properties window.

As you can see all the bonds with the XML document are shown in the “Bindings” tab that you find under the “Applications” panel.

When we view the page in the browser, we see that everything is neatly displayed.

Attention:

To view your page in Microsoft Internet Explorer, you must first upload all files to a server and view your page online, otherwise Explorer will display an error message.
To view your page in Firefox, another browser, you can view this page without having to upload the files.
Uncle Bill will not want to hear about it, but to download Firefox click here.

My files have not yet uploaded to the server, so I view this page in Firefox.
As always it looks fine 😉

Awesome!
You've completed Lesson 39
START NEXT LESSON