Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although not technically a part of Dreamweaver, Adobe's Widget Browser gives you a quick and easy option for integrating Ajax widgets into your sites. The Widget Browser is a standalone AIR application that allows you to browse Adobe's Widget Exchange and creates a collection of widgets that feature advanced user interface controls like sliding panels or accordion widgets or more complex components like slideshows or lightboxes. To access the Widget Browser, you can go to the application toolbar, find the Widget menu, and choose Widget Browser.
Now, if you've never launched the Widget Browser before, you're going to be prompted by Dreamweaver to download it. So, clicking OK is going to take you out to Adobe's web site. You can click right here on the Widget Browser page to get the Widget Browser. Now, you're going to be prompted to sign in with your Adobe ID. If you don't have one, they're really easy to get and they're free. So just sign up and you'll be able to download Adobe's Widget Browser. Now after downloading the WebWidgets install file, all you need to do to install it is just double-click on it.
So, here I have it right on my Desktop, WebWidgets AIR file. I'm just going to double-click that and go through the installation process. So I'm just going to install this. I'm not going to add a shortcut icon to my desktop, but I do want to start it after I install it. So I'm going to go ahead and click Continue. It should install rather quickly. Once the Widget Browser is installed, you can use it to browse through Adobe's Exchange to see the available widgets. Now as of this recording, everything is still in beta. So, as you can see, there aren't a lot of widgets displayed here.
This should change dramatically once the Widget Browser is released to the public. Adobe will continue to release widgets. The Browser allows users to package and share their own widgets as well. So as the community gets more involved, the number of available widgets will only continue to grow. Let's take a moment and explore how to use the Exchange and how to get a widget on to your site. So, I kind of like this Spry Image Slide Show. If there is a widget that you want to add to your collection of widgets, you simply click on it. You're going to be prompted by the Widget Browser to go ahead and sign in.
So I'm going to go ahead and sign in to my Adobe account. After you signed in, you're going to get a more detailed view of the widget than you were taking a look at. You can see ratings. You can see descriptions. You can see the type of license agreement. If this is something that you want to add to your collection, you simply click Add to My Widgets. As soon as you do that, you'll go through a little screen where you agree to any license agreements. As soon as the widget is added, you can browse directly to your widgets. Now, you can also view your widgets by going up here to the menu and clicking on My Widgets.
Now currently, I only have the one. Now what's really interesting about this is that if you click one of these widgets, after you've added them to your My Widgets section, you can see a preview of this slideshow in action. You can see people can interact with the thumbnails. They can play the slideshow. You can even take a closer look at the formatting for this. Now, in addition to being able to preview the widget, you can go right down here to the lower left-hand corner and click Configure. This is going to take you into a very detailed interface where you can control every aspect of the widget.
You can name the widget, you can change the duration of slides, in this case, you can modify titles. You can set physical size for the frames. Pretty much any option you can think of is directly controllable through this interface. So this is an incredibly powerful way to customize these widgets without having to write any code yourself. Now if you change these, you can save them as a preset. You'll notice that when I go back to the overview, I've already saved a preset for my Explore California Tours. I've changed the title of this. I've changed the size of it, changed a little bit of the color on it.
You can go up to the menu and choose Insert > Widget or you can use the Insert panel. You can go to your Common objects. There is our new Insert Widget icon right there. So if I click that, I get a menu that says okay, which of the widgets that you have installed you want to use? Well, I only have one currently. So I'm going to click the Spry Image Slide Show with Filmstrip. Then any presets that I've chosen, I can go ahead and select. I'm going to select the Explore Tours preset that I created earlier. I'm going to click OK.
As soon as I do that, it's going to place the Spry Image Slide Show right on the page. You'll notice that all these thumbnails have nothing to do with our photo gallery. We also have this little weird star out in the side. What's going on there? Well, if I switch over to Code View, I can see that the slideshow is really just an unordered list. So one of the things that's really nice about these new spry widgets is they're very unobtrusive. They're just singular elements on the page without a lot of complex structure. So really, in order to make the slideshow on my own, all I have to do is click on each of the image thumbnails and swap them out for an image in my site.
So I'm going to close the Tag Inspector here just so I have little bit more room. I'm going to open up my _images and I'm going to open my gallery folder. So in the gallery folder, I'm just going to one at a time select one of these thumbnails. Using my source, I'm going to point that to one of my thumbnails. To control which larger image displays with this, I'm going to use the link Point to File to point to the larger file. So I'm just going to do that with each one of these guys. I'm just going to point to a thumbnail. Then using a link, I'm going to point to the larger image.
Now you're not limited by just the thumbnails on the page. You can add more if you'd like. So if you've got more images than the thumbnail, you can just keep adding as much as you want. This particular slideshow, for example, allows for you to have more thumbnails than can fit within the pane. Then it allows you to scroll through them if you've got more. Let me just go ahead and grab one more for this example. There we go. Now, you may have noticed that when we previewed our slideshow earlier, titles were coming up with the photo.
So, lot of times in order to understand how this is going to work, you do have to do a little bit of exploration. There weren't any instructions on the Widget Browser as to what we had to change. It took a little poking around to find out that if I go into Code View, I can see that each one of these links has a title attribute. The title attribute is the caption that displays. So I can simply highlight that. Then type in the caption that I want for that particular thumbnail. So usually just examining the structure of the page will give you a good idea as to what you have to do in order to customize the widget to your own devices.
So if I'm going to upload that to my remote server, I need to make sure that that folder gets uploaded as well. I'm going to go ahead and preview this in my browser. So I'm just going to do a Save All. Then preview this in my browser. As soon as I do, there is my slideshow with the thumbnails that I have loaded up. As you can see, the Widget Browser makes it simple to add Ajax-driven controls into your sites. One of the really cool things about the Widget Browser is that it's going to be a community-based tool.
As part of the Adobe community, you can browse widgets, rate them, and even package your own and add them to the Exchange. So, be sure to check the Exchange often and participate in building a widget-based community.
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.