How to insert widgets in place inside an existing HTML page ?
If you have some existing HTML page, you might want to insert widgets in the flow. For this purpose, you just have to specify some settings in the HTML page before loading the application and bind your widget to a DIV container.
In the HTML code
As Qooxdoo has its own layout manager, your own HTML page won’t scroll as usual ; so you have to activate the scollbars :
<head> <script type="text/javascript"> qxsettings = new Object(); qxsettings["qx.enableApplicationLayout"] = false; </script> <script type="text/javascript" src="script/my.example.ns.myApp.js"></script> </head>
A div container must be inserted inside the html page
<div>Some content...</div> <div id="myInlineWidget"></div> <div>Some other content...</div>
In the Javascript
In the class my.example.ns.myApp.Application :
// example with a button to put inline var someWidget = new qx.ui.form.Button("My Button", "custom/image/test.png"); var doc = qx.ui.core.ClientDocument.getInstance(); var inlineWidget = new qx.ui.basic.Inline("myInlineWidget"); inlineWidget.add(someWidget); doc.add(inlineWidget);
Don’t forget to rebuild the source.
An issue has been reported : there is a bug with coordinates, when one scroll down the browser. Read this thread:”table row select bug (FF)...” Hopefully this will be fixed soon.
