JDesignerPro by BulletProof Panel Layout Types


Each panel is given a Layout property. Layout properties determine the type of positioning components may take on that panel. Some Layouts allow more exact positioning than others, but each has its uses. Layout properties can be applied to all panels, including the Main panel at the top of the Layout View Tree. The panel Layout properties are:

Border Layout

All panels added to the screen default to Border Layout. A Border layout positions a component on a panel using compass positioning. The options are "North", "South", "East", "West", and "Center". Components, or Objects, are laid out according to their sizes and the panel’s size. Objects placed "North" and "South" are automatically stretched horizontally to fit the entire length of the panel’s top and bottom edges; the "East" and "West" components are stretched vertically to fit the height; and the "Center" component will stretch both horizontally and vertically to fill any space left over. Here is an example of five buttons in an applet laid out using the BorderLayout Layout Manager. The buttons were renamed with their corresponding compass positions as set in the Properties list.

Buttons 1-5, below the Border Layout, are on a Flow Layout panel that sits under this Border Layout. Both sets of buttons are standard Button components in JDesignerPro’s Objects Tree. Both sets were placed on their respective panels with no resizing. This is a good illustration of the way components on a Border Layout stretch to fit as compared to the same component on a Flow Layout which are controlled to fit their contents.

A Border Layout can handle from 1 to 5 components. If you attempt to add a sixth, it will not work properly.

Objects may be of any type. All stretchable components, such as buttons, list boxes, grids, plain text fields and other panels, will stretch to fit the available space, but non-stretchable components will not. Non stretchable components include radio buttons, labels and data-bound fields (Columns). Border Layout is generally used for master detail screens with searching and result lists to the left, columns north and detail grid center. This is an easy screen to set up and it resizes nicely to fit any screen size. When building a more complicated screen with numerous buttons, check boxes, fields and lists employ the Grid Layout.

Grid Layout

The Grid Layout is the best method for you to accurately position elements on the screen. When you set a panel’s Property to Grid Layout you assign a specific number of horizontal and vertical squares into which the panel will split. You then have those invisible squares available for placing components. The Grid six sections of this Grid panel will not have the borders around them on the layout screen. They are waiting to have components placed on them. As you become proficient with JDesignerPro you will be able to visualize these panels in your mind.

As with any other type of grid, a panel set to Grid Layout with 3 columns and 2 rows (3x2) will give you an area like this to work with:

Use GridLayout and Flow Layout to force the location of objects. For example, you can add three objects to a GridLayout, then set its Rows Property to 5, 10 or even more and the objects will be shifted accordingly. If you leave the Cols/Rows Properties at their default settings, they will show 2 for each, regardless of the number of objects you add. When you set these Properties, the panel will respond.

Each component placed on the Grid panel will fall into the first available section. In order to place a component in panel 5, we first have to fill panels 1-4 with place holders. However to place components in sections 1, 2 or 3, we do not need to put place holders in sections 4 and 5. You only need place holders in sections previous to the one you wish to use. Place holders may be other components we want on the screen or blank panels. Placing panels within panels in this manner is referred to as nesting.

For example, in the graphic below we have added a Chisel Panel, Tab Panel, Grid, Tree Structure and List Box to the buttons that we did earlier. By placing these components on the existing place-holder panels we can see the six sections of the Grid Layout used for Main.

Our screen module would look like this. The virtual sections are numbered:

Don’t worry, your screens don’t have to look so structured! To add more style we use nesting. For example, we might change the layout type of the panel on section 4 to also be a Grid. A setting of 2 x 2 would split section 4 into four virtual squares. On these new sections can be placed any other component, such as a button or check box. Again, in order to place a button on section 4, we would add panel placeholders in sections 1-3.

Generally the best way to add sections to a Grid Layout panel is to drag them onto the correct panel in the Layout View tree. The Grid Layout type places components on the screen in the order they are dropped. If you have three elements on a Grid Layout and you want the first to appear on a different section, simply drop it back on its panel and it will become the last element to be dropped and thus appear third.

The sections of the Grid Layout are always the same size. Grid Layout splits the panel exactly into equal rectangles for the objects on it. Essentially GridLayout ignores the minimum size setting that all objects have and fits what it can into the space provided. Therefore, you may find that some objects are squashed to less-than-minimum size or are cutoff. The best way to get around this is to use objects that fit into the size of each grid piece or to limit the number of objects on that particular screen.

FlowLayout

A Flow layout arranges components in a left-to-right flow, like lines of text on a page. Flow layouts are generally used to arrange buttons on a panel. Unlike Grid or Border Layout, Flow Layout controls the size and placement of components. Instead of a button automatically acquiring the size of the panel, it will be forced to take a size slightly larger than what’s inside it, such as a label or graphic on a button. Additional components placed on a Flow Layout panel are arranged to the right of the first until there is no more room on the panel. Once the Flow Layout runs out of space on a line, it places the next components on the following line until it is filled, etc.

Objects on a Flow Layout are aligned either Right, Left or Center. Five buttons on a Flow Layout panel that are centered would look like the diagram below. Notice that after Button3 the Flow Panel hit the right edge and automatically placed buttons 4 and 5 centered on the next line.

JDPLineLayout

This Layout type is used to place multiple objects in a row on a Scroll Panel component. The JDPLine Layout is used automatically by JDesignerPro when you create a set of data-bound fields. It is this JDPLine Layout that allows the aligning of multiple fields or other elements in a row while keeping them left-justified.

Objects on a JDP Line Layout also remain flush with the left edge and with each other. This differs from Flow Layout, which leaves a little space between edges and components.

The row of components can be infinite without wrapping. When combined with a Scroll Panel component, vertical and horizontal scroll bars appear automatically when components go off the edge of the screen.

JDPRowLayout

The JDPRowLayout is used for laying out components in several lines on a panel. This is used mainly for placing database fields and buttons.

Try placing consecutive Labels and TextFields onto a Scroll Panel (Extended components). The Scroll Panel uses a Layout of JDPRowLayout to allow a neat arrangement of Labels and TextFields or other components. The Data Wizard will use a Scroll Panel when creating a Columns component or a Form. The advantage of using the Scroll Panel over simply using a Panel with JDPRowLayout is that the Scroll Panel will automatically display scroll bars if the components go past the borders of the Panel. This is great to ensure that your screens will be usable even if the user resizes the screen.