【ZK Framework】borderlayoutを操作する

borderlayoutの使い方で少しつまづいたので、

引用元: https://www.zkoss.org/wiki/ZK_Component_Reference/Layouts/Borderlayout
borderlayoutには、北、南、東、西、中央の子コンポーネント(UIの構成要素)があり、指定した位置に要素を配置することが出来ます。 ※北、南、東、西、中央に文字列を配置した例 

borderlayout_sample.zul

<zk>
<window title="borderlayout_sample" border="normal">
	<borderlayout width="500px" height="500px">
		<north>
			<div align="center">NORTH</div>
		</north>
		
		<east>
			<div>EAST</div>
		</east>
		
		<center>
			<div align="center">CENTER</div>
		</center>
		
		<west>
			<div>WEST</div>
		</west>
		
		<south>
			<div align="center">SOUTH</div>
		</south>
	</borderlayout>
</window>
</zk>

また子コンポーネントの中に入れ子で子コンポーネントを配置することが出来ます。 ※北と南の子コンポーネントの中に、入れ子で子コンポーネントを配置した例。 

borderlayout_sample2.zul

<zk>
<window title="borderlayout_sample" border="normal">
	<borderlayout width="800px" height="800px">
		<north size="50%">
			<borderlayout>
				<north>
					<div align="center">NORTH</div>
				</north>
				<east>
					<div>EAST</div>
				</east>
				<center>
					<div align="center">CENTER</div>
				</center>
				<west>
					<div>WEST</div>
				</west>
				<south>
					<div align="center">SOUTH</div>
				</south>
			</borderlayout>
		</north>

		<south size="50%">
			<borderlayout>
				<north>
					<div align="center">NORTH</div>
				</north>		
				<east>
					<div>EAST</div>
				</east>
				<center>
					<div align="center">CENTER</div>
				</center>
				<west>
					<div>WEST</div>
				</west>
				<south>
					<div align="center">SOUTH</div>
				</south>
			</borderlayout>
		</south>
	</borderlayout>
</window>
</zk>

borderlayoutを別のborderlayoutで入れ子にすることで複雑なレイアウトの配置が出来るようになります。

またZK Frameworkは日本語での情報が全然出回っていませんが、公式のドキュメントが分かりやすいです。

公式:
https://www.zkoss.org/