Table of Contents
Inline Widgets
This page describes how to use qooxdoo widgets inside HTML-dominated pages.
Target Audience
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).
Ways of Integration
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 } } });
Absolute Positioning
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 }); } } });
Page Flow
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); } } });
Online Demos
Take a look at the online demos to see the use of inline widgets in action.
