|iTunes allows to play and organize music collection, as well as buy individual songs from their online store. All the information stored using iTunes is stored as XML; that allows to display music library in different formats. In this article some of the new ASP.NET controls available in Visual Web Developer 2005 Express are used to display iTunes library on a Web page.|
Time Required: 1-3 hours
You probably already know about Apple's iTunes application and that it allows you to play and organize your music collection, as well as buy individual songs from their online store. What you probably don't know is that all the information you store using iTunes is stored as XML; that allows you to display your music library in different formats. Like a web page, for example.
So, to give you a flavor for how you might use the iTunes data in your own applications, in this article I'll use some of the new ASP.NET controls available in Visual Web Developer 2005 Express to display my iTunes library on a Web page.
If you want to use your own library and you don't already have iTunes installed, visit http://www.apple.com/itunes to download the free iTunes application. Using my own library, I began by creating a new ASP.NET Web site. Next, I used the Web Site | Add Existing Item menu command to add my iTunes music library file.
As pictured above, the default iTunes directory is located in the My Music folder. The XML file is named iTunes Music Library.xml. After adding the file to my Web site project, I changed the name to something simpler: iTunes.xml.
ASP.NET 2.0 introduces a new XmlDataSource control that is a special type of data source control for consuming XML data. In Visual Web Developer 2005 Express, you'll find this control located in the Data section of the Toolbox. After dragging an XmlDataSource control onto the Web form, I used the Configure Data Source dialog box to point the control to my iTunes data file.
Before moving on, take a moment to look at the other options available in the Configure Data Source dialog. You can specify a transformation file that updates the structure of the XML file. You may wonder why this might be necessary. But as I discovered myself shortly after performing this step, you will often find circumstances where it's necessary to change the source XML to make it a usable data source. For now, however, I only set the DataFile property of the XmlDataSource property.
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/iTunes.xml">
Also, if you peek at the source code for the default Web form at this point, you'll find code similar to that shown above. This highlights the fact that you can easily add code directly to ASP.NET Web forms to configure controls. The Visual Studio designers simply provide an easy-to-use alternative to hand coding while reducing the guesswork.
The XmlDataSource by itself only takes you halfway toward displaying XML data on a web page: You also need a control for displaying that data. Because the XmlDataSource control supports declarative databinding to XML files, you can use it to bind hierarchical data to controls that are specially designed for traversing this type of data, like a TreeView or Menu. You can also use the XmlDataSource for binding XML data to list controls like the GridView, DropDownList or DataList controls.
On the design surface of the Default Web form, I added a TreeView control on the line below the XmlDataSource control. Next, I set the DataSource property of the TreeView to the instance of the XmlDataSource control. Again, leveraging the designer support in Visual Studio 2005, I accomplished this easily using the Smart Tag menu provided with the TreeView control.
At design time, the TreeView control displays the data as it will appear when you run the Web page. The following graphic shows what the data from my iTunes XML file looked like at this point.
Hmmmm …. that's not very useful, is it? It's time to take a look at the iTunes XML file. Below is a snippet from my file.
<key>Composer</key><string>Mari Boine Persen, arr Jan Garbarek</string>
<key>Album</key><string>I Took Up The Runes</string>
<key>Kind</key><string>AAC audio file</string>
<key>File Folder Count</key><integer>4</integer>
<key>Library Folder Count</key><integer>1</integer>
. . .
Even old hands with XML may find this a peculiar structure. Rather than employing a traditional hierarchical tree structure, the key/value pairs represent something more akin to a serialized dictionary object. The key/value pairs are composed so that the first element is the key and the next is the value. To transform this data into a structure that the ASP.NET controls can use, I added an XSLT File to the Web site project and named the file iTunes.xsl. I had a number of choices in how to execute the transformation – for example, deciding which of the various properties of each song I wanted to use – but the basic approach you need in any case is that the properties of interest much appear in the transformed XML structure as attributes. In terms of limiting the data I wanted to display, I choose to use only three properties of each song: the name of the song, the artist, and the album.
The XSL for performing the transformation required that I create a new node named track for each song, and add an attribute named value that stores the name of the song. The transformation then creates two child-nodes for each track node called artist and album, respectively. Again, to represent the data associated with each of these items, I used an attribute named value.
<?xml version="1.0" encoding="utf-8"?>
<xsl:value-of select="'My iTunes Library'" />
<xsl:call-template name="artist" />
<xsl:call-template name="album" />
The intricacies of XSL and XPath are beyond the scope of this article (if you want to learn more about these topics, a good place to start is http://www.w3schools.com/default.asp).
Returning to the Configure Data Source dialog box for the XmlDataSource control, I set the TransformFile property to the XSL stylesheet. As shown below, the updated schema improved the data displayed in the TreeView control, but I still had some work to do in order to get the correct data.
Next, I opened the TreeView DataBindings Editor using the Smart Tag menu for the TreeView control. I added each of the nodes in the available data bindings list and then set the TextField property of each of the bindings to display the value XML attribute created during the XSL transformation.
After closing the TreeView DataBindings Editor, I returned to the Smart Tag menu for the TreeView control. I selected the Auto Format menu item and used the Auto Format dialog box to choose a more stylish scheme for my list.
As a final touch, I used the old-fashioned Properties window to change the ExpandDepth property of the TreeView control so it only showed songs beneath the main library node.
This example has only scratched the surface of what you can do with your iTunes music data and ASP.NET 2.0. In fact, with this nudge I'm hopeful you may be inspired to find even more creative ways to show off your great taste in music to the rest of world. Consider, for example, using this example to build on Bill Evjen's fine article on how to extend the Personal Web Site Starter Kit (https://msdn.microsoft.com/coding4fun/webcoder/extendpws/default.aspx).