Working with Spry Widgets Just when you thought that Spry lists and tables were the way to go for data presentation, Dreamweaver introduces other flexible and powerful design components called widgets. Widgets, which combine HTML, CSS, and JavaScript, provide another option when you're designing interactive, fast-loading layouts and working with form validation. Widgets included with this release of Dreamweaver include the following: Spry Validation Text Field, Select, Checkbox, and Textarea Spry Menu Bar Spry Tabbed Panels Spry Accordion Spry Collapsible Panel Although we'll cover some of these controls in depth, in the meantime, you can get an idea as to how the validation widgets work by visiting the following URL: labs.adobe.com/technologies/spry/demos/formsvalidation/index.html. Additionally, you can get a sneak peek at the Spry Accordion in action by visiting the following URL: labs.adobe.com/technologies/spry/demos/products/index.html. The widgets share common characteristics. They're extremely user friendly, engaging, and more importantly, they enhance the aesthetic appeal of your sites. From a development standpoint, widgets are easy to use. Typically they're simple to include because they're just dragged and dropped onto the page. On the page, their properties can be manipulated via the Property inspector, and their appearance can be customized through associated CSS rules, making them easy to integrate into any CSS-based site. Validating Form Fields In Chapter 10, you looked at a powerful behavior called Validate Form. This behavior allows you to add functionality to a web page that instructs the browser to prevent submission of a form if a user fails to enter a value into a form field. Additionally, you were able to check for numeric inputs, numeric ranges, and email address inputs. I made mention of the fact that despite its obvious benefit, the behavior was severely limited in the features that it allows you to validate. For instance, the Validate Form behavior doesn't allow you to check for dates, credit card numbers, ZIP Codes, phone numbers, and the like. Most of those items are common when working with forms in your web pages. Although the Validate Form behavior offers some relief, its lack of functionality becomes clear, leaving many developers with the arduous task of writing a lot of the validation by hand anyway. That's where Spry Validation comes in handy. The collection of four Spry validation form objects follows: Spry Validation Text Field Spry Validation Select Spry Validation Checkbox Spry Validation Textarea These four form fields provide developers with the flexibility of validation that they've been clamoring for over for years. The capability to require input and check for numeric values, email addresses, dates, times, credit card formatting, ZIP Codes, phone numbers, social security numbers, currency, and URLs are all available through the Spry validation form fields. Even better, customization of these form fields is a snap because each Spry validation form field exposes a Property inspector that makes customizing properties effortless. So that you understand how these form fields function, let's begin with the Spry Validation Text Field. Spry Validation Text Field By far the most flexible Spry validation form field is the Spry Validation Text Field. The Spry Validation Text Field, as its name implies, is a simple HTML text field that has complex JavaScript associated with it. The JavaScript, like other Spry widgets, is contained within an external .js file that resides within the SpryAssets folder. Aside from controlling validation conditions, the JavaScript code is also responsible for guaranteeing input of data within the text field. When you include a Spry Validation Text Field on the page, you have the capability to check for the following data inputs: No input (none) Integer Email Address Date Time Credit Card ZIP Code Phone Number Social Security Number Currency Real Number/Scientific Notation IP Address URL Custom inputs Some of the validation types, such as date, time, credit card, ZIP Code, phone number, currency, and IP address, include a range of formats to choose from, making them more flexible for your validation needs. To insert and configure a Spry Validation Text Field, start by placing your cursor on the page where you want the text field to be placed and choose Insert, Spry, Spry Validation Text Field. Assuming you don't already have a form tag on the page, Dreamweaver displays a dialog asking if you want a form tag automatically added for you. Choose Yes. A new form tag and the Spry Validation Text Field are added to the page. The interesting part about the Spry Validation Text Field is that if you select within the text field, the Property inspector is essentially the Text Property inspector. When you select the blue visual aid that surrounds the Spry Validation Text Field, the Property inspector comes to life. As you can see from Figure 30.11, selecting the blue visual aid that surrounds the Spry Validation Text Field exposes a collection of new modifiable properties within the Property inspector. Figure 30.11. Select the blue visual aid that surrounds the Spry Validation Text Field reveals the unique Property inspector options for this element. [View full size image] As you can see from Figure 30.11, the Property inspector reveals the following set of customizable properties: ID— Enter a value here to uniquely name the text field. The default that Dreamweaver inserts is sprytextfield1, then sprytextfield2, and so on. Type— Set the type of validation that the text field will perform by selecting from one of 14 values from this list. Format— Some of the validation types, such as date, time, credit card, ZIP Code, phone number, currency, and IP address, include a range of formats to choose from. For instance, if you choose the Zip Code option from the Type menu, the Format menu provides options to display US-5, US-9, UK, Canada, and Custom Pattern postal codes. You can choose an option from this list to make the validation more dynamic based on the format of the ZIP Code that you want to validate. Preview states— Set the format of the text field and the error message that you want displayed when a user enters invalid formatting, forgets to enter a value, or enters a correct value. Options include Initial (default), Required (highlights the text field red and shows the message A value is required.), Invalid Format (highlights the text field red and shows the message Invalid format), and Valid (highlights the text field green). Validate on— Set the event that triggers the validation. Options include Blue, Change, and Submit. By default, text fields always validate when the form is submitted. Because this is the case, the Properties Inspector sets the Submit option as checked and disables it so that you can't change it. If you'd also like the text field to be validated as soon as the user tabs out of the text field, check the Blur check box as well. Pattern— Enter a custom pattern for validation within this text box. This text box will become enabled only when the Custom option is selected from the Type menu. After the text field is enabled, enter one of the following custom validation patterns: 0—Represents a digit between 0 and 9. A or a—Represents case-sensitive alphabetic characters. B or b—Represents non-case-sensitive alphabetic characters. X or x—Represents case-sensitive alphanumeric characters. Y or y—Represents non-case-sensitive alphanumeric characters. ?—Represents any character. Hint— Enter the text within this text box that should display to the user as a hint if an error is displayed. Min/Max chars— Set the minimum and maximum number of characters that should be allowed within the text field in these two text boxes. Min/Max value— When you're working with numeric types such as Integer, the Min and Max value text boxes become enabled. You can specify minimum and maximum values that the user can enter here. These are ideal when validating ranges. Required— Checked by default, this property guarantees that the text field requires an input by the user. Enforce pattern— Click this check box to enforce the pattern that you specify within the Pattern text box. So that you can test the result of the text field addition, place your cursor just to the right of the text field and press Enter (Return). Now choose Insert, Form, Button. The button will be used to submit the form. Save your work. Dreamweaver attempts to place SpryValidationTextField.css and SpryValidationTextField.js within the SpryAssets folder. Again, these files are required for controlling the look and functionality of the text field. Click OK. Preview your page in the browser by pressing F12 (Option+F12). When the page appears in the browser, click the Submit button. The text field highlights red and the error message, A value is required. displays on the page. Again, this is a simple example of the power that the text field reveals. We haven't even customized the type of input the text field should validate. With some simple customizations, you can ensure that your Spry Validation Text Field works the way you want it to work. Spry Validation Select Another Spry validation form field that you might decide to take advantage of is the Spry Validation Select. The Spry Validation Select is nothing more than an HTML-based drop-down menu that has complex JavaScript associated with it to guarantee that a selection has been made before the form is submitted. To insert and configure a Spry Validation Select, follow the steps outlined next: 1. Place your cursor just before the Submit button and press Enter (Return). 2. Choose Insert, Spry, Spry Validation Select. The drop-down menu is added to the page under the Spry Validation Text Field and above the Submit button. 3. Select the drop-down menu (not the Spry visual aid that surrounds it) and choose the List Values button from within the Property inspector. The List Values dialog appears. 4. Type SELECT ONE into the Item Label field, press Tab, and give it a value of 0; press Tab and type Windows into the Item Label field and press Tab again to give it a value of 1. Pressing Tab to continue to move through the fields, type Mac and give it a value of 2; finally, type Linux, give it a value of 3, and click OK. Notice that SELECT ONE is the default selection in the drop-down menu. Although we want this option to appear, the user should be forced to select something other than this option from the list before submitting the form. This is where the Spry validation comes in. 5. Select the blue visual aid that surrounds the Spry Validation Select. Immediately the Property inspector changes to show the associated properties. For the most part, the Property inspector is simple to use and displays similar properties to the Spry Validation Text Field. To configure the drop-down menu for our purposes, uncheck the Blank Value check box. This assures us that the user must select an option from the list. 6. Now click the Invalid Value check box and enter the value 0 (the value associated with the SELECT ONE option in the drop-down menu) within the provided text box. Save your work. Dreamweaver notifies you that it needs to place SpryValidationSelect.css and SpryValidationSelect.js in the SpryAssets folder. Again, these files are required for controlling the look and functionality of the drop-down menu. Click OK. Preview your page in the browser by pressing F12 (Option+F12). Enter a value into the text box and click Submit. Figure 30.12 illustrates the result. The drop down menu highlights red and the text Please select a valid item. appears. Also notice that the text box will highlight in green. This is because that option is correct. Only the form fields that require attention will highlight red. Figure 30.12. An error message appears next to the drop-down menu because we didn't select a valid option from the list. [View full size image] Spry Validation Textarea The Spry Validation Textarea, like the text field, is used to collect text from the user. The biggest difference between the text area and the text field, however, is that users can enter one line to several paragraphs of text. Because of this flexibility, there's no mechanism for validating formats in the textarea—a user may enter just about anything within the field. It's not uncommon, however, to validate minimum, maximum, or both values. The Spry Validation Textarea supports this type of validation but takes it one step further. If a user attempts to enter too much text, an error message appears and the user is prevented from entering any more values within the textarea. To add and configure the Spry Validation Textarea, follow the steps outlined next: 1. Place your cursor just before the Submit button and click Enter. 2. Choose Insert, Spry, Spry Validation Textarea. The textarea is added to the page under the Spry Validation Select and above the Submit button. 3. Select the blue visual aid that surrounds the Spry Validation Textarea. Immediately the Property inspector changes to show the associated properties. What you will want to enter is the Max chars value. Enter the value 40 now. 4. Make sure that the Block Extra Characters check box is checked. This prevents the user from entering any more characters after they reach the 40-character limit. 5. Now select an option from the Counter option button list. Choose None when you don't want a counter displayed. Choose Chars Count to have a counter incrementally display as the user enters values in the text area. Choose Chars Remaining to have a counter display the number of available characters as the user enters values in the text area. For our purposes, choose the Chars Remaining option. Save your work. Dreamweaver notifies you that it needs to place SpryValidationTextarea.css and SpryValidationTextarea.js within the SpryAssets folder. Again, these files are required for controlling the look and functionality of the textarea. Click OK. Preview your page in the browser by pressing F12 (Option+F12). Begin typing into the text area. You'll immediately notice that the counter gets lower and lower as you type. When you reach the limit, you're no longer able to type—and more importantly, the text highlights red. Spry Validation Checkbox You can use the Spry Validation Checkbox either individually or within groups to check for specific values or enforce a range of selections. Typically, individual check boxes are used in instances where you want to force the user to select a check box, usually because of a legal agreement or terms of use that you are requiring them to agree to. The check box, like the other validation form fields, is easy to implement. To insert and configure a Spry Validation Checkbox, follow these steps: 1. Place your cursor just before the Submit button and press Enter (Return). 2. Choose Insert, Spry, Spry Validation Checkbox. The check box is added to the page under the Spry Validation Textarea and above the Submit button. 3. Enter the text I agree to the terms. just to the right of the check box. 4. Select the blue visual aid that surrounds the Spry Validation Checkbox. You may have to mouseover the check box to see it. Make sure that in the Property inspector, the option button labeled Required is selected. Save your work. Dreamweaver notifies you that it needs to place SpryValidationCheckbox.css and SpryValidationCheckbox.js within the SpryAssets folder. Again, these files are required for controlling the look and functionality of the textarea. Click OK. Preview your page in the browser by pressing F12 (Option+F12). Click the Submit button. Dreamweaver displays all the error messages, including the Please make a selection. error message next to the check box, because you haven't selected it yet. Again, the example that we've shown is the Spry Validation Checkbox at its most basic form. If you'd like to further enhance the validation functionality (maybe for a group of check boxes), select the Enforce Range option button and then enter values within the Min and Max # of Selections text boxes. This allows you to set the quantity of check boxes that the user must select before the form can be submitted. Extending Layout Options It's no secret that the Web 2.0 trend is heavily geared toward CSS. Not only is the formatting of sites controlled by CSS, but to a large extent, so is the structure. To compete with this latest CSS-based structuring trend, Adobe has introduced a collection of page structuring/layout widgets in the form of the Spry Menu Bar, Spry Tabbed Panels, Spry Accordion, and Spry Collapsible Panels, which improve the visual aspects and general aesthetics of your website. To give you an idea as to how these layout widgets can be used, let's add the Spry Tabbed Panels widget now. 1. Create a new page by choosing File, New. Choose the HTML option from the Blank Page category, choose the <none> option from the Layout list, and click Create. A new document window instance will appear. Immediately place your cursor on the page were you want the Spry Tabbed Panels widget to appear. 2. Choose Insert, Spry, Spry Tabbed Panels. The Spry Tabbed Panels widget is inserted onto the page similar to Figure 30.13. Figure 30.13. The Spry Tabbed Panels widget is inserted onto the page. [View full size image] 3. Select the blue visual aid that surrounds the Spry Tabbed Panels widget. The Property inspector changes to accommodate property modifications for the widget. 4. As you can see from Figure 30.13, the Property inspector enables you to do three things. First, you can uniquely identify your Spry Tabbed Panels by manipulating its ID. Second, you can add new tabs/panels via the Panels list. Finally, you can choose which panel will display by default by selecting the panel name from the Default panel menu. For example, click the Add (+) panel button to add a new panel to the widget. As you can see, the new tab is added as Tab 3. Save your work. Immediately, Dreamweaver notifies you that it needs to place SpryTabbedPanels.css and SpryTabbedPanels.js within the SpryAssets folder. Again, these files are required for controlling the look and functionality of the Spry Tabbed Panels widget. Click OK. Preview your page in the browser by pressing F12 (Option+F12). You'll notice that three tabs appear, each containing its own panel of content. Select each tab to navigate through the panels. Although the Property inspector allows you to add, remove, reposition, and set the default panel that should appear, customization for the panel can be handled by modifying the tabs/panels within the Document window. For instance, if you'd like to change the tab name, highlight the text within the tab and begin typing. Furthermore, if you'd like to modify the content within the panel, highlight the default placeholder text and begin typing. Customizing the CSS is a bit trickier but still possible. As Figure 30.14 shows, selecting the Spry Tabbed Panels widget displays a list of all of the classes that are used by the widget within the CSS Styles panel. Figure 30.14. All the CSS for the Spry Tabbed Panels widget (and all other widgets) are displayed within the CSS Styles panel. To modify a particular class, either select the class and modify the properties from within the Properties pane or double-click the class to open the CSS Style Definition dialog for easier and more visual customizations. Working with the other three widgets is similar to, if not easier than, working with the Spry Tabbed Panels widget. To work with the Spry Accordion, the Spry Menu Bar, or the Spry Collapsible Panel, insert them as you did the Spry Tabbed Panels. Customizing the CSS and modifying the properties for the panel can be done via the CSS Styles panel or the Property inspector, respectively. Figure 30.15 shows all four widgets (inserted onto the page with minimal customizations) on a web page. Figure 30.15. The Spry Tabbed Panels, Spry Menu Bar, Spry Accordion, and Spry Collapsible Panel widgets together on one page. [View full size image] [...]... excerpts from discussion forums, and even corporate information Although numerous websites are devoted to the topic of helping you publish and distribute RSS feeds, you need look no further than Dreamweaver With Dreamweaver' s built-in XML/XSL transformation integration, consuming RSS feeds in your website is a snap To work with RSS feeds, follow these steps: 1 Locate an RSS feed One of my favorite websites... 3 Note the path to the feed is www.slickdeals.net/rss.php Select it and choose Edit, Copy You'll need to paste this path into the Locate XML Source dialog in Dreamweaver in a moment You can now close the browser 4 Shift your attention back to Dreamweaver Create a new XSLT (Entire Page) document by choosing File, New Select the XSLT (Entire Page) option from the Blank Page category and click Create... attractive Instead, you might decide to format the bindings within the page to make them more attractive and aesthetically pleasing Summary As you have seen, Adobe has made strides in the Web 2.0 realm with its newest Spry framework for Ajax Although Dreamweaver' s integration of Spry is certainly in its infancy, the technology shows definite promise With the capability to quickly and effortlessly generate... standards, which function as a checklist of sorts, so that you simply have to follow these rules to produce a site with no barriers to access Dreamweaver makes it even easier for you to follow those standards because they're built right into the software itself By using Dreamweaver' s accessibility features to create and check your work, you can greatly simplify the process of creating accessible websites... and redoing it from scratch The effort of retrofitting is much harder than doing it right the first time Dreamweaver makes it easier to build accessible websites by providing accessible templates and by prompting you for necessary information when adding new HTML elements Accessible Design Templates Dreamweaver comes with a default set of page designs; unfortunately, the basic page designs weren't created... more thorough result Accessibility Dialog Boxes Dreamweaver also uses dialog boxes to prompt automatically for required accessibility information As you have probably noticed, these dialogs are turned on by default You can turn them on or off from the Preferences dialog by following these steps: 1 Open the Preferences dialog by choosing Edit, Preferences (Dreamweaver, Preferences on the Mac) 2 Choose... standards, which function as a checklist of sorts, so that you simply have to follow these rules to produce a site with no barriers to access Dreamweaver makes it even easier for you to follow those standards because they're built right into the software itself By using Dreamweaver' s accessibility features to create and check your work, you can greatly simplify the process of creating accessible websites... Safari, or even Lynx) or a Braille display with raised dots Both of these methods are roughly equal to the text display of Lynx To install and view this page using Lynx, follow these steps: 1 Visit www.dreamweaverunleashed.com Click the Resources link, then click the Software link from the navigation on the left Next, click the link for Lynx Text Browser Immediately download the Zip archive to your computer... anyone who is unable to hear sounds won't be able to hear the music In Listing A.2, you can see a revised version of the page This version was created using the built-in accessibility check function in Dreamweaver, which is covered later in this appendix The changes to the source code are shown in bold Listing A.2 A More Accessible Version of the CompanyEvents Web Page Code View: . following URL: labs .adobe. com/technologies/spry/demos/formsvalidation/index.html. Additionally, you can get a sneak peek at the Spry Accordion in action by visiting the following URL: labs .adobe. com/technologies/spry/demos/products/index.html. The. the topic of helping you publish and distribute RSS feeds, you need look no further than Dreamweaver. With Dreamweaver& apos;s built-in XML/XSL transformation integration, consuming RSS feeds in. to paste this path into the Locate XML Source dialog in Dreamweaver in a moment. You can now close the browser. 4. Shift your attention back to Dreamweaver. Create a new XSLT (Entire Page) document