What's New?

What could be an ideal design for application with several windows ?

  1. #1
    Jun 30, 2009, 5:00 PM

    What could be an ideal design for application with several windows ?

    Hi all !

    I'm actually testing Coolite porting a medium size application.
    I structured the application's appearance like MS Outlook, so there
    are several windows positioned in a CardLayout. The menu bar is
    positioned on the left side with several items inside an Accordion.

    When the application is first started all of its windows are put
    inside of the Cardlayout's center region ** which causes some
    performance problems ** because all the stores inside of these
    windows are loaded on the first run.

    I don't know if there is a pattern that I could use to "lazy load"
    the windows of the application so they're inserted in the
    CardLayout only when needed, by this way saving some resources.

    I put a test application attached to this post, it uses VS2008 and
    Coolite 0.8, this test application is running very fast but as I said
    previously the performance starts to be a concern when several
    windows are put into the CardLayout

    Appreciate opinions !
    Thank you very much !
  2. #2
    Jul 01, 2009, 1:39 PM

    RE: What could be an ideal design for application with several windows ?

    Hi All,

    I've found this post http://forums.ext.net/showthread.php?postid=15802.aspx from vladimir and I need to implement deferred loading in my application ... the problem is that I'm having some difficult to understand the sample ;-( so I would like to ask someone's help to adapt my application.

    So below a little explanation of my applications structure.:

    There is a main page, called one.aspx, it hosts the viewport where the windows must be positioned into the center.:
    <%@ Page Language="VB" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Register src="controls/control_01.ascx" tagname="control_01" tagprefix="uc1" %>
<%@ Register src="controls/control_02.ascx" tagname="control_02" tagprefix="uc2" %>
<%@ Register src="controls/control_03.ascx" tagname="control_03" tagprefix="uc3" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <ext:ViewPort ID="ViewPort1" runat="server" StyleSpec="background-color: transparent;">
        <Body>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <West Collapsible="true" Split="true" MinWidth="175" MaxWidth="500">
                    <ext:Panel ID="Panel1" runat="server" Title="Menu" Width="200">
                        <Body>
                            <ext:Accordion ID="Accordion1" runat="server" Animate="true">
                                <ext:TreePanel runat="server" ID="TreePanel" Title="File" Icon="ApplicationForm"
                                    Width="200" RootVisible="false">
                                    <Root>
                                        <ext:TreeNode Expanded="true">
                                            <Nodes>
                                                <ext:TreeNode NodeID="control_01_wndControl_01" Text="Control_01" Icon="Application" />
                                                <ext:TreeNode NodeID="control_02_wndControl_02" Text="Control_02" Icon="Application" />
                                                <ext:TreeNode NodeID="control_03_wndControl_03" Text="Control_03" Icon="Application" />
                                            </Nodes>
                                        </ext:TreeNode>
                                    </Root>
                                    <Listeners>
                                        <Click Handler="function(node, e){
                                                Ext.getCmp(node.id).show();
                                            }" />
                                    </Listeners>
                                </ext:TreePanel>
                            </ext:Accordion>
                        </Body>
                    </ext:Panel>
                </West>
                <Center>
                    <ext:Panel ID="CenterPanel" runat="server" Height="300">
                        <Body>
                            <%-- Windows --%>
                            <uc1:control_01 ID="control_01" runat="server" />
                            <uc2:control_02 ID="control_02" runat="server" />
                            <uc3:control_03 ID="control_03" runat="server" />
                        </Body>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:ViewPort>
    </form>
</body>
</html>
    There is one control for each window, these windows are added when the viewport
    is rendered causing all the stores to be loaded when the web page is requested causing
    performance problems ....

    Below the sources of the user controls.

    control_01.ascx
    <%@ Control Language="VB" ClassName="control_01" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    
    Public ReadOnly Property GetWindow() As Coolite.Ext.Web.Window
        Get
            Return wndControl_01
        End Get
    End Property

</script>

