Overview and structure of spry main and detailed regions
With the spry dataset, you can create primary and detailed dynamic regions to display detailed data. One region (primary) controls the data display of another region (detail.
Generally, the master area displays the summary information of the specified record, while the detail area displays the details of the specified record. The detailed area varies with the selection of the primary area.
This section describes the relationship between the main regions and detailed regions associated with the same dataset.
In the following example, the data of the dsspecials dataset is displayed in the main area. The detailed area displays the detailed data based on the selection of the main area:
<Head>... <SCRIPT type = "text/JavaScript" src = ".. /shortdes/XPath. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src = ".. /shortdes/sprydata. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "> var dsspecials = new spry. data. xmldataset ("Data/cafetownsend. XML "," SPECIALS/menu_item "); </SCRIPT>
In this example, the first Div tag contains the ID and spry: Region attributes to create a container that contains the main region:
<Div id = "specials_div" Spry: region = "dsspecials">
The 2nd rows in the main area contain a spry: setrow attribute, which is used to set the current row of the dataset.
<Tr spry: Repeat = "dsspecials" Spry: setrow = "dsspecials">
The 2nd Div tags contain the spry: detailregion attribute to create a detailed dynamic region:
<Div id = "specials_detail_div" Spry: detailregion = "dsspecials">
Each spry dataset maintains the current row. By default, the current row is the first row of the dataset. A spry: detailregion works in the same way as spry: region except when the current record of the dataset changes.
When the browser page is loaded, the expressions ({ingredients} and {calories}) in the detail area will display the data of the current row in the dataset. When a user clicks a row in the main area, the spry: setrow attribute changes the current behavior specified by the user in the dataset.
{Ds_rowid} Data Reference is an ID automatically generated by the spry framework for each row of the dataset. When you specify a row in the main region, the spry: setrow attribute provides the specified unique ID to the setcurrentrow method, and set it to the current row.
When a dataset changes, all dynamic regions bound to the dataset are regenerated and updated data is displayed. Similar to the main area, the detailed area is used as a listener for the dsspecials dataset. It is also updated after the data changes and displays the rows specified by the user (new current row.
The difference between spry: Region and spry: detailregion is that Spry: detailregion responds to the currentrowchanged event of the dataset and updates itself when an event occurs. Generally, spry: regions ignores the currentrowchange event and updates only in the datachanged event of the dataset.
Spry advanced overview and structure of main and detailed areas
In some cases, you may want to create a master/sub-relationship that includes multiple datasets. For example, if you have a menu list containing many associated information, you do not need to retrieve all the menu associated information that you have not used because of bandwidth, download the detailed data requested by the user only for high efficiency. This is a common technique used in Ajax applications to reduce data exchange volume.
The following example shows the XML source code file cafetownsend. xml:
summer salad
organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.
7
summersalad. XML
Thai notessalad
lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.
8
thainoodles. XML
Grilled Pacific salmon
served with new potatoes, diced beets, italian parlsey, and lemon zest.
16
salmon. XML
the cafetownsend. xml file provides data for the main dataset. The URL node of each menu item points to a unique XML file. Each XML file contains a list of recipes corresponding to the menu items. Use summersalad. XML as an example.
example, might look as follows:
<? XML version = "1.0" encoding = "UTF-8"?> <Item> <item_name> summer salad </item_name> <ingredients> <ingredient> <Name> butter lettuce </Name> </ingredient> <Name> Macintosh apples </Name> </ingredient> <Name> blood oranges </Name> </ingredient> <Name> Gorgonzola cheese </Name> </ingredient> <ingredient> <Name> raspberries </Name> </ingredient> <Name> extra virgin olive oil </Name> </ingredient> <Name> balsamic vinegar </Name> </ingredient> <Name> sugar </Name> </ingredient> <Name> salt </Name> </ingredient> <ingredient> <Name> pepper </Name> </ingredient> <Name> parsley </Name> </ingredient> <Name> Basil </Name> </ingredient> </ingredients> </item>
you can use the XML structure you are familiar with to write data, and create two datasets to display data in the main/detailed area. In the following example, the dsspecials dataset is displayed in the main dynamic area. The detailed dynamic area obtains data from the dsingredients Dataset:
<Head>... <SCRIPT type = "text/JavaScript" src = ".. /shortdes/XPath. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src = ".. /shortdes/sprydata. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "> <! -- Create two separate data sets --> var dsspecials = new spry. data. xmldataset ("Data/cafetownsend. XML "," SPECIALS/menu_item "); var dsingredients = new spry. data. xmldataset ("Data/{dsspecials: URL}", "item/ingredients/ingredient"); </SCRIPT>
In the example, threeCodeThe module contains and creates two datasets dsspecials and dsingredients:
VaR dsspecials = new spry. data. xmldataset ("Data/cafetownsend. XML "," SPECIALS/menu_item "); var dsingredients = new spry. data. xmldataset ("Data/{dsspecials: URL}", "item/ingredients/ingredient ");
The URL of the dsingredients dataset B contains the data of the first dataset referenced by {dsspecials: URL. It references the URL column in The dsspecials dataset. If the URL or XPath contains a reference to another dataset, the dataset will automatically become the listener of the referenced dataset, the B dataset depends on the dataset. Whenever the dataset data or the current row changes, the B dataset is reloaded.
The following figure shows the listener relationship between the dataset and the main and detailed areas:
In this example, a message is sent to the dsingredients dataset to change the current row of the dsspecials dataset because each line of the dsspecials dataset contains a different URL, the dsingredients dataset must be updated based on the URL of the selected row.
By default, the dsingredients dataset specifies the data source through the URL parameter in the constructor. Here, the URL column in The dsspecials dataset is referenced. The default current row (the first line) of the dsspecials dataset contains a path pointing to the summersalad. xml file. This information is displayed in the detailed area when the browser loads the data. When the current row of the dsspecials dataset changes, if the URL is changed to salmon. XML, the dsingredients dataset (and the detailed dynamic region to be associated) is updated accordingly.
As shown in, dataset B listens to the data of dataset A and the message of row changes.
The detailed Area Mark spry: Region in the sample code is replaced by spry: detailregion. the difference between spry: Region and spry: detailregion is that Spry: detailregion listens to the currentrowchange message (and the datachanged message) of the dataset and updates itself after receiving the message. Because dsingredients never changes (it changes based on the current row of the dsspecials dataset), The spry: detailregion attribute is not required for dsspecials. Here, spry: the region defined by the region attribute only listens on the datachanged message.
Easy to transform
Use spry to transform the following code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" xmlns: spry = "http://ns.adobe.com/spry">
With spry technology, you do not need to load the entire page. You must first write a page segment for each connection, for example:
<? XML version = "1.0" encoding = "iso-8859-1"?> <Notes> <Note> <! [CDATA [<p> This is some <B> dynamic content </B> for Note 1. </P>]> </Note> <! [CDATA [<p> This is some <B> dynamic content </B> for Note 2. </P>]> </Note> <! [CDATA [<p> This is some <B> dynamic content </B> for NOTE 3. </P>]> </Note> </Notes>
Code after transformation:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" xmlns: spry = "http://ns.adobe.com/spry">
The code added above looks very familiar, but it should be noted that the DIV block contains a spry: detailregion attribute and spry: content attribute. Spry: The content attribute tells spry to replace static data with the reference data specified by this attribute in the dynamic area.
Running this example requires your browser to enable the JavaScript function.
After running, click the link to update the content of the dynamic region.
In the previous example, a link JavaScript event handle was quickly bound using the onclick attribute.
Use spry to create dynamic pages and prepare files
Before creating a spry dataset, prepare some necessary files (XPath. JS and sprydata. JS), XPath. JS allows you to specify a complex XPath expression when creating a dataset, sprydata. the JS file contains the Spry Data operation library.
Link these files on the HTML page.
- Find the spry zip package at the Adobe Labs site.
- Download and decompress the package to your hard disk.
- Open the decompressed directory and find the replicdes Directory, which contains the XPath. js and sprydata. js files required by the spry framework during runtime.
- Copy the nodes directory to the root directory of your website.
- The spry-related library files in the chain are marked in the head of your page:
<SCRIPT type = "text/JavaScript" src = "des/XPath. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src =" supported des/sprydata. JS "> </SCRIPT>
Sprydata. js depends on the XPath. js file, so you must first reference the XPath. js file.
After referencing these library files, you can create a spry dataset.
- Add the spry namespace declaration to the HTML tag as follows:
<HTML xmlns = "http://www.w3.org/1999/xhtml" xmlns: spry = "http://ns.adobe.com/spry/">
To make the code valid, you must declare the spry namespace.
Note: When uploading a page linking the spry feature, you must upload XPath. js and sprydata. js together.
Create a spry XML Dataset
- Open a new or existing HTML page.
-
- Make sure that you have linked the spry library file to the page and declared the spry namespace.
-
- Locate the XML source of the dataset.
For example, your xml file is named cafetownsend. XML, which is stored in the data directory under the root directory of the site:
Data/cafetownsend. xml
You can also specify the URL of an XML file:
Http://www.somesite.com/somefolder/cafetownsend.xml
Note: The URL or relative path depends on the security model of your browser.
- before creating a dataset, make sure that you understand the XML structure, because you need to specify duplicate XML nodes for the dataset.
In the following example, the cafetownsend. xml file contains the specials parent node. In this example, duplicate menu_item subnodes exist under the contacts.
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
- Insert the following script blocks after referencing the script tag of the library file to create a dataset:
<SCRIPT type = "text/JavaScript"> var datasetname = new spry. Data. xmldataset ("Xmlsource","Xpathtorepeatingchildnode"); </SCRIPT>
In the cafe Townsend example, you use the following statement to create a dataset:
VaR dsspecials = new spry. Data. xmldataset ("Data/cafetownsend. xml", "SPECIALS/menu_item ");
This statement creates a dsspecials dataset to accept the data of the specials/menu_item node in the specified XML file. A dataset creates a column for each menu item, including @ ID, item,
Description, and price, as follows:
@ ID
Item
Description
Price
1
Summer salad
Organic butter lettuce with apples, blood oranges, gorgonzola, and
Raspberry vinaigrette.
7
2
Thai now.salad
Lightly sauteed in sesame oil with baby bok choi, Portobello
Mushrooms, and scallions.
8
3
Grilled Pacific salmon
Served with new potatoes, diced beets, Italian parlsey, and lemon
Zest.
16
You can also specify the URL of an XML data:
VaR dsspecials = new spry. Data. xmldataset ("http://www.somesite.com/somefolder/cafetownsend.xml", "SPECIALS/menu_item ");
The sample code after completion is as follows:
<Head>... <SCRIPT type = "text/JavaScript" src = "des/XPath. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src =" supported des/sprydata. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "> var dsspecials = new spry. data. xmldataset ("Data/cafetownsend. XML "," SPECIALS/menu_item "); </SCRIPT>...
-
- (This step is optional) If you want to sort data, you may want to set the columns containing numbers to the numeric type.
When creating a dataset, you can set the column type by adding the setcolumntype data set method. The red section is as follows:
<SCRIPT type = "text/JavaScript"> var dsspecials = new spry. Data. xmldataset ("Data/cafetownsend. xml", "SPECIALS/menu_item "); Dsspecials. setcolumntype ("price", "Number ");</SCRIPT>In this example, the expression is the setcolumntype method of the dsspecials dataset. This method has two parameters: one is the column name ("price") to set the data type "), one is the data type name ("Number ").
After creating a dataset, you can create a dynamic area to display the data.
Create a spry dynamic region and display data
After the spry dataset is created, you can bind the dynamic region to the record set. A spry dynamic region is a region on the page, which displays the data and automatically updates it when the data changes.
-
- Make sure that you have added the spry Library to the page, declared the spry namespace, and created a dataset.
-
- Add the spry: Region attribute to a zone tag. the syntax of this attribute is spry: region ="Dataset name".Note: Except for some HTML elements, most HTML elements can be used in dynamic regions.
For example, use the DIV tag to display the dsspecials dataset and add the spry: Region attribute to the DIV tag, as shown below:
<Div id = "specials_div" Spry: region = "dsspecials"> </div>
Note: dynamic regions can depend on multiple datasets. Add multiple datasets to the region.Spry: add multiple dataset names to the value of the region attribute. Separate the names with spaces. For example, spry: region = "dsspecials dsspecials2
Dsspecials3 ".
- the tag contains a dynamic area. You can use any HTML element to display data. The following is a two-row table. The first row contains a static table header and the second row contains dynamic data:
item
description
price
{item }
{description }
{price }
the values in cells refer to columns in the dataset.
Note: if the region depends on multiple datasets, you must specify the dataset in which the column belongs When referencing the column in the dataset, syntax: {datasetname: columnname }. for example, if two or three different datasets are bound, the preceding example requires writing: {dsspecials: item}, {dsspecials: Description}, and so on.
Spry: Repeat ="Datasetname"
In this example, you have added the spry: Repeat attribute to the table row tag, the following red part:
<TrSpry: Repeat = "dsspecials"> <TD> {item} </TD> <TD >{ description} </TD> <TD >{ price} </TD> </tr>In this example, the complete dynamic region binding code is as follows:
<Div id = "specials_div" Spry: region = "dsspecials"> <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>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
