One of the strengths of Dreamweaver CS4 is its extensibility. Yahoo! User interface (YUI) widgets are a set of extensions that you can use in Dreamweaver CS4 to easily add Ajax and JavaScript functionality to a web page. These widgets are supported by the robust Yahoo! User Interface (YUI) framework and well documented (with examples). Using key new features in Dreamweaver CS4, you can easily edit and test the JavaScript and CSS files of these widgets until they fit the design and functionality of your pages. In this article, I show you how to work efficiently with YUI widgets in Dreamweaver CS4, using the Insert panel, Related Files bar, Live view, and Code Navigator.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS4

• Try
• Buy

Sample files:

• YUI extensions; to download the YUI extensions:

• Click the cog icon at the top of the Dreamweaver menu bar and select Browse for Web Widgets, or
• Visit the Adobe Dreamweaver Exchange and search for Yahoo! Web Widgets.

You'll also need the following file:

• master_detail_calendar.zip (ZIP, 1.20MB)

Prerequisite knowledge

You should be familiar with the Dreamweaver workspace and working in Code view.

Install the extensions and add your first widget

To begin, you need to set up your workspace:

1. Download and install the YUI extensions using the Extension Manager from Adobe Dreamweaver Exchange if you haven't done so already.

   Note: For more details on using Extension Manager refer to Add and manage extensions in Dreamweaver in Dreamweaver Help.

2. Restart Dreamweaver and open the Insert Panel by selecting Window > Insert, if it is not open already.

3. From the Insert panel, click the dropdown menu; you should see a new menu option called YUI (see Figure 1).

   

   Figure 1. After downloading and installing the YUI extensions, you'll get the YUI item on the Insert menu.

   For this tutorial, I have downloaded all of the YUI extensions and will be working with the YUI Calendar and YUI Datagrid extensions.

4. Create a new blank HTML page by selecting File > New, using a Page type of HTML and layout of None.

5. Click the YUI Calendar widget. Dreamweaver automatically inserts the YUI Calendar code in your page and then adds the necessary JavaScript and CSS files to your site in a folder called YUI.

6. Save your file and preview your YUI calendar in your default browser (press F12).

Previewing YUI widgets in Dreamweaver

In the past, it was necessary to preview pages coded with JavaScript in a browser to see any enhancements in action. With Dreamweaver CS4, a new feature called Live view allows you to preview your YUI widgets on the fly. Live view does not replace the Preview in Browser feature, but it simulates your widget in action without you having to leave the Dreamweaver workspace.

Next to your Design View button, click Live View to preview your calendar widget. Note that it works just as it would in the browser (see Figure 2).

Figure 2. Activating Live view

Switch to Split view. With the Live View button selected, click the Live Code button to the right of the Live View button. Click the calendar dates and note that parts of the code are now highlighted yellow and change when you click the calendar.

Live Code is a new feature that lets you preview JavaScript code in action. This introspection tool reveals what JavaScript is doing to your markup in real time, so you can understand the workings of the code. This feature is especially useful when working with already built and unfamiliar JavaScript files, such as the YUI widgets.

Styling YUI CSS files

Keeping design consistent throughout a site is essential. In the past, editing the design of JavaScript widgets usually meant changing inline HTML font and colors in Code view. This process was clunky and time consuming. All of the YUI widgets are styled with two CSS files.

To modify the fonts used in this widget modify the fonts-min.css file. The other CSS file is named after the widget. For example, the calendar widget has a calendar.css file. This CSS file is used to control the look and feel of the widget including text appearance, colors, rollovers, and so on. These files consist of many CSS rules that you can edit easily with Dreamweaver.

With the calendar.html file open, click the calendar.css file on the related files toolbar (see Figure 3). Note that Design view displays the calendar.html page and Code view displays the related CSS file. This feature lets you look at two places at the same time.

Figure 3. Viewing the HTML source page and the related CSS code

If you want to make the CSS code easier on the eyes, click the Apply Source Formatting in the Coding toolbar (see Figure 4). This tool adds formatting to your code so that you can read and edit it more easily.

Figure 4. Apply Source Formatting from the Coding toolbar

