Real-World AJAX Seminar - March 13, 2006 Bringing the Richness and Responsiveness of Desktop Applications to the Web Sahil Malik telerik Technical Evangelist Microsoft MVP

Who 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.) ●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 Architecture CIO IT Worker

●95 – 00 – The Web Explosion The Challenge of Architecture CIO IT Worker

●00 – Recently – Bastardizing HTML The Challenge of Architecture CIO and IT Worker

The HTML Donkey The HTML Donkey Today’s Applications Customer + Management + IT Workers

Welcome 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. HTML

CIO and IT Worker BUT...

AJAX is 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 framework

Built-in AJAX support in data-intensive components The telerik AJAX framework AJAX Panel AJAX Manager Auxiliary AJAX components: Timer, ImageMap

The 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 Panel

The 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. AJAX Panel

The telerik AJAX Offering Demo

Did you see... ? ●Any JavaScript? ●Any code at all? ●Any learning curve?

The 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 AJAX Panel

The 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). AJAX Panel

The 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 AJAX Panel

The telerik AJAX Panel – Design AJAX 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 play AJAX Panel 2 AJAX Panel 3

The 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 thisTo update this Click this To update this...and this ●Advanced web-applications (e.g. systems, CRM, etc.) require even more complex behavior Click this To update this ●Implementing such inter- activity with AJAX is a real nightmare and extremely time consuming.

The 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 update this...and this

The 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

The telerik AJAX Manager Demo

The 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). Click this To update this

The 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 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 components

Customer spotlight – Mobilis Technologies AJAX-enabled Web Workflow Application Framework Featuring telerik r.a.d.controls

The telerik clients

Thank you Live demos and slides from this presentation available at: