[CLOSED] Communications between a Master page and child pages load in iFrame

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Communications between a Master page and child pages load in iFrame

    Hi,

    I have a problem with the communication between a Master Page and child pages.
    I need to build a Wizard which has to load each step, a distinct page, via the loader of a panel.
    The child pages are loaded in Frame mode and i need to get data from the child pages once the wizard is complete.
    Currently i use Ext.JS.Call to call direct method from each child page which then has to send the data back to the Master Page.
    However i have several issues with such a strategy:
    1. After each call i can't know when the child page answer to this call and i have to create a Thread to wait for all the answers
    2. I have to put data in static members of the Parent Page which is quite inneficient
    3. As i used a thread to wait for the answers, i have a hard time to notify the user that the Wizard is effectively completed and i can't access non static members or method of the Master Page.

    Thus i want to know if there is not a better and more efficient to achieve what i want to do, using events or anything else.
    For the record i am new with Ext.

    Thanks.
    Last edited by Baidaly; Nov 03, 2013 at 3:20 AM. Reason: [CLOSED]
  2. #2
    Hi @timiteh,

    Welcome to the Ext.NET forums!

    1. After each call i can't know when the child page answer to this call and i have to create a Thread to wait for all the answers

    3. As i used a thread to wait for the answers, i have a hard time to notify the user that the Wizard is effectively completed and i can't access non static members or method of the Master Page.
    I don't quite understand why do you need to wait it in an individual Thread. Could you elaborate it, please? A DirectMethod has a success and failure handlers you might want to use.

    2. I have to put data in static members of the Parent Page which is quite inneficient
    Please also clarify why are you considering it as inefficient? What kind of data you are dealing with? Were you considering to store the the global Application object?

    It might an option to read the data for the child pages via JavaScript. Is the child pages' data accessible in JavaScript (I mean without DirectMethods).

    Also I would consider a possibility to use a MessageBus.
    https://examples2.ext.net/#/MessageBus/Basic/Complex/
  3. #3
    Hi Danniil,

    Thanks for the welcome ;-)

    Quote Originally Posted by Daniil View Post
    Hi @timiteh,

    Welcome to the Ext.NET forums!



    I don't quite understand why do you need to wait it in an individual Thread. Could you elaborate it, please? A DirectMethod has a success and failure handlers you might want to use.
    I need to wait because when i call a direct method of a child page, i can't know when this direct method will be executed.
    In fact, it seems that the direct method is executed only after the method which launch the call has ended.
    Thus the Thread , enables to know when all the call to the child pages have been executed.
    To be more concrete. Each child page represent a step of the Wizard, which is the Parent Page.
    Once the Wizard is complete, we need to get data from each child page.
    Thus we call a direct method of each child page, for exemple GetContent, with this instruction:
    X.Js.Call("Ext.getCmp('Paneln').iframe.dom.contentWindow.Y.GetContent");
    Where n is an arbitrary integer.
    When the use these instruction, we have no way to know when all the GetContent method will be executed.
    Moreover, each GetContent put the data in a field of the Parent Page.
    So to know that all the data have been sent back to the Parent Page we use a Thread which will periodically check that all the fields have a value.
    I think that the problem come from the fact that the calls are asynchronous while we would need synchronous call.

    Quote Originally Posted by Daniil View Post
    Please also clarify why are you considering it as inefficient? What kind of data you are dealing with? Were you considering to store the the global Application object?
    By inefficient, i mean that it is cumbersome to use static fields to store data of just one instance of the Parent Page.
    Not forgetting that if there are at least 2 concurrent instances, things can become awful quite quickly.
    However, i am considering using a Session variable rather static fields.

    Quote Originally Posted by Daniil View Post
    It might an option to read the data for the child pages via JavaScript. Is the child pages' data accessible in JavaScript (I mean without DirectMethods).

    Also I would consider a possibility to use a MessageBus.
    https://examples2.ext.net/#/MessageBus/Basic/Complex/
    Well, i would prefer to avoid using Javascript to get data from the child pages.
    Me and my team are new with Ext (besides 2 people though they are not as strong as we thought), we have quite short delays and Javascript is not what i would call our favorite language. We try to avoid it as much as i can.
    I will check the MessageBus sample.
    Last edited by Daniil; Oct 29, 2013 at 10:42 AM. Reason: Please use [CODE] tags
  4. #4

    Doc on MessageBus

    Hi Daniil,

    Where can i get more information on Messagebus as well as a step by step tutorial ?
    I think that this could be a solution to my problem but i need a tutorial and more information to better understand this technology.
  5. #5
    Thank you for all the details. The scenario looks more or less clear for me. Seems a similar scenario is being discussed here:
    http://forums.ext.net/showthread.php?27007

    Is it your colleague?

    Quote Originally Posted by timiteh View Post
    In fact, it seems that the direct method is executed only after the method which launch the call has ended.
    Well, yes, when you call
    X.Js.Call("...");
    it just generates JavaScript which executes when a browser gets a response. There is no other way to initiate a client-server response from server.

    Quote Originally Posted by timiteh View Post
    So to know that all the data have been sent back to the Parent Page we use a Thread which will periodically check that all the fields have a value.
    It might be better to use a DirectMethods' success/failure handlers instead of monitoring. Here is a simple example to demonstrate what I mean.

    Parent Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void SaveAll(object sender, DirectEventArgs e)
        {
            this.Session["count"] = 0;
            X.Js.Call("callA"); // By the way, do you really need to call it from server side? 
            X.Js.Call("callB"); // It would be easier to call from client.
        }
    
        [DirectMethod]
        public void DataPrepared()
        {
            int count = Convert.ToInt32(this.Session["count"]);
    
            this.Session["count"] = ++count;
    
            if (count == 2) 
            {
                X.Msg.Alert("DataPrepared", "All the data is ready").Show();
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var callA = function () {
                App.WindowA.getBody().App.direct.GetContent({ // App.WindowA.getBody() produces the same as Ext.getCmp('WindowA').iframe.dom.contentWindow
                    success: function () {
                        App.direct.DataPrepared();
                    }
                }); 
            };
    
            var callB = function () {
                App.WindowB.getBody().App.direct.GetContent({ // App.WindowB.getBody() produces the same as Ext.getCmp('WindowA').iframe.dom.contentWindow
                    success: function () {
                        App.direct.DataPrepared();
                    }
                }); 
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Window ID="WindowA" runat="server" Title="A" X="50" Y="50">
                <Loader runat="server" Mode="Frame" Url="A.aspx" />
            </ext:Window>
    
            <ext:Window ID="WindowB" runat="server" Title="B" X="100" Y="100">
                <Loader runat="server" Mode="Frame" Url="B.aspx" />
            </ext:Window>
    
            <ext:Button runat="server" Text="Save" OnDirectClick="SaveAll" />
        </form>
    </body>
    </html>
    Child Page A
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        [DirectMethod]
        public void GetContent()
        {
            System.Threading.Thread.Sleep(1500);
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
        </form>
    </body>
    </html>

    Child Page B
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        [DirectMethod]
        public void GetContent()
        {
            System.Threading.Thread.Sleep(4500);
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
        </form>
    </body>
    </html>
    Quote Originally Posted by timiteh View Post
    I think that the problem come from the fact that the calls are asynchronous while we would need synchronous call.
    Well, that is impossible. A parent page has no access to its child (iframe) pages on server. The only way is to access it on client via JavaScript as you are already doing by calling a child page's DirectMethod via JavaScript.


    Quote Originally Posted by timiteh View Post
    By inefficient, i mean that it is cumbersome to use static fields to store data of just one instance of the Parent Page.
    I am not sure how you store the child pages' content in the static fields of the parent page.

    Quote Originally Posted by timiteh View Post
    Not forgetting that if there are at least 2 concurrent instances, things can become awful quite quickly.
    What exactly do you mean under 2 concurrent instances? For example, two instances of the parent page opened by different users? Well, if there are several users, storing its data in a page's static fields is not an option at all, because a page's static fields are stored on the application level. In other words, it is the same for all the users.

    Quote Originally Posted by timiteh View Post
    However, i am considering using a Session variable rather static fields.
    Yes, it might be better in your case.

    Quote Originally Posted by timiteh View Post
    Well, i would prefer to avoid using Javascript to get data from the child pages.
    Me and my team are new with Ext (besides 2 people though they are not as strong as we thought), we have quite short delays and Javascript is not what i would call our favorite language. We try to avoid it as much as i can.
    Well, I understand it and it makes some sense. Though, IMHO, as quick as you overcome it (I mean not acceptance of JavaScript), it would be better for you, because it is practically impossible to avoid using JavaScript to create a strong, well-performance application. In your case, retrieving all the data using JavaScript could be a good solution. By the way, what kind of data do you retrieve from the child pages?

    Also I hava a big question for you - do you really need to use iframes for each Wizard step? I would recomment to avoid it if possible, because iframes are very heavy thing (especially, for IEs) and might have issues with memory.


    Quote Originally Posted by timiteh View Post
    Where can i get more information on Messagebus as well as a step by step tutorial ?
    I think that this could be a solution to my problem but i need a tutorial and more information to better understand this technology.
    Unfortunately, we have no a step-by-step tutorial. Just two examples. Also you can investigate the links provided in this example.
    https://examples2.ext.net/#/MessageBus/Basic/Simple/

    Generally speaking, it should explain all the technology.
  6. #6
  7. #7
  8. #8
    Quote Originally Posted by Daniil View Post
    Thank you for all the details. The scenario looks more or less clear for me. Seems a similar scenario is being discussed here:
    http://forums.ext.net/showthread.php?27007

    Is it your colleague?
    No, i don't know him/her.

    I am not sure how you store the child pages' content in the static fields of the parent page.
    The Parent Page underlying class just need to have static fields matching the content of each child page.

    Yes, it might be better in your case.
    It is and it is cleaner too.

    Well, I understand it and it makes some sense. Though, IMHO, as quick as you overcome it (I mean not acceptance of JavaScript), it would be better for you, because it is practically impossible to avoid using JavaScript to create a strong, well-performance application. In your case, retrieving all the data using JavaScript could be a good solution. By the way, what kind of data do you retrieve from the child pages?
    In fact we are not completely dumb in Javascript, but as i say it is not our favorite language, besides for one or 2 among over a dozen of developpers.
    We acknowledge that we will have soon or late to master JavaScript and ExtJS to better take advantage of the Ext Tech but for now we have a deadline that we absolutely need to meet. Moreover we often face some execution issues with pure Javascript code (cf my previous post).

    The data we need to retrieve from child page are objects such as car or customers.
    Some objects can be quite big indeed.

    Also I hava a big question for you - do you really need to use iframes for each Wizard step? I would recomment to avoid it if possible, because iframes are very heavy thing (especially, for IEs) and might have issues with memory.
    Well, we used user controls at first.
    However we have some serious issues with extremly long loading (especially with IE) and unability to retrieve data from some user controls.
    For example when a user control A is called by a control B, we get some strange results from user control A (some additionnal characters were added to the Textfield values) and we were unable to retrieve the selected items from combobox. Thus we choose to use Pages loaded from iframe instead of user controls. It has improved the loading time and helped fix the data retrieving issue.
    However we are now stuck with the communication problem between Pages.
    Last edited by timiteh; Oct 30, 2013 at 11:55 AM.
  9. #9
    Quote Originally Posted by timiteh View Post
    However i get this error:
    0x800a138f- Execution error Javascript: Unable to get the App property of a null or undefined reference
    Exactly with this code:
    App.Panel1.getBody().App.direct.Y.GetContent({ // App.WindowA.getBody() produces the same as Ext.getCmp('WindowA').iframe.dom.contentWindow                
                    success: function () { App.direct.AllDataSaved(); }
    You are using DirectMethodNamespace. So, "App.direct" should be replaced with that namespace.
    App.Panel1.getBody().Y.GetContent()
    Just "App.direct" is a namespace by default.

    Quote Originally Posted by timiteh View Post
    The Parent Page underlying class just need to have static fields matching the content of each child page.
    Yes, I got it. But I am rather asking how you populate those static fields with the content of each child page.

    However we are now stuck with the communication problem between Pages.
    Yes, it is one of its disadvantages.
  10. #10
    Hi Daniil,

    Quote Originally Posted by Daniil View Post
    You are using DirectMethodNamespace. So, "App.direct" should be replaced with that namespace.
    App.Panel1.getBody().Y.GetContent()
    Just "App.direct" is a namespace by default.
    I have tried with
    App.Panel1.getBody().Y.GetContent()
    And i get this error:
    0x800a138f- Execution error Javascript: Unable to get the Y property of a null or undefined reference
    What i find curious is that such an instruction work perfectly with a JS.Call.

    Quote Originally Posted by Daniil View Post
    Yes, I got it. But I am rather asking how you populate those static fields with the content of each child page.
    Well, that is simple when the Wizard is complete, the GetContent method of each child page is called and we directly assign the data from the child page to the corresponding static field of the Parent page.
    In case of the sample code i gave in a previous post, the child page A.aspx would fill a A static field from the Default.aspx Parent Page for example.


    Quote Originally Posted by Daniil View Post
    Yes, it is one of its disadvantages.
    Indeed.
    However is there no way to fix the troubles we have with user controls, such as:
    1. Extremly long loading time
    2. Unability to correctly retrieve data(especially combobox selected item) from a called user control, when it is called from another user control


    Because if there are solutions for these issues we could consider, giving up the use of Pages which has its share of drawbacks.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] gridpanel with paging - set CheckboxSelectionModel on page load for all pages
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 20, 2013, 1:03 PM
  2. Replies: 1
    Last Post: Jul 15, 2013, 1:35 PM
  3. Replies: 2
    Last Post: Feb 29, 2012, 6:26 PM
  4. How to load pages in same tab with single iframe
    By NishaLijo in forum 1.x Help
    Replies: 0
    Last Post: Aug 19, 2010, 10:39 AM
  5. [CLOSED] Load Fresh Page In iFrame...
    By tjbishop in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 03, 2010, 3:19 PM

Posting Permissions