Adobe Spry and Dreamweaver ADOBE SPRY AND DREAMWEAVER (SUP)
The Adobe Spry Framework for Ajax (Spry v.1.6.1 is the latest release of Spry)
Spry is a JavaScript-base framework that enables the rapid development of Ajax-powered web pages.
Ajax is technology. It is a term commonly used to define a group of interrelated web development techniques used on the client-side to create interactive web applications.
Spry uses JavaScript, but acts like an extension of HTML and CSS (so anyone with HTML and CSS can use it). Spry can be used with both client-side and server-side technologies. • Spry is implemented as a set of JavaScript libraries. To add Spry to your page, the user includes the JavaScript library that contains the Spry features as needed, and then deploys that JavaScript file to the web site along with other page. • Spry has three basic components: Spry Data, Spry Widgets and Spry Effects. They can be used together or independently of one another. • No browser plug-ins or server-side modules are required for Spry to work. • Dreamweaver CS4 has features that ease the development of Spry pages but Spry itself is completely tool independent. Any code editor can be used to develop Spry pages (Dreamweaver, Visual Studio, Notepad…).
Sidebar AJAX
Other Frameworks similar to Spry: Google, Yahoo, jQuery, MooTools, Dojo, etc
Spry provides developers with easy to implement tools (Spry Data, Spry Widgets and Spry Effects) Widgets examples Validation widgets Menu Bars (Vertical and Horizontal) Sliding Panels Tooltip Effects examples Show/Hide: Fade Show/Hide: Blind Data examples HTML XML Data CSV Data Set For a full list of Spry examples go to: http://labs.adobe.com/technologies/spry/samples/index.html
Using Spry with Dreamweaver - Examples 1) Spry Vertical Menu Create two div elements that will act as the Left and Right sections of the page From the Layout Menu select and drag the Insert Div Tag icon onto the stage and give it a Class: divLeft
Select the New CSS Rule The only rule that is required is float:left;
From the Layout Menu select and drag the Insert Div Tag icon onto the stage and give it a Class: divRight
Completed… go to Code view and delete the auto-generated text
Code View Having placed the cursor inside of the divLeft Element, select the Spry Tab, select Spry Menu Bar
Place cursor here…
Spry will insert the necessary base code for the Vertical menu into the document
Modify menu as required… Add some dummy text (Lorum Ipsum) to the right div and modify the Items in the left div
Lorem ipsum dolor sit amet, sit lectus proin elit amet, magna a est luctus, nec integer, imperdiet nec sed orci diam id reiciendis. Ut molestie volutpat, elementum mattis tempus nulla mi habitasse, dolor enim sodales vestibulum ut non ligula. Mauris nunc, ultricies in rutrum commodo praesent diam. Nec fusce montes, massa velit quam enim mauris, velit scelerisque justo molestie sed, est mi lorem nunc praesent sodales arcu, orci arcu. Pede hymenaeos vel vestibulum orci sollicitudin vitae. Mauris tincidunt mi, iaculis nullam justo mauris ullamcorper quam exercitationem, nulla justo.
Save the file – Notice that Dreamweaver will try to add required support files – Select OK
Below is the final code for the Spry Vertical Menu
2) Spry Accordion with panel animations (this is similar to the Spry Collapsible Panel) Create a new page - exmp2.html From the Insert Panel, select Spry Accordion
Modify the panels from the properties windows. Use the +/- keys to add / subtract panels.
Type in the label value “Charter”. Also and add any text in the content area…
Modify and add additional panels
Save the file - When you save the file you must allow Dreamweaver to add any needed support files
You can add additional functionality to the Spry Accordion - such as a left or top/bottom menu… The Spry Accordion has several built in methods you can use for navigation
To add a “First|Next|Previous|Last” menu, just add the following hyperlinks You will need to use the “onclick” event to trigger the script Be sure that the “Accordion” id is the same name as the “onclick” event to trigger
First | Previous | Next | Last
Adding a Left side menu to the Spry Accordion To add a Left Side menu, first create 2 div elements with the following CSS Rules Next, inside the Accordion1 container, give all of the Accordion panels a unique id. For example, change
Next just put a div with the class divLeft around the left side menu items, and a div with the class divRight around the rest of the code
First | Previous | Next | Last
Save and test
Swithc to Designer View
Spry Tool Tips From the Insert Panel, select Spry Tooltip
Insert a picture into the “Tooltip trigger goes here.” Section
Pick a thumbnail…
In the “Tooltip content goes here” section add either text or an image or both…
Add additional Tooltips as needed… (Tooltips are spans – no box values…)
Completed code…
Photograph of Tahiti - Summer 2009
Photograph of Aottowa Park near Ottowa - Summer 2008
Hacking the Tooltips to an absolute position You can modify the Tooltips to enforce absolute positioning by changing the JavaScript file. 1) You need to save the SpryTooltip.js as SpryTooltipAbsolutePosition.js to maintain you base file.
2) Make the following change to the JavaScript file (SpryTooltipAbsolutePosition.js) a. Find the function: Spry.Widget.Utils.putElementAt (about line 210 +/- )
Spry.Widget.Utils.putElementAt(this.tooltipElement, this.pos, {x:this.offsetX, y:this.offsetY}, true);
b. Make two changes - add: “ , this.bottomPos, this.leftPos “
Spry.Widget.Utils.putElementAt(this.tooltipElement, this.pos, {x:this.offsetX, y:this.offsetY}, true, this.bottomPos, this.leftPos);
3) Make the following change to the JavaScript file (SpryTooltipAbsolutePosition.js) a. Find the function: Spry.Widget.Utils.putElementAt (about line 970 +/- )
Spry.Widget.Utils.putElementAt = function (source, target, offset, biv)
b. Make these changes – add “ , bottomPos, leftPos “
Spry.Widget.Utils.putElementAt = function (source, target, offset, biv, bottomPos, leftPos)
c. Inside the same function: Spry.Widget.Utils.putElementAt (about line 970 +/- ) just above the “return true;” and below the “if (biv) statement add the following code:
if (biv) Spry.Widget.Utils.bringIntoView(source); return true;
It should look like this…
if (biv) Spry.Widget.Utils.bringIntoView(source); /* ------CHANGES ------*/ source.style.bottom = bottomPos + 'px'; source.style.left = leftPos + 'px'; source.style.top = ''; /* ------END - CHANGES ------*/ return true;
4) One more change… In the source code of the html file (spryTooltip.html) In the JavaScript at the bottom of the file (about line 25 +/-) Find the line of code…
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
Make the following change
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1" ,{bottomPos:150, leftPos:125} );
5) Save all files and test.
Spry Collapsible Panel (similar to Spry Accordion)
From the Insert Panel, drag the Spry Collapsible Panel into your workspace.
You can add multiple panels, and set the open/close condition and animations as needed
See the code below: notice that CollapsiblePanel1 uses defaults, CollapsiblePanel2 sets key values
Sliding Panels - see afternoon lecture http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanels_unobtrusive.html
Spry Data with XML - see afternoon lecture