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.