Scribd
Upload
361 views23 pages

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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
361 views23 pages

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)
We take content rights seriously. If you suspect this is your content, claim it here.
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy