Adobe Spry and Dreamweaver ADOBE SPRY and DREAMWEAVER (SUP)

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="divLeft"> <ul id="MenuBar1" class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#">Item 1</a> <ul> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a class="MenuBarItemSubmenu" href="#">Item 3</a> <ul> <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul> <li><a href="#">Item 3.1.1</a></li> <li><a href="#">Item 3.1.2</a></li> </ul> </li> <li><a href="#">Item 3.2</a></li> <li><a href="#">Item 3.3</a></li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> </div> <div class="divRight"> 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. </div> <script type="text/javascript">  </script> </body> </html> 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 <p> <a href="#" onclick="Accordion1.openFirstPanel(); return false;">First</a> | <a href="#" onclick="Accordion1.openPreviousPanel(); return false;">Previous</a> | <a href="#" onclick="Accordion1.openNextPanel(); return false;">Next</a> | <a href="#" onclick="Accordion1.openLastPanel(); return false;">Last</a> </p> <div id="Accordion1" class="Accordion" tabindex="0"> 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 <style type="text/css">  </style> Next, inside the Accordion1 container, give all of the Accordion panels a unique id. For example, change <div class="AccordionPanel"> to <div id="AccordionPanel1" class="AccordionPanel"> Do the same for the other 3 panels… 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script> <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head> <body> <div class="divLeft"> <h3>Menu</h3> Open by Panel ID:<br /> <a href="#" onclick="Accordion1.openPanel('AccordionPanel1'); return false;">Charter</a><br /> <a href="#" onclick="Accordion1.openPanel('AccordionPanel2'); return false;">Scope</a><br /> <a href="#" onclick="Accordion1.openPanel('AccordionPanel3'); return false;">Risk</a><br /> <a href="#" onclick="Accordion1.openPanel('AccordionPanel4'); return false;">Costs</a><br /> </div> <div class="divRight"> <p> <a href="#" onclick="Accordion1.openFirstPanel(); return false;">First</a> | <a href="#" onclick="Accordion1.openPreviousPanel(); return false;">Previous</a> | <a href="#" onclick="Accordion1.openNextPanel(); return false;">Next</a> | <a href="#" onclick="Accordion1.openLastPanel(); return false;">Last</a> </p> <div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel" id="AccordionPanel1" > <div class="AccordionPanelTab" >Charter</div> <div class="AccordionPanelContent">Charter 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.</div> </div> <div class="AccordionPanel" id="AccordionPanel2" > <div class="AccordionPanelTab">Scope</div> <div class="AccordionPanelContent">Scope 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

Adobe Spry and Dreamweaver ADOBE SPRY and DREAMWEAVER (SUP)

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support