Today I present one of the undoubtedly great improvements of Xailer 5 and it is the new control TCardBox (cards). This new control is especially indicated to replace great amount of ‘Browses’, but above all, to be a fundamental control in the development of applications for tablets.

It might seem that the TCardBox control are just many panels aligned to alTOP, in which each one contains other controls with different alignments. Not at all, TCardBox is a unique control, with a single window handle that is prepared to process millions of records as fast as a dozen of them would treat. In terms of speed and resource consumption it is equivalent to a TBrowse control. Therefore, do not hesitate to use it as if it were a TBrowse object.

Keeping in mind the great speed and low consumption of resources required, an absolutely new control has been developed that does not exist in other development environments and whose design is totally visual and very simple. However, it requires a small introductory explanation that clearly shows how it works. Here is the card design shown at the beginning of this article:

As you can see, in design time only one card is displayed and it is divided into several sections, which will show each of the elements that we want to visualize. Each of these sections inside the card is a TCardItem control, which is a simple object inherited from the TComponent base class which has a series of properties to set its parameters, like Alignment, color, and text or image to display. The number that shows each of the TCardItem matches your creation order, which is just as important of controls alignment. When you create a TCardBox object this is what is shown in the IDE:Only a rectangle of what the card occupies is shown. That is all. In order to display something in the control it is necessary to add a TCardItem control, which would be the equivalent of a adding a column in a TBrowse. When you add a control through its context menu you will see the following:Notice how there is a new rectangle with the number ‘1‘ inside the card. This rectangle is a TCardItem control and would be the equivalent of a TBrowse column object. If you click on the rectangle with the mouse you can start editing all its properties just as you would with a column object.

There are four properties that indicate the occupation of the item in its container, which are:

• Its property nSize which indicates its size.
• Its property nAlign which sets its alignment inside the card.
• Its property nAlignWeight which indicates its weight with other items with same alignment and consecutive creation.
• Its property nSiblingWeight (weight between siblings) which sets the the weight of an item respect a base item (its eldest sibling).

The nSize property indicates the size of the item. Note that if the orientation is vertical, its value indicates the width of the control, while if it is horizontal it will indicate its height.

The nAlign property indicates the alignment in the same way as a TPanel control on a form. In fact, it can have the same values: alTOP, alBOTTOM, alLEFT, alRIGHT and alCLIENT (except alNONE). The alignment alLEFT is the one that has been set in the image above.

The nAlignWeight property indicates the weight of the item relative to other items with the same alignment that are consecutive in creation. When this property is nonzero, the nSize property becomes useless since its size will be calculated based on the weight indicated in this property. Suppose three items we want to split the card into three vertical sections of equal size. Something like this:To do this, we would only have to indicate that all items have alLEFT orientation and that all of their nAlingWeight property has a value 1, ie all items have the same weight. Note that it is the same to put all items in the value 1 in this property that any other value, because in any case all three will have the same weight and therefore, its size will be evenly distributed. As you may have guessed, to make one item double the other two, you only have to change the value of the nAlignWeight property to 2 for that particular item. As soon as you change the alignment of any item and make it different from the previous one the weight system is initialized for the new alignment.

This alignment system can still be more powerful thanks to the nSiblingWeight property that allows you to set multiple items as siblings that share the size or weight of the older sibling. The older sibling would be the first to have a value on this nonzero property. Thereafter, all items that have the same alignment (taLEFT), their nAlignWeight property is set to zero and have a nonzero value in their nSiblingWeight property behave like siblings and they will all share the space that would occupy his older sibling as if it were alone.

It is easy to understand with an example: Suppose we want to split item 3, in two parts making the first piece triple that the second. Something like this:We have simply created an additional item (4), we have given it the same alignment (taLEFT) as the rest, we have set its nSiblingWeight property to 1 and to Item 3 (oldest sibling) we have set its nSiblingWeight property to 3. That is all.

As a final exercise we will see in the example card the values that have these properties:As with the columns of a TBrowse control, in a TCardBox control, each item is responsible for displaying its information. In a TBrowse object, the number of rows in the DB is marked by the size of an array, the number of records in a DBF file, or the number of rows in a dataset. In a TCardBox object it is the same, but instead of rows, we will have cards. That is all.

The TCardBox control uses a multi-column array that is set to its aData property as the data source. Each TCardItem of the control should indicate the column number to use and use its nColumn property. This name has been used precisely to see the similarities between a TCardBox object and a TBrowse object.

When you use a TDbCardBox control, the data source is no longer an array, but a dataset, and each TCardItem control will have a property of oDataField That allows you to set the information to display.

Like a TBrowse there is always an active card that corresponds to the nIndex property, which can also be modified to change the active card by code.

TCardBox also supports a multi-selection card mode with lMultipleSel and aSelected properties, which works identically to TBrowse.

A TCardItem object can display the information in different ways through nType, which can be:

• ctLABEL: Simple text.
• ctLABELEX: Text that supports the same properties as a TLabelEX control, such as HTML commands for example. In addition, when using this type, if the text does not fit on the card, clicking the object will show a scroll bar that will allow you to scroll through the entire text.
• ctPICTURE: An image, can be a TPicture object or a image stream.
• ctIMAGEINDEX: Image ordinal on its TCardBox oImageList property.

Here is a video of its use:

I hope you liked the new control TCardBox and it did not seem very complicated to use. I encourage you to use it as soon as it becomes available. I assure you that you will not regret them.

See you soon!

Ignacio Ortiz de Zúñiga
Xailer team