<ext:Window ID="wndControl_01" runat="server"
    Title="General List Data 2"
    Modal="false"
    Width="646"
    Height="429"
    MinWidth="646"
    MinHeight="429"
    Icon="ApplicationForm"
    Closable="true"
    Resizable="false"
    Show&#111;nload="false">
    <TopBar>
        <ext:Toolbar ID="ToolStrip1" runat="server">
            <Items>
                <ext:ToolbarButton ID="btnNew" runat="server" Icon="Page" Text="New">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnInsertUpdate" runat="server" Icon="ApplicationGo" Text="Update">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnSearch" runat="server" Icon="BulletMagnify" Text="Search">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnDelete" runat="server" Icon="Delete" Text="Delete">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnClose" runat="server" Icon="Door" Text="Close">
                    <Listeners>
                        <Click Handler="#{wndControl_01}.hide();" />
                    </Listeners>
                </ext:ToolbarButton>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <Body>
    
        <asp:ObjectDataSource 
            ID="odsData" 
            runat="server" 
            SelectMethod="GetAll" 
            TypeName="GridData">
            <SelectParameters>
                <asp:Parameter Name="start" Type="Int32" />
                <asp:Parameter Name="limit" Type="Int32" />
                <asp:Parameter Name="sort" />
                <asp:Parameter Name="dir" />
                <asp:Parameter Name="count" Direction="Output" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    
         <ext:Store 
            ID="StoreListView1" 
            runat="server" 
            AutoLoad="true" 
            RemoteSort="true" 
            DataSourceID="odsData">
            <%--<AjaxEventConfig Type="Load"></AjaxEventConfig>--%>
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="={0}" />
                <ext:Parameter Name="limit" Value="={15}" />
                <ext:Parameter Name="sort" Value="={''}" />
                <ext:Parameter Name="dir"  Value="={''}" />
            </AutoLoadParams>
            <Proxy>
                <ext:DataSourceProxy />
            </Proxy>
            <Reader>
                <ext:JsonReader ReaderID="Reader">
                    <Fields>
                        <ext:RecordField Name="Column1" Type="String" />
                        <ext:RecordField Name="Column2" Type="String" />
                        <ext:RecordField Name="Column3" Type="String" />
                        <ext:RecordField Name="Column4" Type="String" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
        <ext:AbsoluteLayout ID="AbsoluteLayoutForm1" runat="server">
            <ext:GridPanel ID="lstPregoes"
                runat="server"
                StoreID="StoreListView1"
                StripeRows="true"
                X="13"
                Y="13"
                Width="605"
                Height="352">
                <ColumnModel ID="ColumnModelListView1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Column_1" Header="Column_1" Width="85" Sortable="true" DataIndex="Column1" />
                        <ext:Column Header="Column_2" Width="197" Sortable="true" DataIndex="Column2" />
                        <ext:Column Header="Column_3" Width="163" Sortable="true" DataIndex="Column3" />
                        <ext:Column Header="Column_4" Width="135" Sortable="true" DataIndex="Column4" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModelListView1" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolBar ID="PagingToolBarListView1" runat="server" 
                        PageSize="15" 
                        StoreID="StoreListView1" />
                </BottomBar>
            </ext:GridPanel>
        </ext:AbsoluteLayout>
        
    </Body>
    
</ext:Window>
    control_02.ascx
    
<%@ Control Language="VB" ClassName="control_02" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    
    Public ReadOnly Property GetWindow() As Coolite.Ext.Web.Window
        Get
            Return wndControl_02
        End Get
    End Property

</script>

<ext:Window ID="wndControl_02" runat="server"
    Title="General List Data 2"
    Modal="false"
    Width="646"
    Height="429"
    MinWidth="646"
    MinHeight="429"
    Icon="ApplicationForm"
    Closable="true"
    Resizable="false"
    Show&#111;nload="false">
    <TopBar>
        <ext:Toolbar ID="ToolStrip1" runat="server">
            <Items>
                <ext:ToolbarButton ID="btnNew" runat="server" Icon="Page" Text="New">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnInsertUpdate" runat="server" Icon="ApplicationGo" Text="Update">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnSearch" runat="server" Icon="BulletMagnify" Text="Search">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnDelete" runat="server" Icon="Delete" Text="Delete">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnClose" runat="server" Icon="Door" Text="Close">
                    <Listeners>
                        <Click Handler="#{wndControl_02}.hide();" />
                    </Listeners>
                </ext:ToolbarButton>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <Body>
    
        <asp:ObjectDataSource 
            ID="odsData" 
            runat="server" 
            SelectMethod="GetAll" 
            TypeName="GridData">
            <SelectParameters>
                <asp:Parameter Name="start" Type="Int32" />
                <asp:Parameter Name="limit" Type="Int32" />
                <asp:Parameter Name="sort" />
                <asp:Parameter Name="dir" />
                <asp:Parameter Name="count" Direction="Output" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    
         <ext:Store 
            ID="StoreListView1" 
            runat="server" 
            AutoLoad="true" 
            RemoteSort="true" 
            DataSourceID="odsData">
            <%--<AjaxEventConfig Type="Load"></AjaxEventConfig>--%>
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="={0}" />
                <ext:Parameter Name="limit" Value="={15}" />
                <ext:Parameter Name="sort" Value="={''}" />
                <ext:Parameter Name="dir"  Value="={''}" />
            </AutoLoadParams>
            <Proxy>
                <ext:DataSourceProxy />
            </Proxy>
            <Reader>
                <ext:JsonReader ReaderID="Reader">
                    <Fields>
                        <ext:RecordField Name="Column1" Type="String" />
                        <ext:RecordField Name="Column2" Type="String" />
                        <ext:RecordField Name="Column3" Type="String" />
                        <ext:RecordField Name="Column4" Type="String" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
        <ext:AbsoluteLayout ID="AbsoluteLayoutForm1" runat="server">
            <ext:GridPanel ID="lstPregoes"
                runat="server"
                StoreID="StoreListView1"
                StripeRows="true"
                X="13"
                Y="13"
                Width="605"
                Height="352">
                <ColumnModel ID="ColumnModelListView1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Column_1" Header="Column_1" Width="85" Sortable="true" DataIndex="Column1" />
                        <ext:Column Header="Column_2" Width="197" Sortable="true" DataIndex="Column2" />
                        <ext:Column Header="Column_3" Width="163" Sortable="true" DataIndex="Column3" />
                        <ext:Column Header="Column_4" Width="135" Sortable="true" DataIndex="Column4" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModelListView1" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolBar ID="PagingToolBarListView1" runat="server" 
                        PageSize="15" 
                        StoreID="StoreListView1" />
                </BottomBar>
            </ext:GridPanel>
        </ext:AbsoluteLayout>
        
    </Body>
    
