CookFormLayout Tutorial: ButtonBarBuilder

Tutorial Example

tutorial_buttonbarbuilder.xml in the CookFormLayout Java Web Start demo.

Introduction

<buttonbarbuilder> is a simple layout builder that adds buttons horizontally.

1. Specify ButtonBarBuilder

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

<panel>
	<buttonbarbuilder>
	</buttonbarbuilder>
</panel>

2. Add Buttons

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

type	attribute	description
fixed	`fixed="true"`	a fixed button that will takes on the prefered size of the button
fixed narrow	`fixed="true" narrow="true"`	a fixed button with narrow look and feel
gridded	`gridded`	gridded buttons have a uniform size.
gridded growing	`gridded`	a button that takes on gridded size, but can grow if the panel becomes wider.

		<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="DLUX14"/>

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 left, right, and center alignments.

Left aligned button:

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

Center aligned button:

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