In previous versions of Dreamweaver, the Spry data set wizard loaded XML files and created interactive tables and controls using Ajax. In the new Dreamweaver beta, this functionality has been expanded to include HTML files with data tables.
Adding HTML tables support gives Dreamweaver users the ability to create rich Ajax components without the need to know or code XML. In addition, if you have applications that export to HTML, you can use their exported HTML files as data sets for your Spry components.
XML files are structured data files using custom tags that you create to define and organize your information:
XML is extremely powerful, and can be used with Dreamweaver in several ways. In fact, I have blogged about some of the powerful XML features of Dreamweaver in previous posts (Post 1, Post 2, Post 3) However, XML can be difficult to grasp, and when speed is important, the integration of XML data can be daunting.
In the new Dreamweaver beta, any table that shows data can be used as a Spry data set component:
To use a table you need to follow a couple simple rules. First, you need to use standard table tags to mark up your data. This would include table header tags, <th>. Second, your table needs to have an ID. You can give your table an idea by selecting it and adding an ID name in the Properties panel.
To use your HTML table in a new web page, create the new web page and save it. If you forget to save it, Dreamweaver will prompt you to do so before you can add the data set.
In the insert panel, select the Spry menu and click “Spry Data Set”:
Clicking this will open the Spry Data Wizard asking you for the source of your data. This dialog is very similar to the one found in previous versions of Dreamweaver; however, notice there is now a new HTML data type option for use with HTML tables:
To use a table, click the “Browse” button next to the Specify Data File select the source HTML file containing the table. When you return to the wizard, you will see the table displayed:
Each data set can contain one set of table data. The table displayed in the window is how you select which table you want to be part of your data set. To select a table, click the yellow arrow icon in the upper left-hand corner of the table. When you do so, you’ll see the Data Preview panel at the bottom populate with your table data:
Once you have selected your table, click the Next button to move to the Set Data Options view. In this window, you can customize the data types of the table columns. In this example, the “rank” column is a numeric value. The data wizard default all data types to “string” or text data. If we want to sort or work with our data in numeric form, you need to click the column, and change the “Type” drop down to read “numeric”. Data types also include dates or HTML markup.
At the bottom of the window, you can select the default table sort based on specific columns. In this example, the table has been set to automatically sort by “rank” in an ascending order:
When you have typed your data, and have set any optional sorting parameters, you’re ready to integrate with a Spry component. To do this, click the “Next” button, and you will see five options. Four of these are Spry table displays that can show your data in different formats, the last allows you to simply create a link to the data that you can use later using the “Bindings” panel.
In this example, a simple dynamic Spry Table is selected. When you have selected the type of component you want to use, click “Done”.
Now in Design View, you can see that the Spry table has been added and is using binding notation (the curly braces) to link to the data in your HTML table data set. Also, the Related Documents feature of the new Dreamweaver beta shows the HTML data set as a related file (along with the Spry JavaScript files).
To see the table in action, activate “Live View” by clicking the “Live View” button at the top of the window. The current view is replaced by a real browser rendering of the page, complete with your integrated HTML data.
HTML Data Sets are just one of the many ways that the new Dreamweaver beta has made data integration for web designers and developers fast and seamless. To try out HTML Data Sets, download the Dreamweaver beta at Adobe Labs.
