Ajax Development For the Masses

Andre Charland, CEO, Nitobi

+ Ajax

This Talk

• About Me and Nitobi

• Dreamweaver

• Ajax Frameworks

• Coding and Components

André Charland

About Nitobi

About Nitobi

Nitobi Customers

About Dreamweaver

• Best tool for mutliplatform visual Ajax development

• Everyone’s using it;)

Users From Nitobi

From Ajaxian

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

Designers and Developers

• Both are important

• One and the same

• Protecting each other

Ajax in Dreamweaver

http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Ajax in Dreamweaver

http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Ajax in Dreamweaver

http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Ajax in Dreamweaver

http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Ajax in Dreamweaver

http://xtnd.us/ http://www.spket.com/dreamweaver-extension.html http://labs.adobe.com/technologies/spry/

Code Hinting jQuery

Code Hinting ExtJS

WYSIWYG-K

• Kind Of...

• Drag and Drop Development

• Databinding

• Wizards (This is the key to no code)

WYSIWYG-K

• Kind Of...

• Drag and Drop Development

• Databinding

• Wizards (This is the key to no code)

NOT A

BROWSER

Sets Up Assets

• HTML (Declaration)

• JavaScript

• CSS

• Images

Spry

• Data

• Widgets

• Effects

Spry Something

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

Nitobi Components

Simple Grid

Composite Components

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" >

Fisheye Menu

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>

Tab

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>

Tree

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>

Spotlight

Spotlightfunction 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();

}

Going to the Desktop

Going to the Desktop

• Preview in Air

Going to the Desktop

• Preview in Air

• Package as AIR

Going to the Desktop

• Preview in Air

• Package as AIR

• Uses AIR SDK as Extension

Going to the Desktop

• Preview in Air

• Package as AIR

• Uses AIR SDK as Extension

• Creates Application Descriptor File

RoadMaps

RoadMaps

• Nitobi

• Support for more frameworks

• Better theming

RoadMaps

• Nitobi

• Support for more frameworks

• Better theming

• xtend.us

• YUI, MooTools...

RoadMaps

• Nitobi

• Support for more frameworks

• Better theming

• xtend.us

• YUI, MooTools...

• Adobe?

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