WEB428 WEB428 ASP.NET 2.0: ASP.NET 2.0: Advanced Server Controls and Advanced Server Controls and Web Parts with ASP.NET 2.0 Web Parts with ASP.NET 2.0

Andres SanabriaAndres SanabriaProgram ManagerProgram ManagerWeb Platform and Tools Team Web Platform and Tools Team Microsoft CorporationMicrosoft Corporation

AgendaAgenda

Control Framework overviewControl Framework overviewComposite control Composite control ScriptOMScriptOMFocusFocusWeb resourcesWeb resourcesScript callbackScript callbackAsynchronous tasksAsynchronous tasksWeb Parts – Connection Web Parts – Connection Web Parts – Editing Web Parts – Editing Web Parts – Personalization Web Parts – Personalization Web Parts – Chrome Web Parts – Chrome

Control Framework OverviewControl Framework Overview

Rich framework to enable building “smart” Rich framework to enable building “smart” server controlsserver controls

Preserves existing knowledge and Preserves existing knowledge and compatibilitycompatibility

Same model as v1, but enables much moreSame model as v1, but enables much more

Simplifies development with more functional Simplifies development with more functional base classes targeting common scenariosbase classes targeting common scenarios

Incorporates learning and general Incorporates learning and general recommended patternsrecommended patterns

Provides new services and framework Provides new services and framework featuresfeatures

Composite ControlsComposite Controls

Powerful way to create new controls by Powerful way to create new controls by combining the functionality of one or more combining the functionality of one or more existing controlsexisting controls

CompositeControl base class simplifies CompositeControl base class simplifies developmentdevelopment

New base class introduced in New base class introduced in Microsoft ASP.NET 2.0Microsoft ASP.NET 2.0

Incorporates recommended pattern Incorporates recommended pattern Implements INamingContainerImplements INamingContainer

Overrides Controls property to call Overrides Controls property to call EnsureChildControls()EnsureChildControls()

Associated designer ensures child controls are Associated designer ensures child controls are created at design-time as wellcreated at design-time as well

Creating a Composite ControlCreating a Composite Control

Script OMScript OM

Provides new features such as: Provides new features such as: DefaultButtonDefaultButtonMaintain scroll position on PostbackMaintain scroll position on PostbackFocus, Setfocusonerror (for validator)Focus, Setfocusonerror (for validator)Web resources Web resources Out-of-band callbacksOut-of-band callbacks

Generate and render client-script Generate and render client-script Valid XHTML <script> tagsValid XHTML <script> tagsProvides API to register inline script or reference a *.js fileProvides API to register inline script or reference a *.js file

Available via Page.ClientScript objectAvailable via Page.ClientScript object

public void RegisterStartupScript(public void RegisterStartupScript( Type type, string key, string script, bool addScriptTags);Type type, string key, string script, bool addScriptTags);public void RegisterClientScriptInclude(public void RegisterClientScriptInclude( Type type, string key, string url);Type type, string key, string url);

Define which control receives focus: Define which control receives focus: Client sideClient side

Server sideServer side

Controls can override to delegate focus Controls can override to delegate focus to a child control if they want explicit to a child control if they want explicit controlcontrol

FocusFocus

<form defaultfocus="foo1“<form defaultfocus="foo1“ .. .. >>Public void Page.SetFocus(..);Public void Page.SetFocus(..);SetFocusonError;SetFocusonError;

Control.Focus(..)Control.Focus(..)

Creating a Control that Creating a Control that Focus of the PageFocus of the Page

Web ResourcesWeb Resources

Simple deployment model of client filesSimple deployment model of client filesPackage scripts, images, style sheets, etc. as assembly Package scripts, images, style sheets, etc. as assembly resourcesresources

Instead of installing files into the “aspnet_client” folderInstead of installing files into the “aspnet_client” folder

ASP.NET does the work of serving up the ASP.NET does the work of serving up the contentcontent

Extracts data from the assembly resourceExtracts data from the assembly resource

