Tutorial 1


Using Panels and Layouts in the Application Builder

The purpose of this tutorial is to give you an understanding of how to arrange form objects on the screen using the JDesignerPro Application Builder. The foundation of graphical user interface layout in Java is the Panel object. A panel is a sort of place holder which adds very little code to the application but which can be shuffled around by simply changing its Position property or by nesting panels together. Panel nesting is placing placing a panel within a panel, sometimes several deep, to achieve the desired object location on the screen.

In addition to the Position property, each panel has the Layout property. The layout property determines how other objects appear on the panel. The main layouts to use are Border, Grid and Flow. Each type offers a different option for arranging objects and a different number of objects that can be arranged on it.

This tutorial will step you through a simple example of how to layout various form elements using panels.

To begin, launch JDesignerPro. Once you have it running, enter the Application Builder section by clicking the Application Builder menu tab. You can Save the Tutorial project at any time by pressing the Save Application button. When you return you can reopen it with the Open button and start where you left off.

Step 1. The first screen to appear is a Help text screen. This help text is actually an HTML file that is loaded into BulletProof’s HTML browser object (you can use this HTML object integrated into your own screens as a means to display help, graphics or other information to users). Throughout JDesignerPro you’ll see this online Help. Much of it has clickable links to explain with greater detail the topics at hand. Feel free to browse this Help text as you go through this tutorial. For easier viewing and printing, you can load the JDPManual.htm file (in the JDesignerPro/Docs directory) into a browser.

Step 2. Click the Application Builder tab. After a few moments the screen elements will load.

Step 3. On the left of the screen you will see two panels and two sets of buttons. The top panel has two tabs, Objects and Properties. The bottom window is called the Layout View and it always starts with a panel object on it called Main. As soon as the Application Builder has finished loading we are ready to start building a new screen module. The work space for your new application screen is the empty space to the right.

Step 4. We are going to layout panels and do some nesting to learn how this important process works. We first define the layout types.

Notice that the Main panel is already selected. Click the Properties tab and set its Layout to GridLayout. Now we have a virtual grid waiting to be filled. To fill it, we use panel nesting with blank Panel Objects as place holders in each section of the grid.

Step 5. Click on the Objects tab and open the Standard folder in the Objects Tree. Click and hold on the Panel object. Drag it and drop it on the panel icon "Main" in Layout View. Note: If you have trouble grabbing objects from the tree, drag to the right before dragging downwards.

The new panel will appear under Main as "Panel1". Notice that Panel objects do not actually appear on the right of the screen but do appear in the Layout View. When dropping an object in Layout View, make sure it drops directly on the icon or text of the target object. If a component does not appear on the form after dropping or changing the Position property, click on the component in the Layout View and choose Refresh.

You may drop an object either on another object in the Layout View or onto the form itself to the right. Generally you will be more accurate with your placements by dropping components on the Layout View Tree instead of on the form.

Step 6. Do the same with three more Panel Objects. Each will appear under Main in a tree structure. Your Layout View should now have four panels, all branched off Main, as below.

Step 7. Highlight Panel1 and click the Properties tab. Notice it is a BorderLayout by default. This means to arrange items on it we use compass positioning: North, South, East, West and Center.

Now from the Standard Objects folder, drag a Text Area onto Panel1 in Layout View. It will redraw the screen and acquire the upper portion of the panel. Since the Text Area was dropped on a BorderLayout, it defaults to Center position. Notice that the position property is shown next to the object.

Step 8. Highlight Panel2 and click the Properties tab. Change its Layout property to GridLayout.
What this does: This gives us another grid within the grid "Main". By adding another panel with GridLayout we have an additional level of granularity in which to place form objects.

Step 9. Drag a List from Standard Objects and drop it on Panel2. It acquires the top portion of Panel2.

Open the Extended folder and from Components, drag a Calendar object on to Panel2 and it will acquire the lower section of Panel2.

Step 10. From Extended Objects, drag a Grid Panel on to Panel4. It will show a spreadsheet in the lower right of the screen. The Grid Panel has automatically acquired the entire space available in Panel4 because it defaults to Center and Panel4 is Border Layout.

Your screen should now look like this:

Step 11. Now we decide we would rather have the Text Area in the lower left of the screen. To move it we use the Layout View. In the Layout View, drag the Text Area component from Panel1 and drop it on to Panel3. It will redraw now in the lower left of the screen.

What this does: Since Main is 2x2 GridLayout, Panel3 is holding the lower left position of the 4 grid spots. By moving the text area there it takes the spot held by the panel on which it sits. This helps you visualize the virtual grid created by GridLayout.

Step 12. Now we would like the Grid to appear in the upper left. Drag it on to Panel1in the Layout View. It will now place itself in the upper left of your screen module.

Step 13. Let’s reposition the Text Area within Panel3. Panel3 is a Border Layout.

Expand Panel3 in Layout View by clicking on the ‘+’ and then select Text Area. Change its position to South. It will then squash itself into the lower-most portion of the panel. Next change its position to North, then East, then West. Notice how it moves to acquire the whole length or height of the panel’s edge. Now change its position back to Center. It will re-acquire the entire panel.

The TextArea has a minimum width, which is why it holds its shape when you choose East or West. North, South and Center allow it to fill the entire width of the panel.

Tip: If the position settings between two objects conflict, they will not redraw. For example, if two objects are given the West position on the same BorderLayout panel, some or all of the screen elements may not be able to properly redraw. On a BorderLayout only one object can occupy each of the N,S,E,W,Center positions for it to draw properly. JDesignerPro doesn’t automatically stop you from sharing positions because there are cases where you need to momentarily assign two objects the same position in order to swap their positions.

Step 14. Let's finish by adding some buttons to Panel4. Drag the JDPButtons object from the Extended folder on to Panel4. Set the JDPButtons1 Position to South. Set the #Btns field to 4 and press Enter. Four buttons will appear on the lower right.

Step 15. Add any label you wish to each of the Btn# fields and choose an icon for each button from the Icon# pull downs.

Step 16. Press the Preliminary Build button to compile what you created:

JDesignerPro will ask us to save the application first. Chose the Users directory, enter file name "Test1" and press Save. Once compiled we will see it in Preview. Notice that the finished product is identical to how it looks during design, except it will fill the entire screen. There will be no functionality in this screen because we did not add any interactions.

Step 17. Let’s look at the Java source code that was created during this tutorial. Click back to the Application Builder and press the Source Editor button:

When the window appears, the source for the currently highlighted component will be viewable in the window. Press the Complete Source button to see the entire source file:

In the Application Builder you can edit source in two different ways. You can edit the methods associated with a particular component by selecting the component in the Layout View and then clicking on the Source Editor button and then clicking on the Object source button:

You can also edit the source for Interactions between components in the Interaction Manager. This is covered in detail in Tutorial 3.

This concludes Tutorial 1. From Tutorial 1 you should have gained an idea of how to nest panels with different layouts and how to move components and panels around the Layout View to reposition them. We also touched on the use of Compass Positioning on Border Layouts.

We encourage you to experiment with the different layouts to get a feel for how to use them. Proficiency at placing and nesting panels and setting the layouts is the key to making the most of JDesignerPro's GUI builder. Please continue with the next tutorial to learn how to create and compile a data-bound application screen.