Creating a Web Site using the Spry Framework

ResourceFolder

In the good old days – a few years ago in internet time, Dynamic Hypertext Markup Language (DHTML) was used to create interactive pages. It used HTML, CSS and JavaScript to create this interactive content. Then came along Asynchronous JavaScript And XML (AJAX) that uses the same technologies (HTML, CSS and JavaScript) but also implemented XML and had more functionality. Fast forward and you have Adobe Spry which is Adobe version of AJAX made easy.

SCENARIO: You have been told to create a web site or web application to showcase the new features of your company product line. Solution: You can use the Spry framework to create a simply web site or a simple web application.

Create layout

Create a new page using an Adobe template page layout. We used the 2 column fixed, left sidebar, header and footer for this tutorial.
Save file (in this case, as index.html) and give it a Title of of your liking in the Title field in Option Bar.
Insert or create a header and a footer of your liking in Design view.
Attach main.css style sheet from the current lesson folder in the CSS panel by clicking on the Attach Style Sheet icon at the bottom of the panel and navigating to the main.css file and then click OK.
Why? This style sheet has some style rules that will be used later when we create a dynamic table.
ALTERNATIVE 1: Since the main.css style sheet has more rules in it than you actually need, you can simply create two simply styles for the <tr> tag in the table. Click on the Create New CSS Rule in the CSS panel and select the Advanced selector type. Type tr in the text field and click OK to style the <tr> tag in the table. Select the Background category and change the background color to blue. Then select the Type category and change the background text color to white. Repeat the step by use tr:hover in the text field and click OK to style the hover stage for the <tr> tag in the table. Change its Background color to red and the Type color to white.
ALTERNATIVE 2: You could also manually type the code in the <style> tag in the <head> tag at the top of the page as such:

tr { background-color: blue; color: white;}
tr:hover (background-color: red; color: white;}
Select the .sidebar1 rule in the CSS Panel and add a height property of 500 pixels by clicking on the Add property link in the Properties pane at the bottom of the CSS panel. Do the same for the .content rule but set the height property to 520 pixels and the width to 500 pixels.
With the cursor in the sidebar in the design view, select the default text (CTRL+A) and press DELETE. Do the same for the mainContent area.
Why? This will select all of the tags in these two containers so they can be collectively deleted at one time.
Preview page (F12) to see blank page layout in a browser.

Attach DataSet and Create a Dynamic Table at the Same Time

IMPORTANT: Ensure cursor in at the top of the sidebar.
Why? We will be inserting a dynamic table at this location.
Select the Spry tab in the Control Panel and click on the Spry XML Data Set icon (the first one in the list) and:
1. In the Step 1 of 3 screen, In the Select Data Type combo box, select the XML option.
2. Name data Set dsAdobeApps in the Data Set name: field.
3. Click on the Browse button and open the adobeapps.xml in the current lesson folder and click OK.
4. In the Row element text area, review the XML nodes and select the repeating node (the one with a small plus [+] sign at end of line).
  NOTE: Notice the XPath changed to reflect the path of the selected repeating node. Also notice that the Data Set columns datagrid changed to reflect the children nodes of the repeating nodes.
5. Click the NEXT button to go to the Step 2 of 3 screen.
6. Select the newfeatures option either by selecting it from the Column name combo box or selecting the newfeatures title row and change the type to html from the Type combo box.
7. Ensure Sort Column is set to ***None.
  Why, we will be creating a table that looks like a menu.
