Spry UI

Hi Spry:fans,
Good news this time!
We are introducing Spry UI today.
We rethought the way we built widgets and we are happy to FINALLY have new material for you.
Spry UI widgets are completely redesigned from Spry 1.x. Spry UI widgets are more powerful, consistent and customizable then before.
A couple major changes from Spry 1.x:
All widgets have a common base class. Rather than each widget being self contained within one js file, we have broken up widgets into ‘components’. Each component has a built-in set of functionality. A Spry UI widget is simply a set of components stitched together to make a functioning widget.
Not only does this allow for Spry UI widgets to be consistent, but it allows users to create their own widgets by combining components into new configurations.
This means that the include structure is more complicated but more flexible.

Plugins All Spry UI widgets have a plug-in architecture, This means that users can overwrite almost any default functionality with custom functions.

Consistency: Things like notifications are robust and consistent between widgets. This means that is it straightforward to have the widgets and widget components talk between each other.

We are also changing how we distribute these widgets. We are also introducing the Widget Browser. The Widget Browser is an Adobe AIR app that allows you to visually configure the CSS and Javascript properties of the widget. So rather then poke though API docs, you can use the visual interface of the Widget Browser to get the widget ready for your site. The Widget Browser provides a real time, functioning instance of the widget that updates automatically as you make changes.
But the Widget Browser is not just for Spry UI. It is a platform for finding and configuring widgets from any framework.

You can find more info about Spry UI at the Spry Site.
http://labs.adobe.com/technologies/spry/ui/.

If you want to play around with the Spry UI widgets (and others), get the Widget Browser at http://labs.adobe.com/technologies/widgetbrowser.

Hope you like the new stuff. Let us know what you think!
Thanks,
The Spry Team

New Spry Feature Preview

Hi Spry:fans,
I know that new functionality in Spry has been slow to come and it pains us as well.
I am happy to announce that we have put a new version of SpryData.js on Preview:
http://labs.adobe.com/technologies/spry/preview/

As it says, Kin built in a xpath function into SpryData.js. This function checks for the existence of xpath.js.
If found, it uses it.
If xpath.js is not included, the function will handle basic xpath expressions for XML Data sets.
This means that for the 80% case, you won’t need to include xpath.js for your XML Data sets.
That saves you ~72kb
of bandwidth!
This will handle the basic /products/product xpaths. If you need more complicated expressions, then include xpath.js.
We have posted the regular, packed and minified versions.
Please check it out and let us know if you have any issues with it.
Thanks,
Don

International DW/Spry Help now available

Hey Spry:fans.
We posted Dreamweaver CS4 Help on the Web in English a few weeks ago, which includes all of the new Spry features available in Dreamweaver CS4.
Now, the localized (i.e. translated) Dreamweaver CS4 documents are available in German, French, Japanese, Italian, Spanish, and Korean.
Below you’ll find links to the translated Spry docs, as well as links to the general "What’s New" sections for the localized versions of Dreamweaver CS4.
German
Spry-Seiten visuell erstellen
Neue Funktionen
French
Création de pages Spry visuellement
Dernières nouveautés

Japanese
Spry ページの視覚的作成
新機能
Italian
Creazione visiva di pagine Spry
Novità
Spanish
Creación visual de páginas de Spry
Novedades
Korean
Spry 페이지를 시각적으로 작성
새로운 기능

Also, those of you coming to SF for MAX, there will be a few classes where Spry is directly/indirectly used/taught.
Check them out.
And for our European readers, I will be MAX Europe, speaking about DW and Ajax, plus a couple of other things.
Hope to see you there.
Thanks,
D

CS 4 and Web Widgets

Hi Spry:fans,
Just wanted to let you all know that the CS4 products are now available!
You got sneak peak with the public beta but now you can have it for real.
Check out the Adobe home page for more info.
I mentioned last time about the new Spry widgets and also the excellent upgrade on the Spry Data Set Wizard.

One new feature that I wanted to mention is somewhat Spry related.
Spry has some good widgets but the Dreamweaver team recognizes that there are hundreds if not thousands of other excellent widgets. We now have a mechanism to get them into DW.

We have been working on the web widgets feature. This is first:
A set of widgets from (gasp) other frameworks that can now be loaded into Dreamweaver CS4.
These widgets can be downloaded from the Exchange:
http://www.adobe.com/cfusion/exchange/index.cfm?s=5&from=1&o=desc&cat=290&l=-1&event=productHome&exc=3

