In the previous chapters we have seen what items we can place on an InfoView form. We have also learned to properly position them so that the InfoView maintains a pleasing and functional Layout when resized. All that remains is to see what other attributes we can adjust for all these items to make them look just the way we want.

 

In contrast to the vast majority of applications that perform at least some similar tasks, Alventis Designer doesn't force you to set cryptic settings in long lists of properties or learn to use dozens of dialog boxes for each item. The basic principle in Designer is remarkably simple: select the items you want to affect, and apply whatever attribute you wish using an array of mostly familiar formatting tools. If this sounds a bit like formatting text in a Memo, that's precisely how it works!

 

Want to make a Label italic? Select the Label and depress the Italic button.

 

Want to set the background color of an Edit Box and a Panel (both together)? Select both and use the familiar Background Color InstaButton. Almost all style adjustments of all items are performed in this fashion and work exactly the same as text formatting works in Alventis Memos. Which is why we won't even bother mentioning 75% of them.


InfoViewItemFormattingIntro1

 

If you need to refresh your memory on how exactly the Font or QuickStyle InstaButtons work, you can always refer to the relevant topics in Alventis Memos section of this Guide. Let's take a closer look at some of the Formatting and other controls we have not seen previously.

 

In general, Designer tries to keep the number of controls or commands you must use to adjust item attributes to a minimum. The fewer there are, the quicker you'll "learn the ropes". One effect of this approach is that some controls perform slightly different actions depending on what item they are acting upon. The actions will have something in common, so their effect becomes quite natural after a little while, but we wanted to point this out from the onset to avoid surprises.

 

 

