24 Comments

• J. Reed
  November 28th, 2007 at 2:17 pm

  Where do I find the SpryDOMUtils.js file? I’m using CS3 Dreamweaver but can’t figure the path.

• Don Albrecht
  November 28th, 2007 at 2:30 pm

  \Includes\SpryDOMUtils.js

  or \Includes_minified & \Includes_packed

  You need to download the entire library & not just the MXP for dreamweaver CS3. The full library is 4.75 mb and includes the MXP along with demos, examples & source. The MXP only updates Dreamweaver to support the library.

  Note: The dreamweaver updater is included in the full download.

• J. Reed
  November 28th, 2007 at 2:40 pm

  Thanks. But where do I find this full library? I installed Dreamweaver from my CS3 Disk.

  John

• Don Albrecht
  November 28th, 2007 at 2:43 pm

  http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fspry

  You’ll need an adobe ID to download it.

• J. Reed
  November 28th, 2007 at 3:12 pm

  Thanks! That was helpful. Perhaps you can help me with my real purpose here:

  I have a Spry Master/Detail page. In the master section I’m using a table showing products (rows). The Spry is reading from a relatively simple XML doc. I would like to have the list, say column 1, automatically create an empty row when each letter in the alphabet changes so that all rows with {title} that begin with ‘A’ are grouped followed by a blank row and then the ‘B’s, etc. (I don’t want to alter the XML file since it needs to be repurposed with other sorting methods).

  Second (related): I wanted to create a dynamic table, so being a novice, I created multiple ‘hardwired’ tables with different columns (reading from the same XML doc) and placed each in a different Spry tab which was simply overlayed. Thus, as the user clicked each tab, one table was hidden and another revealed. I think this is probably very inefficient design. Recently, I came across a routine using the following function:

  function hideIt(){
  Spry.$$(”#first th:nth-child(2),#first td:nth-child(2)”).toggleClassName(”hideIt”);
  changeText(”button”,”Hide Name”,”Show Name”);
  }

  (where the class, “hideIt” simple invokes the display:none attribute)

  which led me to begin this thread (I still can’t get it to work although you have at least solved the “includes” problem for me). Am I correct in assuming that this function will lead me to a much better place using one table?

  Thanks so much for your help - it is very much appreciated.
  John

• Don Albrecht
  November 28th, 2007 at 3:25 pm

  My first question would be if you’ve considered Ext for this project as the ext grid may work better for some of what you’re attempting.

  Now that I’ve plugged an entirely different toolset and potentially suggest that you re-factor months of work, lets look into your options with Spry…

  As far as trying to deal with hardwired vs dynamic display of tables, I’d encourage you to continue along the hardwired route. Depending on exactly what type of behavior you’re trying to achieve, I’d hazard to guess that the hardwired table route would be a better choice. The dom manipulation you’re proposing to hide tables may seem significantly slower to your users (even if it is more elegant to us coders).

  How different are the various views? What is your backend language? How big is the dataset in the xml file?

  Remember, Spry 1.6 is the first release to have selectors responsive enough to do something like this cleanly, it’s also still classified as a pre-release.

• J. Reed
  November 29th, 2007 at 12:09 pm

  Thanks for the advice - taken (whew).

  My various tables (each in a separate Spry tab with only one visible at at time) look something like this:

  Title Group
  All My Love Led Zeppelin
  Black Dog Led Zeppelin
  Bron-Y-Aur Led Zeppelin
  Foxey Lady Hendrix
  Purple Haze Hendrix
  etc.

  Title Arranger
  Bron-Y-Aur Reed
  Going to CA Reed
  Heartbreaker Reed
  Black Dog Henrickson
  Purple Haze Henrickson
  etc.

  I have 6 more 2-column tables (thus I have 8 tabs).

  What I would love, is instead, this:

  Led Zeppelin
  All My Love
  Black Dog
  Bron-Y-Aur Stomp
  etc.

  Jimi Hendrix
  Foxey Lady
  Purple Haze
  etc.

  Any ideas how I can do this? The XML file has over 100 products - each with about 20 fields (with one field a CDATA field). The views differ only in the 2nd column - the first is always the {title}. I don’t know what you mean by a “backend language”.

  Thanks,
  John

• J. Reed
  November 29th, 2007 at 12:11 pm

  Sorry, after I hit submit I noticed that my tabs were stripped.

  The {title} {group} table and {title} {arranger} tables should have nice aligned columns, and the “What I would love” table should have the titles following Led Zeppelin indented.

  John

• Don Albrecht
  November 29th, 2007 at 12:33 pm

  John,

  I think you should be exploring extJS 2.0 The grid & tree widgets are going to give you a much smoother route to a solid and easy to use interface & they play nice with xml data sets. By backend language I was referring to your server side language, c#, coldfusion, php, java etc.

  Look at: http://extjs.com/deploy/dev/examples/grid/grouping.html

  This really looks like it exemplifies what you want in the interface, the user can turn columns on and off, sort & records are grouped.

  Check it out and let me know what you think.

• J. Reed
  December 1st, 2007 at 10:53 am

  Thanks once again. This extJS 2.0 download material looks pretty involved. If you think most modern browsers will render it properly, I’ll invest the time (that’s if you don’t think I can solve my problem just within Spry and css.)

  Here’s another issue, if you’re still game: Same Master/Detail situation, but within my detail I have placed a Spry tab struct with three tabs. Problem is this: select a master item from the master table - detail section gets properly updated - all three tabs change to reflect new content. Now the user clicks on, say, tab#2 THEN switches to a new master item by clicking in the master list. All of the detail gets updated BUT the Spry tabs don’t revert to tab #1 being selected YET the content does - thus the user sees tab #2 still selected but the content is showing from tab #1.

  So, how to programmatically select tab one every time the user selects a new master item?

  Thanks,
  John

• Don Albrecht
  December 1st, 2007 at 5:55 pm

  My .02. First a note on compatibility: Ext Grid is supported by

  * Internet Explorer 6+
  * FireFox 1.5+ (PC, Mac)
  * Safari 2+
  * Opera 9+ (PC, Mac)

  Second. I don’t know the intricacies of your project so my advice is obviously limited. From your descriptions, My gut reaction is that your interface might be a bit cumbersome using multiple tabs for data that could also be displayed in a well managed table. Please understand, I’m trying to gauge a 2d interface from a select few sentences of description so I could be completely off base.

  I wouldn’t be too concerned about the ext learning curve issue. If all you want to do is create a compelling display of your data, the ext documentation is extremely complete and useful. I’m also here to help.

  If you are going to stick with spry, you probably need to register an event handler on the master view to force an update of the tabs.

• J. Reed
  December 18th, 2007 at 10:40 am

  Thanks for your previous help. I was wondering if you had any info on this problem:

  I can’t seem to get Lytebox (v3) to work within Spry regions.

  Any ideas?

• Don Albrecht
  December 18th, 2007 at 10:45 am

  How are you trying to use Lytebox? Are you trying to trigger it from within the spry region or use it to contain the spry region.

• J. Reed
  December 18th, 2007 at 11:06 am

  Thanks for your reply. I am trying to trigger Lytebox from within a Spry:region. Here’s the relevant code:

• J. Reed
  December 18th, 2007 at 11:08 am

  …sorry, for some reason my pasted code didn’t show up on my post.

• Don Albrecht
  December 18th, 2007 at 11:17 am

  Lytebox is likely being initialized before the spry region loads. You’ll probably need to use onClick events to get the effect you want.

• Don Albrecht
  December 18th, 2007 at 11:28 am

  if you’re using UpdateContent, you can pass it a third function to re-initialize or reload lytebox.

  e.g.
  Spry.Utils.updateContent(’too’,’showXML.asp’, myLytebox.updateLyteboxItems() );

  Hope this helps

• J. Reed
  December 18th, 2007 at 12:52 pm

  Sorry, I don’t understand. My only references to Lytebox are in the header with:

  and in the body with:

  …[code]

  
  …[/code]

  If I remove, “spry:region=”ds1″, breaking the code, the lytebox works thus proving that the two are not working nicely together. I’m not using “UpdateContent”. If I need to use an “onClick” event, where would that go and look like?

  Thanks,
  John

• J. Reed
  December 18th, 2007 at 12:53 pm

  again, the code didn’t come through. How do I include code (with tags) in these replies?

• Don Albrecht
  December 18th, 2007 at 3:06 pm

  You add code to comments by cutting and pasting the escaped html. I don’t have any other formatting turned on at this time.

  I apologize for the inconvenience:

  >html /<

• Don Albrecht
  December 18th, 2007 at 4:02 pm

  Can you email me the code?

• Don Albrecht
  December 18th, 2007 at 4:43 pm

  I think I see the problem.

  You can’t put the lightbox on the master table because master table rows have onclick event handlers to update detail views.

  Basically, the command to update the detail is superseding the command to display the lightbox when the element is clicked. There isn’t really a simple fix for this as we need to do things the spry way instead of the traditional javascript way.

  The most straightforward solution would be applying a Spry.Data.Region.addObserver(regionID, observer) to trigger the desired action when the region recieves a specific event (in this case select).

  You can find more info here:
  http://labs.adobe.com/technologies/spry/articles/data_api/apis/region.html

• Nathan
  January 12th, 2008 at 4:10 pm

  Sorry to be so completely stupid, but I am a complete novice and am just getting up and running with Dreamweaver CS3 and have found that the area that I want to work on is the Spry tools.
  Trawling around I found that there was version 1.6, so I downloaded it, with the updater, but I really don’t know what to do with the download!
  I understand that the updater merely supports whatever you have in the library - but what is the library, and do I need to point the updater (or Dreamweaver) at the 1.6 downloaded files to get the newer version up and running.
  I realise that this is schoolboy stuff, but I guess that we all start somewhere.
  Humbly,

  Nathan.

• Doctor Filter
  April 21st, 2008 at 12:51 pm

  Where do I find the SpryDOMUtils.js file?

  For anyone who dosn’t have dream-weaver but would still like to use this code… you can backslash it from Adobe Labs.

  http://labs.adobe.com/technologies/spry/articles/best_practices/samples/../../../includes/SpryDOMUtils.js

Leave a Reply