ASP.NET AJAX Component Development San Diego .NET User Group Meeting February 6, 2007 Joel Rumerman
Topics <ul><li>AJAX Overview </li></ul><ul><li>ASP.NET AJAX Overview </li></ul><ul><li>Extending ASP.NET AJAX </li></ul><u...
AJAX Overview <ul><li>A synchronous  J avaScript  A nd  X ML </li></ul><ul><ul><li>The ability to execute a request to an ...
Other AJAX Pieces <ul><li>XMLHttp : browser object that provides the ability to perform asynchronous requests.  </li></ul>...
What is ASP.NET AJAX? <ul><li>A new web development technology that integrates cross-browser client script libraries with ...
The State of ASP.NET AJAX  <ul><li>On January 23, 2007 1.0 Shipped </li></ul><ul><li>Fully supported Microsoft product (24...
Where is ASP.NET AJAX Going <ul><li>Version 2 integrates directly with Orcas </li></ul><ul><ul><li>Better IDE experience <...
Extending ASP.NET AJAX
Goal <ul><li>Create reusable custom ASP.NET AJAX Client Components and ASP.NET  Server Controls that manage those componen...
Types of Custom ASP.NET AJAX Client Components <ul><li>Components </li></ul><ul><ul><li>Typically non-visual </li></ul></u...
Extending ASP.NET AJAX Process <ul><li>Client Development </li></ul><ul><ul><li>Defines something that should happen in th...
Steps to Create Client Components <ul><li>Declare namespace </li></ul><ul><li>Declare new class </li></ul><ul><li>Declare ...
Steps to Create Server Control  <ul><li>Declare control </li></ul><ul><li>Inherit from base class (i.e. control, label, pa...
Developing ASP.NET AJAX Components
Steps to Develop a Component <ul><li>Setup the Environment </li></ul><ul><li>Develop the client code </li></ul><ul><li>Dev...
Setting Up the Environment <ul><li>Creating an ASP.NET AJAX Enabled Project </li></ul><ul><ul><li>Included libraries </li>...
Develop the Client Code <ul><li>Register a Namespace </li></ul><ul><li>Declare the Component </li></ul><ul><li>Initialize ...
DEMO Creating a New ASP.NET AJAX Component
Component’s Lifecycle <ul><li>An ASP.NET AJAX Component is managed by the ASP.NET AJAX runtime just like an ASP.NET Contro...
DEMO Adding the Initialize and Dispose Method Overrides
Registering with the Runtime <ul><li>Our component relies upon the ASP.NET AJAX Framework Runtime </li></ul><ul><ul><li>Ru...
DEMO Registering our Component with the Runtime
Instantiating the Component <ul><li>Creating the component </li></ul><ul><li>Two Ways </li></ul><ul><ul><li>var myComponen...
DEMO Instantiating our Component
Develop the Server Control <ul><li>Wire our new client component to a new server control </li></ul><ul><ul><li>E.g. <ASP:L...
DEMO Create a Server Control Wired to Our New Component
Develop the Server Control <ul><li>Associate the Server Control to the Component’s client definition </li></ul><ul><ul><li...
DEMO Add the Client Code to the Server Control
More Client Code – Private Members and Properties <ul><li>Private members </li></ul><ul><ul><li>Use this._**** style </li>...
DEMO Adding Private Members and Public Properties
More Client Code – Validating Parameters  <ul><li>Very similar to .NET parameter checking capabilities </li></ul><ul><li>B...
DEMO Validating Parameters
More Client Code - Events <ul><li>All components have eventing model built-in </li></ul><ul><li>Add and removing events to...
DEMO Creating Event Handlers and Wiring Them Up
DEMO A Useful Component - PostBackDisabler
Contact Info <ul><li>Joel Rumerman </li></ul><ul><li>Email:  [email_address] </li></ul><ul><li>Blog:  http:// blogs.interk...
Upcoming SlideShare
Loading in …5
×

Asp.Net Ajax Component Development

1,450 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,450
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Asp.Net Ajax Component Development

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

    ×