To lessen the learning curve of creating custom control extensions for Gaia Ajax, we've added some ItemTemplates to Visual Studio both for VB.NET and C#.
Some people have commented that Gaia Ajax doesn't offer a good client side story; This is simply not true. Gaia Ajax offers a plethora of ways for you to write both the client and server layer. Connecting the parts together through our Ajax machinery is an option, not a core requrement.
Instead of writing a long blog about this, we've published a video tutorial instead (approx. 28 minutes) that you can find in our Gaiaware TV center. The video is available for download or online viewing (Flash)
In this video we're covering how to create a simple control extension with a thin javascript file available. It's the purpose of this tutorial to mostly be concerned about connecting the client and server parts together with the Gaia Ajax machinery.
Quick Agenda overview
- Creating the Project and adding the control
- Discussing the anatomy of a Gaia Control
- Serializing Property changes to the client
- Sending method calls to the client
- Calling the server from the client and dispatching an event
Overview of the code written in this video
C# Code
1: /* Gaia Ajax HelloGaia Template for Simple Extensions */
2:
3: using System.Web.UI;
4: using Gaia.WebWidgets;
5:
6: [assembly: WebResource("Gaiaware.CustomExtensionControls.HelloGaia.js", "text/javascript")]
7:
8: namespace Gaiaware.CustomExtensionControls
9: {
10: using System;
11: using Gaia.WebWidgets.HtmlFormatting;
12:
13: /// <summary>
14: /// Gaia Ajax HelloGaia
15: /// </summary>
16: public class HelloGaia : GaiaControl, IAjaxControl
17: {
18: public event EventHandler Clicked;
19:
20: [Method]
21: internal string ClickedMethod()
22: {
23: if (Clicked != null)
24: Clicked(this, new EventArgs());
25:
26: return string.Empty;
27: }
28:
29: protected override void IncludeScriptFiles()
30: {
31: base.IncludeScriptFiles();
32:
33: // Include Attached Javascript file
34: Manager.Instance.AddInclusionOfFileFromResource("Gaiaware.CustomExtensionControls.HelloGaia.js",
35: typeof(HelloGaia), "Gaiaware.HelloGaia.browserFinishedLoading", false);
36:
37: }
38:
39: public void SayHello()
40: {
41: _sayHello = true;
42: }
43:
44: private bool _sayHello;
45:
46: [AjaxSerializable("sayHello")]
47: private bool SayHelloMethod
48: {
49: get { return _sayHello; }
50: }
51:
52:
53: [AjaxSerializable("setCssClass")]
54: public string CssClass
55: {
56: get { return ViewState["CssClass"] == null ? "" : ViewState["CssClass"] + ""; }
57: set { ViewState["CssClass"] = value; }
58: }
59:
60: protected override void RenderControlHtml(XhtmlTagFactory create)
61: {
62: using (Tag root = create.Div(ClientID))
63: {
64: root.WriteContent("Hello Gaia");
65: }
66: }
67:
68: #region IAjaxControl Members
69:
70: string IAjaxControl.GetScript()
71: {
72: // Register the Control ClientSide
73: return new RegisterControl("Gaiaware.HelloGaia", ClientID).ToString();
74: }
75:
76: #endregion
77: }
78: }
JavaScript
1: /* Gaia Ajax Extension */
2:
3: // Create root namespace
4: if( !window.Gaiaware )
5: Gaiaware = Class.create();
6:
7: // Create the Extension Control
8: Gaiaware.HelloGaia = Class.create(Gaia.Control, {
9:
10: // Constructor
11: initialize: function(element, options) {
12: this.initializeHelloGaia(element, options);
13: },
14:
15: initializeHelloGaia: function(element, options) {
16: // Calling base class constructor
17: this.initializeControl(element, options);
18:
19: Element.observe($(element), 'click', this._onClick.bind(this));
20: },
21:
22: _onClick: function(evt) {
23: Gaia.Control.callControlMethod.bind(this)('ClickedMethod', null, null, this.element.id);
24: },
25:
26: setCssClass: function(value) {
27: $(this.element).className = value;
28: return this;
29: },
30:
31: sayHello: function(value) {
32: alert('Hello');
33: return this;
34: },
35:
36: // Destructor
37: destroy: function() {
38: // TODO: Put destruction code here
39: }
40:
41: });
42:
43: Gaiaware.HelloGaia.browserFinishedLoading = true;
If you like the video tutorials we're creating and find them useful, please give us some feedback on it. Are we touching base?
Until next time
