Use spry XML Dataset
The spry XML dataset is a javascript object that can be used to display data in XML data files on a web page. You can use this data to update data in the main and detailed areas of the page based on the visitor's choice. You can access Adobe livedocs to get the latest version of this article.
Basic Summary of spry XML Dataset
The spry dataset is a JavaScript Object. You use a small numberCodeThe browser can create an object and load the XML source to the object when the page is opened. The dataset result is in a flat array and can be expressed as a standard table containing rows and columns.
Assume that you have an XML source file cafetownsend. XML that contains the following content:
summer salad
organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.
7
Thai notessalad
lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.
8
Grilled Pacific salmon
served with new potatoes, diced beets, Italian parlsey, and lemon zest.
16
Use XPath to indicate the data you are interested in (in this example, the nodes that follow are SPECIALS/menu_item). The data is flattened into an object array and the object is a row, the attribute is a column, as shown in the following table:
@ ID |
Item |
Description |
Price |
|---|---|---|---|
1 |
Summer salad |
Organic butter lettuce with apples, blood oranges, gorgonzola, and |
7 |
2 |
Thai now.salad |
Lightly sauteed in sesame oil with baby bok choi, Portobello mushrooms, |
8 |
3 |
Grilled Pacific salmon |
Served with new potatoes, diced beets, Italian parlsey, and lemon |
16 |
This dataset contains each menu item, each action has a menu item, including the following columns: @ ID, item, description, and price. The list is now a child node under the specials/menu_item node in XML, and some attributes and child tags are attached to the menu_item tag.
This dataset contains a built-in data reference (built-in data references) called ds_rowid (not displayed), which becomes very useful when displaying data. In addition, the dataset contains other built-in data references (built-in data references), such:Ds_recordcount,Ds_currentrowYou can use them to display data.
You can use spry. Data. xmldataset and XPath to create a spry dataset. XPath defines the default structure of a dataset. As an example, if you use XPath to specify a duplicate XML node that contains three subnodes, each duplicate XML node is represented as a row in the dataset, the three subnodes are represented as columns. (Create a column for a data set to indicate the attributes contained by any duplicate node or subnode)
If you do not specify an XPath, all data in the XML source will be included in the dataset.
After a dataset is created, it allows you to easily manage and display data. As an example, you can create a simple table to display XML data, and reload, sort, filter, or display the page using simple methods and attributes.
In the following example, A spry dataset named dsspecials is created and the data is loaded from cafetownsend. xml:
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1"/> <title> spry example </title> <! -- Link the spry libraries --> <SCRIPT type = "text/JavaScript" src = "des/XPath. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src =" supported des/sprydata. JS "> </SCRIPT> <! -- Create a data set object --> <SCRIPT type = "text/JavaScript"> var dsspecials = new spry. data. xmldataset ("Data/cafetownsend. XML "," SPECIALS/menu_item "); </SCRIPT>
Note: The preceding examples are only used for illustration. For examples that can be run, see demos under spry in Adobe Labs.
In this example, the first script tag links an Open Source XPath library for displaying XML data. The XPath library allows you to use complex XPath when creating a dataset:
<SCRIPT type = "text/JavaScript" src = "des/XPath. js"> </SCRIPT>
The second scrip block is linked to the sprydata. js and Spry Data operation library, which is stored in the nodes directory:
<SCRIPT type = "text/JavaScript" src = "des/sprydata. js"> </SCRIPT>
Since the Spry Data operation library is used in the XPath library, you must first reference the XPath library.
The third script block is used to create a dsspecials dataset. The cafetownsend. xml file is stored in the data directory:
VaR dsspecials = new spry. Data. xmldataset ("Data/cafetownsend. xml", "SPECIALS/menu_item ");
Note: JavaScript and XML are both case sensitive. Note the case sensitivity when writing scripts and column names.
In JavaScript, the new operator is used to create objects. Spry. Data. xmldataset is included in the Spry Data operation Library (spry
Data library. The constructor has two parameters: Data Source ("Data/cafetownsend. xml", which is a relative path) and XPath expression used to specify nodes in XML ("SPECIALS/menu_item ")In JavaScript the new operator is used to create objects. The spry. Data. xmldataset method is a constructor in the spry
Data library that creates new Spry Data Set objects. The constructor takes two
Parameters: the source of the data ("Data/cafetownsend. xml", in this case, a relative URL) and
An XPATH expression that specifies the node or nodes in the XML to supply
Data ("SPECIALS/menu_item ").
You can also specify the absolute path of an XML data file:
VaR dsspecials = new spry. Data. xmldataset ("http://www.somesite.com/somefolder/cafetownsend.xml", "SPECIALS/menu_item ");
Note: whether the absolute or relative path is used depends on the security model of your browser. This means that you can only load data from XML sources in the same domain as the HTML page, you can also eliminate this restriction, but you need to communicate with your server administrator.
In the previous example, A dsspecials DataSet object is constructed. Obtain data from the specials/menu_item node of the cafatownsend. xml file and convert it to a flat object and an attribute array (a flattened array
Objects), similar to a table that contains rows and columns. (For an example of a table, see the beginning of this chapter)
Each dataset has a current row. By default, the current row is the first row of the dataset. You can change the current row by using the setcurrentrow () method of the dataset.
Note: When a dataset created using the new operator does not contain data, you must first call the loaddata () method of the dataset to load the data to the dataset, if your page does not use any region, You can manually call the loaddata () method on the page. The loading process is asynchronous. If you access the data immediately after calling the loaddata () method, the data may still be unavailable.
Advanced example of spry XML Dataset
The spry XML dataset uses the xmlhtpprequest object to asynchronously load the specified URL. After the XML data is obtained, there are actually two forms: text form and Document Object Model (DOM) tree.
For example, you specify "/photos. php? Galleryid = 2000 "as your data source. (This is a Web service that returns XML data)
<SCRIPT type = "text/JavaScript"> var dsphotos = new spry. Data. xmldataset ("/photos. php? Galleryid = 2000 ","/Gallery/photos/photo "); </SCRIPT>
The following code is the text format of XML data:
<Gallery id = "12345"> <photographer id = "4532"> John Doe </photographer> <email> john@doe.com </Email> <photos id = "2000"> <photo path = "sun.jpg" width = "16" Height = "16"/> <photo Path = "tree.jpg" width = "16" Height = "16"/> <photo Path = "surf.jpg" width = "16" Height = "16"/> </photos> </gallery>
The following example shows the DOM tree format of XML data.
Use XPath to specify some nodes in the xml dom tree. The red section below is the/Gallery/photos/photo node specified by XPath:
<Gallery id = "12345"> <photographer id = "4532"> John Doe </photographer> <email> john@doe.com </Email> <photos id = "2000"><Photo Path = "sun.jpg" width = "16" Height = "16"/> <Photo Path = "tree.jpg" width = "16" Height = "16"/> <Photo Path = "surf.jpg" width = "16" Height = "16"/></Photos> </gallery>
Shows the dom-tree of the specified node, black solid circle:
Table Format of the specified node in the dataset:
@ Path |
@ Width |
@ Height |
|---|---|---|
Sun.jpg |
16 |
16 |
Tree.jpg |
16 |
16 |
Surf.jpg |
16 |
16 |
In this example, the spry column name is taken from the attribute of the specified node. Spry determines the column name based on your XPath.
Spry uses the following rules to flattening data and create columns:
If the specified node has an attribute, spry creates a column for each attribute and fills it with the attribute value. The column name consists of @ before the attribute name. For example, if a node has an ID attribute, the column name is @ ID.
If the specified node does not have a child element but has a CDATA, spry creates a column and fills in text or CDATA. The column name is the node name.
This example will show in more detail the planialized processing and the spry generated dataset columns.
Example: Specify and flat the attributes and text values of an element.
The following red code shows the data specified by the/Gallery/photographer XPath expression:
<Gallery id = "12345"><Photographer id = "4532" type = "parmname" text = "parmname"> John Doe </photographer><Email> john@doe.com </Email> <photos id = "2000"> <photo Path = "sun.jpg" width = "16" Height = "16"/> <photo Path =" tree.jpg "width =" 16 "Height =" 16 "/> <photo Path =" surf.jpg "width =" 16 "Height =" 16 "/> </photos> </Gallery>
In the form of a DOM tree:
The table is displayed as follows:
Photographer |
@ ID |
|---|---|
John doe |
16 |
Only one node is specified, so there is only one row in the dataset. The photographer node text is "John Doe", so the node value is saved in the column named photographer. The photographer node has an ID attribute, so this attribute value is placed in the @ ID column.
Example: Specify and flatten the attributes and child elements of an element.
The following code selects data for the/gallery XPath expression:
<Gallery id = "12345"> <photographer id = "4532"> John Doe </photographer> <email> john@doe.com </Email> <photos id = "2000"> <photo path = "sun.jpg" width = "16" Height = "16"/> <photo Path = "tree.jpg" width = "16" Height = "16"/> <photo Path = "surf.jpg" width = "16" Height = "16"/> </photos> </gallery>
The front line in the DOM tree format is:
The table is displayed as follows:
@ ID |
Photographer |
Photographer/@ ID |
|
|---|---|---|---|
12345 |
John doe |
4532 |
John@doe.com |
Note that the data column name prefix of the child element attribute is the child element name. Photographer is the child element of the specified gallery node, so the prefix of the ID attribute should be photographer /@. Note that there is no photos element in the table, because spry cannot flat any child element that contains child elements.
Example: Flat attributes of Selected elements
You can use XPath to specify node attributes. The following red code shows the data selected by the gallery/photos/Photo/@ path XPath expression:
<Gallery id = "12345"> <photographer id = "4532"> John Doe </photographer> <email> john@doe.com </Email> <photos id = "2000"> <photoPAth = "sun.jpg" Width = "16" Height = "16"/> <photoPAth = "tree.jpg" Width = "16" Height = "16"/> <photoPAth = "surf.jpg" Width = "16" Height = "16"/> </photos> </gallery>
Presented in the DOM tree:
The table is displayed as follows:
@ Path |
|---|
Sun.jpg |
Tree.jpg |
Surf.jpg |
After you create a spry dataset, you can display the data in the spry dynamic area. A spry dynamic area is also a range on the surface, and it is bound to the dataset. The area displays XML data through a dataset and is automatically updated when the dataset changes.
Dynamic region reconstruction is because they are registered as the observer or listener for the bound dataset. Whenever the data changes (such as loaded, updated, sorted, and filtered), the dataset will send messages to all of its observers, triggering automatic reconstruction of the dynamic areas being listened on.
Declare the spry dynamic area in a container tag and use the spry: Region attribute. Most HTML elements can be used as dynamic region containers. However, the following tags cannot:
Col
Colgroup
Frameset
Html
IFRAME
Select
Style
Table
Tbody
Tfoot
Thead
Title
Tr
The above labels cannot be used as spry dynamic zone containers, but you can use them inside spry dynamic zone containers.
Note: dynamic regions are restricted within the body tag. You cannot add the spry: Region attribute to any other tag except the body tag.
In the following example, a container named specials_div is used for dynamic areas. It is a div tag and contains a standard HTML table. A table is a typical HTML Element Used for dynamic areas. Because the first row of the table can be used as the header, the second row can contain duplicate XML data.
<! -- Create the spry dynamic region --> <Div id = "specials_div" Spry: region = "dsspecials"> <! -- Display the data in a table --> <Table id = "specials_table"> <tr> <TH> item </Th> <TH> description </Th> <TH> price </Th> </tr> <tr spry: repeat = "dsspecials"> <TD >{item }</TD> <TD >{description }</TD> <TD >{price }</TD> </tr> </table> </div>
In this example, the DIV tag requires only two attributes to create a dynamic region: The spry: Region attribute is used to declare the dynamic region and specify the bound dataset, And the ID attribute is used for the named region:
<Div id = "specials_div" Spry: region = "dsspecials">
A new area is an observer for the dsspecials dataset ). As long as the dsspecials dataset changes, the region will be rebuilt based on the updated data.
Use an HTML table to display data:
<Table id = "specials_table"> <tr> <TH> item </Th> <TH> description </Th> <TH> price </Th> </tr> <tr spry: repeat = "dsspecials"> <TD >{item }</TD> <TD >{description }</TD> <TD >{price }</TD> </tr> </table>
The data is displayed cyclically Based on the dataset from the first row of the table. Because XML data often contains duplicate nodes, this example also declares the spry: Repeat attribute in the row 2nd mark of the table, this will cause all data in the dataset to be displayed when the user loads the page (otherwise, only the current row of the dataset is displayed ).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
