You may be familiar with the concept from some other application. The idea is quite simple. To manipulate any existing items on an InfoView form, you need to select them first, and then do something with them. You select an item by clicking it with the mouse.

 

InfoViewSingleSelection2

 

 

You can select more than one item at a time. You add (or subtract) items from an existing selection by Shift-clicking them. Or to put it simply, if you have 4 items A, B, C, D, and you want to select A, B, and D, you'd click A, Shift-click B, and Shift-click D. If you change your mind, and no longer want B to be selected, Shift-click B again.

 

InfoViewMultiSelection1

 

 

You can also drag-select items. To do so you must hold down the Ctrl key on the keyboard, and drag across any controls you'd like to select. Doing so draws a dashed selection rectangle as you drag the mouse across the form. Whatever this rectangle touches, becomes selected.

 

InfoViewMultiSelectionCtrlDragging1

 

You can combine the two selection methods by drag-selecting some items, and then adjusting the resulting selection if necessary by Shift-clicking some items to either select or deselect them. Just don't forget to hold down Ctrl when drag-selecting.

 

 

You can also select one item at a time using the keyboard, but this is seldom practical. In case you want to try it, you can press the arrow keys or Tab/Shift-Tab to select next/previous items. The item order corresponds to the order in which they were created, so it may not match their visual arrangement on the form.

 

One special type of item selection with the Keyboard is quite useful though. Whatever items you may have selected, hitting Escape will select their parent Container. We haven't discussed what they are yet, but remember this fact when we get to them.

 

To deselect everything, just click on the background of the InfoView.

 

 

