This note shows how you can embed a Cappuccino application in a regular HTML page.  Generally our Cappuccino applications run in the entire window to get that great desktop feel.  Sometimes we have a nice little applications that can act as a component that we want to use on a page similar to a flash object.  Let's look at how we can do this.

Actually this is rather simple and probably obvious to any HTML and/or Cappuccino pro, but it might be nice to have an example here.  The solution is, of course, the "iframe" tag.  The iframe tag allows us to embed an HTML document into a region of our HTML page.  We'll use this to embed our Cappuccino application.

First make a Cappuccino object (using "capp gen" or copying the NewApplication directory).  This gives us the normal "Hello World" application with the index.html driving it.

Next rename the index.html file to, say, app.html.  This is the HTML file we'll load into our iframe.

Now make a new index.html file that will hold the application.  The one used to create the above image is attached as Iframe.zip.  The real operative part of this index.html is

    <div id=frameWrapper>
      <iframe id="app" src ="app.html">
        <p>Your browser does not support iframes.</p>
      </iframe>
    </div>

Notes that we've wrapped the application in a div.  This lets us position it where we want (positioning of iframes is rather poor).  The other interesting thing is in the stylesheet where we define the styles of the "app" and "frameWrapper" elements:

 #app {
    width:  100%;
    height: 100%
  }

  #frameWrapper {
    float:            right;
    background-color: #ffffea;
    width:            200px;
    height:           200px;
  }

Notice we set the app size to 100% width and height.  This forces it to fill the entire wrapper div.  We then use the frameWrapper elements to position it; here float right so the text wraps around it.

This looks like a nice way to build simple "widgets" that we can include in normal HTML pages.  Kind of web 2.5 (or maybe 1.5?)

Attachments:

Iframe1.zip

[new index.html file]

2 Kb