Dreamweaver8 new function: Create XSLT page visualization operation XML data

Source: Internet
Author: User
Tags filter define expression html form html page html tags new features version
dreamweaver|dreamweaver8|xml| data Open Words
DW8 What is the good of this new function? This had to be preceded by a number of technical terms that made a beginner feel dizzy.
But note: This article is mainly to carry out an example of the process of explanation, you can follow the steps to complete the case project easily. However, in the process will eventually encounter some concepts, here first, the content only to do a summary of the relevant specific content can search for reference details.
first, XML.
What is it? More and more sites are beginning to apply XML, the most common is the existence of RSS in each blog.
So, there are now two technical nouns: XML and RSS.
· Please do more hands-on, see more of the following sites to observe the RSS

Look carefully, do they have anything in common?

1, are the structure of the tree directory
2, basically have <channel>,<item>,<title> and other related labels
3. ..............
In fact, RSS is a special standard XML document, where is the special? such as the need to declare <rss version= "2.0" >, such as <channel>,<item>,<title> and other fixed tags to contain and express the relevant content, As the RSS standard specification version (such as RSS1.0, RSS2.0) is different, it will define a label that is not nearly identical to represent the specific content.
So, RSS is a special kind of XML document.
· Then there is the understanding of XML
You can see from the RSS document just now that the structure of XML is so simple.
One of the simple: the tags are both end-to-end symmetrical, such as <channel> and </channel&gt, which is the same thing as HTML tags.
The simple second: These tags are not like the HTML tags have been fixed dead, such as <body>, <table>, <td>. In XML I can define tags, or even Chinese (of course, use Chinese must be declared in XML in advance: encoding= "gb2312").

Here you can write an XML document: Mysite.xml
<?xml version= "1.0" encoding= "gb2312"?>

< My Site >

< site information >
< establishment time >10/29/2003</time >
< site address >http://www.cnbruce.com</site address >
< site description > personal blog site, more web-related data collection station </site description >
</Site Information >

< site information >
< establishment time >5/20/2005</time >
< site address >http://www.liury.com</site address >
< site description > like Liu Song, appreciate her this person, so want to collect some of her things, unfortunately has been no time </site description >
</Site Information >

< site information >
< establishment time >7/20/2005</time >
< site address >http://www.dw8.cn</site address >
< site description > like DW, just mm of the new software DW8 release, so have this site </site description >
</Site Information >

< site information >
< establishment time >9/26/2005</time >
< site address >http://www.yzcheng.com</site address >
< site description > Yangzhou city, based on the local, the establishment of Yangzhou external window site, hope for Yangzhou to do their own humble </site description >
</Site Information >

</My Site > very simple to < My site >...........</My site > including various < site information > content
Type in Notepad (Suggest yourself to enter a deeper impression:) The above tag code, save as a mysite.xml file, and browse through the browser.

OK, with the above XML, maybe someone asked, what do you want this XML for?
Yes, in addition to the structure of the directory tree that makes us feel fun, don't forget RSS is an important application of it, of course, the contents of RSS XML tags are dynamic, generated by the program, this is another word; at the same time, XML as a future development, has been gradually widely used ... In short, you are unconditionally accepting the word XML in this article: D
P.S. More detailed information about XML search the Internet, the keywords "xml", "What is XML", "XML Tutorial" and so on
Here simply provides a connection
http://dw8.cn/forum/NewsDetail.asp? forumname=%b9%d8%d7%a2web%b1%ea%d7%bc%26%c7%b0%cc%a8%b8%df%bc%b6%b4%fa%c2%eb%cc%d6%c2%db&daysprune=0& lp=1&id=63
Speaking of XML, let's talk about XSLT
What is this XSLT thing? What's the use? And how to use it?
You can observe the RSS document just now, although the content information is displayed, but its readability is relatively weak, generally want to use the way of the Web page intuitive view.
Then the XML has been puzzled and the love of HTML friends, may ask: Since the use of visual display of the Web page, directly with the DW edit a table, the above main data input cell is not OK?
Yes, you can do this without having to use XML trouble. But one caveat is that pure XML files only record data, and there are no redundant tags like html <table><td>, so XML is better suited to preserving data than pure water. This is to be separated from the HTML section.
Also, some people would say that now is not the time to discuss the new web standards more, I can use <ul><li> to achieve AH.
is also true, and XHTML is the HTML transition to XML thing, and then, with <ul>, <li> more than < site information >, < set up time > So clear?
OK, the above is why to use XML, I believe you begin to like slowly: P
So how to make XML documents appear to be more readable web page effects, many friends who touch "web standards" are xhtml+css Lenovo to Xml+css.
Yes, using CSS can actually display the XML data more humanized, but CSS can only be displayed, can not have the choice of the user's customized display.
The arrival of So,xslt has solved our demand!
An Extensible Stylesheet Language Transformation (XSLT) is a subset language of XSL that allows you to display XML data on a Web page and "transform" XML data and XSL styles into readable, formatted information in HTML form.
in fact, XSL is also a special structure of XML
P.S. Note: rss,xsl is the same structure of XML
In simple terms, with XSL we can selectively extract and display from XML, and of course its function is not only this, but also the function of a database query statement SQL, namely XML modal Query language: The specific statement that extracts data from XML by correlation pattern matching rule expression.
It's time to understand the main role of XSL, which is the main function of XML data processing, and CSS is the display of data content decoration function.
So, now a complete data processing using the Web for higher readability access is: Xml+xsl+css, these pieces of the separate function, I think I don't need to wordy
so, just as RSS is a special XML, what's special about XSL?
Referring to Microsoft's "XSL Developer's Guide", we can roughly divide the pattern language into three categories:
Select mode:
<xsl:for-each>, <xsl:value-of> and <xsl:apply-templates>

