Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our last exercise focused on defining a Spry data source, and now that we have that data source, let's take a look at how we can get the data on the page. Now, before we use any of the Spry Objects, let's go ahead and add a little structure to our page to make it easier to display both the Spry Table that we are going to use and the Widget that we will use a little bit later on. So we are still working in our current.htm file, so I will scroll down. A little bit further down the page, at the bottom we have a Note from the artist. We need to go ahead and highlight just the text that makes up the note. So leave the headline, Note from the artist, alone, you just want to highlight that.
We will go ahead and use the Command+T or Ctrl+T Quick Tag Editor to bring that up, and that allows us to Wrap this content in a div tag. So we are going to type in div, and we are going to do id =, and I want you to use the rightCol id. Now notice, if you type in r, the code heading jumps right down to rightCol. Well, that's because that is a style that already exists in our external CSS. So we are going to hit Enter and then Return. Sure enough, the code reformats and moves over to the right hand side.
Now one of the neatest tricks that I know of in Dreamweaver is this. Let's say we want to place our cursor just to the left of the div tag and insert another div tag on that side. Well, trying to click with your cursor would be very difficult, but if you will notice, the div tag that we just inserted is highlighted in blue. That means that we have the entire div tag selected. Use your arrow keys and select the left arrow. That's going to place your cursor immediately to the left of whatever element that you just had selected. So that is one of the great ways of getting your cursor into a very tight spot that would be otherwise difficult to select.
Let's click on our Layout tab in our Insert toolbar, and let's click on the Insert Div Tag icon to insert a div tag just to the left of our icon. We want to insert this at the insertion point, so we don't want it to wrap around anything. For ID, let's go ahead and give it the ID of leftCol. So instead of rightCol, it will be leftCol. Go ahead and click OK. Now anytime you place a div tag on a page that's empty, Dreamweaver does this very helpful thing to you. It just goes ahead and throws some content in there. So you can see we have a div tag sitting over there now that says Content for id leftCol Goes Here, so now we know exactly where that leftCol is and where our information is going to go.
So we have got our page structured now and we are ready to go ahead and place our Spry data on the page. Highlight, the Content for id leftCol Goes Here. We are going to replace that with our Spry data. Now there are a lot of different ways to get Spry data onto the page. Let's go back to our Insert toolbar and click on the Spry tab again. I want to focus on the left hand side; those five left hand icons over there. The first one we just used, that was a Spry XML Data Set. But then we have the Spry Region, Spry Repeat, Spry Repeat List, and then the Spry Table.
Now we are going to use the Spry Table, but I want to point out something about placing Spry data on the page. To use Spry data on the page, you first have to have that inserted into a Spry Region. So a lot of the things that we are going to do in the course of these exercises will put the Spry Region on the page for us automatically, but if you are ever hand-coding it or just trying to do drag and drop Binding on the page, remember that it needs to be nested inside of a Spry Region in order for you to be able to see it. So we are going to use the Spry Table. Tables do a great job of displaying data. In this case we need to display a list of paintings and the paintings' price, so a table would be a pretty good element to place that data in.
So I am going to click on Insert > Spry Table, and I get the Insert Spry Table dialog box that comes up. The first thing that it asks me is which Spry Data Set do you want to use, and we are just going to stay with dsShow. It's the only one that we have. The next thing we need to tell it is which elements in our data set we want to include in our table. Well, we only need two, the name of the painting and the price. So select each of the individual elements and click the minus symbol until all you have left are the name and the price. Now to the right of that it asks you if you want to make them sortable. Now you do that by clicking the checkbox just below this window. So I am going to select name and make that sortable, then I will select price and we will make that sortable too.
The reason that we are doing that is so that users will be able to click on the name of the painting and sort by that column and users will also be able to click on the price and sort it by that. So if they are looking for the cheapest painting or the most expensive painting or just sort the paintings in alphabetical order, clicking Sort will allow them to do that. Just below that we have four Form elements that allow us to assign classes to different events in our table. Notice we have an Odd and an Even row class, a Hover class, and a Select class. These styles have been predefined for us, so we can just pick them from our pulldown menu. Anytime that you are going to insert this type of a Spry Table or Spry information on the page, a lot of times you will have an opportunity to style them. So you may want to become really familiar with these elements so that you will know which styles to create beforehand.
For the Odd row class, I am going to grab the pulldown menu and choose odd. What it's doing is its showing you all of the class styles available in your style sheet. For the Even row class, I am going to choose even. For the Hover class, choose hover, and for the Select class choose selected. So it's a good idea to go ahead and name those classes something that's going to be rather intuitive when you get to this stage. Now the other thing that I am going to check is Update detail region when row is clicked. It's not going to mean anything for us right now, but when you are using sort of a master detail set, like we are, we have a list on the left hand side and we have information that we want to update on the right hand side, you first need to check this, because that's going to basically tell Dreamweaver that you want this to become part of a master detail set.
So we will go ahead and click OK. It's going to prompt you and ask you if you want to Add a Spry Region. Now, I mentioned before that you have to have a Spry Region in order for this to display, and you might think, well, why would it even ask me this? Well, you might already be inside of a Spry Region, and if you are, you don't need to add another one, but we are not, so we are going to click Yes. So it adds a Spry Region on the page for us, and now we have got our name, our price. So I am going to switch over to Code View so that we can actually see what this has done for us.
So as I scroll down the code, scroll down until I find my Spry Region and I can find that around Line 42. So it placed a div tag on the page for us and it's a Spry Region, so note the actual syntax. spry:region= and then it passes along the data set. Notice that we are using a Spry sort on the two table headers and we are using the @name and the @price inside there. Then we have a Spry repeat region on a table row and that's going to repeat that over and over again. Now in a later exercise we will be doing a Repeat Region by hand. So I am going to switch back over to Design View, and I am going to modify a few things here.
First up, I don't like having @name display as the actual column header, so I am going to highlight that, and I am just going to type in the word, Painting. I am going to highlight price and I am just going to remove the @ symbol from that. You will notice that it didn't ask me if I wanted to do a style for my table header, so I am going to select that table row by clicking just to the left of it, and using my Properties inspector, I am going to go ahead and assign a class to that. So where it says Style, None right now, I am going to grab that pulldown menu and I am just going to cycle through my classes until I find top. There we go.
See how this worked. We will go to File and choose Save, and we will Preview that in our browser. As it previews in the browser, our table builds out. I am going to scroll down just a little bit so we can see the table a little bit better. Notice that as I hover over it, we get the Hover Effect. If I click on Painting, it will sort by painting. If I click on price, it sorts by price. If I actually click on one of these, I get an Active or Selected link. Now, that doesn't really mean anything right now, but later on when we add our detailed set to the right side over here, that will indicate which painting is the current painting that we are looking at.
So we have defined a data set. We have placed some data on the pages. Let's take a look at our next series of exercises using what's known as a Spry Widget to add even more user interaction and interactivity to the page.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.