-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I'm trying to create a skeleton test app that supports a MDI style interface where multiple data windows can be open in the 'center' data area.
See the test ZUL below:
<?page title="Auto Generated index.zul"?> <window height="100%" width="100%" title="Test" border="normal"> <div> <menubar> <menu label="List"> <menupopup> <menuitem label="New" /> <menuseparator /> <menuitem label="Open" /> <menuitem label="Save" /> <menuitem label="Save as..." /> <menuitem label="Print" /> </menupopup> </menu> <menu label="View"> <menupopup> <menuitem label="List hierarchy" /> <menuseparator /> <menuitem label="Export schedule" /> <menuitem label="Export history" /> </menupopup> </menu> <menuitem label="About" /> </menubar> </div> <borderlayout> <center> <div id="fred" width="100%" height="100%"> <window title="test 01" border="normal" width="400px" mode="overlapped" height="300px" sizable="true" left="0"> </window> <window title="test 02" border="normal" width="400px" mode="overlapped" height="300px" sizable="true" left="500"> </window> </div> </center> <south> <toolbar> <toolbarbutton label="Fred" /> </toolbar> </south> </borderlayout> </window>
When I run this the ZUL doesn't recognize the 'left' attribute for the two MDI windows, 'test 01' and 'test 02'. They appear on top of each other. Is it possible to set the relative top left position of child windows?
OK, another version of my MDI test app...
<?page title="Auto Generated index.zul"?> <window height="100%" width="100%" title="Test" border="normal"> <div> <menubar> <menu label="List"> <menupopup> <menuitem label="New" /> <menuseparator /> <menuitem label="Open" /> <menuitem label="Save" /> <menuitem label="Save as..." /> <menuitem label="Print" /> </menupopup> </menu> <menu label="View"> <menupopup> <menuitem label="List hierarchy" /> <menuseparator /> <menuitem label="Export schedule" /> <menuitem label="Export history" /> </menupopup> </menu> <menuitem label="About" /> </menubar> </div> <borderlayout height="100%" width="100%"> <center id="joe"> <window id="fred" width="100%" height="100%"> <window id="test01" title="test 01" border="normal" width="400px" height="300px" sizable="true" left="0" closable="true" maximizable="true" minimizable="true" mode="embedded" draggable="true" droppable="true"> </window> <window id="test02" title="test 02" border="normal" width="400px" height="300px" sizable="true" left="500" closable="true" maximizable="true" minimizable="true" mode="embedded" draggable="true" droppable="true"> </window> </window> </center> <south> <toolbar height="40px"> <toolbarbutton label="Fred" /> </toolbar> </south> </borderlayout> </window>
... but this lines up the two 'test01' and 'test02' MDI children below each other. Is there a layout parent tag I can use that would allow the child windows to be positioned at specific pixel top/left positions?
look for zkfiddle below, i hope help you.
package j3dlml34$v2;import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;public class TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}
<zk>
<window height="100%" width="100%" title="Test" border="normal">
<div>
<menubar>
<menu label="List">
<menupopup>
<menuitem label="New" />
<menuseparator />
<menuitem label="Open" />
<menuitem label="Save" />
<menuitem label="Save as..." />
<menuitem label="Print" />
</menupopup>
</menu>
<menu label="View">
<menupopup>
<menuitem label="List hierarchy" />
<menuseparator />
<menuitem label="Export schedule" />
<menuitem label="Export history" />
</menupopup>
</menu>
<menuitem label="About" />
</menubar>
</div>
<borderlayout height="100%" width="100%">
<center id="joe">
<window id="fred" width="100%" height="100%">
<div align="center">
<window id="test01" title="test 01" border="normal"
width="400px" height="300px" sizable="true" left="0"
closable="true" maximizable="true" minimizable="true"
mode="embedded" draggable="true" droppable="true">
</window>
<window id="test02" title="test 02" border="normal"
width="400px" height="300px" sizable="true" left="500"
closable="true" maximizable="true" minimizable="true"
mode="embedded" draggable="true" droppable="true">
</window>
</div>
</window>
</center>
<south>
<toolbar height="40px">
<toolbarbutton label="Fred" />
</toolbar>
</south>
</borderlayout>
</window>
</zk>
Getting closer to a solution. I found the new '<absolutelayout>' tag in R6. I can now position the MDI child windows at specific x/y locations but this only works if the windows are 'embedded'. I really want them as 'overlapped' to make the drag and drop and resizing easier. Any ideas?
<?page title="Auto Generated index.zul"?> <window height="100%" width="100%" title="Test" border="normal"> <div> <menubar> <menu label="List"> <menupopup> <menuitem label="New" /> <menuseparator /> <menuitem label="Open" /> <menuitem label="Save" /> <menuitem label="Save as..." /> <menuitem label="Print" /> </menupopup> </menu> <menu label="View"> <menupopup> <menuitem label="List hierarchy" /> <menuseparator /> <menuitem label="Export schedule" /> <menuitem label="Export history" /> </menupopup> </menu> <menuitem label="About" /> </menubar> </div> <borderlayout height="100%" width="100%"> <center id="joe"> <absolutelayout> <absolutechildren x="0" y="0"> <window id="test01" title="test 01" border="normal" width="400px" height="300px" sizable="true" closable="true" maximizable="true" minimizable="true" draggable="true"> </window> </absolutechildren> <absolutechildren x="500" y="0" > <window id="test02" title="test 02" border="normal" draggable="true" width="400px" height="300px" sizable="true" closable="true" maximizable="true" minimizable="true" > </window> </absolutechildren> </absolutelayout> </center> <south> <toolbar height="40px"> <toolbarbutton label="Fred" /> </toolbar> </south> </borderlayout> </window>
Seems to be a limitation with absolutechild or something inside a window that has mode=overlapped. With an overlapped window inside an absolutechild tag the absolutechild x/y co-ordinates are just ignored and the window is positioned at the top left.
Any ideas on how to address this?
Hi davout,
The first way works for me if change left="500" to left="500px", seems the "px" is required.
Regards,
ben
Asked: 2011-12-16 12:39:16 +0800
Seen: 290 times
Last updated: Dec 24 '11