Layout best practice

Suite and Optimus Suite 5
#1

I am currently designing a new application based on Spring MVC and DHTMLX.
I am looking at a UI framework that would allow me to easily reuse widgets in other applications (like the channel widget (left panel) in your RSS demo).
I don’t think any of the existing templating frameworks (like Sitemesh, Apache tile) will work for me. I am curious to see how you solve that issue for the RSS demo and how you decouple the widgets from the layout.

  • Is it modular enough so we can easily plug and play widgets in the layout pattern used or what is the best practice to achieve my goal?
  • Where is the RSS demo source code?

Thanks!

#2

Layout as well as other dhtmlx components are fully JavaScript. You can put html content into Layout, load it by Ajax or load another page in iframe. Moreover, it is possible to attach another dhtmlx component to layout cell. This approach is used in RSS demo. Menu, tree, grid and statusbar are attached to layout cells:
dhtmlx.com/docs/products/dht … omponents/
In this demo data are loaded loaded from xml datasources that are generated by PHP scripts. However, you may use any other scripts, and our Connector (there is Java version) could help with this:
dhtmlx.com/docs/products/dhtmlxC … ndex.shtml

Where is the RSS demo source code?
The demo source code can be send to customers who obtained Suite PRO. However, you can request evaluation version of PRO Suite package (the request can be sent at sales at(@) dhtmlx.com).

#3

Thanks for the answer Alexandra, but the the way RSS does it is the way I try to avoid. I would like to break the coupling between the DHTMLX Layout and the content.
I explain:
dhxGrid = dhxLayout.cells(“a”).attachGrid();

The layout knows that we are going to load a grid in cell “a” and make it impossible to reuse the grid in another application other than copying and pasting the code.

What I am looking is more a method like dhxLayout.cells(“a”).loadWidget(myGrid);
At this point the layout has no clue what I am loading and act as a portal.The ‘myGrid’ widget can be anything (treegrid, editor, etc) and can now be shared between application.

I hope that makes sense. My company is in the process of buying the suite Pro package, that should be finalized this week.

Cyril

#4

Hello,

What I am looking is more a method like dhxLayout.cells(“a”).loadWidget(myGrid);

there is not such a method. Each component is attached by different method. Morover there is not method to attach attach created component into Layout.

However, there is attachObject method that attaches html container into a Layout cell. But if you, for example, attach html container with Grid using this approach, Grid will not automatically resize when layout cell resizes. You will need to set additional event handlers.

#5

This is exactly what I tried. I assign a widget to a div node then attach the node to the layout. If you have any example how to handle the resizing please let me know.

Thanks

Cyril

#6

You may set onResizeFinish and onPanelResizeFinish event handler that will call setSizes of Grid:

[code]layout.attachEvent(“onResizeFinish”,doOnResize);
layout.attachEvent(“onPanelResizeFinish”,doOnResize);

var t;
function doOnResize(){
if(t)
window.crearTimeout(t)
t = window.setTimeout(function(){
grid.setSize()
},100);
}[/code]

#7

Thanks!