9 Replies Latest reply on Sep 4, 2009 9:51 AM by Jeff Swartz

    bridge problem

    clacke22

      I got 2 documents, read_settings.html in the air application that has a iframe that connects to settings.asp that is located on my server.

      In read_settings.html I have a select dropdown, and I want to get the values from settings.asp on my server.

       

      I guess that I have to have a bridge between thoose two pages, but how?

      Can somebody please show a simple example of what the 2 docs should look like to get it to work.

       

      Thanks.

        • 1. Re: bridge problem
          Jeff Swartz Level 3

          Here's some information on script-bridging:

           

          http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7e5c. html

           

          http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f08. html#WS5b3ccc516d4fbf351e63e3d118666ade46-7f06


          http://www.adobe.com/devnet/air/ajax/quickstart/sandbox_bridge.html

           

          The following example illustrates how to create a parent sandbox bridge in response to the dominitialize event dispatched from the child frame:

           

          <html> 
          <head>
          <script>
          var bridgeInterface = {};
          bridgeInterface.testProperty = "Bridge engaged";
          function engageBridge(){
              var sandbox = document.getElementById("sandbox");
              sandbox.contentWindow.parentSandboxBridge = bridgeInterface;
          }
          </script>
          </head>
          <body>
          <iframe id="sandbox"
                      src="http://www.example.com/air/child.html"  
                      ondominitialize="engageBridge()"/>
          </body>
          </html>

           

          The iframe page loaded from a remote web site can access the parent sandbox bridge:

           

          <html> 
              <head>
                  <script>
                      document.write(window.parentSandboxBridge.testProperty);
                  </script>  
              </head>  
              <body></body>
          </html>
          • 2. Re: bridge problem
            clacke22 Level 1

            Hi Jeff

            You are the one I hoped would answer my question :-)

            I found your replay to another question that is exactly what I want to do.

             

            "Yes, the sandbox bridge mechanism lets JavaScript from a page in a non-application sandbox (e.g., from a remote URL) communicate with JavaScript in the parent page that is in the application (AIR) sandbox. The parent page can also reference a function in the remote page (via the sandbox bridge)."

             

            I would like to understand bridges ones for all, I have had a hard time to understand how it works, it might be simple, maybe I´m not thinking right :-).

             

            The bridge code above, is that setting up a universal connection between the 2 pages, so the app page can trigger javascript functions in the server page and vise versa? I will test it after this answer.

             

            What I want to do is the following:

            1. In read_settings.html(app page), I have 2 input feilds, (username and password), and then I have a select dropdown (departments).

            2. I can save these values to the computer and get them on another page (this works fine if all the code is in the read_settings.html file)

            3. But now I want to get the values for the dropdown from my database instead (from settings.asp on my server)

            4. The problem!! I have managed to get the values from settings.asp to display in the dropdown, but when I click on the "Save" button it doesent work (the javascript is not working-saving the information) so therefore I think that the bridge connection is not working as it should.

             

             

            The read_settings.html code looks like this:

             

              function loada()

                    var info = getSettings();
                    var userId=92;
                   window.frames[0].parentSandboxBridge = Bridge;
                 
                    window.frames[0].location.href = "http://www.myserver.se/settings.asp?userI=" + userId +  "&userId="+info.username+"&pass="+info.password+"&avd="+info.department;

            }

             

            <body onLoad="loada()">

            <form onSubmit="return false">
                Username:<br>
                <input name="username"><br>
                Password:<br>
                <input name="password" type="password"><br>

                  <iframe
            id="iframen"
            src="http://www.myserver.se/settings.asp?userId=92"
            sandboxRoot="http://www.myserver.se/foo/"
            documentRoot="http://www.myserver.se/"
            allowCrossDomaininXHR="true"
            scrolling="no">

            </iframe>


                   <button type="button" onClick="saveForm(this.form)">Save settings</button>
            </form>

             

            And the settings.asp page on my server looks like this:

             

               <select name="department" id="department">
                 <option value="">------------------------------</option>
                 <%do until rs.eof%>
                 <option value="<%=rs("mappname")%>"><%=rs("settings_rubrik")%></option>
            <%rs.movenext
            loop%>

            </select>

             

            What is it that I do wrong?

            I would highley appriciatie your help.

            Thanks, Claes


            I have now tested your code and it writes "Bridge engaged" on the read_settings.html page and the dropdown gets its values, but I cant save it!?

            The javascript does not work?

            • 3. Re: bridge problem
              clacke22 Level 1

              Ok I will try again.

              I want to do the following:

              "Yes, the sandbox bridge mechanism lets JavaScript from a page in a non-application sandbox (e.g., from a remote URL) communicate with JavaScript in the parent page that is in the application (AIR) sandbox. The parent page can also reference a function in the remote page (via the sandbox bridge)."

               

              Is there anykind of "universal" connection for a application page and a page on the server.

              So you can set it up and then trigger a javascript funktion from one page and have the funktion on the other page?

              • 4. Re: bridge problem
                Jeff Swartz Level 3

                The sandbox bridge is specifically used to let application and non-application content access each others properties and methods. But they can only access the specific properties and methods that are exposed via the bridge. For security purposes, content in different sandboxes do not have universal access to each others scripts.

                • 5. Re: bridge problem
                  clacke22 Level 1

                  Hi Jeff

                  Ok, so how do I get the saveForm function in my read_settings.html file to find the select with id="department" in the settings.asp on my server, because that must be the problem, why it wont save the select values to the computer, since it works fine to save the all the info if all the code is in the read_settings.html in the app.

                  I would highley appriciate your help to get this working.

                  Regards Claes

                  • 6. Re: bridge problem
                    clacke22 Level 1

                    So to see if I understand how it works :-)

                     

                    With the code that I got from you:

                     

                    var bridgeInterface = {};
                    bridgeInterface.testProperty = "Bridge engaged";
                    function engageBridge(){   
                    var sandbox = document.getElementById("sandbox");   
                    sandbox.contentWindow.parentSandboxBridge = bridgeInterface;
                    }

                     

                    var sandbox = document.getElementById("sandbox");

                    - This sets up a connection via the iframe to the page that is declared in the iframe.

                     

                    sandbox.contentWindow.parentSandboxBridge = bridgeInterface;

                    - This tells that we can send information from the parent page in the app with parentSandboxBridge to the server page.

                    - bridgeInterface is what we will send. This writes "Bridge engaged" in the settings.asp page.

                     

                    In settings.asp on the server the code is:

                    document.write(window.parentSandboxBridge.testProperty);

                    - window.parentSandboxBridge

                    This tells that we get something from the parent page. In this case testProperty

                    testProperty

                    - This gets the value from testProperty in the app page and writes "Bridge engaged"; in settings.asp.

                     

                    Now, this connects to settings.asp and tells that we can send info etc from the app page to the server page.

                    But if I want to get a value, function etc from the server page, then I have to connect and tell that I want something(funcion, id value etc) from that page.

                    Do I do something like this then?

                     

                    var bridgeInterface = {};
                    bridgeInterface.testProperty = document.getElementById("department");

                    function engageBridge(){   
                    var sandbox = document.getElementById("sandbox");   
                    sandbox.contentWindow.childSandboxBridge = bridgeInterface;
                    }
                    Where testProperty gets the value of the select with id="department" in settings.asp

                    So this is connecting to settings.asp and tells that we instead of sending info with  parentSandboxBridge to the server page, that we get info from that page with childSandboxBridge.

                     

                    Have I understand it right? Or Im I totally lost? :-)

                    • 7. Re: bridge problem
                      Jeff Swartz Level 3

                      The application page can register a function to be available to the child non-application page, using the sandbox bridge. For example, add the following code to the application page:

                       

                      var bridgeInterface = {};
                      bridgeInterface.passBackData = saveForm;
                      function saveForm(param1, param2)
                      {
                          //...
                      }
                      function engageBridge(){
                          var sandbox = document.getElementById("sandbox");
                          sandbox.contentWindow.parentSandboxBridge = bridgeInterface;
                      }

                       

                      The child page (the page on the server) can now call the follwoing function:

                       

                      window.parentSandboxBridge.passBackData(value1, value2);

                       

                      This will call the bridged saveForm() method in the parent application page script. (You can replace "passBackData" and "saveForm" with your own names.)

                      • 8. Re: bridge problem
                        clacke22 Level 1

                        Thanks Jeff, but it still not working for me :-)

                         

                        No I have the following code in the app page:

                         

                        var bridgeInterface = {};
                        bridgeInterface.passBackData = saveForm(f);


                        function saveForm(f)
                              {
                                var select = f.elements["department"];
                                var fileref = air.File.documentsDirectory.resolvePath("fitness_online");
                                var fs = new air.FileStream;
                                fs.open(fileref, air.FileMode.WRITE);
                                fs.writeUTF(select.options[select.selectedIndex].value + "\r\n"
                                    + f.elements["username"].value + "\r\n"
                                    + f.elements["password"].value + "\r\n");
                                fs.close();
                                var messageDiv = document.getElementById("saveMessage");
                                if (messageDiv)
                                {
                                    messageDiv.innerHTML = "Inställningar sparade!";
                                }
                            }
                           
                        function engageBridge(){
                            var sandbox = document.getElementById("sandbox");
                            sandbox.contentWindow.parentSandboxBridge = bridgeInterface;
                        }

                         

                         

                        <form onSubmit="return false">
                            Username:<br>
                            <input name="username"><br>
                            Password:<br>
                            <input name="password" type="password">

                         

                        <iframe id="sandbox"            
                        src="http://www.myserver.se/settings.asp?userId=92"              
                        ondominitialize="engageBridge()">
                        </iframe>


                             <button type="button" onClick="saveForm(this.form)">Save settings</button>
                        </form>

                         

                        And in the serverpage I have this code:

                         

                        <html> 
                          <head>        
                          <script>            
                         
                        window.parentSandboxBridge.passBackData(department);
                               
                          </script>      
                          </head>      
                          <body>
                         
                             <select name="department" id="department">
                             <option value="">------------------------------</option>
                             <%do until rs.eof%>
                             <option value="<%=rs("mappname")%>"><%=rs("settings_rubrik")%></option>
                        <%rs.movenext
                        loop%>
                            </select>
                             
                         
                          </body>
                          </html>

                        • 9. Re: bridge problem
                          Jeff Swartz Level 3

                          I see a couple of problems in your code.

                           

                          In the app page, your should write this:

                           

                          bridgeInterface.passBackData = saveForm;

                           

                          In the server page, you have the following:

                           

                          window.parentSandboxBridge.passBackData(department);

                           

                          But this will execute when the page loads, and there are two problems with that. First, department is undefined. You probably want to wrap You want to use getElementById() to access the department element. And you should call the code to pass the data over the bridge in a function that is called when the data is actually loaded (not when the script itself loads).