Using JavaScript, DOM, and Spry code hinting

Write code more rapidly with code hinting support for JavaScript, the DOM (Document Object Model), and Spry.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Dreamweaver CS4

• Try
• Buy

Sample files

lrvid4048_dw.zip (ZIP, 3MB)

Prerequisite knowledge

Intermediate knowledge of JavaScript, HTML, and Spry

Using JavaScript, DOM, and Spry code hinting

Adobe® Dreamweaver® CS4 has enhanced code-hinting support for JavaScript, DOM scripting, and the Spry framework. Code-hinting is available for both JavaScript documents and script blocks within your HTML files. The new code-hinting is available to you on primitive JavaScript as well as on any user-defined functions, parameters, classes, class properties and methods, and variables with which you might be working. As you are working, Dreamweaver inspects both your code and any external JavaScript files referenced in your document. This capability gives you real-time code-hinting support for any external JavaScript libraries, such as the Yahoo! User Interface (YUI), jQuery, and Prototype libraries. Code-hinting is dynamic in Dreamweaver, so changes made to external libraries are reflected as you code.

In this tutorial, you will learn how to initialize a YUI calendar widget and bind it to a Spry data set on your web page.

Initializing a YUI calendar widget

Writing the code for a YUI calendar widget is a very efficient, streamlined process in Dreamweaver CS4. To initialize the YUI calendar widget:

Note: The YUI calendar widget used in this tutorial is available for download through the Adobe website. To access the calendar widget, click the Extend Dreamweaver button on the Standard toolbar, and then choose Browse For Web Widgets.

Figure 1: Browsing for the YUI calendar widget

1. Open the exercise file calendar_start.html.
2. Click the Show Code View icon in the Document toolbar.
3. Scroll down to the point in the code at which you are initializing the Yahoo calendar widget (about line 133.) Insert your cursor on Line 134.
4. Type in YAHOO, followed by a period. As soon as you type in YAHOO., a scrollable window opens containing code hints from the Yahoo library. In the right column of the code hinting window, you can see the documents from which Dreamweaver is pulling these methods, properties, and objects.

   

   Figure 2: Viewing the code hinting window
5. After the period type ex. The code-hinting function automatically selects “example” for you. Press Enter/Return to insert the code.
6. Next, type .calendar followed by another period.

   Note: When you place the period after calendar, the code hinting window opens. Notice cal1 is the first suggestion. This demonstrates the dynamic, introspective nature of the Dreamweaver code hinting function. You'll notice the variable cal1 is defined three lines earlier in the code on line 131. As soon as code for cal1 was written, it was added to the code-hinting feature's store.

   

   Figure 3: Initializing code in Dreamweaver
7. Continue typing until you have entered the following: Yahoo.example.calendar.cal1.render;
8. Choose File ® Save and click the globe-shaped icon in the Document toolbar. Choose Preview In Firefox (or your preferred browser.)
9. When the pages opens, click the Calendar View button. A calendar widget opens in a separate window.

   

   Figure 4: Previewing the calendar

Using syntax error indicators

For code hinting to work properly, the JavaScript has to be well-formed. Any errors can disable code-hinting and slow you down. To help you correct and detect errors, Adobe has added syntax error indicators in Code View that display a warning on the information bar and highlights the affected lines. To detect syntax errors:

1. Close the browser window and return to Code view.
2. Locate the pair of comment tags on lines 28 and 37, respectively.
3. Select the tags and the code between them. This is code for a prewritten calendar widget code will help you when you bind the data to your calendar widget. The comments have to be removed in order for Dreamweaver to recognize the code.
4. Click the Remove Comment icon on the left side of the Dreamweaver window.

   

   Figure 5: Removing a comment

   Once you remove the comment, Dreamweaver detects a syntax error and displays a warning in an information bar at the top of the document window. Dreamweaver also highlights the line containing the error.

   

   Figure 6: Viewing a syntax error indicator
5. Delete the extra closing brace on line 34. There should be one closing brace on line 35 of your code. The error message disappears once the error has been corrected.

Binding a YUI calendar widget with a Spry data set

You have successfully created a YUI calendar widget. However, the calendar is not bound to any Spry data (that is, there is no relationship to the data in the data set and the calendar). To bind the calendar to specific dates:

1. Insert your cursor on the blank line above the code for the calendar widget (line 31).
2. Create a new variable by typing:

   var dates = cal4.

   

   Figure 7: Creating a variable
3. A code-hinting menu opens providing multiple methods for your data set. Select getCurrentRow() and press Enter/Return. Close the line with a semi-colon. Your code should look like this:

   var dates = cal4.getCurrentRow();

   This code returns the value of any selected current row. Because you are registering this code to an observer object, every single time the row data changes, it will update the calendar widget.

4. Choose File > Save. Click the Preview/Debug in Browser icon to preview the calendar widget in your browser.
5. Click the Calendar View button. Now every time you click on an event in the table, those dates will be rendered in the calendar widget.

   

   Figure 8: Rendering dates in the calendar widget

Where to go from here

• Dreamweaver CS4 Help and Support
• Learn Dreamweaver CS4
• Introducing Adobe InContext editing, by David Gassner
• Spry Tooltip widget and form validation widgets, by James Williamson
• Creating a Spry data set, by James Williamson
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors