Dynamically created controls cookbooks

Page 1 of 2 12 LastLast
  1. #1

    Dynamically created controls cookbooks

    Hello everybody,

    I am relatively new to coolite, and I found it by searching a link between extjs and C#.

    I have started a project, that we'll use internally first, and I'll release as open source once exploitable. This is a webmail developed using coolite library on visual studio 2008. Some back end libraries will be developed using mono (imap,caldav,etc).

    The main difficulty I have is that I need to dynamically create controls. All the examples and all the documentation I found are designed with the controls hard coded into the aspx files. However, I need to create controls dynamically, using the code behind model.

    For instance, I want to have the same result than this: http://examples1.ext.net/#/Form/ComboBox/Custom_Search/ but dynamically created. And here, the difficulties starts. I have been able to create the control and the store. However, I hardly found the Store documentation to dynamically interact it using a database or xml data. (Here, I need to access to my imap library)

    As a summary, my main question is: where can I found tutorials, cookbooks, examples, etc. to dynamically create controls ? I have access to the API, but this is too minimalistic for my coolite knowledge.

    ATB.
  2. #2

    RE: Dynamically created controls cookbooks

    Speaking for myself; its taken about a month to get comfortable with all the Coolite controls and methods and shortcuts and there is still a lot i don't know. However, the best tools I can recommend is Firefox, this Forum, the Examples, and the ExtJS API site.

    FireFox - Firebug is a must have. An easy way to examine an object is to create an independent JS file even a single object like debugView(a,b,c,d,e){}, using fireFox set your javascript break point in the object and then use it inside Coolite Listeners. <Click Fn="debugView" /> or <Click Handler="debugView(this, #{ControlAId},#{ControlBId} )" />


    Coolite Forums - the two main developers Geoff and Vlad are very helpful and they take the time to read and respond to the forum questions.


    Examples - (need i say more)


    ExtJS - Coolite is a .NET wrapper around ExtJS so knowing ExtJS is really helpful especially when you want to customize a behavior. Want to know what methods and properties exist on a GridPanel ... search ExtJS gridpanel. Also, the ExtJS forums are a goldmine.


  3. #3

    RE: Dynamically created controls cookbooks

    Thanks Juls.
  4. #4

    RE: Dynamically created controls cookbooks

    Juls didn't address one of arodier's main concerns, which was the ability to dynamically create controls. This is one of my biggest problems with the Coolite Toolkit and quite frankly, is causing me a great deal of grief. In MOST applications, it is very common to be able to instantiate controls at run time. From all that I can tell, and I have been playing around with Coolite for awhile now, and from the seemingly lack of response that I ever receive to the numerous requests for help that I have posted on this very subject, it seems that this may be the inherent drawback with the Coolite Toolkit.

    For example, something as simple as defining a Window such as "MyCustomWindow" and then being able to instantiate two or more seperate copies of this window at run time, is apparently impossible. If this is in fact true, which hasn't yet been proven otherwise, IMO it makes this toolkit completely unusable in any real world application. It is therefore forcing me to have to use the ExtJs library directly in most cases, which is a shame because it is forcing me to learn JavaScript in a VERY short time as I have already promissed by company that we could utilize Coolite, which I'm now having second thoughts on. So I have been hanging out more at ExtJs lately than here.

    At ExtJs, you will find that the very core of the library is the ability to instantiate objects at run time. For some reason, this functionality seems to have been completely lost when it was wrapped in a .NET assembly by Coolite, forcing you instead to have to explicitly define/instantiate controls at DESIGN-TIME.
  5. #5

    RE: Dynamically created controls cookbooks

    I'm going to defend the Coolite guys on this.


    First off, they are extremly responsive. Try getting Animal to respond yo your posts on ExtJS foumns. He'll just tell you to RTFM! Perhaps you might refine the questions to a specific action on a control. They are not here to answer general ASP.NET questions.


    Two, they are working inside the confines of ASP Server controls, so if your not familiar with the life-cycle and limitations of ASP.NET then your expectations are un-realalistic. This also means you can do some really fantastic ASP.NET things as well. you understand that ExtJS runs 100% client side in the JavaScript Engine on the browser. So everything you do is dynamic on the fly by nature once the page gets there. Coolite on the other hand, has to compile your code and markup into a webpage and insert the ExtJS extensions ... then send the page down for rendering. Once there ... it is ExtJS ... but untill that time ... it exists only on the server.


    So rather then debate ... let me ask if you some specific questions about your dynamic pages.


    Is your dynamic page being constructed in the Page_Load or are you expecting to be able to add panels and windows over Ajax (run-time??)? Ok. Try constructing everything you need in your Page_Load dynamically ... then calling ShowOnLoad = false on those things you want later. Controls need to exist on the page at render time (at least thats my impression). Don't blame the Coolite guys for this. This is the price you pay for working in a disconnected medium like the web. That said they have done a lot to bridge the gap.


    Ok. Now for another usage. Did you know that you can use Coolite controls outside the Panels and Frames they provide? Like the look and feel of the coolite fields? Just use drag them into your tables instead of the hideuos ASP.NET fields. This should work the same in Codebehind. But once again ... you are required to build the page before the final render. Once the page is out there in the users browser, you can manipulate the dom to make the illusion of a new control.


    For example, the Coolite label can render straight HTML. Knowing this, anywhere a label sits on a page one could update new HTML code into that lable via Ajax. But, the label has to exist ... thats the limitation i think you are bumping up against. That said, putting an empty label on a page where you eventually might inject some HTML is really simple.


    hope this helps ... Happy Hunting!
  6. #6

    RE: Dynamically created controls cookbooks

    Your points are well taken and in no way was I trying to discredit what the Coolite guys have done and infact, they are very responsive to most of my requests, but there are sometimes, like in the case of this topic, they are oddly quite. For example, have you seen them post in this thread yet??

    I just wish they were more up front about the limiations. Unfortunately for me, I'm not building a "web site". I'm trying to build a "web application" which mimics as much as possible a desktop application, which is really what this Toolkit is marketed towards. But, the inability to instantiate things client side is a real roadblock and quite frankly, is not very clear from any documenation on this site. In fact, just the contrary, they point out many client side functionality and bill it as a rich client side framework.

    To address the example you stated, no, that is not what I'm trying to do. I need to define a window, but then at run time, be able to instantiate one or MORE copies of this in order to display in the browser at the same time. This is not possible by first defining in markup and setting the ShowOnLoad = false. This only allows a single copy of that window to ever be displayed to the end user. This is a HUGE problem. One that probably many people only run into after they have spent a lot of time playing around with Coolite and all its other awesome functionality. But this is a major roadblock. Now, I'm trying to mix ExtJs with Coolite, but even that is causing problems.

    I don't understand why Coolite cannot implement something that allows a single Window object to be defined in markup during design time, but can allow multiple copies of it to be displayed at run time. Seems like with a bit of JavaScript tricks, they could implement this capability. For example, even in ExtJs, an object can be defined a single time in JavaScript at design time, but this same object can be instantiated multiple times at run time. Can't Coolite add a method to the window object called createNew or showNew where internally it creates a serpeate copy of the object in memory?
  7. #7

    RE: Dynamically created controls cookbooks

    Hi all...

    I'll have to post a more detailed response later today, but in the mean time I wanted to get @arodier the ComboBox search sample built dynamically from code-behind.

    I just modified the original example to include both the inline markup and dynamically created code-behind versions.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            // Create Store
            Store store = new Store();
    
            // Create Proxy
            HttpProxy proxy = new HttpProxy();
            proxy.Method = HttpMethod.POST;
            proxy.Url = "Plants.ashx";
    
            // Create Reader
            JsonReader reader = new JsonReader();
            reader.Root = "plants";
            reader.TotalProperty = "totalCount";
    
            // Add Fields
            reader.Fields.Add(new RecordField("Common"));
            reader.Fields.Add(new RecordField("Botanical"));
            reader.Fields.Add(new RecordField("Light"));
            reader.Fields.Add(new RecordField("Price", RecordFieldType.Float));
            reader.Fields.Add(new RecordField("Indoor", RecordFieldType.Boolean));
    
            // Add Proxy and Reader to Store
            store.Proxy.Add(proxy);
            store.Reader.Add(reader);
            store.AutoLoad = false;
    
            // Add Store to Controls Collection
            this.Placeholder1.Controls.Add(store);
            
            
            // Create ComboBox
            ComboBox combobox = new ComboBox();
    
            combobox.StoreID = store.ClientID;
            combobox.DisplayField = "Common";
            combobox.ValueField = "Common";
            combobox.TypeAhead = false;
            combobox.LoadingText = "Searching...";
            combobox.Width = Unit.Pixel(570);
            combobox.PageSize = 10;
            combobox.HideTrigger = true;
            combobox.ItemSelector = "div.search-item";
            combobox.MinChars = 1;
    
            combobox.Template.Text = @"
                   <tpl for=""."">
                      <div class=""search-item"">
                         <h3>${Price}{Common}</h3>
                         {Botanical}
                      
    
                   </tpl>";
    
            // Add ComboBox to Controls Collection
            this.Placeholder1.Controls.Add(combobox);
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>ComboBox with Template - Coolite Toolkit Example</title>
        <style type="text/css">
            .search-item {
                font: normal 11px tahoma, arial, helvetica, sans-serif;
                padding: 3px 10px 3px 10px;
                border: 1px solid #fff;
                border-bottom: 1px solid #eeeeee;
                white-space: normal;
                color: #555;
            }
            
            .search-item h3 {
                display: block;
                font: inherit;
                font-weight: bold;
                color: #222;
            }
    
            .search-item h3 span {
                float: right;
                font-weight: normal;
                margin: 0 0 5px 5px;
                width: 100px;
                display: block;
                clear: none;
            } 
            
            p { width: 650px; }
            
            .ext-ie .x-form-text { position: static !important; }
        </style>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <p>
                Combo with Templates and Ajax<br />
                This is a more advanced example that shows how you can combine paging, Template to create a "live search" feature.
            </p>
            
            <ext:Store ID="Store1" runat="server" AutoLoad="false">
                <Proxy>
                    <ext:HttpProxy Method="POST" Url="Plants.ashx" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="plants" TotalProperty="totalCount" >
                        <Fields>
                            <ext:RecordField Name="Common" />
                            <ext:RecordField Name="Botanical" />
                            <ext:RecordField Name="Light" />
                            <ext:RecordField Name="Price" Type="Float" />
                            <ext:RecordField Name="Indoor" Type="Boolean" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <div style="width:600px;">
                <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc">
    
    
    
                <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                    <h3 style="margin-bottom:5px;">Search the plants</h3>
                    
                <ext:ComboBox 
                    ID="ComboBox1"
                    runat="server" 
                    StoreID="Store1"
                    DisplayField="Common" 
                    ValueField="Common"
                    TypeAhead="false"
                    LoadingText="Searching..." 
                    Width="570"
                    PageSize="10"
                    HideTrigger="true"
                    ItemSelector="div.search-item"        
                    MinChars="1">
                    <Template runat="server">
                       <tpl for=".">
                          <div class="search-item">
                             <h3>${Price}{Common}</h3>
                             {Botanical}
                          
    
                       </tpl>
                    </Template>
                </ext:ComboBox>    
                
                <div style="padding-top:4px;">
                    Plants search (type '*' (asterisk) for showing all)
                
    
                
    
    
    
                <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc">
    
    
            
    
                
            <br />
            <br />
            <br />
                
            <div style="width:600px;">
                <div class="x-box-tl">
                    <div class="x-box-tr">
                        <div class="x-box-tc">
    
                    
    
                
    
                <div class="x-box-ml">
                    <div class="x-box-mr">
                        <div class="x-box-mc">
                            <h3 style="margin-bottom:5px;">Search the plants (controls dynamically created)</h3>
                            <asp:PlaceHolder ID="Placeholder1" runat="server" />
                            <div style="padding-top:4px;">
                                Plants search (type '*' (asterisk) for showing all)
                            
    
                        
    
                    
    
                
    
                <div class="x-box-bl">
                    <div class="x-box-br">
                        <div class="x-box-bc">
    
                    
    
                
    
            
    
        </form>
    </body>
    </html>
    All Coolite Toolkit Controls (asp.net webcontrols) can be created dynamically from code-behind.

    The problem some are running into is dynamic control creation during an AjaxEvent/AjaxMethod. As mentioned many times, that functionality will be included with the next release (v1.0), although we're fighting against limitations of the ASP.NET Framework.

    Geoffrey McGill
    Founder & CEO
  8. #8

    RE: Dynamically created controls cookbooks

    Geoffrey, in your detailed response later, can you please address my suggest as to the ability to define a single window object in markup, but at run time, be able to call a method on it like showNew() which behind the scenes would create a new separate copy of it in memory and display it? Seems like it should be trivial. To me, this would make the library much more usable. Quite honestly, this is a very big problem for me and I'm really struggling with a solution at this point. A practical application might be to allow an end user two pop open a detail window for two items in a grid at the same time. This allows the end user to see the different data at the same time. This is very common. For example, Microsoft Outlook allows you to open any number of email message windows. But currently, this is not possible with Coolite client side.
  9. #9

    RE: Dynamically created controls cookbooks

    "I need to define a window, but then at run time, be able to instantiate one or MORE copies of this in order to display in the browser at the same time. This is not possible by first defining in markup and setting the ShowOnLoad = false. This only allows a single copy of that window to ever be displayed to the end user."

    I am not going to pretend to understand all the details about your need here. In the spirit of being putting all suggestions on the table ... you might be able to go old-school.


     window.open ("http://www.javascript-coder.com","mywindow");

    I have become a big fan of the ScriptManager to invoke scripts from code-behind.


    protected void Button1_Click(object sender, AjaxEventArgs e)
    {
    string foo = e.ExtraParams["uid"];
    string url = "http://mysite.com?uid=" + foo;
    this.ScriptManager1.addScript(String.Format("window.open ('{0}','mywindow');",url));
    }
  10. #10

    RE: Dynamically created controls cookbooks

    We thought about that approach but ultimately decided against it as it is less manageable and gives a much more cluttered look to the end user. We like the idea of Coolite/ExtJs windows as it is contained within the browser window.
Page 1 of 2 12 LastLast

Similar Threads

  1. saving dynamically-created controls' values
    By Skizzot223 in forum 1.x Help
    Replies: 1
    Last Post: Apr 16, 2012, 12:54 PM
  2. Replies: 2
    Last Post: Feb 22, 2012, 10:33 AM
  3. [CLOSED] How to clean up dynamically created controls?
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 23, 2011, 9:51 AM
  4. [CLOSED] Unable to access dynamically created controls
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 07, 2011, 5:49 AM
  5. [CLOSED] Unable to render controls within dynamically created TabPanel
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2010, 10:04 AM

Posting Permissions