I am Steve Meredith, a developer on the IE Mobile team. I want to continue the blog theme of XML support in IE Mobile. In Windows Mobile 5, we support MSXML3. Prior to then, we supported MSXML2.
To demonstrate data islands, let’s create a web page that lets you select a food from two dropdown lists. The first list contains a category of food: fruit, vegetables, or nuts. The second list contains foods appropriate to the currently selected category. So if “fruit” is selected, the second list contains kinds of fruit. If “vegetables” is selected, the second list contains kinds of vegetables. We don’t want the browser to request a new page from the server each time the category is changed.
<html>
<head>
<title>IE Mobile XML Data Island Example</title>
</head>
<body onload='loadCategoryList(); loadFoodList()'>
<!-- xml data island: 3 categories for dropdown 1, each with different foods for dropdown 2. -->
<xml id='myFoods'>
<categories>
<category name='Fruit'>
<food>Apples</food>
<food>Bananas</food>
<food>Strawberries</food>
</category>
<category name='Vegetables'>
<food>Peas</food>
<food>Carrots</food>
<food>Corn</food>
</category>
<category name='Nuts'>
<food>Almonds</food>
<food>Walnuts</food>
<food>Pecans</food>
<food>Pistachios</food>
</category>
</categories>
</xml>
<!-- You could also put the XML into a seperate file and use src.
<xml id='myFoods' src='myFoods.xml' />
-->
<script type="text/javascript">
<!-- function loadCategoryList() -->
<!-- function loadFoodList() -->
</script>
<p>
This sample shows how to use script and an XML data island to change the values of a second drop-down based on the value of the first.
</p>
<hr />
Select from the available foods:
<form id='myForm'>
<select id='categoryList' onchange='loadFoodList()'></select>
<select id='foodList'></select>
</form>
</body>
</html>
The key to this technique is the <xml> element. You enclose your XML document between <xml> and </xml>, then use an XMLDocument property to access it via script.
The <xml> element supports the src attribute and the id attribute. If it is more appropriate for your application, you can put the XML in a separate file, and load it into the data island using the src attribute, as follows:
<xml id='myFoods' src='myFoods.xml' />
To access the XML data from script, use the XML DOM. You can access it using the XMLDocument property of the <xml> element. For example, since the <xml> element in our example above has the id “myFoods”, you can get the XML DOM like this:
xmlDoc = myFoods.XMLDocument;
Below is the function to load the first list, categories, with the values from the XML. This function is only called once: it is an onload event handler for the <body> element. We start by using XMLDocument to get the XML DOM for our data. Then, we loop through each <category> element and add the name from the “name” attribute to the category list using the Option object.
// Initialize the first dropdown (categories) from the XML.
function loadCategoryList()
{
// Get the XML DOM for the data island.
xmlDoc = myFoods.XMLDocument;
// Get all the categories.
categories = xmlDoc.getElementsByTagName('category');
for (g = 0; g < categories.length; g++)
{
// Add the category to the <select> element.
option = new Option();
option.text
= categories[g].attributes.getNamedItem('name').text;
option.value = option.text;
document.all.categoryList.options.add(option);
}
}
Below is the function to load the second list, the foods. This function is called when the body is loaded and every time a new category is selected. First, we find out what is selected in the categories list. Then, we get the XML DOM and search for that category. Once we find it, we use the foods in that category to load up the foods list, again using the Option object for loading the <select> element.
// Initialize the second dropdown (foods) from the
// XML based on the value of the first dropdown (categories).
function loadFoodList()
{
// Find the name of the selected category in the 1st box.
selectedIndex = document.all.categoryList.options.selectedIndex;
categoryName = document.all.categoryList.options[selectedIndex].text;
// Get the XML DOM for the data island.
xmlDoc = myFoods.XMLDocument;
// Search the XML for the selected category.
categories = xmlDoc.getElementsByTagName('category');
for (g = 0; g < categories.length; g++)
{
// Found the selected category.
if (categoryName
== categories[g].attributes.getNamedItem('name').text)
{
// Delete any current option elements.
document.all.foodList.length = 0;
// Fill the select element with food from this category.
foods = categories[g].getElementsByTagName('food');
for (i = 0; i < foods.length; i++)
{
option = new Option();
option.text = foods[i].text;
option.value = foods[i].text;
document.all.foodList.options.add(option);
}
}
}
}
There are other solutions to this particular dropdown problem, but hopefully this example demonstrates the use of the <xml> element, the XMLDocument property, and how to use the XML DOM to access the XML.
You can access the complete source file here: <http://iemobile.members.winisp.net/DataIsland/sample.htm>.
Steve Meredith
IE Mobile
