Adobe Spryfor the ColdFusion Guy

Raymond CamdenCamden Media, Inc

ray@camdenfamily.com

1

What is Spry?

• AJAX Framework developed by Adobe

• Free and Open Source

• Version 1.4 (Really 0.4)

• http://labs.adobe.com/technologies/spry

2

What is AJAX?

• Asynchronous JavaScript and XML

• Allows updates of web pages without posting or reloading page

• Relies on built in browser capabilities, doesn’t require plug-ins like Flash or ActiveX.

3

Capabilities

• Load and display data dynamically (no page reload)

• UI widgets (Tab, Accordion, Form, Panel)

• Visual Effects (Eye Candy)

• Miscellaneous

4

Limitations

• AJAX Limitations

• Requires JavaScript

• Performance

• Accessibility

• Browser Limitations

• Only supports XML data

5

How does Spry work?

• Include 2 JavaScript libraries

• xpath.js (Google xpath library)

• spryData.js (Main Spry Library)

• Other libraries for widgets and effects

• SpryAccordion.js (etc)

• SpryEffects.js

6

Working with Data

7

Data Set and Region

• Data Set is your remote XML data, filtered and order with XPath.

• Region is the area that Spry will “mark up” with your data.

8

Loading Data

• Create a Spry XMLDataSet

• URL of data source

• Xpath Statement to select data

9

Code

10

Spry Regions

• Created using standard HTML (like a DIV)

• <div spry:region=”mydata”>

• Think of it like <CFOUTPUT>, it lets Spry know what areas will be updated.

• Items that can’t be regions: COL, COLGROUP, FRAMESET, HTML, IFRAME, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR

11

Code

12

Displaying Data

• Uses a binding notation similar to Flex

• {firstname}, or {@firstname}

• {mydata::firstname} (dataset name + column)

• Loop Construct

• <span spry:repeat=”mydata”>

• Can’t apply to all tags

13

Code

14

Master/Detail

• Select Item from a list and show more information about it

• Use spry:detailregion

• Acts as a listener for changes for the current row

• Concept of current row

15

Code

16

Sorting

• Sort method on dataset

• Parameter specifying the field name to sort on

• setColumnType for numeric or date data

• One way sorting unless toggle is specified

17

Code

18

Other Data Features

• Notifications/Observers

• Paging and Filtering

• Conditionals (if/case)

• Behavior Attributes (hover/select)

• Automatic data refresh

19

Spry and ColdFusion

• Spry wants XML

• ColdFusion CFCs output WDDX

• How do we get them together??

20

Generating XML

• CFM “Proxy”

• CFC/returnType=“xml” (CF7 allows it)

• toXML.cfc

• http://ray.camdenfamily.com/projects/toxml

21

Widgets

• Tabs

• Accordions

• Panels

• Form Fields (validation)

• Menu Bar (coming soon)

22

Effects

• Appear/Fade

• Blind

• Slide

• Squish

• Grow/Shrink

• Shake

• Hilite

23

Demos

24

Thank You!

• Email: ray@camdenfamily.com

• Web: http://ray.camdenfamily.com

• Q and A

25