www.telerik.com/ajax real-world ajax seminar - march 13, 2006 bringing the richness and...

www.telerik.com/ajax

Real-World AJAX Seminar - March 13, 2006

Bringing the Richness and Responsiveness of Desktop Applications to the Web

Sahil Maliktelerik Technical Evangelist

Microsoft MVP


Who is telerikWho is telerik

● telerik is a leading vendor of reusable UI components for the Microsoft .NET Framework

● Helping developers “deliver more than expected”

● Industry-best products with numerous awards like r.a.d.editor and r.a.d.grid


Who is telerik (cont.)Who is telerik (cont.)

● We implemented AJAX features in some of our components (treeview and combobox) even before this technology had a name (back in 2004)

● We called it “Load On Demand”


● 70s – 95 – Monolithic Applications

The Challenge of ArchitectureThe Challenge of Architecture

CIO

IT Worker


● 95 – 00 – The Web Explosion


CIO

IT Worker


● 00 – Recently – Bastardizing HTML


CIO andIT Worker


The HTML DonkeyThe HTML Donkey

TheHTML

Donkey

Today’s Applications

Customer +

Management +

IT Workers


Welcome AJAXWelcome AJAX

● Rich applications in Modern Browsers

● No issues with installation

● No issues with trust boundaries, Certificates, etc. etc.

● Built upon existing infrastructure – TCP/IP, XML, HTTP, SSL, etc.

● No more dreaded page refreshes.


Candid Photo of Mr. HTMLCandid Photo of Mr. HTML


CIO and IT WorkerCIO and IT Worker

BUT. . .


AJAX is Hard !!!AJAX is Hard !!!


Why is AJAX hard?Why is AJAX hard?

● Requires extensive JavaScript skills – client-side scripting is at the heart of AJAX apps

– It’s like debugging multi-threaded JavaScript.

● Breaks the normal page life cycle.

● Every browser wants to do AJAX differently.

● Possible security issues (With IE).


Making AJAX Easy !!Making AJAX Easy !!


The telerik AJAX frameworkThe telerik AJAX framework


Built-in AJAX support in data-intensive componentsBuilt-in AJAX support in data-intensive components

The telerik AJAX frameworkThe telerik AJAX framework

AJAX PanelAJAX Panel AJAX Manager

Auxiliary AJAX components: Timer, ImageMap


The telerik AJAX Panel – what it isThe telerik AJAX Panel – what it is

● Universal AJAX-enabling container

● Causes any ASP.NET component(s) placed inside the panel to start making AJAX callbacks instead of traditional postbacks

● The content of the Panel is updated automatically after the server response

AJAX PanelAJAX Panel


The telerik AJAX Panel – how it worksThe telerik AJAX Panel – how it works

● The AJAX Panel “fools” the components inside it and makes them think that a normal postback has taken place.

● Neither the page nor the individual controls know that this is actually an AJAX request.



The telerik AJAX OfferingDemo


Did you see ... ?Did you see ... ?

● Any JavaScript?

● Any code at all?

● Any learning curve?


The telerik AJAX Panel – benefitsThe telerik AJAX Panel – benefits

● As a result you get all the benefits of AJAX:

– Swift performance– No page refreshes– Better user experience

● Without struggling with the traditional drawbacks of AJAX:

– Broken page life-cycle– Form data not sent to the server– Corrupt ViewState



The telerik AJAX Panel – more benefitsThe telerik AJAX Panel – more benefits

● Due to the fact that the controls think they work in their natural mode (postback mode):

– Values are properly reflected on the server

– Page life-cycle is preserved

– Control ViewState is preserved

● Any JavaScript inside the Panel is preserved and properly executed (needed for elements with rich client-side functionality).



The telerik AJAX Panel – .. and more benefitsThe telerik AJAX Panel – .. and more benefits

● You can wrap more than one page elements in 1 panel to have them updated at once

● You can wrap whole web-pages and make them work in AJAX mode

● You can wrap and AJAX-enable components with rich client-side functionality



The telerik AJAX Panel – DesignThe telerik AJAX Panel – Design

AJAX Panel 1AJAX Panel 1

● The AJAX Panel affects only the content that is enclosed in it. In other words, you can’t update content that is in another AJAX panel or elsewhere on the page.

● This is where the telerik AJAX Manager comes into playAJAX Panel 2AJAX Panel 2

AJAX Panel 3AJAX Panel 3


The telerik AJAX Manager – what is itThe telerik AJAX Manager – what is it

● Most web-sites require advanced interactivity between the page elements (e.g. click one element and update the content of another)

Click this To update this

Click this

To updatethis

...and this

● Advanced web-applications (e.g. E-mail systems, CRM, etc.) require even more complex behavior

Clickthis

To updatethis

● Implementing such inter-activity with AJAX is a real nightmare and extremely time consuming.


The telerik AJAX Manager – what is itThe telerik AJAX Manager – what is it

● Telerik AJAX Manager is a component that defines and controls the interconnection among page elements, i.e. which element updates other(s).

● This is done completely in a declarative manner or in design time with a convenient visual builder.

Click this

To updatethis

...and this


The telerik AJAX Manager – how it worksThe telerik AJAX Manager – how it works

1. Drop the AJAX Manager on the form and open the visual builder.

2. Select a page element that needs to initiate the AJAX request

3. Select which element(s) has to be updated.

1

1

2

2

3

3


The telerik AJAX ManagerDemo


The telerik AJAX Manager – benefitsThe telerik AJAX Manager – benefits

● You do not have to modify the logic of your application:

– if you have a postback-based app you only have to place the AJAX manager and define the interconnections among the page elements

● All other benefits found in the AJAX Panel:– page life-cycle is preserved– form data (values) are reflected on the

server– ViewState is preserved– client scripts are preserved (you still have

to wrap 3rd party components into AJAX Panels but that’s easy).

Clickthis

To updatethis


The telerik AJAX Manager – when to useThe telerik AJAX Manager – when to use

● The telerik AJAX Manager allows developers to build very sophisticated AJAX-enabled web applications, similar to Outlook Web Access

● Don’t believe it? See for yourself.


The telerik HelpDesk Sample Application

Demo


Built-in AJAX support in other telerik componentsBuilt-in AJAX support in other telerik components

● Data-intensive telerik components (grid, combobox, treeview, etc.) have build-in AJAX support

● Allows you to work with huge data structures without degradation in performance

● Changing behavior from non-AJAX to AJAX is as easy as setting a property.

Built-in AJAX support in data-intensive componentsBuilt-in AJAX support in data-intensive components


Customer spotlight – Mobilis TechnologiesCustomer spotlight – Mobilis TechnologiesAJAX-enabled Web Workflow Application FrameworkAJAX-enabled Web Workflow Application Framework

Featuring telerik r.a.d.controlsFeaturing telerik r.a.d.controls

http://www.MobilisTech.comhttp://www.MobilisTech.com


The telerik clientsThe telerik clients


Thank youThank you

Live demos and slides from this presentation available at:

www.telerik.com/AjaxSeminar

www.telerik.com/ajax real-world ajax seminar - march 13, 2006 bringing the richness and...

Documents