Developing An Advanced ASP.NET Server Control With Rich Design-Time

Document Sample
Developing An Advanced ASP.NET Server Control With Rich Design-Time Powered By Docstoc
					                            Sofia, Bulgaria | 9-10 October




 Developing An Advanced
ASP.NET Server Control With
     Rich Design-Time
            Goksin Bakir
              Yage Ltd
  Microsoft Regional Director, MEA
Developing ASP.NET 2.0 Server Controls
Agenda
● Rich UI
   ●   Master Pages
   ●   Themes and Skins
   ●   Smart Clients
● Scenario
   ●   Real estate company web site requires rich controls to enable a
       variety of custom scenarios
● Solution
   ●   PhotoViewer: Allows a user to navigate through a collection of
       photos for a given listing
   ●   MultiList: Allows a user to view real estate listings in a
       geographical region
● We will cover
   ●   Runtime: Composition, state management, callbacks,
       web resources, script handling, and data bound controls
   ●   Design-time: Region-editing, task-based editing, painting, host
       services


                                                       Sofia, Bulgaria | 9-10 October
                             Master Page Basics
● Masters define common content and
  placeholders
  (<asp:ContentPlaceHolder>)
● Content pages reference masters and
  fill placeholders with content
  (<asp:Content>)
  Site.master    default.aspx  http://.../default.aspx
   <%@ Master %>                <%@ Page MasterPage-
                                 File="Site.master" %>

                                <asp:Content
   <asp:ContentPlaceHolder       ContentPlaceHolderID=
    ID="Main"                    "Main" RunAt="server" />
    RunAt="server" />




                                </asp:Content>



                                                            Sofia, Bulgaria | 9-10 October
            Themes and Skins

● Mechanism for theming controls, pages,
  and sites by group-initializing control
  properties
● Skin = Visual attributes for control(s)
  ● Physically stored in .skin files
  ● Default skins and named skins
● Theme = Collection of one or more skins
  ● Physically stored in Themes subfolders
  ● Global themes and local themes     Sofia, Bulgaria | 9-10 October
                       Applying a Theme to a
                       Page
<%@ Page Theme="BasicBlue">




Before                        After




                                      Sofia, Bulgaria | 9-10 October
                Local Themes

 ASP.NET-
ClientFiles
                                   Theme name =
                                   Subdirectory name

              Themes



                                        SKIN
                       BasicBlue         SKIN




                                        SKIN
                        Smoke-
                                         SKIN
                       AndGlass


                                                Sofia, Bulgaria | 9-10 October
          Global Themes

vroot
                             Theme name =
                             Subdirectory name

        Themes



                                  SKIN
                 Shocking-
                                   SKIN
                   Pink



                                  SKIN
                 Autumn-
                                   SKIN
                  Leaves


                                          Sofia, Bulgaria | 9-10 October
           Smart Client Features

● Offline capable
  ● Cache online data
  ● Update when connected
  ● Datasets in smart documents
● Intelligent deployment and update
  ● Easy non-administrator deployment
  ● Automatic updates
  ● Smart document deployment
● Rich / easy developer experienceSofia, Bulgaria | 9-10 October
             Smart Client
             Technologies
● Visual Studio 2005
   ● Rich visual designer support
   ● Integrated ClickOnce testing and deployment
   ● Visual Studio Tools for Office
● .NET Framework 2.0
   ● Windows Forms 2.0
   ● ClickOnce deployment




                                      Sofia, Bulgaria | 9-10 October
           What is “smart”

● Local resources and user experience
● Offline capable
● Intelligent deployment and update
● Multithreaded
● Crash Proof




                               Sofia, Bulgaria | 9-10 October
Sofia, Bulgaria | 9-10 October
Photoviewer
Runtime: Callbacks And Web Resources

● Scenario
  ●   Child control will handle rendering
  ●   Manage state in parent control
  ●   Eliminate page flicker, update only relevant markup
  ●   Deploy control as single assembly
● Solution
  ● StateManagedCollection simplifies state management for collection
    items
  ● Callbacks transfer data between client and server using XMLHTTP
    and JavaScript

                       RaiseCallbackEvent


                        GetCallbackResult      Web Server
  ●Client
     Embedded WebResources used to ease deployment and versioning
                                                       Sofia, Bulgaria | 9-10 October
               Sofia, Bulgaria | 9-10 October




Photoviewer Runtime
Photoviewer
Controldesigner: Regions And Smart Tags


● Scenario
  ● Enhanced design-time interactivity
  ● Promote important editing operations
● Solution
  ● CompositeControlDesigner handles interaction with
    runtime control
  ● Web resources are handled by the designer host
  ● DesignerRegions describe clickable, selectable,
    and editable areas
  ● Mouse click responds to user input
  ● Smart Tags expose important and complex tasks
                                            Sofia, Bulgaria | 9-10 October
                 Sofia, Bulgaria | 9-10 October




Photoviewer Design-Time
MultiList
Runtime

● Scenario
  ● Data and templates define composition
  ● Control must function when ViewState is disabled
● Solution
  ● Extend CompositeDataBoundControl to handle
    creation of child controls based on data
  ● Use templates to allow user to customize rendering
  ● Store critical state in ControlState rather than
    ViewState



                                             Sofia, Bulgaria | 9-10 October
               Sofia, Bulgaria | 9-10 October




MultiList Runtime
MultiList
Design-time

● Scenario
  ● WYSIWYG template editing
  ● Use standard interfaces for wiring up to a data
    source
● Solution
  ● Extend DataBoundControlDesigner to offer
    data source picker and expose schema
  ● DesignerRegions provide custom inline
    editing of template content
  ● Paint graphics to go beyond HTML
                                        Sofia, Bulgaria | 9-10 October
                 Sofia, Bulgaria | 9-10 October




MultiList Design-Time
                Summary

● Runtime
  ● Composite controls and templates for scenario
    controls
  ● DataBoundControl class for data-driven content
  ● WebResources for embedded content
  ● ControlState for critical state
● Design-time
  ● DesignerActionLists for contextual tasks
  ● DesignerRegions for contextual editing
  ● Clicking and painting for interactive page design
  ● Auto format for common control styles

                                              Sofia, Bulgaria | 9-10 October
                Call To Action
 ● ASP.net 2.0 adds many new features for
   the control developer
                     Control

                   WebControl

      DataBoundControl               CompositeControl

CompositeDataBoundControl

MultiList                MultiListViewSwitcher       PhotoViewer

                                                 Sofia, Bulgaria | 9-10 October
                   Community Resources
● INETA MEA !
 ● www.ineta.org
 ● mea.ineta.org
 Presenter as a resource
 ● goksin@yage.com.tr


 ● ASP.NET Web Site - http://www.asp.net
 ● MSDN dev center - http://msdn.microsoft.com/asp.net/
 ● ASP.NT Forums -
   http://forums.asp.net/145/ShowForum.aspx
 ● Channel 9 tag - http://channel9.msdn.com/tags/ASP.NET


                                              Sofia, Bulgaria | 9-10 October
                Summary

● Runtime
  ● Composite controls and templates for scenario
    controls
  ● DataBoundControl class for data-driven content
  ● WebResources for embedded content
  ● ControlState for critical state
● Design-time
  ● DesignerActionLists for contextual tasks
  ● DesignerRegions for contextual editing
  ● Clicking and painting for interactive page design
  ● Auto format for common control styles

                                              Sofia, Bulgaria | 9-10 October
                              Sofia, Bulgaria | 9-10 October




   Please fill out the survey forms!

They are the key to amazing prizes that
  you can get at the end of each day



                         Thank you!
Sofia, Bulgaria | 9-10 October