In the CSS panel, switch from All to Current. Select one of the dates in the calendar and note how the Current view in the CSS panel updates to show the selected CSS rules. Select and change the background color in the CSS properties pane. Note the color change on the fly.

The third way to edit these CSS files is by using a new feature called Code Navigator. Code Navigator displays the CSS rules related to a selection in Design view. Be sure Live view is turned on and Alt-click (Windows) or Command-Option-click (Mac) on a part of the calendar in Design view to display the related CSS rules (see Figure 5). You can also get to the Code Navigator by right-clicking in the area that you want to edit and select Code Navigator from the menu.

Figure 5. Opening the Code Navigator

When the Code Navigator is open, roll over each of the rules to get a tooltip that displays the CSS attributes of each rule. If you have the CSS panel open and the Current button selected, you can click these rules in the Code Navigator and easily edit these rules in the CSS panel, instead of editing in Code view (see Figure 6).

Figure 6. Editing CSS with the CSS panel and the Code Navigator

If you are working with a fly-out menu such as the YUI Menu widget, submenus that are difficult to select with the Code Navigator can be held down by opening the fly-out menu item in Live View, right-clicking and selecting Freeze JavaScript (or pressing the F6 key). Right-click the submenu item again and select Code Navigator to preview the related CSS rules (see Figure 7).

Figure 7. Freezing menu to view the related CSS files.

Accessing the YUI framework

The basic functionality of these widgets is editable and additional code can be added to access the breadth of features available in the YUI frameworks.

Note: For documentation on the YUI widgets go to the Yahoo! Developer Network website.

If you have placed a widget on your web page, you can also jump directly to the related documentation by clicking the link in the Properties inspector (see Figure 8).

Figure 8. Link to visit the related YUI widget.

The widgets on the YUI Developer Network are similar to the extensions that you downloaded from the Adobe Exchange. The only difference is that the Dreamweaver extensions offer a one-button push to add to your web pages. The Yahoo! Developer Network site widgets need to be added manually to your code. The CSS files and other related files must also be manually installed on your site in the right place. The one-click push convenience is gone and you will have to do some research and testing to apply them to your web pages. Fortunately, you can modify the YUI widgets with the YUI framework.

Try this:

1. Create a new page, save it as dataTableExample.html, and add a YUI Data Table to your page.

   For the purpose of this tutorial, you can leave the placeholder values in the table. If you choose to modify these values, you may need to remove the date and number formatters defined in this table if your values are different (see Figure 9).

   

   Figure 9. Editing date formatter in Code view.

2. In your dataTableExample.html file, browse to line 103 in Code view to modify the variable called yuidatatable1. Add an optional attribute at the end of the statement:

   {scrollable:true, height:"100px"}

   Your variable should now read as follows:

   var yuidatatable1 = new YAHOO.widget.DataTable("yuidatatable1", 
   columnDef_yuidatatable1, this.DS_yuidatatable1, {scrollable:true, height:"100px"});

3. Save your page and click Live View to see the scrollbar that was added to your table.

You can add different types of data sources, variables, and optional attributes out of the box without having to create an additional framework. All of the necessary code is already linked to your page when the Data Table extension was inserted into the HTML page. For some quick modifications, view the cheat sheet of the Data Table extension. (Each extension has its own cheat sheet.)

Connecting YUI calendar to a Spry dataset

Connecting the YUI widgets to a data source or dataset can be a bit more involved than just pushing buttons. With Dreamweaver CS4, you can build most of the necessary components and then make a few tweaks in the JavaScript code of the YUI widget and even incorporate Spry classes to work with the display of the data. These classes become available when using the built-in Spry widgets.

In the following example, I'l revisit the YUI calendar widget and link it to a Spry dataset. The dataset will be created using a new feature in Dreamweaver CS4 that lets you convert an HTML table into a dataset.

To begin, you will need to create a new Dreamweaver site and path to the MasterDetailCalendar folder included in this tutorial.

1. Open the schedule.html page included in the tutorial files and view its content. Inside of this page, you will see a mock training catalog table of Adobe courses with titles, description, an image, location, and a course date. This is a regular HTML table with an ID named classSched. In order to create an HTML dataset a table ID is required.