Secure – all assembly resources do not automatically Secure – all assembly resources do not automatically become Web-accessiblebecome Web-accessible

Selects the right response caching for performanceSelects the right response caching for performance

[assembly: WebResource(“foo.image.bmp","image/gif")][assembly: WebResource(“foo.image.bmp","image/gif")]

img.ImageUrl = Page.ClientScript.GetWebResourceUrlimg.ImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ExtendedTextBox.CoffeeBean.bmp");(this.GetType(), "ExtendedTextBox.CoffeeBean.bmp");

Embed Image and Script Embed Image and Script Resource into a Custom ControlResource into a Custom Control

Script CallbacksScript Callbacks

Improves UI experienceImproves UI experiencePage is interactive while the server processes Page is interactive while the server processes requestrequest

No browser flashing or loss of scroll positionNo browser flashing or loss of scroll position

Does not add to the navigation historyDoes not add to the navigation history

Control developer writes some Control developer writes some additional codeadditional code

Modeled after post-back event handlingModeled after post-back event handling

Also implements a script callback functionAlso implements a script callback function

Page framework handles partial page Page framework handles partial page executionexecution

Click

InitInitLoad StateLoad StateProcess Postback Process Postback

DataDataLoadLoad

Callback EventCallback Event

ICallbackEventHandlerICallbackEventHandler

Script Event HandlerScript Event Handler

Script CallbackScript Callback

TriggerTriggerAsync RequestAsync Request

Return result ofReturn result ofCallbackCallback

UnloadUnload

CallbacksCallbacks

Develop a TextFilter Develop a TextFilter Out-of-Band ControlOut-of-Band Control

Asynchronous TaskAsynchronous Task

Allow a container to register an Allow a container to register an asynchronous task to the page asynchronous task to the page

Container will be notified when task Container will be notified when task completed, time-out or endedcompleted, time-out or ended

Time Out is defined at the page Time Out is defined at the page directivedirective

Control developers can alter the Control developers can alter the rendering based on the async task rendering based on the async task resultresult

Control StateControl State

The essential bits of information to allow controls to The essential bits of information to allow controls to ensure expected behaviorensure expected behavior

E.g., SelectedIndex, EditIndex, PageIndex on GridView; E.g., SelectedIndex, EditIndex, PageIndex on GridView; ReadOnly property on HtmlEditorReadOnly property on HtmlEditor

Separated out of view stateSeparated out of view statePage developer can turn off view state without losing Page developer can turn off view state without losing functionalityfunctionality

Control state cannot be turned offControl state cannot be turned off

Controls must opt-in to participate in this Controls must opt-in to participate in this mechanismmechanism

Should store only the essentials, so control state doesn’t Should store only the essentials, so control state doesn’t become another view statebecome another view state

Properties stored in control state should not be saved in Properties stored in control state should not be saved in view state as wellview state as well

Adding Async Task to the Adding Async Task to the TextFilter ControlTextFilter Control

Web Parts: ConnectionWeb Parts: Connection

InterfaceInterfaceDefines the communication contract between two Defines the communication contract between two Web partsWeb parts

Connection typesConnection typesProvider Provider

Control that provides data and schema informationControl that provides data and schema information

Implements a provider connection pointImplements a provider connection pointDefines a call back that returns an instance of the interface Defines a call back that returns an instance of the interface

One provider connection point can connect to any number of One provider connection point can connect to any number of consumer connection points of the same typeconsumer connection points of the same type

Consumer Consumer Control that gets data Control that gets data

Implements a consumer connection pointImplements a consumer connection pointDefines a call back that gets an instance of the interface Defines a call back that gets an instance of the interface

One consumer connection point can connect to only one provider One consumer connection point can connect to only one provider connection points of the same typeconnection points of the same type

Web Parts: Connection (cont’d)Web Parts: Connection (cont’d)

1.1. Web Part Manager Web Part Manager request interface request interface to the providerto the provider

