This page describes how to use qooxdoo widgets inside HTML-dominated pages.

Integrating qooxdoo widgets inside existing pages is important for all of you which already have an existing page(s) or a portal up and running and therefore don’t want to transform these into a full-blown Rich internet application (RIA).

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

• position a widget with absolute coordinates (maybe overlay 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 are based on the same foundation.

Instead of using qx.application.Standalone as base class you need to extend from qx.application.Inline as a start 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 to handle with.

To add widgets at specific locations inside the page you can create 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 "dateChooser" element 
      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);
    }
  }
});

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

• Absolute positioning demo
• Page flow demo