Introduction to Introduction to ASP.NET 2.0 Web Part ASP.NET 2.0 Web Part Framework Framework

David BarkolDavid BarkolWebcast PresenterWebcast PresenterNeudesic, LLC.Neudesic, LLC.http://weblogs.asp.net/davidbarkol http://weblogs.asp.net/davidbarkol

AgendaAgenda

Web Part FrameworkWeb Part Framework

PortalsPortals

Connecting Web PartsConnecting Web Parts

DemosDemos

MicrosoftMicrosoft®® ASP.NET AJAX and Web Parts ASP.NET AJAX and Web Parts

ResourcesResources

Web Parts Framework (1)Web Parts Framework (1)ControlsControls

MicrosoftMicrosoft®® ASP.NET version 2.0 provides ASP.NET version 2.0 provides three types of controls: three types of controls: custom controlscustom controls, , user user controls,controls, and and Web PartsWeb Parts

Custom controls: Code-intensive way to Custom controls: Code-intensive way to create components. Shared among projects create components. Shared among projects or sites.or sites.

User controls: Easier to develop UI. Can’t be User controls: Easier to develop UI. Can’t be shared among projects or Web sites. Can’t shared among projects or Web sites. Can’t inherit from other ASP.NET controls.inherit from other ASP.NET controls.

Web Parts Framework (2)Web Parts Framework (2)

Web Parts:Web Parts:An extension of custom controls with the An extension of custom controls with the flexibility and user controlsflexibility and user controls

Provide the foundation for both Provide the foundation for both customization and personalizationcustomization and personalization

Connections between componentsConnections between components

SharePoint and Portals (1)SharePoint and Portals (1)Windows SharePoint ServicesWindows SharePoint Services

Web Parts first appeared in previous versions Web Parts first appeared in previous versions of Windowsof Windows®® SharePoint SharePoint®® Services: Services:

Coupled with MicrosoftCoupled with Microsoft®® SQL Server™ and the SQL Server™ and the Active DirectoryActive Directory® ® directory service directory service

Could not implement as user controlCould not implement as user control

Designed to deal with serialization, storage, and Designed to deal with serialization, storage, and retrieval of customization and personalization retrieval of customization and personalization data behind the scenesdata behind the scenes

SharePoint and Portals (2)SharePoint and Portals (2)Portal AttributesPortal Attributes

Common traits of popular portals:Common traits of popular portals:Ability to customize contentAbility to customize content

Ability to personalize contentAbility to personalize content

Pageflakes.com, My.Yahoo.com, Google, Pageflakes.com, My.Yahoo.com, Google, My.MSN.com, etc.My.MSN.com, etc.

Puts user in controlPuts user in control

Sample PortalSample Portal

Demonstration OneDemonstration One

PortalsPortals

Web Parts Framework (1)Web Parts Framework (1)Key ComponentsKey Components

FrameworkFramework for building portal-style for building portal-style applicationsapplications

Patterned after MicrosoftPatterned after Microsoft®® Office SharePoint Office SharePoint®® Portal ServerPortal Server

System.Web.UI.WebControls.WebPartsSystem.Web.UI.WebControls.WebParts

RichRich UIs with minimal code UIs with minimal codeEdit page layout using drag-and-dropEdit page layout using drag-and-drop

Edit appearance and behavior and moreEdit appearance and behavior and more

PersonalizationPersonalization capabilities capabilities

Web Parts Framework (2)Web Parts Framework (2)Key ComponentsKey Components

IntercommunicationIntercommunication ("connections") ("connections")Static Static – Enables you to declaratively specify the – Enables you to declaratively specify the connections in a page connections in a page

Dynamic Dynamic – Can be created by a user at run time – Can be created by a user at run time

ScopeScopeShared – Shared – Customization for all usersCustomization for all users

User – User – Personalization per userPersonalization per user

Web Parts Framework (3) Web Parts Framework (3) The WebPartManager ControlThe WebPartManager Control

OrchestratesOrchestrates operation of Web Parts operation of Web PartsMaintains list of Web Parts and zonesMaintains list of Web Parts and zones

Manages page state (for example, display mode) Manages page state (for example, display mode) and fires events when page state changesand fires events when page state changes

Facilitates communication between Web PartsFacilitates communication between Web Parts

Manages personalizationManages personalization

One instanceOne instance per page; per page; No UINo UI

<asp:WebPartManager ID="WebPartManager1“ runat="server" /><asp:WebPartManager ID="WebPartManager1“ runat="server" />