2.2. Web Part Manager Web Part Manager get an interface get an interface from a providerfrom a provider

3.3. Web Part manager Web Part manager give the interface give the interface to the consumerto the consumer

4.4. Consumer call Consumer call provider via provider via interface interface

ProviderProvider ConsumerConsumer

WebPartManagerWebPartManager

11

22 33

44

Web Parts: Connection (cont’d)Web Parts: Connection (cont’d)

Dynamic connections are done via the Dynamic connections are done via the browserbrowser

Static connections are defined by the Static connections are defined by the page developerpage developer

Implementing Connection Implementing Connection Capabilities to the Capabilities to the Text FilterControlText FilterControl

Web Parts: EditingWeb Parts: Editing

Auto-generated user interfaceAuto-generated user interface[WebBrosable][WebBrosable]

[WebDisplayName][WebDisplayName]

[WebDescription][WebDescription]

Web Part can add a custom EditorPart to the Web Part can add a custom EditorPart to the EditorZoneEditorZone

Implement IWebEditable in the controlImplement IWebEditable in the controlReturn a collection of the Editor PartsReturn a collection of the Editor Parts

EditorPartCollection CreateEditorParts();EditorPartCollection CreateEditorParts();

Create an EditorPartCreate an EditorPartCreate a class that Inheritance from EditorPartCreate a class that Inheritance from EditorPart

Override:Override:Public abstract void SyncChanges();Public abstract void SyncChanges();

Protected internal abstract bool ApplyChanges();Protected internal abstract bool ApplyChanges();

Adding an Editing UI to the Adding an Editing UI to the TextFilter ControlTextFilter Control

Web Parts: PersonalizationWeb Parts: Personalization

Personalization scopePersonalization scopeSharedShared

Per-userPer-user

Personalizing dataPersonalizing dataAutomaticAutomatic

Add [WebPersonalization] decoration to propertiesAdd [WebPersonalization] decoration to properties

Must have a public get and set accessor , and take no Must have a public get and set accessor , and take no index parametersindex parameters

ManualManualImplement IPersonsonalizableImplement IPersonsonalizable

Provide fine-grained control over how control Provide fine-grained control over how control personalization data is get/setpersonalization data is get/set

Web Parts: Personalization (cont’d)Web Parts: Personalization (cont’d)

Receives notification about the Receives notification about the orphaned properties orphaned properties

Manager property persistence when Manager property persistence when upgrades to existing controlsupgrades to existing controls

Implement Implement IVersioningPersonsonalizableIVersioningPersonsonalizable

If a Web part does not implement If a Web part does not implement IVersioningPersonalizable, orphaned IVersioningPersonalizable, orphaned property values will be deleted property values will be deleted

Adding Personalization and Adding Personalization and Web Part VersioningWeb Part Versioning

TitleTitleTitleTitle VerbsVerbsVerbsVerbs

ChromeChromeChromeChromeContentContentContentContent

TitleIconTitleIconTitleIconTitleIcon

Web Parts: ChromeWeb Parts: Chrome

Developer can create a new Web part Developer can create a new Web part rendering rendering

Create a chrome classCreate a chrome class

Associate the chrome class to the Associate the chrome class to the WebPartZoneWebPartZone

All Web Parts contained in a All Web Parts contained in a WebPartZone will use the same chromeWebPartZone will use the same chrome

Adding a New Chrome to the Adding a New Chrome to the Web Part ApplicationWeb Part Application

SummarySummary

Building control and advance features Building control and advance features could not be easiercould not be easier

Take Advantage of the new powerful Take Advantage of the new powerful framework features framework features

Building control and advance features Building control and advance features could not be easiercould not be easier

Take Advantage of the new powerful Take Advantage of the new powerful framework features framework features

Your FeedbackYour Feedbackis Important!is Important!Please Fill Out a Survey forPlease Fill Out a Survey forThis Session on CommNetThis Session on CommNet

© 2005 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.