HTML5 Data Bindings Manual

The Basics: Using HTML5 Data Bindings with Public Feeds

In this tutorial we will show you how to use HTML5 Data Bindings with Public Feeds.

*You can also check out the video.

How to do it

1. First we are going to enable the HTML5 Data Bindings Floating Panel.  From the Window menu (1), select the HTML5 Data Bindings menu item (2).

2. The HTML5 Data Bindings Floating Panel appears. We drag the panel on the right side of the screen next to the Insert Pane.
   NOTE: You can drag and pin the panel anywhere inside your Dreamweaver Window
    

3. Click add new data source button (1). In the HTML5 Data Bindings window, add a name for your data source (2) and select public feeds data source type (3).

4. From the source dropdown menu, you can select any of the predefined public feeds or use a custom one. For our tutorial we're going to use Picasa – photo search.

5. We enter a search phrase (1), select the thumbnails size (2), the size of the images (3) and the max results that are returned from this feed (4). When you're done, click OK.

6. When we expand (1) the feed can see the feed tree. It is different for different feeds and depends on their structure. Then, we scroll down the tree (2).
   
   

7. We expand the media group data element that is located inside the entry repeating element (1), where are going to use the media thumbnail data element in order to retrieve the image thumbnail (2).

8. Select the URL attribute (1).  Using the Smart Insert Panel we select image (2) and click the insert button (3).

9. You can see we added an image that uses the feed thumbnail URL attribute.

10. Click the Live View button in order to preview the results. This is how our thumbnail looks like. Now, we are going to add a title and description to it, using the title and description provided by the feed.

11. We turn the Live View off and back in Design view, click under the thumbnail (1) and in the feed tree, select the first media title attribute (3), under the expanded media title element (2) . Click the insert button (4).

12. We do the same for the thumbnail description. In the expanded media description (1), select the first attribute (2) and click insert button (3).

13. This is how the feeds look in the Design view.

14. In Live view, you can see the thumbnail with its title and description. That's how you can use the HTML5 Data Bindings with Public Feeds.