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!
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.
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.
Border Style InstaButton. It has a rather simple dropdown dialog that lets you pick the appearance of the border and adjust its thickness (Margin).
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:
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.
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 / Center(H) / Right , Top /Center(V) /Bottom .
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.
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).
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).
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.
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.
HotTrack. Applies to Text Boxes and similar. Makes their border react visually when you pass the mouse over the item.
Page Control Style. A combo box that allows you to set one of 9 Page Control visual styles. Obviously, only applies to Page Controls.
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.
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.
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:
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.
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.
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 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 . 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 . 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.
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.
Stretch. Makes the picture in Images and Panel Background Images stretched to fill the item's boundaries.
Tile. Applies to Panel Background Images that are not Stretched. Repeats the image to fill the Panel's boundaries.
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.
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.
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.
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.