BarDgnBordersColor Border Color InstaButton. It works exactly like all other Colors, except that this one sets the color of the border of items that have one. Edit Boxes and similar items can have various border types (we'll get to them in a moment), and only some of them use the color you select here, so don't be surprised if they seem to ignore your efforts. A Grid doesn't have a border, so this button sets the color of the gridlines instead.

 

 

BarDgnBorderStyles Border Style InstaButton. It has a rather simple dropdown dialog that lets you pick the appearance of the border and adjust its thickness (Margin).

 

InfoViewItemFormattingBorderStyle1

 

Border Style applies to several items: Panels, Split Panels (and of course their Sub-Panels), Tab Sheets, the InfoView itself (the form's background acts very much like a Panel), Edit Boxes and similar, Rectangle, and even the Memo. The trick is that the above items are quite different, and so are their borders. Panels, for example, support the full array of Border Style settings offered by this dialog. Edit Boxes support only 5 border styles, so a number of similar-looking border styles from the dialog's palette of 24 apply the same Edit Box border style. You'll have to click around a little to see which of the 24 produce what effect.

 

Panels, Split Panels, Tab Sheets, the InfoView all support the full array of adjustments.

Edit Boxes and similar support 5 border styles and ignore the Margin.

Rectangle and Memo support only the Margin. They both interpret it as "border thickness + 1": a Margin of 1 means "no border", a Margin of 2 creates a single-pixel border, and so on. It's easy to use even if initially confusing.

 

 

Grid Item Selection. Let's get this out of our way right now. You can select the Grid, that you knew. You can also select individual Grid Columns you've seen how to do this in the InfoView Grids chapter. What we haven't told you is that you can select quite a few other parts of the Grid. Designer refers to them as Grid Items. All available Grid Items are listed in the Grid Item combo box on the toolbar:

 

Data means all Grid Cells
Data/Odd means cells of the odd-numbered rows
Data/Even means the even-numbered rows
Selection/Active means the Grid selection when the Grid has focus
Selection/Inactive same, but when the Grid does not have focus
Header is the row of Column Captions
Group Rows are the Grouping rows, if any
Footer is the Grid or Group Footer where Summaries are displayed
Background is the unoccupied empty space of the Grid
GroupByBox is the Group by Box at the top
Filter is the Filter Box at the bottom
Column Header is the Header (Caption area) of an individual Column
Column Data is the Data area (Cells) of a Column
Column Footer is the Footer (Summary) area of a Column

 

 

InfoViewItemFormattingGridItems1

 

The last 3 Grid Items therefore refer to the specific selected Column(s), if any, while everything else refers to the Grid in general.

 

Selecting what you want is easy. You can simply click the Grid area of interest and the Grid Item you clicked gets automatically selected in the Grid Item combo box. If it's not the right Item, you can always manually pick the right one from the same combo box. By default, when you click any Cell of the Grid, Designer thinks you are interested in the Data Item. Similarly, clicking the Header row selects the Header Grid Item for you. There's a little trick to let you select the corresponding Column's Item: Alt-click the area you want. Alt-clicking a Column's Header, for example will select the Column itself and set the current Grid Item to Column Header.

 

InfoViewItemFormattingGridItems2

 

It should be noted that while most attributes will apply themselves to the selected Grid Item, some simply don't apply to any, so they may get applied to the Grid as a whole. Border Color is one such example.

 

 

Align Text buttons Align Left BarDgnAlignLeft / Center(H) BarDgnAlignCenterH / Right BarDgnAlignRight, Top BarDgnAlignTop /Center(V) BarDgnAlignCenterV /Bottom BarDgnAlignBottom.

 

These buttons are responsible for setting the alignment of the text within some items that allow text-editing. Such items are Text Boxes and similar, as well as grid columns.


InfoViewItemFormattingAlignText1

Just select the column(s) you want (make sure the grid itself is selected too), and apply whatever attributes are appropriate. You can even select a few columns and a few Text Boxes all at the same time. Vertical alignments are typically less useful and only come into play if the text editor (or cell, which in effect is one) is taller than the text.

 

 

BarDgnEnabled Enabled. By default, all items are Enabled. Disabling a data-editing item (Text Box, etc.) makes it inaccessible for editing and usually grayed-out. You can usually achieve a somewhat better effect by simply making the item Read-Only (see below).

 

BarDgnReadOnly Read-Only. Applies to various data-editing items and makes it impossible to edit their contents. The item is not grayed out and its contents can still be selected and copied to the clipboard. Both of these factors are usually advantages, so we tend to prefer this attribute to the Enable one (above).

 

BarDgnAutoSize AutoSize. Applies to Labels, Edit Boxes, and similar items that attempt to somehow automatically resize themselves based on their contents. Labels can be resized regardless of this setting but auto-size themselves if their Caption is later edited. Edit Boxes tend to set their own height depending on the chosen font, and don't allow you to set it manually unless you turn AutoSize Off for them, that is. Once you do (if ever), Vertical text alignments can be adjusted, e.g., to center the text vertically in an oversized Edit Box.

 

BarDgnShadow Shadow. A purely visual attribute that applies to various data-editing items. You can simulate a shadow for items that don't explicitly support one (e.g., the Memo) using a properly sized and positioned Rectangle.

 

BarDgnHotTrack HotTrack. Applies to Text Boxes and similar. Makes their border react visually when you pass the mouse over the item.

 

BarDgnPageControlStyle Page Control Style. A combo box that allows you to set one of 9 Page Control visual styles. Obviously, only applies to Page Controls.

 

BarDgnCheckBoxNullStyle Checkbox Null Style. A Boolean field may obviously contain True or False values, but it can also contain the Null value, which means "no value has been assigned" (this is true of all field Types, by the way). This combo box allows you to select how you want the Null values, if any, to be displayed: as a grayed-out unchecked checkbox, a grayed-out checked checkbox, or as a normal-looking unchecked checkbox (to make it look as if Null were equivalent to False). Note that you can also control whether the user can set the Checkbox's value to Null. You do so using the UniToggle button described below.

 

BarDgnCurrencyPrecision RadioGroup Column Count / Currency Precision. Sharing a single SpinEdit control are two completely different attributes. RadioGroup Column Count specifies the number of columns for the Radio Buttons in a Radio Group and obviously only applies to this item. Currency Precision only applies to Currency Edit Boxes and sets the number of digits you'd like to be editable after the decimal separator. The default is 2, so amounts like 24.95 could be entered (but not 24.951). You should avoid using this "combination" control on both kinds of items it applies to simultaneously, but there's hopefully little risk of that happening.

 

BarDgnUniToogle UniToggle. This is a "fun" little control since it applies to quite a few items and toggles something different for each type. We will therefore list the items it affects and what it does:

LabelToggles WordWrap. When On, Labels will become multi-line if not wide enough to display their entire contents.
Radio GroupWordWrap for Radio Buttons same as Labels.
Time Edit BoxWhen On, seconds won't be displayed/edited.
CheckboxWhen On, the user can cycle through all 3 possible values: True, False, Null. When Off, just True/False.
Image (static)When On, stretched images will be stretched proportionally, i.e., maintaining their aspect ratio.
Page ControlWhen On, Tabs of a Slanted Page Control will be slanted, when Off only their corners will be "bent".
Multi-Line Edit BoxWhen On, both scrollbars will be visible. When Off, only the vertical one (and text will auto-wrap at the right margin).
Split PanelWhen On, the Splitter has a 3D beveled appearance.
RectangleWhen On, the Rectangle's corners are rounded.
GridWhen On, the columns always occupy the full width of the Grid. When Off, the total width of all columns may be larger or smaller than that of the Grid, which will have a horizontal scrollbar if necessary.

 

 

Let's take a break and explore some Panel attributes. Firstly, as we have already seen a few times, Split Panels are just "combination" items made up of 3 Panels each. A Tab Sheet is essentially a Panel too, and so is the background of the InfoView form itself. All these Panels share 99% of their attributes, so almost everything we will be talking about applies equally well to all of them. We will point out the rare exceptions to this rule whenever we encounter them.

 

 

We have already seen that a Panel can have a variety of Border Styles and Margins, but we haven't really explained this.

 

The Panel Margin is the space just inside its borders that is "off limits" to whatever items may be inside the Panel. Some Border Styles have no associated Margin regardless of what number of pixels you set it to. Some Border Styles do use the Margin. Yet others use a "double" Margin, i.e., make it twice as wide as what you specify.

 

The screenshot on the right shows you which Border Styles have what Margin (1 means normal and 2 means double).


InfoViewItemFormattingBorderStyleShowingMarginality1

 

What good use can you put the Margin to? Actually, not much. Except for one thing. If you put some client-aligned (Alignment set to Client) item inside a Panel with a Margin, you suddenly have a nifty way of controlling how close that item gets to the Panel's edges. Because if the Panel has a Margin, its client-aligned child item will occupy the space within the Margins, but won't venture into their territory.

 

InfoViewItemFormattingBorderStyleWithMargin1

 

 

A Panel can have a Picture Background. In theory, you could achieve a similar effect by placing a static Image item onto a Panel, and making it client-aligned or sizing it whichever way you want. You can in fact do that, and in some cases you may want to. But there's an easy alternative. You can assign the desired picture directly to the Panel itself. The advantage is that there's no longer an Image item, possibly getting in the way of your attempts to select items, etc. There's an even greater advantage that we will discover shortly. But first, how do you assign an image to a Panel? The Panel Background Image button BarDgnPanelBackgroundImage accomplishes this task. Clicking it opens the standard Open Image dialog. You'll notice that as is the case with most such buttons in Alventis, this button has a drop-down menu that holds the most recently used Images. You can clear the assigned Image from a Panel using the Panel Background Clear button BarDgnPanelBackgroundClear. A word of warning: you can use transparent GIF and PNG images as Panel Backgrounds, but in these cases you should also enable the Panel's Transparency. We'll see this attribute in a little while. Otherwise the background is not always redrawn properly, especially if the image is Stretched.

 

 

Attribute Inheritance. Many items inherit some of their attributes from their parent Container. Here's how it works. Let's say we have a Panel with a bunch of Labels on it. Labels have such attributes as Font and Background Color. Turns out, so does the Panel. You could have guessed about the Background Color yourself, but Font is less obvious. Imagine what happens if we change the Font of the Panel to Italic. Nothing happens to the Panel itself (since it itself doesn't display any text), but all Labels "sitting" on it suddenly become Italic. Change the Panel's Background Color and... well, now it seems that it's just the Panel's background that changed, but in reality this is not the case: the Label's backgrounds changed as well, so they simply keep looking "transparent". The above doesn't apply to just Labels of course. The vast majority of available items behave this way, inheriting their attributes from their parent. You can "break the connection" at any time by setting a child item's attribute explicitly. Once you do that, the item becomes independent of its parent's attribute changes and stops "playing along". You can always make an item use its parent's attributes again using the Clear Style button BarDgnClearStyle. It returns most item's properties to their most common default values and the item will once again become an "obedient" child. The Attribute Inheritance often makes it easy to control the appearance of a multitude of items at the same time without the need to tediously select each and every one of them. Just select their parent Container and adjust its attributes. Setting the Font of the entire InfoView form (when there's no selection), for example, will set the Font of all its child items, and their child items, if any, and so on.

This is why the Font attributes are applicable to Panels.

 

 

Now that we have learned that Panels can have Background Images, let's continue looking at item attributes we can adjust.

 

InfoViewItemFormattingPanelBackgrounds1

 

BarDgnTransparency Transparency. Makes some items transparent. Applies to Labels, Images, and Panel Background Images (now you know why we had to take a break to tell you about them). The way Images (both static ones and Panel Backgrounds) become transparent, if at all, depends on the type of the loaded picture. JPEGs don't support transparency at all. Bitmaps can be transparent or not depending on the Transparency attribute. When enabled, the Bitmap's lowest/leftmost pixel's color becomes transparent in the entire Bitmap. If the color of that pixel happened to be Yellow, for example, everything that's Yellow becomes transparent. When not enabled, the entire image is opaque. GIF and PNG images support their own transparency "explicitly", and the Transparency attribute should be simply "synchronized" with the transparency of the picture file.

 

BarDgnStrech Stretch. Makes the picture in Images and Panel Background Images stretched to fill the item's boundaries.

 

BarDgnTile Tile. Applies to Panel Background Images that are not Stretched. Repeats the image to fill the Panel's boundaries.

 

BarDgnCenter Center. Applies to Panel Background Images and field-based Image items. Make the image centered within them. For Panels, this attribute can be combined with Tiling but not with Stretching, which always takes priority.

 

BarDgnSee-Through See-Through. Applies to Panels. Makes their background transparent as far as their parent Container is concerned. This is a very powerful feature and here's how it works. Let's say we are creating some fairly advanced Layout that requires us to use a few Panels to make things properly react to resizing. Imagine we also want to use an image background for our InfoView.

 

The problem is quite obvious: the Background Image that we have assigned to the InfoView is at least partially covered by the Panels.

 

We could try assigning the same Background Image to these Panels, but it will not align properly, certainly not all the time.


InfoViewItemFormattingPanelSeeThrough2A

 

The solution is simple: enable the See-Through attribute for the Panels. This makes them transparent to whatever their parent Container Panel's background is displaying.

 

The reason we don't simply say that the Panel becomes transparent is that it doesn't: if it completely or partially covers some other item, you won't see that item through the panel only its parent's background. Since it would be highly unusual for a Panel to cover some item, this is largely not an issue, so you can in fact think of this attribute as making a Panel transparent if you wish.


InfoViewItemFormattingPanelSeeThrough2C

 

BarDgnZoomable Zoomable. Applies to Panels, except the InfoView itself. This enables the PanelZoom feature for the Panel. PanelZoom is described elsewhere, but let's see how it works in more detail, specifically, when there are multi-level Containers involved. When PanelZoom is invoked by either double-clicking a particular Panel or using the PanelZoom command, the program starts by getting hold of the double-clicked Panel or the currently-selected item, as the case may be. It then "walks its way" up the chain of parents until it finds a parent Panel with the Zoomable property set to On. This is the Panel that will get zoomed. It may very well happen to be the Panel that was double-clicked, but it could be some parent thereof. For the "end user" of the InfoView in Alventis, there's usually little need to know any of this stuff. He tries to zoom something gets zoomed (or nothing at all). But it is you, in Designer, who decides which Panels get zoomed, and which simply "pass" the zoom command on to their parent Panels. This is a confusing subject, so let's clarify it with an adequately confusing example.

 

InfoViewItemFormattingPanelZoom1

 

In the form above, there's a Split Panel with two columns of items in one Sub-Panel, and some other stuff we don't care about in the other. The two columns of items have been made to resize proportionally by placing each column on its own Panel and making both Panels Proportional. Why all this was done is not really important though. What's important is which Panel(s) we should make Zoomable. We could make them all Zoomable of course. But then, if the user has the cursor in an Edit Box in the left column, and invokes the PanelZoom command, only that single column's Panel would get zoomed, since this would be the closest Zoomable parent Container of the focused item. If we really wanted to make things nice, we'd want both columns to zoom together. To achieve this, we would make the two Proportional Panels non-Zoomable, and we'd make their common parent Container the first Sub-Panel Zoomable. That's the one that will get zoomed then, together with both of its child Panels and their two columns of Edit Boxes. It's up to you to decide which Panels, if any, you want to zoom under what circumstances, and now you know how the applications decide which one to zoom.