Spry Updated

This post is more than 2 years old.

While the official 1.4 release is still not ready yet, the folks over on the Spry team have released a new update today. You can read more about this at this forum post. This release focuses mostly on widgets and form validation - two areas that Spry doesn't have a lot of tools in - so I'm very happy to see this update.

Check out the examples first, then check out the new cool demo.

This is definitely a prerelease - so use with caution, but it does look pretty darn cool. Consider the tab menus. Here is a simple example:

<script language="JavaScript" type="text/javascript" src="../../widgets/tabbedpanels/SpryTabbedPanels.js"></script>

<div class="TabbedPanels" id="tp1"> <ul class="TabbedPanelsTabGroup">

&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 1&lt;/li&gt;
&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 2&lt;/li&gt;
&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 3&lt;/li&gt;
&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 4&lt;/li&gt;

</ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelContent">

  &lt;p&gt;By default, the Tabbed Panel CSS does not define a height or width to the widget.&lt;/p&gt;
  &lt;p&gt;The height of the widget will change depending on the size of the content of the current open panel.&lt;/p&gt;
  &lt;p&gt;To set a fixed size for the widget, set the 'height' of the class .TabbedPanelContent to whatever value you need. Overflow should be set to handle content longer than the set height. &lt;/p&gt;
&lt;/div&gt;
&lt;div class="TabbedPanelContent"&gt; Tab 2 Content &lt;/div&gt;
&lt;div class="TabbedPanelContent"&gt;

  &lt;p&gt;Default Panel set to open the 3rd panel onLoad. Spry has a 0 based counting system, so the constructor option {defaultTab: 2} will open the 3rd panel. &lt;/p&gt;
  &lt;p&gt;.TabbedPanels class has been set to a width of 500 pixels, so all widgets that use that class on this page will be that width. &lt;/p&gt;
  &lt;p&gt;Also, tabindex=&quot;0&quot; has to be set on every tab element for keyboard navigation to work correctly. &lt;/p&gt;
&lt;/div&gt;
&lt;div class="TabbedPanelContent"&gt;Tab 4 Content&lt;/div&gt;

</div> </div>

Pretty simple, eh?

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Andrew Powell posted on 10/21/2006 at 1:27 AM

While widgets are slick, I think we can all agree that the data components are at the heart of Spry. I will be impressed when I see some enhancements / new features to the data pieces.

Comment 2 by Scott Fegette posted on 10/21/2006 at 2:09 AM

Andrew- you should definitely check out the form validation demo, regardless. Clientside functionality, yes - but some very slick utilities you'll probably find interesting.

Comment 3 by Nat Papovich posted on 10/21/2006 at 10:03 AM

One thing that demo is not is slick. The transition effects make me want to vomit! Too fast, too choppy, too something.

Nice work on the rest. I'll try out Spry on my next Ajax needs. AjaxCFC has done an admirable job thus far.

Comment 4 by Raymond Camden posted on 10/21/2006 at 4:13 PM

nat: I had not really paid attention to the transitions - I was mainly looking at layout plus the form controls. I don't know - for me - on multiple machines - it runs great.

Andrew: I know that the Spry team is working on this as well. On one hand though I feel like they are -far- beyond others when it comes to that _already_. Yes, there are things I'd like to see added (like parsing WDDX), but I've yet to see an AJAX framework that does data quite as easily.

Comment 5 by John Farrar posted on 10/21/2006 at 5:52 PM

Effects are the modern medicine man of web development. If someone is doing a gallery they may be important. There aren't many business application reasons for effects though. Basically that belongs in Flash or something else where it works better. I want to see them concentrating on features that make applications work better. (Capturing changes so we can send them back to the server, JSON, etc.)

Comment 6 by Raymond Camden posted on 10/21/2006 at 7:43 PM

To be anal John - I don't think this release had any effects. It did had UI controls. I think we need to differentiate betwen the two. I as well don't care about effects/transitions. I do care about UI controls as I think they help (or can help) a user navigate a complex process.

My 2 cents.

Comment 7 by Doug Hughes posted on 10/22/2006 at 1:00 AM

Looks cool. I just wish spry came with a tree widget. :)

Comment 8 by John Farrar posted on 10/22/2006 at 3:19 AM

I was responding to Nat's comment Ray. And you might want to change your disposition or the "Cool Guys" you said were going to be at MAX won't let you sit at thier table! LOL

My point was that people are getting side tracked with effects. (Including the wonderful designers of the technology.) It would be good if they saved the effects for things like galleries, and let the rest shine without blemish!

Comment 9 by Raymond Camden posted on 10/22/2006 at 3:58 AM

John - I disagreed with you. If it was a misfire - then I apologize, but why do you say I should change my disposition? I wasn't rude to you. I simply disagreed with you.

Comment 10 by Dan posted on 11/9/2006 at 8:42 PM

Where can I get a copy of Spry 1.4 so I can play with the tabs?

Comment 11 by Raymond Camden posted on 11/9/2006 at 8:46 PM

Dan, you can't yet. It was just shown in a demo. Now - you CAN view source and download. That's what I did for cfspry (http://cfspry.riaforge.org), but it isn't recommended probably. :)

Comment 12 by Dan posted on 11/21/2006 at 11:48 PM

Thanks - it has been working wonderfully for what I need! I was starting to do some minor modifications but I thought I would ask here first to see if someone may have already done it.

On my page I have 3 tabs and from any tab they can click search (the search is below the spry tabs so you see the same search button all the time). When the page returns with the results I would like to have tb 3 back in focus. Now I know that use selected = 3 but before I modify the onclick for the tabs to set a variable so I know which tab they last viewed I wanted to check to see if I am missing an easier way of capturing the tab in focus when they click submit? Thanks

Comment 13 by Raymond Camden posted on 11/22/2006 at 12:15 AM

Well, I'd be willing to bet the Tab object would return the current tab. Just view the JS source I'd say.