Advice / best practice request for custom component development

  1. #1

    Advice / best practice request for custom component development



    Hi guys,

    Loving Coolite controls... I am busy trying to develop/playing around with some custom controls (some of which are composite controls) and interested in what the best approach for this would be. What I mean by this is at what stage in the Page Lifecycle is it best to do things such as:
    - Add Component Controls to the ItemsCollection; OR should we add to the ContentControls (if supported)
    - Adding permanent events to a custom control (is it best to add this in the code, or add a javascript resource file to the output)

    Below is some sample code to show what I am meaning above (some code has been commented out to show areas where I have tried to add listeners to the custom control in the code - which didnt work by the way....).

    using CoolExt = Coolite.Ext.Web;
    
    
    namespace Coolite.Ext.ux.Samples
    {
        public class CustomPanel : CoolExt.Panel 
        { 
            //some custom div we want to manipulate
            private CustomDiv div = new CustomDiv();
            
            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
    
    
               this.ConfigCustomPanel();
            }
    
    
            //settings for panel
            private void ConfigCustomPanel()
            {
                //panel settings
                this.Width = Unit.Pixel(250);
                this.Height = Unit.Pixel(250);
       
                //add custom component to control
                div.Html = "testing custom div";
                this.ContentControls.Add(this.div);
                
            }
    
    
            //protected override void OnPreRender(EventArgs e)
            //{
            //    //test function
            //    string fn = "Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));";
    
    
            //    //add function to custom div
            //    this.div.AddListener("click", "function(el){" + fn + "}");
    
    
            //    base.OnPreRender(e);
            //}
    
    
    
        }
    
    
        public class CustomDiv : CoolExt.Component
        {
            public string Html
            {
                get
                {
                    return (string)this.ViewState["Html"] ?? "";
                }
                set
                {
                    this.ViewState["Html"] = value;
                }
            }
            
            protected override void RenderContents(HtmlTextWriter writer)
            {
                if (!string.IsNullOrEmpty(this.Html))
                { 
                    writer.Write(this.Html); 
                }           
                base.RenderContents(writer);
            }
    
    
            //protected override void OnPreRender(EventArgs e)
            //{
            //    //test function
            //    string fn = "Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));";
    
    
            //    //add function to div
            //    this.AddListener("click", "function(el){" + fn + "}");
    
    
            //    base.OnPreRender(e);
            //}
    
    
        }
    }
    When one of the PreRender code is uncommented, I always get a javascript error after the page has been rendered saying that ctrl_blah (or a specific ID if I specify the ID) has no properties.

    When reviewing the markup and javascript output by the ScriptManager, I noticed that "_Content", "_Container" is added to the ID for the markup and is dependant on the type of base object of the custom control. However, in the javascript there is no reference to the rendered ID before trying to reference it. This is not the case when adding coolite controls, but not for the custom ones, especially ones which have Component as the base type. (i.e. no "contentEl" property has been added to the javascript output to create the association)

    Some sample javascript / html snippets
    
    this.ctl05.on("click",function(el){Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));});
    
    <div id="ctl03_Content"><div id="ctl05_Container">
        hello there
    Obviously I am missing the point here somewhere.. If I try add the Listener to the ScriptManager after PreRender it doesnt render since I believe the scripts have already been rendered. If I add it when the component is Initialized (i.e. OnInit), then it says that the ScriptManager needs to be added before adding scripts to it....

    To give you an idea why I am looking at doing everything programmatically, is the creation of a composite control with a "pluggable" interface model for custom modules. This would then be implemented via markup similar to the following:

    <ext:InterfaceType ID="InterfaceTypeContainer" runat="server" >
    <Content>
         <ext:Core id="coreCustomisation" runat="server">
            <ext:Informer id="informer" runat="server"
                          Display="true" AllActions="true">
            </ext:Informer>
            <ext:CoreModules id="modules" runat="server">
                <ext:Module id="core1" runat="server"></ext:Module>
                <ext:Module id="core2" runat="server"></ext:Module>
            </ext:CoreModules>              
         </ext:Core>
         <ext:Plugins id="pluginComponent" runat="server">
            <ext:Plugin id="plugin1" runat="server"></ext:Plugin>
            <ext:Plugin id="plugin2" runat="server"></ext:Plugin>
            <ext:Plugin id="plugin3" runat="server"></ext:Plugin>
            <ext:Plugin id="pluginEtc" runat="server"></ext:Plugin>
         </ext:Plugins>     
    </Content>
    </ext:InterfaceType>
    i.e. remove the Layout/Structure from the developer and creating a model for developers to add your their own "plugin" type components, which can then interact with each other with a common data layer model... The backend models and how they communicate with each other is not my issue here.. I can see Coolite control UI capabilities as the perfect marriage for such a system. What I am struggling with (probably since I am not a UI developer) at the moment is determining the rendering model for custom controls.

    Any advice how best to approach the development of custom objects that have custom javascript, CSS and/or markup would help immensely.

    thanks,
    Conor





  2. #2

    RE: Advice / best practice request for custom component development

    Hi Conor,

    This is a big topic so it's taking me a bit longer to respond. I'm currently working through a detailed sample and explanation on how to create UX control. I should have a response later today or early tomorrow. I apologize for the delay.
    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: Advice / best practice request for custom component development


    No worries, and thanks for responding - I know you guys are busy. I realise the scope of my question is large and covers multiple areas, which was the reason for the post actually. Please take your time. The better the sample the easier it is for us to learn from.. Looking forward for it!! :)
  4. #4

    RE: Advice / best practice request for custom component development


    Hey there guys,

    Any idea (gestimation) on when you think some samples will be released to the community?

    cheers,
    Conor

Similar Threads

  1. [CLOSED] [1.3] Send custom data on each request
    By John_Writers in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 04, 2012, 5:13 PM
  2. Windows request failure CUSTOM
    By threewonders in forum 1.x Help
    Replies: 0
    Last Post: Oct 08, 2011, 11:12 AM
  3. [CLOSED] Best practice to integrate custom/generic plugins
    By anup in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 01, 2011, 3:15 PM
  4. [CLOSED] [1.0] Custom booking calender control development required
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 10, 2010, 6:39 PM
  5. How to create custom client component class?
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 24, 2008, 5:17 AM

Posting Permissions