Ajax Development With Dreamweaver

Slide 1: Ajax Development For the Masses Andre Charland, CEO, Nitobi + Ajax

Slide 2: This Talk • About Me and Nitobi • Dreamweaver • Ajax Frameworks • Coding and Components

Slide 3: André Charland

Slide 4: About Nitobi

Slide 5: About Nitobi

Slide 6: Nitobi Customers

Slide 7: About Dreamweaver • Best tool for mutliplatform visual Ajax development • Everyone’s using it;)

Slide 8: Users From Nitobi

Slide 9: From Ajaxian http://ajaxian.com/archives/dreamweaver-for-ajax-should-we-take-it-serious-again

Slide 10: Designers and Developers • Both are important • One and the same • Protecting each other

Slide 11: Ajax in Dreamweaver http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Slide 12: Ajax in Dreamweaver http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Slide 13: Ajax in Dreamweaver http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Slide 14: Ajax in Dreamweaver http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Slide 15: Ajax in Dreamweaver http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Slide 16: Code Hinting jQuery

Slide 17: Code Hinting ExtJS

Slide 18: WYSIWYG-K • Kind Of... • Drag and Drop Development • Databinding • Wizards (This is the key to no code)

Slide 19: S ER W WYSIWYG-K T A B RO NO • Kind Of... • Drag and Drop Development • Databinding • Wizards (This is the key to no code)

Slide 20: Sets Up Assets • HTML (Declaration) • JavaScript • CSS • Images

Slide 21: Spry • Data • Widgets • Effects

Slide 22: Spry Something

Slide 23: Declarative Components <ntb:grid id="SimpleGrid" width="500" height="300" mode="locallivescrolling" datasourceid="data" toolbarenabled="true"> <ntb:datasources> <ntb:datasource id="data"> <ntb:datasourcestructure FieldNames="Name|FavColor|FavAnimal|Donation"></ntb:datasourcestructure> <ntb:data> <ntb:e xi="1" a="Tammara Farley" b="blue" c="cat" d="23" ></ntb:e> <ntb:e xi="2" a="Dwana Barton" b="red" c="dog" d="264563" ></ntb:e> <ntb:e xi="3" a="Lucas Blake" b="green" c="ferret" d="24563" ></ntb:e> ... </ntb:data> </ntb:datasource> </ntb:datasources> </ntb:grid> http://support.nitobi.com/?build=6523&product=all&type=art&a=10361

Slide 24: Nitobi Components

Slide 25: Simple Grid

Slide 26: Composite Components

Slide 28: Changing a Theme • <ntb:grid width="350" height="350" mode="livescrolling" gethandler="get_handler.php" theme="nitobi" > <ntb:tabstrip width="350" height="350" theme="tiger" >

Slide 29: Fisheye Menu

Slide 30: Fisheye <ntb:fisheye id="SimpleFisheye" growpercent="200" opendirection="up" expanddirection="right" iconwidth="50"> <ntb:menuitem imagesrc="images/file_new.png" label="New File"></ntb:menuitem> <ntb:menuitem imagesrc="images/file_edit.png" label="Edit File" jsaction="alert('test');"></ntb:menuitem> ...repeat as neded </ntb:fisheye>

Slide 31: Tab

Slide 32: Tab <ntb:tabstrip id="SimpleTabstrip" width="800px" height="600px"> <ntb:tabs height="" align="center" overlap="15"> <ntb:tab width="190px" tooltip="Welcome." label="IFrame Tab" source="http://www.nitobi.com" containertype="iframe"></ntb:tab> <ntb:tab width="190px" tooltip="Welcome." label="DOM Tab" source="tab2"></ntb:tab> <ntb:tab width="190px" tooltip="Welcome." label="Ajax Tab" source="tab3.html" loadondemandenabled="true"></ntb:tab> </ntb:tabs> </ntb:tabstrip> <div id="tab2"> <h1>DOM Tab</h1> <img src="images/nitobi.jpg" /> </div>

Slide 33: Tree

Slide 34: Tree <ntb:tree id="tree1" cssclass="folders" cssstyle="width: 500px;height:350px;"> <ntb:children> <ntb:node label="node 1"></ntb:node> <ntb:node label="node 2"> <ntb:children> <ntb:node label="sub-node 1"></ntb:node> </ntb:children> </ntb:node> </ntb:children> </ntb:tree>

Slide 35: Spotlight

Slide 36: Spotlight function runTour() { var wT = new nitobi.spotlight.Spotlight('GREYSWIPE', 'impact', 'round'); wT.createCalloutStep(null, 'Centered', 'By not providing a DOM ID or object to a callout step, you create a centered callout in the tour.'); wT.createCalloutStep('corgi', 'Attached to an Image!', 'You can attach a callout to an object by providing the ID.');wT.createCalloutStep(null, 'Centered', 'The Nitobi Tabstrip is a fully skinnable tab component that can load data from Ajax requests, iFrames, or just to trigger JavaScript events.'); wT.createCalloutStep('fatmanatee', 'Scrolling is Automatic', 'Spotlight will automatically scroll an object into view. You can turn this off by setting the allowScrolling attribute to <u>false</u>.'); wT.createCalloutStep('toocute', 'Each item occurs in Sequence', 'Each item will occur in sequence according to the order in which they were scripted.'); wT.createCalloutStep('fatmanatee', '', 'Its not necessary to have titles in callouts. In this example we simply specified an empty string as the title ('').'); wT.play(); }

Slide 38: Going to the Desktop

Slide 39: Going to the Desktop • Preview in Air

Slide 40: Going to the Desktop • Preview in Air • Package as AIR

Slide 41: Going to the Desktop • Preview in Air • Package as AIR • Uses AIR SDK as Extension

Slide 42: Going to the Desktop • Preview in Air • Package as AIR • Uses AIR SDK as Extension • Creates Application Descriptor File

Slide 43: RoadMaps

Slide 44: RoadMaps • Nitobi • Support for more frameworks • Better theming

Slide 45: RoadMaps • Nitobi • Support for more frameworks • Better theming • xtend.us • YUI, MooTools...

Slide 46: RoadMaps • Nitobi • Support for more frameworks • Better theming • xtend.us • YUI, MooTools... • Adobe?

Slide 47: Questions? Free Stuff: 1. Free Book: Enterprise Ajax 2. Free Dreamweaver License 3. Free Nitobi CompleteUI License andre@nitobi.com - blogs.nitobi.com - www.insideria.com