z30-alignpack-0004.zul

ZK是一个Ajax Java Web框架

<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
	<n:p>When you choose each radio button, each component inside the blue line or the red line is located properly.</n:p>
	<n:p><n:strong>Vbox: (Blue line)</n:strong>
		<n:ul>
		<n:li><n:strong>PACK: </n:strong>It means vertical position.</n:li>
		<n:li><n:strong>ALIGN: </n:strong>It means horizontal position.</n:li>
		</n:ul>
	</n:p>
	<n:p><n:strong>Hbox: (Red line)</n:strong>
		<n:ul>
		<n:li><n:strong>PACK: </n:strong>It means horizontal position.</n:li>
		<n:li><n:strong>ALIGN: </n:strong>It means vertical position.</n:li>
		</n:ul>
	</n:p>
	<label value="PACK AND ALIGN - Vbox in Hbox:" />
	<style>
		table.hbox{ 
			border: solid red 1px; } 
		table.vbox{ 
			border: solid blue 1px;} 
		.obj{
		 height:50px;
		 width:50px;
		 border: solid black 1px;
		}
	</style>
	<hbox id="v4" pack="center" align="center" height="270px" sclass="hbox"
		width="270px">
		<vbox id="h4" pack="center" align="center" height="90px" sclass="vbox"
			width="90px">
			<div sclass="obj" />
		</vbox>
	</hbox>
	<div>
		VBOX PACK:
		<radiogroup>
			<attribute name="onCheck">
				v4.setPack(self.selectedItem.label);
			</attribute>
			<radio label="start" />
			<radio checked="true" label="center" />
			<radio label="end" />
		</radiogroup>
		ALIGN:
		<radiogroup>
			<attribute name="onCheck">
				v4.setAlign(self.selectedItem.label);
			</attribute>
			<radio  label="start" />
			<radio checked="true" label="center" />
			<radio label="end" />
		</radiogroup>
	</div>
	<div>
		HBOX PACK:
		<radiogroup>
			<attribute name="onCheck">
				h4.setPack(self.selectedItem.label);
			</attribute>
			<radio label="start" />
			<radio checked="true" label="center" />
			<radio label="end" />
		</radiogroup>
		ALIGN:
		<radiogroup>
			<attribute name="onCheck">
				h4.setAlign(self.selectedItem.label);
			</attribute>
			<radio label="start" />
			<radio checked="true" label="center" />
			<radio label="end" />
		</radiogroup>
	</div>
</zk>