logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-29-2010, 03:45 PM   #1
sylviamc
 
Join Date: Jun 2010
Posts: 3
Default Spry Drop Down Menu from XML

Hi folks,

I'm a Flash designer so I a bit of a "Spry" dummy .

I'm trying to create a Spry Drop Down Menu from the Adobe sample on this page (linking it to XML).
http://labs.adobe.com/technologies/s...estedData.html

I can get the menu to work, but can't figure out how to make the drop downs for each menu change and not show any sub menus if they are blank.

Example: Home should not have any sub menu items but Portfolio should 2.

I tried to use these data sets like the Adobe example but I get an error.
var dsItems1 = new Spry.Data.XMLDataSet("../../data/donuts.xml", "/items/item");
var dsToppings = new Spry.Data.NestedXMLDataSet(dsItems1, "topping");

Here is my HTM page code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/xpath.js" ></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryData.js" ></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryNestedXMLDataSet.js"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryMenuBar.js"></script>
<script language="JavaScript"  type="text/javascript" src="../Scripts/swfobject_modified.js"></script>

<script type="text/javascript">
<!--
var dsItems1 = new Spry.Data.XMLDataSet("../xml/donuts.xml", "items/item/name");
var dsToppings = new Spry.Data.XMLDataSet("../xml/donuts.xml", "items/item/topping");

var images = new Spry.Data.XMLDataSet("../xml/index.xml", "page/images/image");
images.setColumnType("des", "html");
var h1 = new Spry.Data.XMLDataSet("../xml/index.xml", "page/titletext/h1");
h1.setColumnType("h1", "html");
var h2 = new Spry.Data.XMLDataSet("../xml/index.xml", "page/h2text/h2");
h2.setColumnType("h2", "html");

//-->
</script>
<link href="../css/london_house_htm.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="1022">
  <tr >
    <td colspan="2"><img src="../images/logo.jpg" width="1022" height="146" alt="" /></td>
  <tr>
  <tr>
    <td></td></tr>
    <td colspan="2" >
        <ul id="MenuBar2" class="MenuBarHorizontal"  spry:region="dsItems1 dsToppings">
  <li spry:repeat="dsItems1"> <a class="MenuBarItemSubmenu" href="#" spry:if="{dsToppings::ds_RowCount} != 0">{name}</a> <a href="#" spry:if="{dsToppings::ds_RowCount} == 0">{name}</a>
    <ul spry:if="{dsToppings::ds_RowCount} != 0">
      <li spry:repeat="dsToppings"><a href="#">{dsToppings::topping}</a></li>
    </ul>
  </li>
</ul>
        </td>
  </tr>
  <tr>
    <td width="100%"><div spry:region="h1">{h1}</div><div spry:region="h2">{h2}</div></td>
  </tr>
  <tr>
    <td width="100%"><div spry:region="images">
        <table>
          <tr spry:repeat="images">
            <td><span class="demoCol1"><!--<a href="../{URL}"><img src="../{src}" width="300" height="150" alt="demo_image" /></a>-->
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="302" height="191" id="FlashID" title="Real Estate 3D Demos Link">
                <param name="movie" value="../media/but_real_estate.swf" />
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="swfversion" value="6.0.65.0" />
                <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
                <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="../media/but_real_estate.swf" width="302" height="191">
                  <!--<![endif]-->
                  <param name="quality" value="high" />
                  <param name="wmode" value="opaque" />
                  <param name="swfversion" value="6.0.65.0" />
                  <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                  <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                  <div>
                    <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                  </div>
                  <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
              </object>
            </span></td>
            <td valign="top"><span class="demoCol2">{des}</span></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
<script type="text/javascript">
<!--