Phatfusion is first out the door with some real high quality widgets. Thanks to Sam for his efforts in converting his widgets into Dreamweaver extensions!
Hot on his heels will be extensions from YUI and jQuery UI. Keep your eye out for them.

They were created by the second web widget point: The web widget Packager.
This is an extension for Dreamweaver that will take a widget XML file and create the extension automatically.
Check out the details here:
http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager
Now anyone can create widget extension for Dreamweaver.

Thanks,
Don

Spry and DW CS4

Hi All,
Well, we have come up for air after the big Dreamweaver effort (The Spry team is a subset of the DW team…) and are surveying the landscape.
I wanted to first update you on what we have been doing.
As I alluded to above, we have been heads down on DW for the last few months. It’s a strong release with many great new features.
DW CS4 will now also support HTML Datasets, with a great interface for selecting data and the ability to easily build some starting Spry markup. It’s a substantial piece of work. We also rounded out the form validation widgets.
You can read more about them here:

Tooltip widget:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSF77F4640-5703-4055-B177-133B8091FF1D.html

Radio Group widget:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS16732C4E-51DA-45e0-91BA-D54631B49A99.html

Password widget:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSFFA8775B-ED2B-47c8-96A6-C8337D98C036.html

Confirm widget:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS60F93476-CDC9-421c-A0C8-02B35DE1145A.html

Additionally, we’ve posted help that shows you how to create XML and HTML data sets using the new data set builder:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSA671B0BD-047C-4752-BFAC-B6C0601F9791.html

And as always, you can check out all of the new features in Dreamweaver CS4 on the What’s New page in help:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS2C41F19D-502B-4fb5-8A54-4442E2127C84a.html

On the Spry side, we are looking into a new approach to widgets, with more flexible markup and a clean way to easily make custom widgets. Lots of research happening right now. Hopefully now that DW is done, we can get to releasing something in the near future.

Thanks,
Don

Spry 1.6.1 released to Labs

Hi Spry:fans,

I wanted to talk about our freshly released Spry 1.6.1 update.

This release was based on changes we wanted to do to be compatible with the just released AIR 1.0. We needed to make some changes to the way our processing worked. That plus the raft of big fixes we made, plus the new Rating widget, deemed that we update the zip so everyone has the latest.

So as far as Spry and AIR go, the big things are: We can’t run eval() in the AIR space . This means that any spry:if or spry:test can’t be run directly. Also, adding event handlers after the onLoad event won’t work. So all onclick=”ds1.setCurrentRow():” type of things have to be done using an onPostUpdate REGION observer.

http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html

The solution we used also solved a long standing data issue and gives developers a great deal of flexibility with their data references.

A spry:if can now be handled with something like:

<script>

function checkName(rgn, doIt)
{
return doIt(‘{name}’) == ‘Adobe Photoshop';
}

</script>

<div spry:if=”function::checkName”>

But even better is that you can make custom data references like so:

<script type=”text/javascript”>

function FormattedPrice(region, lookupFunc)
{
return “$” + parseInt(lookupFunc(“{ds1::price}”)).toFixed(2);
}
</script>

<div spry:region=”ds1″>
<ul spry:repeatchildren=”ds1″>
<li>{name} – {function::FormattedPrice} </li>
</ul>
</div>

Notice the {function::FormattedPrice} data ref. This method allows you to easily do data formatting!

We have added a simple sample that shows this working, and have updated the API docs to explain this new methodology.
http://labs.adobe.com/technologies/spry/samples/data_region/Function_colon.html

As I have posted before, we also are releasing the Rating widget for real.

Also, check out some of the good fixes in the Changelog.
http://labs.adobe.com/technologies/spry/ChangeLog.html

Thanks,

Don

Effects Sample

Hi spry:fans,
A quick note.
I know we have had this sample for a while, but I was just testing it (for a cool new DW feature…), and was reminded of how cool it is.
http://labs.adobe.com/technologies/spry/samples/effects/transition_sample.html.
It shows all the different combinations of our Effect transitions.
But it also graphs the curves, so you can visually compare the difference between ‘sinusoidal’ and ‘fifth’.
AND, it builds the constructor for you!
As you change the properties and fire them off, the constructor example code updates to reflect your changes.
Then you can just copy and paste that into your page. Super nice.
So that’s all. Just wanted to pass that along.
Thanks,
Don

