Join Joe Marini for an in-depth discussion in this video Getting practical: Annotating page links, part of Prototype and script.aculo.us Essential Training.
So we have reached the point now with Prototype where we can see a practical example of where we would use Prototype to improve the content of a page. So let's go ahead and open up the example file for this exercise, and here in Aptana, I am going to open a file. And in the exercise_files folder, I am going to open the Annotating_start file, and if you want you can go ahead and look at the finished version to see how it works, but I am going to work on this one and build towards the end.
So I am going to open this file, and let's take a quick look at it in the preview pane. You can see what we are doing here is I have got a list of links and each one of these links points to a different destination. So let's look at the source code and here is that list. So you can see some of these links point to HTML files and some of them don't. This one is a named anchor, this one is a pdf file, this one is a pdf file, this one here is a mailto link. What I am going to do is write some Prototype code that automatically decorates each one of these links with little icons for anchors that don't point to a web page, and in this case that means the pdf file and the mailto link.
So I am going to write some code and when the page loads, it's going to automatically decorate these links for me. That way when the user is looking at the page, they can quickly tell which links don't go to web pages. So scroll up and you can see here that I have already started off by looking for the dom:loaded event, and that should be familiar to you by now, if you've been following along. So to get this example to work and to show the power of Prototype, I only need to write two lines of code to get this to work. So let's do that.
We are going to use the $$() selector, which we covered earlier. So the $$() selector, recall, uses CSS3 syntax to build a collection of elements that are inside the web page. And in this case, the elements that we are going to be looking for are, there's two different kinds of elements with a subtle difference between each one. So we are going to look for list item tags that have links inside them, but not just any links, we are looking for special kinds of links.
And we are looking for links in the pdf case that have an href that end with the suffix pdf, and the ends with notation in CSS3 is $= and we are going to look for pdf. So this statement right here will build a collection of all the links that have an href, that end with pdf, that happen to be inside list items. So once we have that collection, we need to insert some content next to it.
And if we jump to the exercise_files folder really quickly, if you look inside the images folder, you'll see that I have got two icons. One is called small_pdf_icon and one is called smail, and these are small icons that we are going to decorate the links with. So let's go back to the code. So what I need to do is insert those images next to each one of these links. So the function I am going to use to do that is called invoke, and this is a Prototype function that we will cover later. Don't worry too much if you don't understand it all right now.
We will cover this when we cover the DOM extensions that Prototype provides. But for now, just understand in a nutshell, the invoke function can be called on a collection to perform some action on each thing in the list and remember that this is going to be a list of anchor tags. So for each anchor tag, I am going to invoke a function. And the function I am going to invoke is the insert function and again that's a Prototype function that allows me to insert content into a document.
And the content I am going to insert is an image that points to the right kind of icon. So for insert, I am going to pass an argument and the argument is an object that describes how the content will be inserted. So I am going to insert the icon after the link and what I am going to insert is a string. And the string I am going to insert is an image. And the image is going to point to the appropriate icon. So in the case of the small_pdf _icon, it's going to be in the images/small_pdf_icon.gif.
And we are going to add an align attribute to make it align nicely. So it's going to be align equals absbottom, and then we are going to close off the image tag. So that's all I need to do for that one. Now, for mailto, it's pretty similar. I am just going to copy and paste this. Let's scroll down and look. So in the mailto case, we don't want an attribute href that ends with anything, We want the href attribute that begins with the string mailto.
So in that case, we are looking for href attribute that starts with and recall that the operators for starts with in CSS3 is the little hat character, ^=. And in this case we are looking for mailto: and that should be enough to identify the link as a mailto link. And then all we need to do is change the source attribute for the icon we are going to insert. In this case it's called smail. And we can save that now. So now if this is working properly, what will happen is when the page loads, the dom:loaded event is going to fire and these two lines of code will execute and quickly insert the images next to the appropriate links. So let's Save.
And here we are in the example files folder and I am going to double-click on Annotating_start. And you can see that next to the links that point to pdf files, we have our little pdf icons and next to the Email link, we have our little Email icon. Let's make sure that works in IE. So I'll right click and say Open with Internet Explorer and I am going to close that little window right there, and you can see that the links are similarly decorated.
So we have it working cross-browser. And there is all kinds of ways you can customize this. Let me go back to the code. For example, if I didn't want to insert the image after the link, let's say I want to do it before the link, I will just change this from after to before and again, we will cover this later. Don't worry about this right now. I am just showing you how it works. So I will save and now I will go back to Firefox. Now I will Refresh the page, and you can see that the icons are now in front of the links. And I will do same thing in IE.
And I will refresh the page, and same thing. Okay. So that's a practical example of how Prototype makes scripting the DOM much, much easier. And I am sure that you can find uses for this kind of example throughout your code.
- Retrieving and manipulating web page elements
- Handling web page events and creating custom events
- Traversing the DOM
- Creating and handling AJAX requests
- Using script.aculo.us controls such as Autocompleters, Sliders, and Visual Effects
- Building complex page features like data filtering and image rotators