Moving. One or more selected items can be moved within the boundaries of the InfoView (or whatever other stuff they may be "sitting on" we'll see what that is later). Just drag the selected controls around with the mouse.

 

InfoViewMultiSelectionMoving1

 

As we mentioned above, you can only move the items within their enclosing "Container". E.g., if you have some items on a Panel, you can move them around within that Panel, but you cannot move them to another Panel. To achieve such a "jump", you would use a Cut-and-Paste operation.

 

Moving the controls using the keyboard actually works quite well. You use the cursor arrow keys Left/Right/Up/Down together with Ctrl and optionally Shift like so:

Ctrl-Left will move the selected items 1 pixel to the left (Ctrl-Right to the right, and so on)
Ctrl-Shift-Left moves the items one Gridline Step at a time

 

We'll deal with Gridlines later, but for now, it's just a convenient number of pixels, perhaps 8 or something (and there's a SpinEdit box on the toolbar to control this).

 

 

Sizing. You can resize a selected item with the mouse by dragging its sizing handles in the desired direction. The sizing handles are the little squares drawn along the perimeter of the selected item.

 

InfoViewSingleSelectionSizing1

 

You can also use the keyboard, whose operation is very similar to how you move items with it, except that to resize an item, you use the Shift key (with the same Arrow keys): Shift-Left will shrink the item width 1 pixel at a time, Shift-Right will expand it, etc. With the keyboard, you can resize more than one selected item at the same time.

 

As you move or resize an item with the mouse, a little ToolTip displays either the item's position (relative to its parent Container) or its dimensions depending on the operation in progress.

 

You can constrain a moving or resizing operation to a single axis (horizontal or vertical) by pressing and holding the Ctrl key once you have started the moving/sizing operation. For example, if you want to move an item horizontally, but you want to make sure it does not change its vertical position, you can start dragging it, press Ctrl, and keep dragging it approximately along the horizontal axis.

 

You also have some toolbar controls that allow you to perform a few operations related to item moving and sizing.

When a single item is selected, the only relevant thing you can do to it is explicitly set its size in pixels.

 

InfoViewSingleSelectionSizingViaToolbar1

 

BarDgnWidthSet Width SpinEdit sets the item's width
BarDgnHeightSet Height is similarly responsible for the height

As always, you can change the values using the SpinEdit's little arrow buttons, by clicking the Up/Down keys on the keyboard, or by typing the desired value directly.

 

Whenever there are 2 or more selected items, quite a few more commands become relevant and thus available.

 

InfoViewMultiSelectionMovingAndSizingViaToolbar1

 

Here are the horizontally-moving ones:

BarDgnAlignLeftSidesAlign Left Sides will move all selected items to line-up with the leftmost of them
BarDgnAlignCentersHAlign Centers (H) will line-up their midpoints
BarDgnAlignRightSidesAlign Right Sides lines-up the right sides
BarDgnSpaceEquallyHSpace Equally (H) spreads them in the horizontal direction
BarDgnCenterInParentHCenter in Parent (H) centers them in whatever happens to be their container (more on these later)

 

The horizontally-sizing ones are self-explanatory:

BarDgnShrinkWidthToNarrowestShrink Width to Narrowest
BarDgnExpandWithToWidestExpand Width to Widest

 

There are also the vertical counterparts of all of the above that perform similar actions in the up/down direction, so we won't bother listing them.

 

 

Z-Order. You may occasionally need to adjust what is known as the Z-Order of items. This simply means which item is "on top" of which. The "Z" refers to the imaginary Z axis sticking out of the InfoView, perpendicularly to its surface. And you thought Designer was a 2D application! Adjusting Z-Order becomes important when you have overlapping items. We haven't seen anything like that yet, but let's get it out of our way. There are two buttons that let you adjust the Z-Order:

 

InfoViewSingleSelectionBringToFront1

InfoViewSingleSelectionSendToBack1



 

BarDgnBringToFrontBring to Front places the selected items on top of the rest of them
BarDgnSendToBackSend to Back does the opposite. This is what we'll use at a later time to make sure a background picture appears underneath all other items instead of covering them, for example.

 

There's one peculiarity about how items are stacked on top of one another that you should be aware of. Items basically fall into two groups. For lack of a better term, we'll call them Lightweight items and Heavyweight items. The Lightweight items are of a cosmetic or static nature and include: Label, Rectangle, and Image (the static kind used for esthetic purposes, not the field-based one). All the other items are Heavyweights. Such items can be regarded as functional or dynamic. The peculiarity you should be aware of is that all Heavyweights are always "floating" above all Lightweight items in the Z-Order. You can re-order Labels and Rectangles, for example, but there's absolutely no way to make a Label appear above, e.g., a Panel. Inside a Panel yes, no problem (because now the Label is parented to the Panel, so it is their parent-child relationship that takes over and Z-Order plays no role), but if the Panel and a Label are siblings (both parented to a common Container), the Label will always be underneath.

 

This can sometimes be a bit of a limitation. What if you wanted, for example, to display a Label or warning or a static Image on top of, say, a Grid item? You can't do it. At least not without resorting to a simple trick. Place a little Panel above the Grid (or whatever Heavyweight you are trying to "cover") and place the Label or Image inside that Panel. The Panel is also a Heavyweight, so it can "float" above whatever you want. Whatever is in it is no longer "floating" above the Grid item, but merely "sits quietly" in its Panel Container. You may not find yourself performing such Z-Order "stunts" very often, but at least you know that there's a way if you need it.

 

 

Alignment Lines. There's a very nice visual aid to help you align and resize items relative to one another, and you may have already seen it in action if you've been playing along. Alignment Lines are the lines that appear automatically as soon as you attempt to move or resize item(s) with the mouse. As soon as relevant edges of the controls line-up, the corresponding line is drawn to indicate this joyful event.

 

InfoViewSingleSelectionAlignmentLines1

 

 

Gridlines. Another feature aimed at helping you create well-aligned InfoViews is Gridlines.

 

BarDgnToggleGridlines You can display or hide these dotted lines that form a visual "grid" over the InfoView using the Toggle Gridlines button.

 

BarDgnGridLinesStep The Gridline Step SpinEdit controls the distance between the lines of the "grid". The default is 8, but you can set it to whatever suits you.

 

BarDgnAutoSnapToGridness Independently of whether the Gridlines are visible, you can make moving and sizing operations respect the Gridlines. When Auto-snap to Gridlines toggle button is in the depressed state, moving and sizing an item will make it "jump" in the desired direction by whatever number of pixels Gridline Step happens to equal (instead of moving smoothly 1 pixel at a time).

You can temporarily suppress the Auto-snapping (if it's in effect) by performing the moving or sizing with the Alt key pressed. Alt-moving or Alt-sizing are therefore always smooth as if Auto-snap were Off.

 

BarDgnSnapToGridness If you ever want to align some existing items to Gridlines, the Snap to Grid button accomplishes just that. This button looks similar to the Auto-snap to Gridlines button, but this one is a bit smaller and enclosed in a rectangle.

 

BarDgnCustomGridness Custom Gridlines, when depressed, draws the Gridlines using a crosshair pattern, which may be more visible on some forms. Otherwise, Gridlines are drawn as simple dots.

 

Cut-and-Paste. You can use all the usual editing operations on the selected items: Copy-and-Paste, Cut-and-Paste, and Delete InfoViewClipboardButtons2.

 

When using Cut-and-Paste between different Containers (which is what you'd normally do to "move" items from one Container to another), Alventis maintains the position of the items relative to their parent Container. This may be a bit inconvenient when pasting an item that had relatively large X or Y offsets into a smaller Container: the item gets pasted and positioned with its old (large) offsets, so it may end up beyond the visible area of the new Container.

 

InfoViewCutPasteIntoContainerTrickA2

 

You can scroll to it and move it where desired, but there's a neat trick that makes this unnecessary. Simply move the item(s) to reduce their offset within their old parent Container before performing the Cut operation. The cut item(s) will now maintain smaller offsets when pasted, so they will fit in the new Container.

 

InfoViewCutPasteIntoContainerTrickC1 InfoViewCutPasteIntoContainerTrickE1

 

Warning. Please note that Alventis has problems performing a Copy-and-Paste operation on a Grid within the same InfoView form. Pasting Grids into InfoViews that already have other Grids may also cause problems. This should not be something you'd want to do anyway, so please avoid using such Clipboard operations with Grids. Cut-and-Paste within the same InfoView should work fine though.

 

 

Design Mode. Normally, you'd want your InfoViews to be in Design Mode where you can create items, adjust them, and so on. After all, that's the whole point of Alventis Designer. Even in Design Mode the InfoView is shown almost exactly as it would appear in Alventis. On occasion, you may want to "take it for a spin" though. One reason could be: you want to adjust the data in the fields to make sure the corresponding Controls are large enough. Another: to verify that the Tab order of all Controls is correct. You can therefore temporarily disable Design Mode using the Design Mode toggle button BarDgnDesignMode. When in the Off state, it places the InfoView in Preview Mode that's pretty close to how the InfoView would behave in Alventis. You can edit the current record's data or create a new record. This is precisely what gives you the ability to make sure you have some sensible data displayed in the Controls so that you could size them appropriately to their intended contents. Once satisfied with your data edits, you can return to Design Mode and make whatever adjustments may be necessary. What you cannot do in Preview Mode is post a record. Whatever you do with the data is temporary and for your convenience only. If you want to try some real editing, you must open the InfoView "for real" in Alventis.

 

 

Item Hints are item-specific ToolTips that display some basic information about the item you pass the mouse over. Enable/disable them using the Design Item Hints toggle button BarDgnDesignItemHints.

InfoViewItemHint1

Note that this is essentially the only way for you to "identify" an item on an InfoView, i.e., get an answer to a question "Dear Panel, what is your name?" which is something you may occasionally want to do if there are so many Panels you get confused as to which is which.