z30-alignpack-0001.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 red line is located properly.</n:p>
	<n:p><n:strong>PACK: </n:strong>It means horizontal position.</n:p>
	<n:p><n:strong>ALIGN: </n:strong>It means vertical position.</n:p>
	<label value="PACK AND ALIGN - HBOX:" />
	<style>
		table.hbox{ 
			border: solid red 1px; }
	</style>
	<hbox sclass="hbox" id="hb" pack="start" align="start" height="90px"
		width="90px">
		<textbox height="30px" width="30px" />
	</hbox>
	<vbox>
	<hbox>
	PACK:
	<radiogroup>
		<attribute name="onCheck">
			hb.setPack(self.selectedItem.label);
		</attribute>
		<radio checked="true" label="start" />
		<radio label="center" />
		<radio label="end" />
	</radiogroup>
	</hbox>
	<hbox>
	ALIGN:
	<radiogroup>
		<attribute name="onCheck">
			hb.setAlign(self.selectedItem.label);
		</attribute>
		<radio checked="true" label="start" />
		<radio label="center" />
		<radio label="end" />
	</radiogroup>
	</hbox>	
	
	<separator bar="true"/>
	
	<hbox sclass="hbox" id="hb2" pack="start" align="start" height="90px"
		width="270px">
		<textbox height="30px" width="30px" />
		<textbox height="30px" width="30px" />
		<textbox height="30px" width="30px" />
	</hbox>
	<hbox>
	PACK:
	<radiogroup>
		<attribute name="onCheck">
			hb2.setPack(self.selectedItem.label);
		</attribute>
		<radio checked="true" label="start" />
		<radio label="center" />
		<radio label="end" />
	</radiogroup>
	</hbox>
	<hbox>
	ALIGN:
	<radiogroup>
		<attribute name="onCheck">
			hb2.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 horizontal space between each other.
	<hbox>
	<intbox id="in"/>
	<button label="setSpacing" onClick='hb2.setSpacing(in.getValue().toString()+"px")'/>
	</hbox>
	</vbox>
</zk>