Scribd
Upload
200 views

Adobe Dreamweaver Widget Browser: Scott Richards - Dreamweaver Team

Web Widgets are a rich UI element implemented with HTML, CSS, JS, Ajax Popular javascript Frameworks. Ajaxrain has a great collection of UI Widgets including Buttons Menus Sliders Sortable Tables.

Uploaded by

srichards1839
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
200 views

Adobe Dreamweaver Widget Browser: Scott Richards - Dreamweaver Team

Web Widgets are a rich UI element implemented with HTML, CSS, JS, Ajax Popular javascript Frameworks. Ajaxrain has a great collection of UI Widgets including Buttons Menus Sliders Sortable Tables.

Uploaded by

srichards1839
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Adobe Dreamweaver Widget Browser

Scott Richards | Dreamweaver Team

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.


What are Web Widgets?

§ Web Widget = a rich UI element implemented with HTML, CSS,


JS, Ajax
§ Popular Javascript Frameworks
§ Mootools
§ Prototype
§ YUI
§ jQuery
§ Developers creating Widgets, AjaxRain has a great collection of
UI Widgets
§ Buttons
§ Menus
§ Sliders
§ Sortable Tables
§ LightWindow
§ Slideshow
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
The Problem

§ Lots of moving parts (files to


manage)
§ Dependencies on Javascript
libraries
§ Widget implementations vary
widely
§ Quality of documentation and
samples also varies (often
targeted at developers)
§ Markup & code requirements can
be confusing
§ Want to make it drop dead simple
to get Widgets into your web
pages
§
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
Widget Browser

§ Free Stand Alone Application that works with Dreamweaver CS5


§ http://labs.adobe.com/technologies/widgetbrowser/
§ Browse Widgets Submitted to the Exchange

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4


Preview & Interact with Widgets

§ Try out built in presets


§ Add Widgets you like to “My Widgets”

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5


My Widgets

§ Click “Configure” to modify a preset

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6


Configure

§ Modify the Properties the Widget Developer provided

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7


Code View

§ Can see the code as you change the properties

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8


My Presets

§ Save your own presets

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9


Save Widget Files

§ Can Save html, Javascript, and CSS files wherever you want &
preview

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10


Inserting Web Widgets with Dw

§ Insert javascript, css files creates links to external files


§ Drops html code wires it up Javascript
§ Get Tabbed Outline in Design View
§ Property Inspector links to Developers Site
§ Removes associated html code, script references,
and associated files when you delete
§ Demo Web Widget

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11


Dw Live View & Related Files

§ See all Related files, Live View Runs Javascript, Filter on File Type

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12


Dw Live Code

§ See classes applied via


Javascript
§ Freeze Javascript to
click on elements
and check out the
code in different
states

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13


Dw Features help with CSS

§ Code Navigator
§ Alt Click in Live View
§ Hover to get pop up
§ Click on Class
§ Nav to corresponding Style
Sheet
§

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14


CSS Styles Panel

§ See Cascade
§ Easy to Change/Add
Properties
§ Check Specificity of each Rule
§ Right click to Go to the Code
§ See which properties are
being overriden rollover to
see by whom
§ Comment out properties
§ Display All rules
§

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15


Open Ajax Alliance

§W o rkin g w ith O p e n A ja x A llia n ce o n W id g e t M e ta D a ta S p e c


§O A M – O p e n S o u rce X M L file fo rm a t d e scrib e s W id g e ts

§W id g e ts p a cka g e d u p a s . zip file s


§
§

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16


Widget Projects

§To C re a te W id g e ts fro m O p tio n s click “ E n a b le W id g e t Pro je cts”


§
§

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17


Widget Projects

§To cre a te a w id g e t yo u sta g e th e Ja va scrip t C S S file s


§C re a te a n O A M . xm lfile th a t re fe re n ce s th e m a n d sp e cifie s
e d ita b le p ro p e rtie s
§C re a te a W id g e t b y p o in tin g to th e O A M . xm lfile
§
§

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18


Package Widget

§W id g e t B ro w se r V a lid a te s O A M . xm l file
§R e p o rts a n y W a rn in g s / E rro rs

§U se V a lid a te a s X M L in D w

§C lick Pa cka g e to cre a te a Z IP File

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19


Create Developer Presets

§C lick Pre vie w to C h e ck o u t th e W id g e t


§C re a te D e ve lo p e r Pre se ts

§C lick Pa cka g e to in clu d e D e ve lo p e r Pre se ts in th e zip

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20


Distributing Widgets

§Po st th e . zip to th e E xch a n g e o r o n yo u r site


§Im p o rt d ire ctly fro m th e th e . zip b y clickin g “ Im p o rt W id g e t” in “ M y
W id g e ts”
§

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21


Thanks

§ Encourage you to create your own Widgets!


§ Tutorial Video
 http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-bro
§ Help
 http://help.adobe.com/en_US/WidgetBrowser/
§ Widget Developer Guide
 http://labs.adobe.com/technologies/spry/wb/dev_guide.html
§ Widget Browser Forum
 http://forums.adobe.com/community/labs/widgetbrowser/

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22


© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

You might also like