Spry 2008

Hi Spry:team,

A late welcome to 2008. I have been meaning to update you all on what we have been doing lately. That last comment by Fred finally got me moving!

I have a couple things for you all.

First: What’s up with Spry? Well, part of the Spry team has been working on Dreamweaver features, so our time dedicated to Spry has been temporarily lessened. Dreamweaver is the priority project and since we are on the DW team, we need to ensure that it gets what it needs. So we haven’t been able to work on Spry as much as we would like. The other part of the Spry team has been busy as well, working on widgets and helping to execute our super cool plans for widgets in the next version of DW. I can’t say what that is, but I think the DW community will be quite happy with the new widget stuff.

Secondly, we just pushed a new widget to preview! You can now check out this page: http://labs.adobe.com/technologies/spry/preview/ and see our new Ratings Widget. We have links to source code and relevant samples. Please check it out and provide feedback on it. Let us know what you like and don’t like. Tell us what’s missing or could be done better.

See, so things are getting done!

We don’t have a date for Spry 1.7 yet, but there will definitely be one. We just need to get our DW stuff done and then we will be back, working on the next version. We will try to preview other items as well, as they get completed. Stay tuned.

Thanks,

Don

Spry and Dreamweaver

Hi Spry:team,

I know I say this every time, but it has been a while. Spry 1.6 has been out for 2 months and change. The Spry team has been a bit distracted with Dreamweaver work, but we will have a new widget to preview in the near future. Lots of other exciting things are happening in our widget world, but at this point I can only tease…

So there is still some confusion on the relationship between, Dreamweaver, Spry and the Spry Updater for Dreamweaver. I am going to take this time to try to clarify the 3 ideas.

The Spry framework is a free javascript library(s) available for download on Labs. It contains the core javascript file, samples, demos and documentation for all the features with the library. Spry has a wide range of features, including data, widgets, effects, DOMUtils, form submission, etc.

Spry is developed independently of Dreamweaver, although the Spry team is technically part of the Dreamweaver team. Since Spry is a much simpler project compared to Dreamweaver, that means that the Spry team can put out releases every few months, much faster than Dreamweaver’s 18 month cycle. This means that the feature set of Spry will always be well ahead of Spry feature IN Dreamweaver.

Dreamweaver CS3nsupports Spry authoring in a few ways. It has support for creating XML Data Sets and implementing Spry regions/repeats. Widgets are rendered as they would be in the browser, making for easy styling. Spry Effects are implemented in the Behaviors Panel. Code hinting and coloring make navigating through Spry pages easier.

Dreamweaver implements Spry behind the scenes like this: There is a set of Spry files within the DW Configuration folder that are used in DW’s design view. These are the ‘design-time’ files. They are stripped down and modified so that DW can use them while building Spry pages in Design View. These are the files that allow the widgets to render in Design View and allows the panels to open and close on the Accordion, for instance. These design time files are only used by DW for it’s design work.

There are also copies of Spry files that are copied to the users folders when they add a Spry component to their site. These are the same files that you will find in the Labs download. At the time we were building DW CS3, Spry 1.4 was the current version and this is the version of the javascript and CSS files that DW outputs.

