This sample demonstrates how a window component's position and behavior can be configured to achieve different effects.

Overlapped window: a draggable window which does not close even if the current focus is not on itself

Popup window: a draggable window which closes when the current focus is not on itself

Embedded window: a non-draggable window which does not close even if the current focus is not on itself.

<zk>
	<style>
		.sysWin .z-window-embedded-cnt ,
		.sysWin .z-window-overlapped-cnt,
		.sysWin .z-window-popup-cnt {padding: 0px;}
	</style>
	<div height="380px">
		<window id="win" border="normal" width="350px" minheight="350" sclass="sysWin">
			<caption label="Complex Window" image="/widgets/window/positioning/img/FirstWindow-24x24.png" />
			<borderlayout height="300px">
				<north border="none">
					<menubar id="menubar" width="100%">
						<menu label="Project" image="/widgets/window/positioning/img/Briefcase-16x16.png">
							<menupopup>
								<menuitem label="New" onClick="alert(self.label)" image="/widgets/window/positioning/img/BriefcaseSpark-16x16.png" />
								<menuitem label="Open" onClick="alert(self.label)" image="/widgets/window/positioning/img/BriefcaseOpen-16x16.png" />
								<menuitem label="Save" onClick="alert(self.label)" image="/widgets/window/positioning/img/DisketteBlack-16x16.png" />
								<menuseparator />
								<menuitem label="Exit" onClick="alert(self.label)" image="/widgets/window/positioning/img/DoorOpen-16x16.png" />
							</menupopup>
						</menu>
						<menu label="Help" image="/widgets/window/positioning/img/QuestionmarkButton-16x16.png">
							<menupopup>
								<menuitem label="Index" onClick="alert(self.label)" />
								<menu label="About">
									<menupopup>
										<menuitem label="About ZK" onClick="alert(self.label)" />
										<menuitem label="About Potix" onClick="alert(self.label)" />
									</menupopup>
								</menu>
							</menupopup>
						</menu>
						<menu image="/widgets/window/positioning/img/Spyglass-16x16.png">
							<menupopup>
								<menuitem label="Index" onClick="alert(self.label)" />
							</menupopup>
						</menu>
					</menubar>
				</north>
				<center border="none">
					<div>
						Auto-position (applicable if not embedded)
						<image src="/widgets/window/positioning/img/earth.png" />
					</div>
				</center>
			</borderlayout>
		</window>
	</div>
</zk>

<zk>
	<vlayout>
		<label value="Select a mode: " />
		<radiogroup>
			<attribute name="onCheck"><![CDATA[
				int s = self.getSelectedIndex();
				switch (s){
					case 0:
						win.setSizable(true); 
						win.doOverlapped();
						pos.setVisible(true);
						break;
					case 1:
						win.setSizable(true); 
						win.doPopup();
						pos.setVisible(true);
						break;
					default:
						win.setSizable(false);
						win.doEmbedded();
						pos.setVisible(false);
				}
			]]></attribute>
			<vlayout>
				<radio label="Overlapped" />
				<radio label="Popup" />
				<radio label="Embedded" checked="true" />
			</vlayout>
		</radiogroup>
	</vlayout>
	<div height="15px" />	
	<vlayout>
		<radiogroup id="pos" visible="false">
			<attribute name="onCheck"><![CDATA[
				win.position = self.selectedItem.value;
				win.visible = true;
			]]></attribute>
			<label value="Select a position: " />
			<vlayout>
				<radio label="Left, Center" value="left,center" />
				<radio label="Right, Bottom" value="right,bottom" />
				<radio label="Center" value="center" />
			</vlayout>
		</radiogroup>
	</vlayout>
</zk>