Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Welcome back, our XSL Transfer Sheet is almost finished. It's displaying the information we want it to display but the only problem is it's only displaying the first record. So we need to change it so that it will display all of the shows and not just the first one. We do that by using what's known as a Repeating Region and Dreamweaver makes them amazingly easy to do. Now when you do a repeating region you have to be very careful to select exactly the area that you are looking to select. For example, we don't necessarily need to repeat the showType. The showType is upcoming shows. We don't need to repeat that every single time.
So I am actually going to start at the information that needs to repeat which is at our date and I am going to select downward from that. So I will hit my left arrow key next to that, just to make sure I have got the correct item. Starting there I am just going to drag down and to the right and I will select the remaining content. So I want to select everything on my document except for that. If you want, you can double check in Code View to make sure you have got everything and this is why I double check. Notice what happened here. I did not get the opening h2 tag, I did not get the closing li, I did not get the closing ul tag. So really important that I check this. So I am going to switch over to Code View, so you are still working in Code View, I am going to highlight the h2 and go all the way down to the unordered list so we will have all of that selected.
Now with that selected I am going to go up to my menu and I will go to Insert. In the Insert menu, if you scroll all the way down you are going to notice a new little mini item called XSLT Objects. Dreamweaver provides us these XSLT Objects to prevent us from having to do a lot of hand-coding. You can see we can insert Dynamic Text on the page, Repeat Regions, Conditional Regions that appear if certain conditions are met. Multiple Conditional Region and you can even pass XSL Comments in from here. So we are going to choose Repeat Region and Dreamweaver needs to know, okay at point you want me to pick this up? You will notice that in our Bindings, I am going to scroll down, both the show and painting are repeating regions. So which one do we want? Oh, we want show. So I am going to select show, click OK.
Now this is surrounded in a brand new tag. Notice that we have an xsl: for-each tag and it says select= "galleryShows/ showType/show". So the for-each syntax is actually doing the repeat for us and then select tells it which node to repeat. Now you can nest repeating regions inside of each other. As a matter of fact, we need to do this because we are only displaying right now the first painting. We want to display more than one painting. So I am going to highlight just the list item itself. So again, I am going to do this in Code View on line 30, I am going to do just the list item and I am going to go up to Insert > XSLT Objects, and choose Repeat Region again. Now this time I will scroll down and find painting because that's what this object is. we want painting to repeat and click OK. And again we have our for-each values. So the for-each is basically going into that object and saying for each one of this that you have go ahead and display one here.
Now you will notice that we do this inside of a list item and this is going to dynamically build a list for us. You could do this inside of a table, it would dynamically build table rows for you, or you could even do this inside of form elements. So if you had a pull down menu or combo box so it would go ahead and populate that for you. Switch back to Design View and we notice in Design View we actually have a little highlight that says xsl: for each, indicating to us that we do have some repeating regions on the page. I am going to save this and we will test this in our browser. Now not only do we see all four shows but notice the paintings for each of the shows is repeating as well. So there is our nested repeating region.
Our XSLT is doing exactly what we are asking it to do at this point. We are saying take this information from this XML file or any XML file you are attached to and display it on the page in this fashion. So we are formatting heading tags and paragraph tags and image tags, but it's still pretty raw, there is not a whole lot going on here and one of the things that we can do to our XSL documents is actually bring in cascading style sheets to help with the formatting process. Now there are a lot of pros and cons to doing that. There is a lot of debate about whether CSS should be used with XSL or in conjunction with it, or whether we should use something else called XSL Formatting Objects.
I am of the opinion that for generating XHTML the cascading style sheets is the best form for formatting that visually. So what we are going to do is we are just going to attach a style sheet and we do this the same way that you would attach style sheet in an XHTML page. So I am going to go to my CSS Styles panel I will click on the All button and I am going to select the Attach Style Sheet icon. Now I am just going to browse. So we are going to go in our Exercise Files and we are going to select our CSS folder and the CSS we are looking for is the simple_xml.css. Click Choose, we will make sure we have a link, click OK and immediately everything on our page formats.
So I am going to save this again, preview this on my browser and we have dramatically affected our XSL transformation. So our XML is looking a lot more like what we expected at the beginning of our exercise. So we are going to quit Firefox. Now if you notice that while we were previewing that in the browser we kept previewing a temp file. So we weren't looking at an actual XSL transformation, we were looking at a preview of what the transformation would do. In our next exercise, we will see how we can actually perform an XSLT transfer on the client side.
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.