How to create custom client component class?

[jchau]

I have a few client component classes created following ASP.NET AJAX standards. *I want to convert them to Coolite and ExtJS. *The classes are not visual components, but more like utility classes. *For example, I have a PageManager server side class with a corresponding PageManager client class. *The PageManager client class contains a few properties that can be set on the server side. *What's a good example Coolite class to look at? *Should I be inheriting from Observable or StateManagedItem?

Here's a quick mockup of my PageManager class:


Server Side

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls


Namespace Controls
** *<ToolboxData("<{0}:PageManager runat=server></{0}:PageManager>")> _
** *Public Class PageManager
** * * *Inherits ScriptControl


#Region " Properties "
** * * *Public ReadOnly Property HiddenPageIsDirtyID() As String
** * * * * *Get
** * * * * * * *Return "__IsDirty"
** * * * * *End Get
** * * *End Property


** * * *Private _HiddenPageIsDirtyValue As String = Nothing
** * * *Public Property IsDirty() As Boolean
** * * * * *Get
** * * * * * * *If _HiddenPageIsDirtyValue Is Nothing Then
** * * * * * * * * *_HiddenPageIsDirtyValue = WebUtils.GetRequestString(Me.Page.Request, HiddenPageIsDirtyID, "0")
** * * * * * * *End If
** * * * * * * *Return _HiddenPageIsDirtyValue.Equals("1")
** * * * * *End Get
** * * * * *Set(ByVal Value As Boolean)
** * * * * * * *_HiddenPageIsDirtyValue = Convert.ToInt32(Value).ToString
** * * * * *End Set
** * * *End Property


** * * *Private _StateBag As Dictionary(Of String, String)
** * * *Public ReadOnly Property StateBag() As Dictionary(Of String, String)
** * * * * *Get
** * * * * * * *If _StateBag Is Nothing Then _StateBag = New Dictionary(Of String, String)()
** * * * * * * *Return _StateBag
** * * * * *End Get
** * * *End Property


#End Region


#Region " Page Cycle "


#Region " PreRender "


** * * *Private Sub PageManager_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
** * * * * *RegisterPageHiddenFields()


** * * * * *Me.Page.ClientScript.RegisterStartupScript(GetType(PageManager), "$PageManager", "Sys.Application.add_load(function () {$PageManager = $find('" &amp; Me.ClientID &amp; "');});", True)


** * * *End Sub


** * * *Private Sub RegisterPageHiddenFields()
** * * * * *ScriptManager.RegisterHiddenField(Me, Me.HiddenPageIsDirtyID, Me._HiddenPageIsDirtyValue)
** * * *End Sub


** * * *Protected Overrides Function GetScriptDescriptors() As System.Collections.Generic.IEnumerable(Of System.Web.UI.ScriptDescriptor)
** * * * * *Dim descriptor As New ScriptControlDescriptor("WebCore.PageManager", Me.ClientID)


** * * * * *descriptor.AddElementProperty("hiddenIsDirty", Me.HiddenPageIsDirtyID)
** * * * * *descriptor.AddProperty("pageID", WebUtils.GetPageID(Me.Page))
** * * * * *descriptor.AddProperty("menuCacheKey", Strata.Web.Core.Utilities.MenuUtils.GetMenuCacheKey(Me.Page))
** * * * * *If StateBag IsNot Nothing Then descriptor.AddProperty("stateBag", StateBag)


** * * * * *Return New ScriptDescriptor() {descriptor}
** * * *End Function


** * * *Protected Overrides Function GetScriptReferences() As System.Collections.Generic.IEnumerable(Of System.Web.UI.ScriptReference)
** * * * * *Dim reference As New ScriptReference(Page.ClientScript.GetWebResourceUrl(Me.GetType, "Strata.Web.Core20.PageManager.js"))
** * * * * *Return New ScriptReference() {reference}
** * * *End Function


#End Region


#End Region
** **
** **
** *End Class
End Namespace

Client Side

/// <reference name="MicrosoftAjax.js"/>


Type.registerNamespace('WebCore')


WebCore.PageManager = function(element) {
** *// allow creation of global variable for intellisense without attaching to an element
** *if (element === null) { return }


** *WebCore.PageManager.initializeBase(this, [element]);


** *this._hiddenIsDirty = null;
** *this._pageID = '';
** *this._menuCacheKey = '';
** *this._stateBag = null;


}


WebCore.PageManager.prototype = {
** *//Overrides
** *initialize: function() {
** * * *WebCore.PageManager.callBaseMethod(this, 'initialize');
** * * *// Add custom initialization here
** *},


** *dispose: function() {
** * * *//Add custom dispose actions here
** * * *WebCore.PageManager.callBaseMethod(this, 'dispose');
** *},
** *
** *// Private properties * *
** *get_pageID: function() {
** * * *return this._pageID;
** *},


** *set_pageID: function(value) {
** * * *this._pageID = value;
** *},


** *get_hiddenIsDirty: function() {
** * * *return this._hiddenIsDirty;
** *},


** *set_hiddenIsDirty: function(value) {
** * * *this._hiddenIsDirty = value;
** *},


** *get_IsDirty: function() {
** * * *if (this._hiddenIsDirty.value === '1') {
** * * * * *return true;
** * * *}
** * * *else {
** * * * * *return false;
** * * *}
** *},


** *set_IsDirty: function(value) {
** * * *if (value) {
** * * * * *this._hiddenIsDirty.value = '1';
** * * *} else {
** * * * * *this._hiddenIsDirty.value = '0';
** * * *}
** *},


** *get_menuCacheKey: function() {
** * * *return this._menuCacheKey;
** *},


** *set_menuCacheKey: function(value) {
** * * *this._menuCacheKey = value;
** *},


** *get_stateBag: function() {
** * * *return this._stateBag;
** *},


** *set_stateBag: function(value) {
** * * *this._stateBag = value;
** *}




}


WebCore.PageManager.registerClass('WebCore.PageManager', Sys.UI.Control);


// global PageManager*
var $PageManager = new WebCore.PageManager(null);




if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

[Vladimir]

Hi,

The StateManagedItem is a simple class which inherited from Object and implemented IStateManager. It is not WebControl.
So, it can't be as interdependent control. It used as inner object in WebControl.

I think you should inherited from Observable. Observable is a good choice if your control is non-visual