8. Click on the NEXT button to go the the Step 3 of 3 screen.
9. Select the Insert table radio button and then click on the Set Up... button to go to the Spry Data Set -- Insert Table dialog box:
  1. Delete all columns except for the name column by clicking on the minus [-] button repeatedly.
    Why? The name will be used to create a menu using a dynamic table.
    NOTE: Notice that dsAdodeApps is currently selected in the data Set combo box. If you had multiple data sets, you would have to select the correct one.
    However, since there is only one data set, only one will show and there is no need to select it.
  2. Deselect the checkbox for Sort Column when header is clicked.
  3. Skip this step if you used ALTERNATIVE 1 OR 2 above. Otherwise, change all four classes to their respective names (i.e., oddRow to oddRow, etc.). in the drop-down combo boxes.
    Why? Because we attached a style sheet to this page, these classes are made available in this dialog box so that we can style our table/menu.
  4. IMPORTANT: Ensure the checkbox for Update detail regions when row is clicked is selected.
    Why? This will allow the content in the master region to change when a row (menu link) is clicked.
  5. Click OK.
10. Click the DONE button.
Save file. (CTRTL + S). You will be prompted to copy some dependent files (SpryData.js and xpath.js, css) to your web site folder. Click OK.
Note: Dreamweaver will automatically create a folder called SpryAssets and copy these files to your web site folder. If you open these js files you can see that they contain thousands of lines of code that made this page work correctly. You did not have to write ONE LINE OF CODE.
Click on the Live View button to preview the table/menu in the sidebar container.
Delete the <tr> tag in either the Code or Design view.
Why? So the table can look more like a menu.
Resize table width to about 200 pixels in the Design view.
Test in Browser (F12): You should see menu items highlight as you select them.
Review dynamic placeholders in the Application Bindings tab.
Why? This was created when we created a dataset above. We will use them as placeholders in the content area.

Define Master/Detail regions

First, it is best to define the Master and Detail regions the will hold the dynamic data for both regions. While there are several ways to create the Master/Detail regions, I found that typing the code in the Code view is the most straightforward technique. Using the Insert Spry Region option by clicking on the Spry Region icon (second icon on Spry tab), you can select the "wrap selection" option to wrap a region around an existing div tag. However, you would be adding an extra div tag that is not necessarily needed. If you used the "replace selection" option in the same dialog box, you would be replacing an existing div tag and would have to add the div ID attribute back again. So, just add the code to the existing tag manually and you will get the best of both worlds.

TIP for updating code below. If you select the mainContent div in the Design View, DW will automatically highlight the code in the Code View making it easier to find and update the correct tag.

Add the following code (spry:detailregion="dsAdobeApps") as an attribute to the .content container div tag in Code view. The code should look like this: <div id="content" spry:detailregion="dsAdobeApps">
Why? You are defining a Detail region.
NOTE: You could have done the same approach for the sidebar, but you would have to use the word region instead of detailregion. However, this Master region was automatically created for you when you created the dynamic table.

Define "Dynamic Data" for Master/Detail Regions

The Master and Detail regions works in conjunction with one another by connecting the data between the two together. First, you create dynamic content for the Master regions (In our case, we will use a Spry dynamic table that repeats a single column from the data set to create a menu—the name column) and then bind it to the Detail region that usually have multiple columns (name, image, description, and newfeatures) from the data set for each item (i.e., link) in the Master region. The Master region also has the code that "listen" for a change (i.e., a click) and updates the Detail region from the corresponding "link" that was changed (clicked). For example, if you click a product name in the Master region, the detail information for that product is automatically updated in the Detail region.

In the content area, drag and drop the dynamic name placeholder from the Bindings panel. Ensure a set of <h1> tags are wrapped around the dynamic name placeholder in Code view.
Insert another line (Press ENTER key) and drag and drop the dynamic image placeholder below the name placeholder.
1. In the Code view, replace <p>{image}</p> with <img src="images/{images}" />.
  NOTE: Notice there are two parts of the src attribute, the static text (images/) and the dynamic text ({images}).
  Why? To create a dynamic path to the images folder where the images are stored.
Test. You should see the application name and a picture below it for each menu item you select.
Click to the right of the image placeholder and press the ENTER key to create a new line.
Drag and drop the description placeholder on the newly created line.
Press the ENTER key again to create yet another blank line, and drag and drop the newfeatures placeholder to it.
Add the words Decription and New Features above the two dynamic text fields and format them as <h2>.
Test. You should see all of the dynamic placeholders populated with data from the XML file for each menu item you select.
NOTE: You only have one (1) page and 1 XML file to create all pages in this web site or web application. You also have the main.css file, but it is optional.

