0

Create MDI style skeleton?

asked 2011-12-16 12:39:16 +0800

davout gravatar image davout
1435 ● 3 ● 18

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?

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2011-12-16 13:52:00 +0800

davout gravatar image davout
1435 ● 3 ● 18

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?

link publish delete flag offensive edit

answered 2011-12-16 15:09:05 +0800

mhj gravatar image mhj flag of Brazil
806 ● 1 ● 7

look for zkfiddle below, i hope help you.

ZKFiddle-Link

TestComposer.java
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");
	}
}

index.zul
<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>

link publish delete flag offensive edit

answered 2011-12-16 15:37:46 +0800

davout gravatar image davout
1435 ● 3 ● 18

Not sure what you mean?

link publish delete flag offensive edit

answered 2011-12-16 16:12:41 +0800

davout gravatar image davout
1435 ● 3 ● 18

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>

link publish delete flag offensive edit

answered 2011-12-16 16:46:23 +0800

davout gravatar image davout
1435 ● 3 ● 18

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?

link publish delete flag offensive edit

answered 2011-12-17 07:49:58 +0800

davout gravatar image davout
1435 ● 3 ● 18

Any helpers?

link publish delete flag offensive edit

answered 2011-12-24 16:16:38 +0800

benbai gravatar image benbai
2228 ● 6
http://www.zkoss.org

Hi davout,

The first way works for me if change left="500" to left="500px", seems the "px" is required.

Regards,
ben

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-12-16 12:39:16 +0800

Seen: 290 times

Last updated: Dec 24 '11

Related questions

Using controller

Error: Replicated language: xul/html

php

Window Overlapped

Echo/Casabac [closed]

OnClick on label

Problem with Checkbox [closed]

Look of a control [closed]

Documentation?

Combo Box

About Us | Faq | Help | Privacy Policy | Contact Us
Copyright Potix Corporation 2015.
Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license.
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More