Your SlideShare is downloading. ×
0
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
ASP.NET AJAX Component Development - InterKnowlogy Bloggers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ASP.NET AJAX Component Development - InterKnowlogy Bloggers

919

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
919
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Add the reference to the JavaScript class normally and show the error message that occurs. Then switch to the ScriptManager
  • create
  • Transcript

    • 1. ASP.NET AJAX Component Development San Diego .NET User Group Meeting February 6, 2007 Joel Rumerman
    • 2. Topics
      • AJAX Overview
      • ASP.NET AJAX Overview
      • Extending ASP.NET AJAX
      • Developing ASP.NET AJAX Components
    • 3. AJAX Overview
      • A synchronous J avaScript A nd X ML
        • The ability to execute a request to an HTTP endpoint (or SOAP) in an out-of-band fashion from a web page and receive a response and do something with that response
      • Asynchronous : talk to end points using a request - callback pattern
      • JavaScript : language used to execute the AJAX request and handle the response
      • XML (XSL, XSLT) : data transfer structure for data being passed to and from the server
    • 4. Other AJAX Pieces
      • XMLHttp : browser object that provides the ability to perform asynchronous requests.
        • browsers implement XMLHttp object in different ways
      • JSON : JavaScript Object Notation
        • Defined by a BNF
        • Used to pass data to and from the server
        • Lighter-weight compared to XML
    • 5. What is ASP.NET AJAX?
      • A new web development technology that integrates cross-browser client script libraries with the ASP.NET 2.0 development framework
        • Cross-browser client script libraries
          • Object-Oriented JavaScript Framework
          • .NET like Programming Constructs
            • Types
            • Inheritance
            • Interfaces
            • Events
          • Standardizes Client Programming Across Browsers
        • Server side ASP.NET features facilitate adding client behaviors to web pages
          • Classes contained within the System.Web.UI namespace
            • ScriptManager, ScriptReference, ScriptManagerProxy, UpdatePanel, Timer
          • Server code isn’t required
    • 6. The State of ASP.NET AJAX
      • On January 23, 2007 1.0 Shipped
      • Fully supported Microsoft product (24x7x365) for 10 years
      • Documentation, forums, downloads, and showcase at http://ajax.asp.net
      • Client source code available under Microsoft Permissive License
      • Server source code available under Microsoft Resource License
    • 7. Where is ASP.NET AJAX Going
      • Version 2 integrates directly with Orcas
        • Better IDE experience
          • JavaScript Intellisense
          • Debugging support
          • Better design time integration
        • More Features
          • Client Side Data Binding
          • Gadget Support
          • Better Web Part support
    • 8. Extending ASP.NET AJAX
    • 9. Goal
      • Create reusable custom ASP.NET AJAX Client Components and ASP.NET Server Controls that manage those components
    • 10. Types of Custom ASP.NET AJAX Client Components
      • Components
        • Typically non-visual
        • Not directly associated to DOM Elements
        • Derive from Sys.Component
      • Behaviors
        • Extend the behavior of an existing DOM Element
        • Derive from Sys.UI.Behavior
      • Controls
        • Represents a DOM Element as a client object
        • Derives from Sys.UI.Control
    • 11. Extending ASP.NET AJAX Process
      • Client Development
        • Defines something that should happen in the browser
        • Uses the ASP.NET AJAX prototype programming model
        • Relies upon the ASP.NET AJAX Client Runtime
      • Server Development
        • Developed using .NET code
        • Relies upon new ASP.NET AJAX libraries to register the JavaScript that manages the client component
    • 12. Steps to Create Client Components
      • Declare namespace
      • Declare new class
      • Declare internal members*
      • Define and implement properties*
      • Define and implement methods
      • Define events
      • Override base class methods^
      • Register class with framework
      • Declare inheritance from base class^
    • 13. Steps to Create Server Control
      • Declare control
      • Inherit from base class (i.e. control, label, panel, etc.)
      • Override base methods to emit JavaScript to control client component as necessary
    • 14. Developing ASP.NET AJAX Components
    • 15. Steps to Develop a Component
      • Setup the Environment
      • Develop the client code
      • Develop the server control
      • Wire up the server control to the client code
    • 16. Setting Up the Environment
      • Creating an ASP.NET AJAX Enabled Project
        • Included libraries
          • System.Web.Extensions.dll
          • System.Web.Extensions.Design.dll
        • Web.Config Settings
          • Section Groups
          • Assembly Inclusion
          • HttpHandlers
          • HttpModules
    • 17. Develop the Client Code
      • Register a Namespace
      • Declare the Component
      • Initialize inheritance from the base class
      • Register the Component with the runtime
      • Inherit from Sys.Component
    • 18. DEMO Creating a New ASP.NET AJAX Component
    • 19. Component’s Lifecycle
      • An ASP.NET AJAX Component is managed by the ASP.NET AJAX runtime just like an ASP.NET Control is managed by the ASP.NET page handler
      • Just like the ASP.NET Control, the ASP.NET AJAX Component goes through a lifecycle
        • ASP.NET Server Control
          • OnInit
          • CreateChildControls
          • PreRender
          • Render
          • Etc.
        • ASP.NET AJAX Component
          • Initialize
          • Dispose
    • 20. DEMO Adding the Initialize and Dispose Method Overrides
    • 21. Registering with the Runtime
      • Our component relies upon the ASP.NET AJAX Framework Runtime
        • Runtime must be loaded before our component’s code is parsed
        • Use ScriptManager to add component definition to page
          • Guarantees that our component will be parsed after the Runtime is loaded
    • 22. DEMO Registering our Component with the Runtime
    • 23. Instantiating the Component
      • Creating the component
      • Two Ways
        • var myComponent = Sys.Component.create( ComponentType, {id: “name”} );
        • var myComponent = $create( ComponentType, {id: “name”});
      • Both create the component, add it to the runtime’s component collection, and initialize the component.
      • Adding it to the component’s collection ensures that the same component with the same id isn’t created more than once.
    • 24. DEMO Instantiating our Component
    • 25. Develop the Server Control
      • Wire our new client component to a new server control
        • E.g. <ASP:Label … />
          • <span></span>
        • E.g. <NewTag:OurNewComponent …/> =
          • <script type=“javascript> $create(Interknowlogy.AJAX.OurNewComponent); </script>
      • Use ScriptManager.Registerxxx rather than Page.ClientScript.Register xxxx
        • Ensures that the JavaScript is registered properly when the control is contained within an UpdatePanel
    • 26. DEMO Create a Server Control Wired to Our New Component
    • 27. Develop the Server Control
      • Associate the Server Control to the Component’s client definition
        • Embed the JavaScript in the DLL as a resource
        • Load the JavaScript into the ScriptManager using a ScriptReference
    • 28. DEMO Add the Client Code to the Server Control
    • 29. More Client Code – Private Members and Properties
      • Private members
        • Use this._**** style
          • this._enabled
          • Private by convention, not be practice
      • Public properties
        • Use this.get_****, this.set_**** style
          • this.get_enabled: function() { return this._enabled;}
          • this.set_enabled: function(value) { this._enabled = value; }
      • Following these conventions sets up the ability for intellisense to work properly in Oracas
    • 30. DEMO Adding Private Members and Public Properties
    • 31. More Client Code – Validating Parameters
      • Very similar to .NET parameter checking capabilities
      • Built-in parameter validation functionality
      • var e xception = Function._validateParams(arguments, [{name: &quot;value&quot;, type: Boolean}]);
        • arguments represents the arguments of the method
        • Array of argument description objects
          • Name of argument (i.e. “value”)
          • Type of argument
            • Boolean, Function, Number, String, Sys.WebForms.PageRequestArgs, user-defined
          • Optional arguments
            • may be null
      • Exception is assigned to an error if the parameters did not validate properly
    • 32. DEMO Validating Parameters
    • 33. More Client Code - Events
      • All components have eventing model built-in
      • Add and removing events to the base class event collection
        • this.get_events().addHandler( eventName , function);
        • this.get_events().removeHandler( eventName, function);
      • Wrap adding/removing of events in “add_ eventName ”, “remove _eventName ” methods
        • add_enabledChange: function(handler) {…}
        • remove_enabledChange: function(handler) {…}
      • Again, provides ability for intellisense in Oracas
    • 34. DEMO Creating Event Handlers and Wiring Them Up
    • 35. DEMO A Useful Component - PostBackDisabler
    • 36. Contact Info
      • Joel Rumerman
      • Email: [email_address]
      • Blog: http:// blogs.interknowlogy.com/joelrumerman

    ×