The WebPartZone ControlThe WebPartZone Control

Defines zones on a Web Parts pageDefines zones on a Web Parts page

Defines default layout and appearance of Defines default layout and appearance of Web Parts within each zoneWeb Parts within each zone

<asp:WebPartZone ID="WeatherZone"<asp:WebPartZone ID="WeatherZone" DragHighlightColor="244,198,96" RunAt="server">DragHighlightColor="244,198,96" RunAt="server"> <PartTitleStyle BackColor="#2254B1" ForeColor="White" /><PartTitleStyle BackColor="#2254B1" ForeColor="White" /> <PartStyle BorderColor="#81AAF2" BorderStyle="Solid" <PartStyle BorderColor="#81AAF2" BorderStyle="Solid" BorderWidth="1px" />BorderWidth="1px" /> <ZoneTemplate><ZoneTemplate> <!-- Web Parts declared here --><!-- Web Parts declared here --> </ZoneTemplate></ZoneTemplate></asp:WebPartZone></asp:WebPartZone>

Web Parts Framework (1) Web Parts Framework (1) Example of Web Part ZonesExample of Web Part Zones

Zone #1Zone #1

Zone #2Zone #2

Web Parts Framework (2) Web Parts Framework (2) Web PartsWeb Parts

Controls defined in a WebPartZoneControls defined in a WebPartZoneWeb controls, user controls, custom controlsWeb controls, user controls, custom controls

Controls that don't implement Controls that don't implement IWebPartIWebPart are are internally wrapped in internally wrapped in GenericWebPartsGenericWebParts

Adds properties: Title, Description, etc.Adds properties: Title, Description, etc.

<ZoneTemplate><ZoneTemplate> <asp:Calendar Title="Calendar" ID="Calendar1" RunAt="server" /><asp:Calendar Title="Calendar" ID="Calendar1" RunAt="server" /> <user:Weather Title="Weather" ID="Weather1" RunAt="server" /><user:Weather Title="Weather" ID="Weather1" RunAt="server" /> <custom:Search Title="Search" ID="Search1" RunAt="server" /><custom:Search Title="Search" ID="Search1" RunAt="server" /></ZoneTemplate></ZoneTemplate>

Demonstration TwoDemonstration Two

Web Part FrameworkWeb Part Framework

Web Parts Framework (1)Web Parts Framework (1)Display ModesDisplay Modes

BrowseDisplayModeBrowseDisplayMode Standard view mode. No Standard view mode. No personalization or editing.personalization or editing.

DesignDisplayModeDesignDisplayMode Enables drag-and-drop layout Enables drag-and-drop layout personalization or personalization or customizationcustomization

EditDisplayModeEditDisplayMode Enables personalization or Enables personalization or customization of Web Part customization of Web Part propertiesproperties to change to change appearanceappearance and and behaviorbehavior. . Allows user to delete Allows user to delete dynamically added Web Parts.dynamically added Web Parts.

ConnectDisplayModeConnectDisplayMode Enables user to connect Web Enables user to connect Web Parts at run timeParts at run time

CatalogDisplayModeCatalogDisplayMode Enables users to add Web Enables users to add Web Parts at run timeParts at run time

Web Parts Framework (2)Web Parts Framework (2)Customization ControlsCustomization Controls

Controls that are used to customize other controls are Controls that are used to customize other controls are called called partsparts

Edit Parts (EditDisplayMode):Edit Parts (EditDisplayMode):PropertyGridEditorPartPropertyGridEditorPart

AppearanceEditorPartAppearanceEditorPart

BehaviorEditorPartBehaviorEditorPart

LayoutEditorPartLayoutEditorPart

Catalog Parts (CatalogDisplayMode):Catalog Parts (CatalogDisplayMode):PageCatalogPart – lists of closed Web PartsPageCatalogPart – lists of closed Web Parts

DeclarativeCatalogPart – lists Web Parts that can be DeclarativeCatalogPart – lists Web Parts that can be addedadded

Demonstration ThreeDemonstration Three

Customization ControlsCustomization Controls

Connecting Web Parts (1)Connecting Web Parts (1)

Web Parts can Web Parts can communicatecommunicateProvider publishes interfaceProvider publishes interface

Consumer uses interface to retrieve dataConsumer uses interface to retrieve data

WebPartManagerWebPartManager manages connections manages connectionsRetrieves interfaces from providersRetrieves interfaces from providers

