3 Replies Latest reply on Nov 18, 2009 1:13 PM by chris.s.jordan

    AIR with JavaScript and AJAX (noob design issues)


      Okay, so as the subject states, I'm a noob when it comes to designing an AIR app. My question is kind of two fold:


      First, as a matter of design, I've got a main window that has several drop-down type menus "File", "Preferences", "Help" that kind of thing. My plan was to keep reusing the main window for each of my different screens (unless a pop-up/dialog type screen was called for)


      Anyway, the application I'm writing will, in part, handle a database of patrons. So under one of the menus (File in this case) I've got a "Patron" option. Clicking on "Patron" fires a function called newPatron() which in turn calls my function ebo.displayScreen('patron.htm'). This latter function takes the filename passed in and reads that file then dumps it's contents out to the main screen.


      So, my main window consists (in part) of the following html:


      <body onload="ebo.doLoad();">

           <div id="content"></div>



      then my displayScreen function looks like this:


      function displayScreen(filename){

           var my = {};

           // get a handle on the file...

           my.file = air.File.applicationDirectory(resolvePath(filename);

           // get a handle on the stream...

           my.stream = new air.FileStream();

           //open the stream for read...

           my.stream.open(my.file, air.FileMode.READ);

           // read the data...

           my.data = my.stream.readUTFBytes(my.stream.bytesAvailable);

           // close the stream...



           // update the screen (I'm using jQuery here)




      So anyway, this works like a champ. I click on "Patron" from my file menu and the screen changes to display the contents of patron.htm.


      Currently, patron.htm just contains the following:

      <div style="text-align:left;">

           <input type="button" value="add" onclick="ebo.add(1,2);" />


      <div id="result"><div>


      ebo.add looks like this:

      function add(a,b){

           var my = {};

           my.result = a + b;

           $("#result").empty().append(my.result + "<br />");



      So, if anyone hasn't guessed by now, the code contained in the ebo namespace gets included on the main screen when the application loads, and my problem is that despite the fact that once the patron.htm file is loaded in the content div by clicking on the menu option, my button on that screen refuses to work. I've even tried just having the button do an alert directly,


      <input type="button" value="add" onclick="alert('AIRRocks!');" />


      but even that fails!


      So, I added some code to the main page to test a button from there...


      <body onload="ebo.doLoad();">

           <input type="button" value="add" onclick="ebo.add(1,10);" />

           <div id="result"></div>

           <div id="content"></div>



      So, now when the main screen loads, I get an "add" button and when I click it the number 11 appears in the "result" div. When I click on the Patron menu option, the new html and javascript are loaded into the "content" div, but the add button in that area refuses to work!


      What gives? I'm sure I'm missing something. So I guess the two questions are: is my scheme of loading new content into the main window by reading the contents of a file, flawed in some way? Or am I just missing something about making calls from this dynamically loaded content? It *looks* like it should work fine, but if I can't make javascript calls from the resultant content, then the concept is no good.


      I realize this has been a somewhat long winded post, but hopefully it describes in enough detail the problem I'm having. I should maybe add that I've looked at what's in the DOM using the AIR HTML/JS Application Inspector and it looks like everything should work perfectly.


      I hope someone out there can help me and might have the patience to explain where I've gone wrong. I might also mention that the only book I've read (or am reading) on AIR with JavaScript and AJAX is "Adobe AIR (Adobe Integrated Runtime) with Ajax: Visual QuickPro Guide"... it really hasn't covered aspects of what makes good design (like what's the best way to reuse the main application window to hold interactive content)... but anyway, there you have it.


      Again, I hope someone can help me out.