z30-alignpack-0002.zul

ZK是一个Ajax Java Web框架

<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
	<n:p>When you choose each radio button, the textbox inside the blue line is located properly.</n:p>
	<n:p><n:strong>PACK: </n:strong>It means vertical position.</n:p>
	<n:p><n:strong>ALIGN: </n:strong>It means horizontal position.</n:p>
	<label value="PACK AND ALIGN - VBOX:" />
	<style>
		table.vbox{ 
			border: solid blue 1px;} 
	</style>
	<vbox>
	<vbox id="vb" pack="start" align="start" height="90px" sclass="vbox"
		width="90px">
		<textbox height="30px" width="30px" />
	</vbox>
	<hbox>
	PACK:
	<radiogroup>
		<attribute name="onCheck">
			vb.setPack(self.selectedItem.label);
		</attribute>
		<radio checked="true" label="start" />
		<radio label="center" />
		<radio label="end" />
	</radiogroup>
	</hbox>
	<hbox>
	ALIGN:
	<radiogroup>
		<attribute name="onCheck">
			vb.setAlign(self.selectedItem.label);
		</attribute>
		<radio checked="true" label="start" />
		<radio label="center" />
		<radio label="end" />
	</radiogroup>
	</hbox>
	
	<separator bar="true"/>
	
	<vbox sclass="vbox" id="vb2" pack="start" align="start" height="270px"
		width="90px">
		<textbox height="30px" width="30px" />
		<textbox height="30px" width="30px" />
		<textbox height="30px" width="30px" />
	</vbox>
	<hbox>
	PACK:
	<radiogroup>
		<attribute name="onCheck">
			vb2.setPack(self.selectedItem.label);
		</attribute>
		<radio checked="true" label="start" />
		<radio label="center" />
		<radio label="end" />
	</radiogroup>
	</hbox>
	<hbox>
	ALIGN:
	<radiogroup>
		<attribute name="onCheck">
			vb2.setAlign(self.selectedItem.label);
		</attribute>
		<radio checked="true" label="start" />
		<radio label="center" />
		<radio label="end" />
	</radiogroup>
	</hbox>
This setSpacing is used to test the vertical space between each other.
	<hbox>
	<intbox id="in2"/>
	<button label="setSpacing" onClick='vb2.setSpacing(in2.getValue().toString()+"px")'/>
	</hbox>
	</vbox>
</zk>