Custom Gaia Container Widget Extension

Modified: 2008/10/06 17:34 by stians - Categorized as: Tutorials
In this sample we will extend from Gaia.WebWidgets.HybridPanelBase to create a container control through composition.

Custom Gaia Container Widget Extension

C# Class public class MyCoolPanel : Gaia.WebWidgets.HybridPanelBase, Gaia.WebWidgets.IAjaxControl { Gaia.WebWidgets.LinkButton _caption = new Gaia.WebWidgets.LinkButton();

public string Caption { get { return _caption.Text; } set { _caption.Text = value; } }

protected override void OnInit(EventArgs e) { // When Caption is clicked, we collapse the panel _caption.Click += delegate { new Gaia.WebWidgets.Effect(this, Effect.TypeOfEffect.Fade); };

// Then we're making the whole panel DRAGGABLE this.Aspects.Add(new Gaia.WebWidgets.AspectDraggable());

// Calling base implementation (ALWAYS do this) base.OnInit(e); }

protected override void CreateChildControls() { CompositionControls.Add(_caption); base.CreateChildControls(); }

protected override void SetPreRenderDefaults() { // Since control is draggable it needs absolute positioning Style"positions" = "absolute"; Style"cursor" = "move"; }

public void RenderControlHtml(Gaia.WebWidgets.HtmlFormatting.XhtmlTagFactory create) { using (Gaia.WebWidgets.HtmlFormatting.Tag pnl = create.Div(ClientID, CssClass)) { // serialize common attributes and style Css.SerializeAttributesAndStyles(this, pnl);

// Rendering "caption" div using (Gaia.WebWidgets.HtmlFormatting.Tag caption = create.Div()) { caption.SetStyle("border:solid 1px Black;padding:5px;background-color:Yellow;");

// Rendering Caption LinkButton _caption.RenderControl(create.GetHtmlTextWriter()); }

// Rendering "content parts" using (Gaia.WebWidgets.HtmlFormatting.Tag content = create.Div()) { content.SetStyle("border:solid 1px Black;padding:5px;");

foreach (System.Web.UI.Control ctl in ChildControls()) ctl.RenderControl(create.GetHtmlTextWriter()); } } } }


ASPX Page ( Empty ) <%@ Page Language="C#" ClassName="_Default" %>

<%@ Register Assembly="Gaia.WebWidgets" Namespace="Gaia.WebWidgets" TagPrefix="gaia" %>



Ajax Sample



C# Codebehind file protected void Page_Load(object sender, EventArgs e) { MyCoolPanel pnl = new MyCoolPanel(); pnl.Caption = "Click me"; pnl.Width = new Unit("150px"); // Adding another control inside of our CoolPanel ;) Gaia.WebWidgets.Label lbl = new Gaia.WebWidgets.Label(); lbl.Text = @"Some text, try to move me around, I should be draggable. When you have tried that then try to click my Caption and watch me disappear"; pnl.Controls.Add(lbl); // Adding the pael to our form Form.Controls.Add(pnl); }

Now if we had created the above control(s) in its own projects we could easily include them as Ajax WebControls into our solution and thereby have them in our toolbox with full drag and drop support, and also to some extend also design time support without having to do anything to make that happen. Then we could have included them "delaratively" on our .ASPX page instead of instantiating them in our codebehind C# file.

ScrewTurn Wiki version 2.0.33. Some of the icons created by FamFamFam.