- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Additional Spry Functionality in Dreamweaver CS4
The Spry framework has a great many effects, functional widgets, and data options. Not all of them are available through Dreamweaver's menus, but you can use any of them in the pages you build. Let's look at some of the other built-in features.
Spry Validation
Validation widgets are form elements that give the user feedback—positive or negative—to indicate whether the user has entered text according to the correct pattern, selected the appropriate element, or neglected a required field. Dreamweaver CS4 includes a number of Spry validation elements that can make your coding task much simpler. Before creating some of your own Spry validation elements, take a look at the range of available options:
- Open the Spry Demos page in your browser. Click the Validation Widgets link.
- Without entering any data, click the Submit button at the bottom of the form. The form validation functionality is immediately apparent. Spend a moment filling in the fields and fulfilling the form requirements.
- Click the View Source link at the top of the page.
- Return to Dreamweaver. Click File > New and create a blank HTML page with no layout. Save the file as validationTest.html.
- Click Insert > Spry > Spry Validation Text Field. Set the element's ID to participantEmail and the label to Email Address. Leave the other default choices and click OK. If prompted, agree to adding a form tag.
- Save your file, agreeing to copy the Spry files to your site.
- In the Properties pane, examine your options for configuring the validation widget. (If necessary, choose <span#sprytextfield1> in the tag inspector to activate the appropriate property.)
- The Type list presents a variety of "masks" for validating against the user input. If you choose a type such as Date, for example, the Format drop-down list lets you choose the specific pattern that the user's entry must match.
- Some types give you the option of a custom format. In those cases, use the Pattern field to fill in the pattern to which input must conform.
- To display default text in an input field (which will disappear when the user clicks in the field), enter that text in the Hint field.
- By default, validation occurs when the user attempts to submit the form. To trigger validation when the user clicks or tabs out of the field, check Blur from the "Validate on" list.
- The "Preview states" drop-down list allows you to see the various states that the user will see. You must be in split view or design view in order to see the effect.
- Set the type for this field to email address and choose to validate on blur. Add a hint, if you like.
- Before saving and testing your changes, you should add a submit button to the form. With preview state set to initial, position your cursor after the text field and press Enter to add a blank line. Click Insert > Form > Button. If you're asked to choose the type of button, make it a submit button. Set the button's ID to Submit as well. Save your changes, click F12 to open the page in your browser, and test your work.
- Take some time to add other validation fields. Test the drop-down (select), radio group, checkbox, text area, etc. With each addition, Dreamweaver will add links to the appropriate files; when you save the document, you'll be prompted to place copies in your directory.
This page displays the validation elements that are available in Spry and available to you through Dreamweaver's Insert menu.
The areas of HTML that contain Spry code are highlighted in yellow. Scroll through and look at the validation code. Even if you don't write HTML, it's not difficult to understand the code and see how you might modify it.
Now it's time to play with the validation elements. We'll insert one Spry form element and set up its validation, and then you can add more.
You've added a form and text-input field in the page. The code that Dreamweaver has written doesn't have the kind of obvious Spry attributes used earlier in the lesson. At the bottom of the document is a small amount of JavaScript code that activates the validation. The Spry JavaScript and CSS files for the text field validation will be added to your site folder when you save the file.
Before moving on, preview the various states you've created. If you want to change the text presented to the user for required or invalid input feedback, do so by editing the text in the preview state or in code view.
Spry Widgets
In addition to the validation effects for traditional form elements, Dreamweaver CS4 includes a number of visual design widgets. We've already seen the Spry table and Spry Accordion. Dreamweaver CS4 also includes these other visual widgets:
- Menu bar. This widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons. Menu bars let you display a large amount of navigational information in a compact space, and they give visitors a sense of what's available on the site without having to browse it extensively.
- Tabbed panel. This widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the content stored in the tabbed panels by clicking the tab of the panel they want to access. The panels of the widget open as the visitor clicks the corresponding tabs. In a tabbed panels widget, only one content panel is open at a given time.
- Collapsible panels. This widget is a panel that can store content in a compact space. Users hide or reveal the content stored in the collapsible panel by clicking the tab of the widget.
- Tooltip. The Spry tooltip widget displays additional information when a user hovers over a particular element on a web page. The additional content disappears when the mouse pointer stops hovering over it. You can also set tooltips to stay open for longer periods of time, so that users can interact with content inside the tooltip.
Take some time to test each of widgets in your forms. Documentation of how to use each widget in Dreamweaver is available in the help files. Full Spry documentation is listed in the Additional Resources section of this article.