Cells and LaObjects

Overview

Each grid cell is a composite visual object composed of nested visual elements. These elements are categorized into two main types:

• Panel Objects: Containers that hold other objects and arrange them according to specific layout algorithms. For example, LaStackPanel arranges its child objects sequentially from left to right or top to bottom.
• Terminal Objects: Objects that display primitive information. For example, TLaTextBlockEh displays text, while TLaImageEh displays images.

Panel Objects

The library provides the following panel types:

TLaLayoutPanelEh

A panel that arranges child objects to fill the entire panel space. This corresponds to the ChildControl.Align = Client model in Fmx.TControl, with the following nuances:

• Child control properties HorzAlignment and VertAlignment are considered during layout.
• Default values are TLaHorzAlignmentEh.Stretch and TLaVertAlignmentEh.Stretch, allowing child controls to stretch to panel boundaries.

TLaStackPanelEh

A panel that arranges child objects sequentially, either horizontally (left to right) or vertically (top to bottom), based on the Orientation property:

• TLaOrientationEh.Vertical: Child objects are arranged top to bottom in order of addition. Child object width fills the entire panel width, assuming ChildControl.HorzAlignment = Stretch.

TLaGridPanelEh

A panel that arranges child objects within predefined grid cells. Grid cells are created using ColumnCollection and RowCollection properties. Child elements are added to specific cells using the GridPanel.ControlCollection.AddControl method.

Column widths and row heights can be specified using three size styles:

Size Style	Description	Example
TLaGridPanelSizeStyleEh.Auto	Column width (or row height) is automatically calculated based on the child object's width or the maximum width of multiple children.	Width adapts to content
TLaGridPanelSizeStyleEh.Weight	Column width (or row height) is specified as a relative proportion of the entire GridPanel width. For example, two columns with Width = 1 and SizeStyle = Weight will divide the panel equally. To make the first column half the width of the second, set widths to 1 and 2 respectively.	Width = 1 (50%), Width = 2 (100%)
TLaGridPanelSizeStyleEh.Pixel	Column width (or row height) is specified in screen pixels.	Width = 100 pixels

Terminal Objects

TLaTextBlockEh

A control designed for text display. Content is set using the Text: String property.

Additional text configuration properties:

• FieldName: String – Specifies the field name to retrieve text values from the current record. When set, the Text property is automatically populated.
• TextAlign: TTextAlign – Horizontal text alignment (Center, Leading, Trailing).
• Trimming: TTextTrimming – Text truncation method when it exceeds control boundaries.
• WordWrap: Boolean – Enables text wrapping to new lines when it doesn't fit within the cell width.
• HighlightRegions – Defines text regions to highlight with special colors. Used in the grid's SearchPanel mode to highlight found text sections.
• FormattedTextRanges – Defines text regions with custom formatting.
• Font: TFont – Sets the text font.
• Fill: TBrush – Sets the control background color.
• Borders – Configures control border styling.

TLaImageEh

A control designed for image display. Images can be sourced from:

Source	Configuration
ImageList	Assign ImageList and ImageIndex properties.
External Bitmap	Assign the Bitmap property.
DataSet Field	Set FieldName property. The field must be of type TBlobField with BlobType = ftGraphic or TGraphicField.

Creating Panel and Terminal Object Structures in Code

Panel and terminal object structures are typically created in the OnCreateCellContent event or by overriding the TDataAxisTextCellEh.CreateDefaultCellContentControls method. To avoid creating separate variables for each panel and terminal object, use Delphi's with … do statement.

Example: Image and Editable Text Cell

The following code creates a cell structure displaying both an image and editable text:

TDataAxisImageTextCellEh.CreateDefaultCellContentControls

function TDataAxisImageTextCellEh.CreateDefaultCellContentControls(
    AParentObject: TLaObjectEh): TLaObjectEh;
var
  BaseContent: TLaObjectEh;
begin
  with TLaGridPanelEh.CreateWith(AParentObject) do
  begin
    Result := RefSelf;
    Name := 'ImageTextContent';

    with ColumnCollection.Add do
    begin
      SizeStyle := TLaGridPanelSizeStyleEh.Auto;
      Value := -1;
    end;

    with ColumnCollection.Add do
    begin
      SizeStyle := TLaGridPanelSizeStyleEh.Weight;
      Value := 1;
    end;

    //Col1 Image
    with TLaImageEh.CreateWith(RefSelf, RefSelf) do
    begin
      ControlCollection.AddControl(RefSelf, 0, -1);
      Name := 'InCellImage';
      FInCellImage := RefSelf as TLaImageEh;
      Width := 24;
      Height := 24;
      VertAlignment := TLaVertAlignmentEh.Center;
      Margins.Rect := TRectF.Create(10, 0, 0, 0);
    end;

    //Col2 Text
    BaseContent := inherited CreateDefaultCellContentControls(RefSelf);
    ControlCollection.AddControl(BaseContent, 1, -1);
  end;

end;

Testing and Debugging Cell Layout with TLaObjectTreeViewForm

Overview

To test the created object tree and diagnose specific object positioning within grid cells, use the TLaObjectTreeViewForm form object inspector. This debugging tool provides visual inspection of object hierarchies and their properties.

Prerequisites

For proper functionality, your form must inherit from TFormEh. The TFormEh class provides the following debugging capabilities:

• F11 Key: Opens the object inspector window.
• Object Highlighting: Highlights the currently selected object in the inspector on your form.
• Mouse Hover Detection: Highlights objects under the mouse cursor when the inspector is in selection mode.

Object Inspector Interface

The object inspector window consists of two main panels:

Left Panel: Object Tree

• Displays a hierarchical tree of all objects on the form that inherit from Fmx.TControl.
• Allows navigation through the object hierarchy, including nested panel structures within grid cells.

Right Panel: Properties List

• Shows all properties of the currently selected object from the tree.
• Displays property values alongside their names.
• Editable Properties: Simple numeric properties and enumeration types can be modified directly through the text editor.

Interactive Object Selection

To select objects interactively on your form:

1. Mouse Selection Mode: Click and hold the left mouse button on the caret symbol (^) in the object tree.
2. Hover Detection: Move the mouse over your form. The object under the cursor will be highlighted.
3. Property Update: The right panel will automatically update to display properties of the highlighted object.

This feature is particularly useful for debugging complex cell layouts, allowing you to quickly identify and inspect specific visual elements within grid cells.

Example Usage Workflow

1. Launch Inspector: Press F11 in your TFormEh-derived form.
2. Navigate Hierarchy: Expand the object tree to locate grid cells and their nested LaObjects.
3. Interactive Selection: Use the caret symbol to hover over and select specific visual elements.
4. Property Inspection: Modify numeric and enumeration properties in real-time to test layout changes.
5. Visual Feedback: Observe how property changes affect object positioning and appearance on the form.

This debugging approach enables rapid iteration during cell content development, making it easier to achieve the desired visual layout within grid cells.