CookFormLayout Tutorial: ButtonStackBuilder

Tutorial Example

tutorial_buttonstackbuilder.xml in the CookFormLayout Java Web Start demo.

Introduction

<buttonstackbuilder> is a simple layout builder that adds buttons vertically. It is very similar to <buttonbarbuilder> except the layout orientation and some button settings.

1. Specify ButtonStackBuilder

Simply place <buttonstackbuilder> inside a <panel> tag. It is not necessary to specify <formlayout at all.

<panel>
	<buttonstackbuilder>
	</buttonstackbuilder>
</panel>

2. Add Buttons

There are only two kinds of buttons. Place buttons inside <form-add> with one of the settings below to add them to the panel.

		<form-add gridded="true">
			<button text="Help"/>
		</form-add>

2. Deal with Gaps

There are two types of gaps. Related or Unrelated. Unrelated gaps are wider than related. There are two ways of specifying the gaps between buttons.

1. Add buttons as a group, and set the related flag in <form-add>. Then an (un)related gap is inserted between two adjacent buttons. The default is related gap.

		<form-add gridded="true" related="true">
			<button text="Okay"/>
			<button text="Cancel"/>
			<button text="Apply"/>
		</form-add>

2. Manually insert the gap using <form-gap>..

		<form-gap related="false"/>

3. Struts and Glues

A strut is a fixed width gap between components. Use <form-strut> to add one.

		<form-strut size="DLUY9"/>

Glue is used to consume extra spaces when the panel grows beyond the preferred size. Use <form-glue> to add one.

		<form-glue/>

Glue can be used to force the alignment of the buttons, such as top, bottom, and center alignments.

Top aligned button:

<panel>
	<buttonstackbuilder>
		<form-add gridded="true">
			<button text="Help"/>
		</form-add>
		<form-glue/>
	</buttonstackbuilder>
</panel>

Center aligned button:

<panel>
	<buttonstackbuilder>
		<form-glue/>
		<form-add gridded="true">
			<button text="Help"/>
		</form-add>
		<form-glue/>
	</buttonstackbuilder>
</panel>