2. Create a new blank html page in Dreamweaver and name it calendarData.html.

3. Open the Bindings panel by selecting Window > Bindings and create a new Spry dataset.

4. When the dataset wizard opens, select HTML for the data type and name the dataset dsCourses.

5. Click the Browse button to specify the data file and select the schedule.html file.

6. After the data loads in the data selection area, click the yellow arrow to populate the data preview area (see Figure 10).

   

   Figure 10. Selecting the data table.

7. Click Next and preview the information in Step 2 (of 3).

8. Click Next again and select the Do not insert HTML option in the Step 3 screen. Click done.

   Next, you have to bind your dataset to an HTML table.

9. Open the Insert panel by selecting Window > Insert and select the Spry menu to display the Spry widgets. Select the Spry region widget.

10. In the Spry region dialog box that opens, select Detail region and click Next.

11. In Design view, click inside of the Spry detail region, remove the placeholder text and insert an HTML table from the Insert panel. You can format table rows and columns to look similar to Figure 11.

    

    Figure 11. Formatting an HTML table in the Spry detail region

12. Open your Bindings panel by selecting Window > Bindings. Click and drag each of the bindings into your table cells, including only the bindings that have a lightning bolt icon (see Figure 12).

    

    Figure 12. Inserting data bindings into the HTML table

13. Select the {title} binding and assign it an h2 tag from the property inspector format menu.

14. Save your file.

Next, insert a YUI calendar widget and tweak the JavaScript:

1. In Code view, place your cursor right before the Spry detail region start div tag (at about line 16).

2. From the Insert panel, open the YUI menu and insert a YUI calendar widget.

3. In Code view, locate a function in the YUI calendar JavaScript called selectHandler(event, data) and paste the following code between its curly brackets:

   var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

   This new function takes the data array returned by the calendar when clicked and formats it into a string that matches the date column in the Spry detail region table.

4. Right underneath this variable, create another variable to search the dataset for the selected date:

   var r = dsCourses.findRowsWithColumnValues({"Date": formattedDateString }, true);

5. Add another variable that will display the course data if a matching date is found:

   var region = Spry.Data.getRegion("classDetail");
   if(r){
       dsCourses.setCurrentRow(r.ds_RowID);
       region.setState("showClass", true);
   } else {
   region.setState("ready", true);
   }

6. Now you will need to reference your Spry detail region by adding an ID named classDetail for the spry:detailregion.

7. Wrap a div tag around your HTML table and assign it a Spry property as shown in this snippet:

   <div spry:state="showClass"></div>

   This spry:state is a part of the classes available to you when using the Spry widgets. You referenced it earlier in the if statement.

8. Add another div tag below the table div tag as follows:

   <div spry:state="ready">
   There are no classes on this date. Please select another date.
   </div>
   

   This placeholder text would actually look much better styled and maybe with a cool default graphic. See Figure 13 for a complete snapshot of your Spry region states.

   

   Figure 13. Spry region code.

9. Save your page and click Live view to preview your YUI calendar and Spry detail region. Click different dates that contain a course offering and you will see the detail region come to life. Keep in mind that I used dates in December 2008. Any date without a course offering will display the default text.

   You can find the Spry region states demonstrated here in the Spry documentation by selecting Help > Spry Framework Help.

Where to go from here

I encourage you to check out the additional YUI, MooTools, and JScript widget extensions on Adobe Dreamweaver Exchange. All of these widgets enable you to add effortlessly Ajax and JavaScript functionality to your web pages. At the time of writing, the Adobe Dreamweaver Exchange has eight YUI widget extensions available for download. If you like the widgets and want to go beyond what these extensions offer, visit the Yahoo! Developer Network to find more widgets that add functionality to your web pages. In addition, don't forget about Spry functionality that is already built into Dreamweaver CS4.

After installing the YUI widgets you will notice that there are several lines of JavaScript that crowd your Code view. Using the new Externalize JavaScript command in Dreamweaver, you can extract this code from your HTML file and place it in separate JavaScript files. You can learn how by reading the article, Understanding unobtrusive JavaScript in Dreamweaver CS4.

About the author