Spry.Data.Region.addObserver('MenuBar2',{onPostUpdate:function(){var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2");}});
//-->
</script>
</body>
</html>
Here is my XML page code:
Code:
<?xml version="1.0" encoding="utf-8"?>
<items>
	<item id="0001" type="donut">
		<name>Home</name>
		<topping id="5001">None</topping>
</item>
	<item id="0002" type="donut">
		<name>About Us</name>
		<topping id="5001">None</topping>

	</item>
	<item id="0003" type="donut">
		<name>Clients</name>
			<topping id="5001">""</topping>
	</item>
	<item id="0004" type="bar">
		<name>Portfolio</name>
		<topping id="5001">Real Estate Photography</topping>
		<topping id="5002">Maple</topping>
	</item>
	<item id="0005" type="twist">
		<name>Services</name>
		<topping id="5001">Glazed</topping>
		<topping id="5002">Sugar</topping>
	</item>
	<item id="0006" type="filled">
		<name>Contact Us</name>
		<topping id="5001">Glazed</topping>
		<topping id="5002">Powdered Sugar</topping>
		<topping id="5003">Chocolate</topping>
		<topping id="5004">Maple</topping>
	</item>
	<item id="0007" type="filled">
		<name>Site Map</name>
		<topping id="5001">Glazed</topping>
		<topping id="5002">Powdered Sugar</topping>
		<topping id="5003">Chocolate</topping>
		<topping id="5004">Maple</topping>
	</item>
</items>
Many thanks for the help.
Sylvia
sylviamc is offline   Reply With Quote
Old 06-29-2010, 03:47 PM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Hi Sylvia and welcome to the forum. We don't mind you posting code but please use code tags. They are the '#' symbol in the text editor. Thanks

P.S. Have done it for you this time.
Corrosive is offline   Reply With Quote
Old 06-29-2010, 05:33 PM   #3
sylviamc
 
Join Date: Jun 2010
Posts: 3
Default sorry

Quote:
Originally Posted by Corrosive View Post
Hi Sylvia and welcome to the forum. We don't mind you posting code but please use code tags. They are the '#' symbol in the text editor. Thanks

P.S. Have done it for you this time.
Sorry about that I will use them the next time.
sylviamc is offline   Reply With Quote
Old 06-29-2010, 07:36 PM   #4
sylviamc
 
Join Date: Jun 2010
Posts: 3
Default solution found

I found the solution to this problem.

The SpryNestedXMLDataSet.js file that I found was too old. This is a newer version and it makes everything work.

http://labs.adobe.com/technologies/s...dXMLDataSet.js

This file did not install automatically when I saved and ran my file which is what usually happens with the Spry tools.

Also because we are not using the Nested Data Set you should use these lines
Quote:
var dsItems1 = new Spry.Data.XMLDataSet("../xml/donuts.xml", "/items/item");
var dsToppings = new Spry.Data.NestedXMLDataSet(dsItems1, "topping");
Here is the Adobe code for the HTM page:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nested Data Menu Bar</title>
<script language="JavaScript" type="text/javascript" src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryNestedXMLDataSet.js"></script>
<script src="../../widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
var dsItems1 = new Spry.Data.XMLDataSet("../../data/donuts.xml", "/items/item");
var dsToppings = new Spry.Data.NestedXMLDataSet(dsItems1, "topping");
</script>
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Creating a Menu Bar from Spry Nested Data</h3>
<p>Most Spry Widgets can be created from Spry Data. Due to the nested list structure used with the Menu Bar widget, Spry Nested data sets are a good way to generate dynamic Menu Bars.</p>
<h4>Simple Version</h4>
<p>This version is the minimum code required to output a Menu. This does not take into account a menu item with no submenu(Buttermilk). </p>
<ul id="MenuBar1" class="MenuBarHorizontal" spry:region="dsItems1 dsToppings">
<li spry:repeat="dsItems1"><a class="MenuBarItemSubmenu" href="#" >{name}</a>
<ul>
<li spry:repeat="dsToppings"><a href="#">{dsToppings::topping}</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<br />
<h4>No Submenu</h4>
<p>There are instances where some menu items do not have submenus. This sample has extra code to detect this and write out the correct code. </p>
<ul id="MenuBar2" class="MenuBarHorizontal" spry:region="dsItems1 dsToppings">
<li spry:repeat="dsItems1"> <a class="MenuBarItemSubmenu" href="#" spry:if="{dsToppings::ds_RowCount} != 0">{name}</a> <a href="#" spry:if="{dsToppings::ds_RowCount} == 0">{name}</a>
<ul spry:if="{dsToppings::ds_RowCount} != 0">
<li spry:repeat="dsToppings"><a href="#">{dsToppings::topping}</a></li>
</ul>
</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>Important Note:</strong> Due to how the Menu Bar applies styles, you should use the Observer method to activate the widget.
<script type="text/javascript">
Spry.Data.Region.addObserver('MenuBar1',{onPostUpd ate:function(){var MenuBar2 = new Spry.Widget.MenuBar("MenuBar1");}});
Spry.Data.Region.addObserver('MenuBar2',{onPostUpd ate:function(){var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2");}});
</script>
</p>
</body>
</html>
Adobe XML :
Quote:
<?xml version="1.0" encoding="utf-8"?>
<items>
<item id="0001" type="donut">
<name>Home</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
<batter id="1002">Chocolate</batter>
<batter id="1003">Blueberry</batter>
<batter id="1003">Devil's Food</batter>
</batters>
<topping id="5001">None</topping>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
<topping id="5007">Powdered Sugar</topping>
<topping id="5006">Chocolate with Sprinkles</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
</item>
<item id="0002" type="donut">
<name>About Us</name>
<ppu>0.55</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5001">None</topping>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
</item>
<item id="0003" type="donut">
<name>Clients</name>
<ppu>0.55</ppu>
<batters>

</batters>
</item>
<item id="0004" type="bar">
<name>Portfolio</name>
<ppu>0.75</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5003">Real Estate Photography</topping>
<topping id="5004">Maple</topping>
<fillings>
<filling id="7001">
<name>Real Estate Photography</name>
<addcost>0</addcost>
</filling>
<filling id="7002">
<name>Commercial Photography</name>
<addcost>0.25</addcost>
</filling>
<filling id="7003">
<name>Whipped Cream</name>
<addcost>0.25</addcost>
</filling>
</fillings>
</item>
<item id="0005" type="twist">
<name>Services</name>
<ppu>0.65</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5002">Glazed</topping>
<topping id="5005">Sugar</topping>
</item>
<item id="0006" type="filled">
<name>Contact Us</name>
<ppu>0.75</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5002">Glazed</topping>
<topping id="5007">Powdered Sugar</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
<fillings>
<filling id="7002">
<name>Custard</name>
<addcost>0</addcost>
</filling>
<filling id="7003">
<name>Whipped Cream</name>
<addcost>0</addcost>
</filling>
<filling id="7004">
<name>Strawberry Jelly</name>
<addcost>0</addcost>
</filling>
<filling id="7005">
<name>Rasberry Jelly</name>
<addcost>0</addcost>
</filling>
</fillings>
</item>
<item id="0007" type="filled">
<name>Site Map</name>
<ppu>0.75</ppu>
<batters>
<batter id="1001">Regular</batter>
</batters>
<topping id="5002">Glazed</topping>
<topping id="5007">Powdered Sugar</topping>
<topping id="5003">Chocolate</topping>
<topping id="5004">Maple</topping>
<fillings>
<filling id="7002">
<name>Custard</name>
<addcost>0</addcost>
</filling>
<filling id="7003">
<name>Whipped Cream</name>
<addcost>0</addcost>
</filling>
<filling id="7004">
<name>Strawberry Jelly</name>
<addcost>0</addcost>
</filling>
<filling id="7005">
<name>Rasberry Jelly</name>
<addcost>0</addcost>
</filling>
</fillings>
</item>
</items>

Last edited by sylviamc; 06-29-2010 at 07:40 PM.. Reason: change to code
sylviamc is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:34 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com