Create another version using an Accordion

Dreamweaver currently doesn't support nested regions. Don't confuse that with the fact that you can have multiple detail regions—they just can not be nested.

Save the index.html file as index_w_accordion.html
CUT (not Copy) the spry:detailregion attributes off of the .content div (i.e., spry:detailregion="dsAdobeApps")
Paste the clipboard content into the <h1> tag where the dynamic name placeholder is. Code should look like this:
<h1 spry:detailregion="dsAdobeApps">{name}</h1>
Paste the clipboard content AGAIN into the <p> tag where the dynamic image placeholder is. Code should look like this:
<p spry:detailregion="dsAdobeApps"><img src="images/{image}" width="200" height="150" /></p>
Delete description and newfeatures placeholder in Design view.
Why? We will add it back later in the Accordion's panels.
Save and test movie.
NOTE: You should see the name and image change as you click on the buttons in the sidebar.
Add Spry Accordion below image by clicking on the Accordion widget from the Control Panel Spry tab.
Save file. (CTRL + S). You will be prompted to copy some dependent files (SpryAccordion.js and SpryAccordion.css) to your web site folder. Click OK.
In the Accordion in Design view, change Label1 to Product Description and Label2 to New Features.
In Code View, paste clipboard content AGAIN into each AccordionPanelContent tag. Code should look similar to this: <div class="AccordionPanelContent" spry:detailregion="dsAdobeApps">Content 1</div>
Delete the word Content1 and replace it with the description placeholder from the Binding panel by dragging and dropping it.
Roll mouse over New Features panel and click eyeball icon to see the second panel content.
Delete the world Content2 and replace it with the newfeatures placeholder from the Binding panel by dragging and dropping it.
Test (F12). You should see that the application work similar as before. However, an Accordion is used to manage content.
(Optional) If you know CSS, style the Accordion accordingly.
NOTE: The goal to the version is to define EACH region that will change individually.

Create another version with a List of Links

Save the index_w_accordion.html file as index_w_listoflinks.html.
Click on the right side of the table in the Design view and press the ENTER key to add a blank paragraph below table.
Select table div in the Design view to highlight the code in the Code view.
Cut all spry attributes from the table's "tr" tag (spry:repeat="dsAdobeApps" spry:setrow="dsAdobeApps" spry:odd="oddRow" spry:even="evenRow" spry:hover="hoverRow" spry:select="selectRow")
Paste code back as attributes in first <p> tag that was created in step 2. The code should look like this:
<p spry:repeat="dsAdobeApps" spry:setrow="dsAdobeApps" spry:odd="oddRow" spry:even="evenRow" spry:hover="hoverRow" spry:select="selectRow"> </p>
TIP: You could also drag and drop the highlighted code in the Code view into the opening <p> tag.
Add a dynamic link between the two <p> tags to replace the  . The code should like like this:
<p spry:repeat="dsAdobeApps" spry:setrow="dsAdobeApps" spry:odd="oddRow" spry:even="evenRow" spry:hover="hoverRow" spry:select="selectRow"><a href="#">{name}</a></p>
Select table div and click Delete button to delete table.
Save and Test move.
(Optional) Format links if you wish.

Create another version with a Combo_box

Save the index_w_listoflinks.html file as index_w_combobox.html.
Select the <p> created in the previous example in the Code view and delete it. The code should looks like this:
<p spry:repeat="dsAdobeApps" spry:setrow="dsAdobeApps" spry:odd="oddRow" spry:even="evenRow" spry:hover="hoverRow" spry:select="selectRow"><a href="#">{name}</a></p>
Replace it with:
<select name="select" >
<option spry:repeat="dsAdobeApps" value="tt" spry:setrow="dsAdobeApps">{name}</option>
</select>
Test.