This page describes how you could use qooxdoo widgets inside HTML-dominated pages. This use case is different from creating a regular, “standalone” qooxdoo application.

Integrating qooxdoo widgets into existing HTML pages could be interesting to all users who already have (many) existing pages, often some kind of “portal”, and therefore don’t want to transform these into a standalone rich internet application (RIA).

Take a look at the online demos to see the use of inline widgets in action.

• Absolute positioning demo
• Page flow using Inline
• Dynamic resize for Inline
• Inline window

The setup of an inline application is done by using the create-application script described at the Hello World page. You only have to add the additional option -t with the value inline and you’re done.

/opt/qooxdoo-0.8.2-sdk/tool/bin/create_application.py -n MYAPP -t inline

Once executed you get a skeleton application which is ready-to-use to develop an inline application. The skeleton also demostrates the different integration approaches which are described at the next section.

There are basically two ways of integrating a qooxdoo widget into an existing HTML-dominated page.

• positioning a widget with absolute coordinates (maybe overlaying existing content)
• adding the widget within the page flow by using an existing DOM node as an isle

Which way you choose, depends on what you like to achieve. Technically both share the same foundation.

Instead of using qx.application.Standalone as a base application class you need to extend from qx.application.Inline as a starting point. So basically your (empty) application looks like this:

qx.Class.define("myPortal.Application",
{
  extend : qx.application.Inline,
 
  members :
  {
    main: function()
    {
      this.base(arguments);
 
      // your code follows here
    }
  }
});

Adding a widget to the page without regarding the page flow is a no-brainer. Just create the desired widget and add it to the application root. As the application root is an instance of qx.ui.layout.Basic you only can use left and top coordinates to position your widgets.

qx.Class.define("myPortal.Application",
{
  extend : qx.application.Inline,
 
  members :
  {
    main: function()
    {
      this.base(arguments);
 
      // add a date chooser widget
      var dateChooser = new qx.ui.control.DateChooser();
      
      // add the date chooser widget to the page
      this.getRoot().add(dateChooser, { left : 100, top : 100 });
    }
  }
});

However, the former solution won’t fit for e.g. a portal where the page is divided into several parts. In this case you won’t have any absolute coordinates you could work with reliably.

To add widgets at certain locations inside the page you can create or reuse DOM nodes, which act as islands, where the qooxdoo widgets live in with regards to the page flow.

qx.Class.define("myPortal.Application",
{
  extend : qx.application.Inline,
 
  members :
  {
    main: function()
    {
      this.base(arguments);
 
      // create the island by connecting it to the existing
      // "dateChooser" DOM element of your HTML page.
      // Typically this is a DIV as in <div id="dateChooser"></div>
      var dateChooserIsle = new qx.ui.root.Inline(document.getElementById("dateChooser"));
      
      // create the date chooser widget and add it to the inline widget (=island)
      var dateChooser = new qx.ui.control.DateChooser();
      dateChooserIsle.add(dateChooser);
    }
  }
});