Test mode:
<xsl:if> and <xsl:when>

Match mode:

The approximate structure is to filter out the required XML data, and you can search the Internet for the "Learn XSL with Me" series.

In this article, we do not write such a complex XSL to filter out XML information, but to visualize the operation of the XSLT page through the new features of Dreamweaver8, which is the focus of this article (and, of course, there is no such thing as a step here:)

Below, open DW8 (how you have not DW8, then please download here :)

1, but only the Mysite.xml folder to establish a good DW site (this is the basis, will not establish a DW site friends in the forum to open a new post consultation)

2, open the File menu, select New (or directly CTRL + N), open the New Document dialog box, and select XSLT (whole page) for the general category as the base page

3, because XSLT pages exist to filter the XML data functionality, you must "locate the XML source" for the XSLT page. Select Attach to my Computer or local file on the local area network, click the Browse button to select the "Mysite.xml" document that has been saved on this machine, and "OK" to complete the positioning operation/

4,ctrl+s saves the newly created XSLT file to the current DW site, with the file name "mysite.xsl." As shown in the "Bindings" tab of the Applications panel, you can see the primary label for the XML data source where the connection has been positioned.

5, you can now visualize the XML data through the XML tags already in the "binding" tab. Specifically, the XSL page is treated as a normal HTML page, where a row and two columns are inserted into the table.

6, drag the XML tag "site address" and "build time" into two cells respectively

To switch to Code view, you can observe that the two tags that you just dragged into the page are separated by the code

<xsl:value-of select= "My Site/Site information/Site address"/>

<xsl:value-of select= "My Site/Site information/build time"/>

To show that, in fact, the <xsl:value-of> is the choice mode in the XSL mode language, we have done it with DW8.

7, then make a hyperlink to the "site address" in the page, which is the value of its own. Select the Site Address series text in the cell grid, and click the Yellow Browse Files folder button from the Properties panel

8, in the Select File dialog box that pops up, select the file name from select as data source, and select Site address from the Select nodes to display, and OK to complete the link Add.

9, create a CSS style sheet on the XSLT page and create a definition of the style decorations for each HTML tag

At this point, an XSLT page is built, and its main operation is to extract only the "Site address" and "Build Time" two XML data sources, and make a simple layout for them.

The next thing is to have the XML file attach the XSLT file to the application.

(Note: What we end up with is a filtering of the data in the XML file, so we end up looking at the effect of the XML file, and the XSLT file is just visualizing the final effect, not the XSLT file.)

10, select "Mysite.xml" Document, open Menu "command" and select "Attach XSLT file". Pop-up dialog box Select Browse to the established XSLT file "Mysite.xls".

After attaching the XSLT file, the following code is added to the XML file

<?xml-stylesheet href= "mysite.xsl" type= "text/xsl"?>

11, at this time preview "Mysite.xml" file, you can see the XSL filter and CSS modified data content, note that the diagram and the starting preview of the "Mysite.xml" diagram contrast

But you might find that it only shows a single data record, and there are four of the data in the XML data source that satisfies the site address or build time.

So how do you show all the records? At this point, XSLT has a "repeat region" feature that can help.

12, to return to the "mysite.xsl" file for further setup, you first need to make clear that the area you want to loop is a table row. So, select the table row where the data is located (the Quick Method is to select the "<tr>" tab from the tag selector)

13, from the Insert Panel, select the Repeat Region button in the XSLT category. The pop-up XPath expression creator (repeat region) dialog box selects the duplicate node as "site Information" (can be repeated generally in its upper right corner with + number)

In fact, after setting up the XSL statement is added <xsl:for-each>

14, browsing the Mysite.xml file again shows all the data records in the XML document.

At this point, the use of DW8 to build an XSLT page, visual operation of the function of XML data to pause, I believe you have also been interested in the function of DW8, and Xml+xsl+css also began to get started

Provides three files for reference


Of course, my XSL file was poorly handled to achieve the tutorial effect. Forestgan elder brother's case to everyone feast.

Address: Http://www.forest53.com/test/lernplus/index.xml
http://www.forest53.com/test/lernplus/xsl/home.xsl still haven't asked Forestgan elder brother, estimate he these three documents are handwritten, that still not hurriedly with dw8:d

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.