How to build an AppUp app from a web page using AppUp encapsulator

In this post I describe a way to take an existing web page and build an AppUpsm center app from it using AppUptm encapsulator.

If you've only just heard about AppUp encapsulator and want to learn a little more before diving in - check out the FAQ.

In order to build an app with encapsulator you need to package up at least some web code into a zip file (here's a video). The zip file needs at least an 'index.html' and an 'icon.png'.

The idea here, is that if you already have a functioning page hosted on the web, you can make an app that simply embeds that page using an HTML iframe tag.

Below is some starter code that can be used as your 'index.html' file. The resulting app has the web page taking up the full window of the app.

When you have your code (and .zip file) ready to go, head on over to encapsulator and start building and testing your app!

<!DOCTYPE HTML>

<html>
  <head>
    <!-- TODO: OPTIONAL : PUT OTHER JS, CSS HERE -->
  </head>
  <body>

    <script type="text/javascript">
  
      function setupAppURL(){
      
          /* TODO: PUT YOUR URL HERE */
          var appUrl = 'http://news.ycombinator.com';

          var appIframe = document.getElementById('appIframe');
          appIframe.src = appUrl;
      }

      function setupIframeResizing() {
        /* initial resize */
        doIframeResize();

        /* now setup the app url */
        setupAppURL();

        /* setup auto resizing - resizes if the user resizes */
        window.onresize = doIframeResize;
      }
      
      function doIframeResize() {
        var appIframe = document.getElementById('appIframe');
        var otherStuffHeight = 21;
        appIframe.height = document.documentElement.clientHeight - otherStuffHeight;
      }
      
      /* chains addfunc to window load handler.. */
      function add_onload_handler(addfunc,altwindow) {
        var targwindow = window;
        if(typeof(altwindow) != 'undefined') {
          targwindow = altwindow;
        }
        
        /* chain the onload functions together */
        var prevf = targwindow.onload;
        var newf  = addfunc;
        targwindow.onload = function(){
            newf();
            if(typeof(prevf) == 'function'){
              prevf();
            }
          };
      }
      
      add_onload_handler(setupIframeResizing);
    </script>
    <iframe
      id="appIframe" 
      frameborder="0" 
      scrolling="auto" 
      marginheight="0" 
      marginwidth="0" 
      src=""
      style="width:100%;overflow:auto">
    </iframe>
  </body>
</html>
For more complete information about compiler optimizations, see our Optimization Notice.