Join James Williamson for an in-depth discussion in this video Using the Widget Browser, part of Dreamweaver CS5 New Features.
To access the Widget Browser, you can go directly to the Application toolbar, find the Widget menu and choose Widget Browser. Now, you are going to be prompted to download and install the Widget Browser. This is a separate Adobe AIR application that can be installed either with, or without Dreamweaver. However, as we will see, there are some powerful integration between Dreamweaver, and the Widget Browser that makes it a lot easier to utilize Widgets within your site. Now, before you install the Widget Browser, you are going to need to have an Adobe ID. You can get one as part of the installation process, or you can just go directly to Adobe's site and get one, if you don't already have one.
So, clicking OK will take you to Adobe's Web site, and it will prompt you to download the Widget Browser. Now, this is an AIR application, and once the AIR application has downloaded, it's going to prompt you to install it. Now, depending upon your platform, you might have slightly different dialog boxes, but pretty much what your system is going to ask you is, "Are you sure you want to install this?" And we are going to say "OK." And you can add some shortcut icons to your desktop, if you would like, or you can add the icon to your dock, if you are on a Mac. And you can also start the application after installation, and I think that's what I am going to do. So, I am going to go ahead and click Continue, and that's going to go ahead and install the Widget Browser for me.
Now, once the Widget Browser is installed, you can use it to browse through Adobe's Exchange to see the available Widgets. As of this recording, everything is still in beta, so as you can see, there aren't a lot of Widgets displayed here. Now, this is going to change dramatically. Not only will we continue to see Widgets released through Adobe, but the Widget Browser allows you to package and share your Widgets as well. So, if I go over to Options and choose Enable Widget Projects, notice that right over here, I have Widget Projects where I can package up my own Widgets and upload them to the Exchange.
That's pretty cool! So, Adobe is a very strong supporter of the OpenAjax Alliance, and all the Widgets are based on the Widget metadata specification. So, if you are interested in creating and sharing your own Ajax Widgets, visit the OpenAjax.org. That would be a very good place for you to start. So, the good news here is that as the community gets more involved, the number of available Widgets is only going to continue to grow. I am going to switch back to Exchange, and let's say there's something that we want to do on our site, like a Spry Image Slide Show. That would be kind of cool. So, what I am going to do is I need to start adding some of these Widgets to My Widgets, because currently right now My Widgets is totally empty.
So, if I go back to the Exchange and click on any of these Widgets that I am interested in, notice that the Widget Browser is going to prompt me to go ahead and sign it, because as I stated earlier, you are going to need to have an Adobe ID. So, I am going to go ahead and do this. And if you don't have one, remember, you can just go ahead right here and create an account. So, I am just going to go ahead and sign in, and it's going to download that Widget for me and add it to My Widgets. Now, after you have added a Widget to your Widgets, you can see a lot more information about it. You will have Ratings, the number of times it's been Downloaded, a little bit of information about it, the Licenses involved in using it.
So, I really like what I see here. If I click of the Preview, I can preview this Widget and see exactly how this Widget works. I can even see the code involved in creating it. That's cool! So, I want to add this to My Widgets. So, I am going to go right down here, to the lower right-hand corner and say Add to My Widgets. As soon as I do that, I agree to the licensing, and I will say, "Yeah, let's go to My Widgets. Let's see what I have got in there." So, the more Widgets that you add, the more you will see in this My Widgets space. Cool! So, I have got this Widget, and I am thinking to myself, "I really like it, but this Default View isn't probably what I am looking for." Well, that's okay, because there might be some other presets that you like, so you can click through the Developer's Presets.
Or if you want to, you can configure your own. So, I am going to click on the Configure button here, and I am going to go ahead and create my own presets, based on this. So, one of the first things I can do is start changing the behavior of this one. So, change it to Auto Start or not Auto Start, how long the slide should take before they Transition, the Transition time between them, that sort of thing. So, I have got all these different categories now. I am going to change the Title here to Explore California Tour Photos.
We are going to go ahead and just make some basic changes here. I am going to leave most of the titles the same. I am going to change the View Frame, though. We are going to go ahead and make that 500 pixels Wide, 326 pixels Tall. That's going to help it fit in our space a little bit better. We will make the Frame itself 520 pixels Wide. There we go. So, you can usually do a lot of playing around with these controls and customizing it to see what you are getting. What I really like about this is that, as we keep working, and I am just changing some values here, settings some background colors to gray, others to black, so just finding some settings that I like here.
Notice that, on the right-hand side, I am actually getting a preview of what this is going to look like when I am finished with it, which is really, really cool. So, just made some basic changes here. And after I have changed all these, I can Save this preset. So, depending upon how many controls you have, and each Widget will be slightly different. It's up to the developer to expose some of these controls to you. So, some will have a lot of options and some maybe not quite as much, but if they do have options, you can save those as a preset. I am going to go ahead and Name it, and I am just going to call this one Explore Tours.
I am just going to minimize it and go into Dreamweaver. Now, here in Dreamweaver, I have got a page. This is the Gallery page, which is open from the Explorers folder, in the Widget Browser's Exercise Files folder. And I am just going to scroll down and create a blank line, where I want my slideshow to go. Now all I have to do is go over to my Insert panel and inside my Common Objects, I will scroll down and find my Widget. Now, you can also find this up in the menu, in the Insert menu as well. So, I am going to click on Widget, and it's going to ask me which Widget I want to use.
Well, I have only got one loaded, so the more Widgets you add to the Widget Browser, you will see more of them here. And notice that I can also choose any of the Presets that I have saved as well, and in this case, I have saved the Explore Tours Preset. I am going to click OK, it places it on the page, and there's my Widget. If I go into Live View, notice that I can see Explore California Tour Photos, and there are all the photos. Now, you are probably wondering, "Well, yeah, but those aren't your photos. How do you change those out?" Well, this is a good time for us to very quickly examine the structure of some of these Widgets.
So, if I turn Live View off and if I go into Code View, I can see that really, all this Widget is is an Unordered List. That's really cool! So, the Spry-1.7-UI that they are using for a lot of these Widgets, uses progressive enhancement to just go ahead and take a very simple page structure and build this Widget around it. So, changing things out is actually really, really simple. I am going to switch back to Design View and show you how easy this is to go ahead and add you own photos to this. I am going to go over to my Images directory, open that up, and I have a folder called gallery.
Some Widgets, again, are going to be fully documented and others are going to require a little bit of work on your part, but for the most part, they are amazingly easy to change out. Now, speaking of that, you will notice I have more thumbnails in my gallery than I actually have pictures over here. So, if I go over to Code View, I could take any of these list items, copy it, paste it, and really quickly and easily add another thumbnail to this. So, there is Tahoe, and there is Tahoe. Oops, wrong one again.
So, you have to be careful about that. I want to make the Link be the larger photo, because it's linking out to that. Now, you may have also noticed that Titles were showing up for those, and for those, I am going to switch over to Code View and make sure that I am changing the Title attribute of these Link tag. So, for the first one, I am just going to type in 'Beach houses,' and in the second one I am going to type in 'Golden Gate.' So, there is a little bit of work involved here, but I think you will agree, to get a really nice slideshow like this, it's really not a lot of work.
Bridge, and here we have Cool cop car, down here we have Red Rock Canyon. And all these photos were taken by a very good friend of mine, Samara Iodice, who did these photos, and I think they are fantastic, so I just want to make sure that I told you guys who took these pictures. So, here we are going to do Redwoods, and inside here, we will just do Lake Tahoe.
So, we are going to Save All, Preview that in our browser, and there is our slideshow Widget, integrated right into our page, pulled down from the Exchange, and all done in under 15 minutes. How cool is that? Now, as you can see, the Widget Browser makes it simple for both technical and nontechnical designers who want to add Ajax driven controls into their sites. Web developers are going to enjoy the time savings that they can get from packaging up your own Widgets, and then using the Widget Browser to add them to their page.
Now, for nontechnical designers, the Widget Browser allows them to add advanced Ajax user interface controls and components into their pages with a minimum of coding. Now, in my opinion, what's really cool about the Widget Browser is that it truly is 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.
- Comparing Dreamweaver CS4 and CS5
- Setting up a new web site using the enhanced Site Setup dialog
- Browser Lab integration
- Working with CMS frameworks
- Using the Adobe Widget Browser
- PHP and site-specific code hinting
- Navigating in Live View