Owned - By A Panel

Tabbed interfaces provide a much loved way of fitting lots of information onto a single entry form. The introduction of multi page forms and the improved integration of page controlling made this a much easier exercise - each tab could be a page of the form and we could simply move between pages on a tab click. In fact a quick event was added to make this even easier.

But what has not been possible until now, without a deal of smoke and mirrors, is to have one or more tab controls embedded within a page on a single or multi-page form and have them only appear on a specific page. The only way to accomplish this would be to have a set of controls per tab, all within the tab boundaries, and make them visible or invisible depending on the currently clicked tab. This makes form maintenance incredibly tedious and code overly complex.

Before OI10 there was no real concept of parent/child relationships in OI - other than that forms and group boxes owned all of the controls within their boundaries. This led to many issues, not least with group boxes and tab controls. With the advent of OI10 this has changed. OI now allows the implementation of, and respects, parent/child relationships.

The biggest example of this is the introduction of a "Panel" container type.

We are going to use the "Panel" (not the "Simple Panel") to enable tabs within a form. But first, what's the difference between a "Panel" and a Simple Panel?

A Panel is simply a container that can be placed anywhere on the screen so that when controls are pasted into the Panel they become children of the Panel, not of the Window. So move the Panel and the controls owned by the Panel move with it. Don't be too put out by the "Simple" part of the description, pretty much the only difference between a Panel and a Simple Panel has to do with paging. So looking at Simple Panel/Panel  properties in the Form Designer we see this :

and comparing the two sets of properties we see that the only properties unique to Panels are

    PageCount
    Virtual Size
    PageSwapRenderMode
    ScrollMode
    TabWithinPanel

and the only property unique to Simple Panels is the DummyCaption property.

So, to implement a tab within a form page, we can now combine the Tab Control, the Panel Control and one simple Quick Event to achieve the desired results.

Let's start with a simple one page entry screen.

Select "Panel" from the Containers and position it within the tab control - using Right-Click and drag to size it appropriately. (See Addendum for other keystroke combinations). There are no hard and fast rules about this but I tend to leave an 8 pixel border from the tab control to make it easier to edit in the form designer.

(As an aside, if you right-click on the Window you can un-anchor it to allow moving it wherever you want.)

Tell the Panel that it has three pages and label the tab accordingly (after setting the tab to three values) :

Select the Panel and add in the controls for the first page.

Now select the Panel and use the spin control to move to page 2 and add in the controls for the second page. Note that the spin control applies to whichever control is both currently selected and supports paging - namely Windows and Panels. 

And finally the third page.

Finally we need to add a Quick Event on the Tab click. This needs to get the VALUE Property of the Tab control, and set the CURRENTPAGE Property of the Panel.

and Bob, as they say, is your uncle...

Actually a quick revisit - internal discussion at Sprezz Towers brought up the fact that the article missed a fairly big point (because the author ass-u-med it was obvious which it obviously isn't :)). Panels can host panels that can host panels - as far as you are practically likely to go. So in the screen below we see multiple panels in action.

Addendum - Mouse Use In Form Designer

When in Draw Mode:

 

Left Click

1) Left-click to drop a default-size control on a the form

2) Left-click and drag to draw a control on the form

3) Ctrl-left-click to drop a default size control on a container control

4) Ctrl-left-click and drag to draw a control on a container control.

 

Right Click

1) Right-click and drag to draw a control on the form

2) Right-click and drag to draw a control on a container control.

 

 

When in Normal Mode:

Left Click

==========

 

1) Left-click on the form to unselect all controls

1) Left-click on an unselected control to select it

2) Left-click and drag around/across a group of unselected controls on the form to select them

3) Left-click and drag on an unselected or selected control to move it

4) Left-click and drag around a group of selected controls to move them

5) Ctrl-left-click on a selected container control and drag around/across unselected child controls to select them

6) Ctrl-left-click on a selected container control and drag around/across unselected child controls to select them

7) Shift-left-click to add an unselected control to a group of selected controls with the same parent

8) Shift-left-click on a group-selected control to remove it from a group of selected controls

Right Click

===========

1) Right-click on the form to display it's context menu

2) Right-click on an unselected control to select it and display it's context menu

3) Right-click on a selected control to display it's context menu

4) Right-click on a group of selected controls to display the group-selection context menu

5) Right-click and drag on the form to draw the most recently added type.

6) Right-click and drag on an selected container control to draw the most recently added type and add it as a child.

7) Right-click and drag on an unselected container to draw the most recently added type and add it as a child.

8) Shift-right-click on the form to drop the the most recently added type with a default size. 

9) Shift-right-click on an selected container control to drop the the most recently added type with a default size and add it as a child.

10) Shift-right-click on an unselected container control to drop the the most recently added type with a default size and add it as a child.