About Panel

The Panel component is a component that allows you to group two or more components together and arrange them in a desired format.

It is similar to the Div component in that it displays multiple components within a component, but the Panel component is not a container component. A container component has subordinate components,whereas the Panel component only serves to logically group components of equal hierarchy.

If you look at the code for the Div component, you can see that the Button component is placed under the Div component layout. If you want to access the Button00 component, for example, you will have to go through the Div component because you cannot access it directly.

<Div id="Div00">
	<Layouts>
		<Layout>
			<Button id="Button00" left="10" top="10" width="120" height="50"/>
			<Button id="Button01" left="150" top="10" width="120" height="50"/>
		</Layout>
	</Layouts>
</Div>

However, the components associated with the Panel component are placed in the same hierarchy as the Panel component, under the Form object layout. The Panel component is simply connecting to the Button component as PanelItem.

<Form>
	<Layouts>
		<Layout>
			<Panel>
				<Contents>
					<PanelItem id="PanelItem00" componentid="Button00"/>
					<PanelItem id="PanelItem02" componentid="Button01"/>
				</Contents>
			</Panel>
			<Button id="Button00"/>
			<Button id="Button01"/>
		</Layout>
	</Layouts>
</Form>

Use the following approach to access the Button component placed in the Div component and the Button component connected to the Panel component:

this.Div00;
this.Div00.form.Button00;

this.Panel00;
this.Button00;

In the Outlineview window, they appear to be hierarchically separated, just like the Div component, but this is to facilitate the work process, and the actual hierarchy is different for the Div component and the Panel component.

Adding Items to the Panel Component

There are three ways to add items to the Panel component.

Group by Panel

Place the components on the page, select the components you want to group together, and then select [Group by Panel] in the Context menu.

To cancel the groupiing, select the Panel component and select [Ungroup Panels] in the Context menu.

Dragging and placing components

This is similar to placing a component inside a Div component. However, you cannot specify coordinates for a Panel component, and you can only choose one of the following formats: horizontal, vertical, or table.

Setting the Item Property of a Panel Component

You can selecting a Panel component and set the items properties in the properties pane.

Grouping Components

You can use the Panel component to group two or more components together and make them behave like a single component.

Example

When you resize a Div component, the components grouped together with a Panel component will be treated as a single component.

sample_panel_01.xfdl

Core features used in the example

flexwrap

When components are placed beyond the Layout container area, line breaks will be handled on a per-component basis. In the following examples, we'll examine the difference between individual components and components grouped using a Panel component.

How to implement an example

type: "horizontal"

flexwrap: "wrap"

verticalgap: 5

Make the width of the Static component 100 and the Edit component 120 to make their widths different.

When the Button component is clicked, halve the size of the Div component and adjust its height to fit the content by using the fittocontents property.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Div00.width = this.Div00.width * 0.5;
	this.Div00.fittocontents = "height";
	this.resetScroll();
};

As the Div component decreases in size, the Static and Edit components will no longer appear on the same line and will be each placed on different lines.

When viewed in Outlineview, it should look as follows. Static00 and Edit00 were grouped together with Panel00 and Static01 and Edit01 with Panel01.

You'll notice that line breaks are handled on per-Panel component basis, not by the Static or Edit components.