View comments | RSS feed

Spry

About Spry widgets

A Spry widget is a page element that combines HTML, CSS and JavaScript code to enable user interaction. A Spry widget is made up of the following parts:

Widget structure
An HTML code block that defines the structural composition of the widget.

Widget behavior
JavaScript code that controls how the widget responds to user-initiated events.

Widget styling
CSS code that specifies the appearance of the widget.

The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript code. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget. The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more.

Each widget in the Spry framework is associated with unique CSS and JavaScript files, available on Adobe Labs. The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js).

Comments

Comments are no longer accepted for Spry 1.4. Spry 1.6 is the current version. To discuss Spry 1.4, please use the Adobe forum.

Comments


VioletSky Design said on May 4, 2007 at 9:55 PM :
I think this would be a good place to mention/define a constructor -- and perhaps show an example.
maurag said on May 7, 2007 at 10:29 AM :
I happen to know what a constructor’ is because I’ve encountered it in
ActionScript info. But this is the first time that I can actually recall
that term being used in DW documentation.

Consequently, I assume that for quite a few DW users, this may be their
first encounter with the term 'constructor’, yet all they really want to do
is put a collapsible panel on the Web page.

I assume that many DW users have looked at plenty of HTML, CSS, or
even XML. But that JS looks a bit... weird’ on the page. (Unless they’ve
seen the old JS Behaviors code.)

So from my perspective, the term constructor’ presents a new CONCEPT
for many users; we don’t 'construct’ HTML elements, nor do we
'construct' CSS elements, so this is a new idea.

---------
So wording and abstract terms like: “In the code, the new JavaScript
operator initializes the Accordion widget object, and transforms the div
content with the ID of Accordion1 from static HTML code into an
interactive page element. The Spry.Widget.Accordion method is a
constructor “ ...
----------------

Technically, it’s probably all accurate. (And Massimo has vouched for
this fact, so I believe this to be the case ;-)

But for a newbie like me, it would make more sense if I could simply
read, “The word new’ is a JavaScript **operator.**

In JavaScript, an **operator** is a word with a special type of power. An
easy way to think about the power of a JS **operator** is to think of a
human community, where a 'smith' has a certain kind of power to create
new tool or weapon, whereas a legislator has the power to create a new
law. Both the smith and the legislator have the power to create
something new. This is similar to the nature of the power that an
**operator** in the JS language. in JavaScript, an *operator* has the
power to create a new 'object.' In JS, any object can then be
manipulated with program code.

In this case, we’ll use the JavaScript operator 'new’ to
create a new Accordion Widget. The Widget is a new object, which
means that we'll be able to attach JS code to it. Using that code, we can
make the object do things (like open and close). This is generally
referred to as 'adding behaviors' to an object.

Notice that the JavaScript we use looks like this: new
Spry.Accordion.Widget....”

I don’t mean to be grouchy, but... Can’t you translate more of these key
Spry concepts into JonStewartish for people like me?
No screen name said on May 7, 2007 at 11:33 AM :
The term "operator" in JavaScript has a precise meaning, and you can't use
it instead of "constructor".

See:
http://www.w3schools.com/js/js_operators.asp
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference#Operators

I understand you want to make things easier for non-programmers, it's a
worthy goal. But you can't sacrifice technically accuracy in the process...
And that's why it's especially hard :-)

Massimo
maurag said on May 7, 2007 at 12:15 PM :
I appreciate the clarification, Massimo! I very much agree that it is
extremely important to be precise - particulary with key words and key
concepts like 'operator' or 'constructor'.

A constructor 'creates'.
An operator manipulates (mulitplies, divides, adds, etc).

Clarity is a good thing.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WSCD9C919B-A3AC-4e00-A1E2-D557162FA772.html