There are these 2 versions, design time and regular, for this reason. We wanted to be sure that the design time experience was separated from the regular Spry files. This would allow us to update the regular Spry files without possibly breaking Dreamweaver. The design time files will keep working no matter what version of the regular Spry files are there. This will allow periodic updates to DW so that Spry users can have the latest regular Spry files without affecting the performance of Dreamweaver. (If DW used the real Spry files for its design time work, we would have to rigorously test any update of Spry in DW. Having 2 versions saves us that trouble.

So, how to update DW to use the latest Spry files. Well, for the first few months, it was some tedious copy and pasting. It was a matter of finding the regular Spry files in the Configuration folder and just replacing them with the new ones. But the design-time files needed to be left alone. Some users were copying the Spry zip into the config folder and things were breaking left and right.

In the mean time, we were working on the Spry Updater for Dreamweaver. This is an extension that automatically updates the file in the Config folder for you. It also provides an interface (Site > Spry Updater…) that helps you copy these new files to your site. It also updates the code coloring and hinting for the new features.

But here was also another point of confusion. The Spry Updater does not add any new Spry features (widget, etc) to the Insert Panel. It simply updates the existing DW files to the latest versions. So now the Spry 1.4 accordion is now Spry 1.6. Since the HTML didn’t change, just the javascript, adding the new js file means that the accordion is automatically up to date.

It takes a lot of work, months actually, to add a new Spry widget to DW. That means that it is difficult for us to keep DW on parity with Spry. Spry has 16 widgets. DW CS3 has 8. Spry now has 5 datasets, DW has one. We are looking into ways to fixing that disparity…

So again, the updater doesn’t add new features to DW (except that command). It updates the existing features to the latest version. They only change is the version of the js and css files in the Config folder.

I should also mention that the Updater itself is a nice piece of work. It started out as a simple command for updating files and it is now a robust extension that can be used for updating site files for many things. Right now it is packaged as a Spry Updater, but extension developers can tune it to their own needs and make other kinds of updaters. It was a great effort by our Romanian team.

I hope this clarifies things a bit. Keep an eye out here for the widget preview!

Thanks,
Don

Spry 1.6 and the Dreamweaver Updater

Hey {spry::fans},

October 1st brings a couple good things.

Thing Number One: the Spry team finds itself in Chicago, for the Adobe MAX conference. It is our annual user conference, with meetings and classes and networking and putting faces to emails. Your humble host, along with other members of the Spry team, and some hard-core Spry users, will be teaching Spry at MAX this year.

Thing Number Two: We released Spry 1.6 today.

As I mentioned in my previous post, this release is about raising our game with respects to web standards, accessibility and progressive enhancement, among other topics. We wrote a set of articles discussing these topics. You can check them out at http://labs.adobe.com/technologies/spry/articles/best_practices/.

We added some advanced versions of our demos. There are a couple flavors of the Photo Gallery: one using the HTML data set. The other with static data that is progressively enhanced. There is also a version of the Products demo that degrades nicely. The default Photo Gallery demo has been updated to be simpler and more modular, using a first iteration of some image widgets we are working on. See the new stuff here: http://labs.adobe.com/technologies/spry/demos/.

Ah, the sweet Element Selector. Along the lines of jQuery and DOMQuery, the Element Selector (SpryDOMUtils.js) is a utility used for grabbing multiple parts of the page using CSS Selectors and applying functions to them. Our speed is on par with other tools and we have robust and accurate CSS3 support. Read about it here and check it out here.

An important note: We changed the way we handle text values within the XML Data Set. This will affect folks that send entity encoded HTML or HTML embedded in CDATA in their XML. Read more about it in http://labs.adobe.com/technologies/spry/samples/data_region/XMLDataSetStringHandlingSample.html and also in http://labs.adobe.com/technologies/spry/samples/data_region/HTMLFragsInXMLSample.html

We have a few more widgets: We rounded out our form validation collection with a Password Validation widget and a Confirm Password widget. The HTML Panel is a widget that uses HTML fragments and allows graceful degradation.

We have included packed and minimized javascript files for everything. This gets all of us some significant file size savings, for example: SpryData.js: 128kb to 41Kb. SpryEffects.js: 77 to 29.
A note on the difference. Minimized files are compacted, with whitespace removal and other compression techniques. Packed files are smaller: they minimize the files and then they set up a text replacement table that reduces the string size. They are smaller but there is a small performance hit when the browser initially undoes the packing. You can avoid this CPU spike by using the minimized versions, but the file size is bigger (yet still quite a bit smaller than the regular versions). We provided both versions so you can choose the best path for yourself.

On the data front: We added a new data set: The DataSetShell allows multiple data sets to share a spry:region.

We did want to mention that we do read the forums every day and file bugs and enhancement requests for things that people find. We didn’t get to fix as many as we wanted this time around, especially some of the enhancements, but we do have them filed and plan on getting a bunch done for 1.7.

But on the positive side, we are also releasing the Spry Updater for Dreamweaver CS3! Finally, a simple and easy way to not only update Dreamweaver CS3 to Spry 1.6, but it also allows you to copy over the updated files to your local root folder. It was a great summer project for a couple of the Spry team guys and it should make the updating process very easy. The extension can be downloaded for free from the Labs site. Just follow the usual download link: http://www.macromedia.com/go/labs_spry_download.

Over the next couple posts, we will talk more about the standards stuff, explaining more and responding to any comments you may have.

So go download Spry 1.6.

Thanks,

Don