Provides interfaces to consumersProvides interfaces to consumers

Connections can be Connections can be staticstatic or or dynamicdynamicConnectionsZone provides UI for latterConnectionsZone provides UI for latter

Connecting Web Parts (2)Connecting Web Parts (2)Connection ProvidersConnection Providers

Implements Implements Method Method that returns interfacethat returns interface

Method attributed Method attributed [ConnectionProvider][ConnectionProvider]

[ConnectionProvider ("Zip Code", "ZipCodeProvider")][ConnectionProvider ("Zip Code", "ZipCodeProvider")]public IZipCode GetZipCodeInterface ()public IZipCode GetZipCodeInterface (){{ return this; // Assumes control implements IZipCodereturn this; // Assumes control implements IZipCode}}

// IZipCode.GetZipCode implementation// IZipCode.GetZipCode implementationpublic string GetZipCode ()public string GetZipCode (){{ return _zip;return _zip;}}

Connecting Web Parts (3)Connecting Web Parts (3)Connection ConsumersConnection Consumers

Implements Implements Method Method that receives interfacethat receives interface

Method attributed Method attributed [ConnectionConsumer][ConnectionConsumer]

[ConnectionConsumer ("Zip Code", "ZipCodeConsumer")][ConnectionConsumer ("Zip Code", "ZipCodeConsumer")]public void GetIZipCodeInterface (IZipCode provider)public void GetIZipCodeInterface (IZipCode provider){{ string zip = provider.GetZipCode (); // Get zip from providerstring zip = provider.GetZipCode (); // Get zip from provider ......}}

Connecting Web Parts (4)Connecting Web Parts (4)Web Part ConnectionsWeb Part Connections

1.1. WebPartManager calls WebPartManager calls [ConnectionProvider] [ConnectionProvider] methodmethod

2.2. WebPartManager WebPartManager receives provider receives provider interface in returninterface in return

3.3. WebPartManager calls WebPartManager calls [ConnectionConsumer] [ConnectionConsumer] method, passing method, passing interface to consumerinterface to consumer

4.4. Consumer calls Consumer calls provider using supplied provider using supplied interfaceinterface

WebPartManagerWebPartManagerWebPartManagerWebPartManager

ProviderProviderProviderProvider ConsumerConsumerConsumerConsumer44

1133

22

Demonstration FourDemonstration Four

Connecting Web PartsConnecting Web Parts

ASP.NET AJAX and Web PartsASP.NET AJAX and Web Parts

Cross-browser drag-and-drop supportCross-browser drag-and-drop support

Richer user experienceRicher user experience

Partial-page updatesPartial-page updates

Demonstration FiveDemonstration Five

ASP.NET AJAX and Web PartsASP.NET AJAX and Web Parts

ResourcesResources

ASP.NET Forums: ASP.NET Forums: http://forums.asp.net/145/ShowForum.aspxhttp://forums.asp.net/145/ShowForum.aspx

www.manning.com www.manning.com

david.barkol@neudesic.comdavid.barkol@neudesic.com

http://weblogs.asp.net/davidbarkolhttp://weblogs.asp.net/davidbarkol

ASP.NET 2.0 Web Parts in Action,Darren Neimke, (Manning Publications, 2006)

ASP.NET 2.0 Web Parts in Action,Darren Neimke, (Manning Publications, 2006)

ASP.NET AJAX in Action,Alessandro Gallo, David Barkol, and Rama Vavilala,(Manning Publications, 2007)

ASP.NET AJAX in Action,Alessandro Gallo, David Barkol, and Rama Vavilala,(Manning Publications, 2007)

Questions and AnswersQuestions and Answers

Submit text questions using the “Ask” button. Submit text questions using the “Ask” button.

Don’t forget to fill out the survey.Don’t forget to fill out the survey.

For upcoming and previously live webcasts: For upcoming and previously live webcasts: www.microsoft.com/webcastswww.microsoft.com/webcasts

Got webcast content ideas? Contact us at: Got webcast content ideas? Contact us at: http://go.microsoft.com/fwlink/?LinkId=41781http://go.microsoft.com/fwlink/?LinkId=41781

Today's webcast was presented using MicrosoftToday's webcast was presented using Microsoft®® Office Live Meeting. Get a free 14-day trial by Office Live Meeting. Get a free 14-day trial by visiting: visiting: www.microsoft.com/presentlivewww.microsoft.com/presentlive