</ext:Window>
    control_03.ascx
    
<%@ Control Language="VB" ClassName="control_03" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    
    Public ReadOnly Property GetWindow() As Coolite.Ext.Web.Window
        Get
            Return wndControl_03
        End Get
    End Property

</script>

<ext:Window ID="wndControl_03" runat="server"
    Title="General List Data 2"
    Modal="false"
    Width="646"
    Height="429"
    MinWidth="646"
    MinHeight="429"
    Icon="ApplicationForm"
    Closable="true"
    Resizable="false"
    Show&#111;nload="false">
    <TopBar>
        <ext:Toolbar ID="ToolStrip1" runat="server">
            <Items>
                <ext:ToolbarButton ID="btnNew" runat="server" Icon="Page" Text="New">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnInsertUpdate" runat="server" Icon="ApplicationGo" Text="Update">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnSearch" runat="server" Icon="BulletMagnify" Text="Search">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnDelete" runat="server" Icon="Delete" Text="Delete">
                </ext:ToolbarButton>
                <ext:ToolbarButton ID="btnClose" runat="server" Icon="Door" Text="Close">
                    <Listeners>
                        <Click Handler="#{wndControl_03}.hide();" />
                    </Listeners>
                </ext:ToolbarButton>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <Body>
    
        <asp:ObjectDataSource 
            ID="odsData" 
            runat="server" 
            SelectMethod="GetAll" 
            TypeName="GridData">
            <SelectParameters>
                <asp:Parameter Name="start" Type="Int32" />
                <asp:Parameter Name="limit" Type="Int32" />
                <asp:Parameter Name="sort" />
                <asp:Parameter Name="dir" />
                <asp:Parameter Name="count" Direction="Output" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    
         <ext:Store 
            ID="StoreListView1" 
            runat="server" 
            AutoLoad="true" 
            RemoteSort="true" 
            DataSourceID="odsData">
            <%--<AjaxEventConfig Type="Load"></AjaxEventConfig>--%>
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="={0}" />
                <ext:Parameter Name="limit" Value="={15}" />
                <ext:Parameter Name="sort" Value="={''}" />
                <ext:Parameter Name="dir"  Value="={''}" />
            </AutoLoadParams>
            <Proxy>
                <ext:DataSourceProxy />
            </Proxy>
            <Reader>
                <ext:JsonReader ReaderID="Reader">
                    <Fields>
                        <ext:RecordField Name="Column1" Type="String" />
                        <ext:RecordField Name="Column2" Type="String" />
                        <ext:RecordField Name="Column3" Type="String" />
                        <ext:RecordField Name="Column4" Type="String" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
        <ext:AbsoluteLayout ID="AbsoluteLayoutForm1" runat="server">
            <ext:GridPanel ID="lstPregoes"
                runat="server"
                StoreID="StoreListView1"
                StripeRows="true"
                X="13"
                Y="13"
                Width="605"
                Height="352">
                <ColumnModel ID="ColumnModelListView1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Column_1" Header="Column_1" Width="85" Sortable="true" DataIndex="Column1" />
                        <ext:Column Header="Column_2" Width="197" Sortable="true" DataIndex="Column2" />
                        <ext:Column Header="Column_3" Width="163" Sortable="true" DataIndex="Column3" />
                        <ext:Column Header="Column_4" Width="135" Sortable="true" DataIndex="Column4" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModelListView1" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolBar ID="PagingToolBarListView1" runat="server" 
                        PageSize="15" 
                        StoreID="StoreListView1" />
                </BottomBar>
            </ext:GridPanel>
        </ext:AbsoluteLayout>
        
    </Body>
    
</ext:Window>

    Thanks !

Similar Threads

  1. [CLOSED] IIS7 Windows 7 x Windows 2008
    By majunior in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Nov 08, 2011, 6:56 PM
  2. Is coolite framework applicable also for windows application?
    By kurt_jackson19 in forum 1.x Help
    Replies: 5
    Last Post: Mar 23, 2010, 5:17 AM
  3. [CLOSED] Desktop BUG: Modal windows can be minimized and you can interact with the other windows
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 31, 2009, 2:49 PM
  4. mixing of desktop windows and normal windows inside a desktop
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Mar 17, 2009, 1:17 AM
  5. [INVALID] Windows don't appear in Windows Vista
    By yyyhxm1 in forum Bugs
    Replies: 1
    Last Post: Mar 29, 2008, 7:04 PM

Posting Permissions