Tutorial: Using Grid and Flow Layouts in FireMonkey FM2

By: Tim DelChiaro

Abstract: This tutorial demonstrates how to use FireMonkey layouts to create a simple calculator interface

This tutorial is part of the RAD Studio XE3 online documentation. Links in the article go to the Embarcadero Doc Wiki. 

To follow along with these steps, you can buy or download a trial of an Embarcadero developer tool with FireMonkey including Delphi, C++Builder and RAD Studio.

    General Form of the Calculator

  1. Select File > New > Other > Delphi Projects > HD FireMonkey Application:
     Creating a Delphi HD Application
  2. Resize the form to 210x250 (or other dimensions that you want the calculator to have) by setting the Height and Width in the Object Inspector, with the form in focus.
  3. Add a TFlowLayout to the form.

    Calculator Display

Add a TEdit to the Principal Layout to serve as the calculator display.

  • In the Object Inspector, with TEdit in focus, do the following:
    • Set Name to Display.
    • Set Width to 200 (or another value that fits the chosen form dimensions).

File:Display_calculator.png

 Calculator display

    Calculator Buttons

A calculator has many types of buttons:

  • Memory buttons: memory cancel--MC, memory recall--MR, add to memory--M+, and subtract from memory--M-
  • Buttons that manage input data: Backspace , clear/cancel--C, and cancel entry--CE.
  • Operations: +-*/, sign change--+/-.
  • Equal button =
  • Digits button--0 to 9, and a point button--..

In this case there is a total of 25 buttons. For easy using, the most important (the most used) buttons will be twice as big as the rest of the buttons. The important buttons are:Backspace+=, and 0. For this layout, a regular button is sized to 50 pixels in width and to 30 pixels in height.

    Memory Buttons

For the memory buttons, add a TGridLayout to the Principal Layout.

  • In the Object Inspector, with TGridLayout in focus, do the following:
    • Set Name to MemoryButtonsGrid.
    • Set Width to 200 (or another value that fits the chosen form dimensions).
    • Set ItemWidth to a quarter of the total Width of the layout, in this case, to 50.
    • Set ItemHeight to 30 (or another value, depending on the shape you want the buttons to have) to obtain a rectangular shape for the buttons.
    • Set Height to 30, or to the same value as ItemHeight. This will preserve the aspect within the Principal Layout.
  • Add 4 TButtons to MemoryButtonsGrid , one for each memory operation listed above.

The result should look like in the image at the right.

    Manage Input Data Buttons

The manage input data buttons do not have the same width, so they are added to the form through another TFlowLayout. Add a TFlowLayoutto the Principal Layout.

  • In the Object Inspector, with the added TFlowLayout in focus, do the following:
    • Set Name to ManageInputDataButtons.
    • Set JustifyLastLine to fjCenter.
    • Set Width to 200 (or to the same value you used for MemoryButtonsGrid).
    • Set Height to 30 (or to the same value you used for MemoryButtonsGrid).
  • Add 3 TButton objects to ManageInputDataButtons.
    • In the Object Inspector, do the following for each button:
      • Set Text to BackspaceC, or CE.
      • Set Height to 30 or to the same value you used for ManageInputDataButtons.
      • For the C and CE buttons, set the Width to 50 or to the same value you used for the width of the MemoryButtonsGrid buttons.
      • For the Backspace button, set the Width to 100 or to the double of a regular button's width.

    Digit and Operation Buttons

+ and = are the most used operations, so the buttons for them are treated separately. For the rest of the operations, regular buttons are used.

  1. To add the regular operation buttons add to the Principal Layout a TGridLayout.
    • In the Object Inspector, with TGridLayout in focus, do the following:
      • Set Name to RegularOperationButtons.
      • Set Width to 200 (or to another value that fits the chosen form dimensions).
      • Set ItemWidth to a quarter of the total Width of the layout, in this case, to 50.
      • Set ItemHeight to 30, (or to another value, depending on the shape you want the buttons to have) to obtain a rectangular shape for the buttons.
      • Set Height to 30 (or to the same value as ItemHeight).
    • Add 4 TButtons to RegularOperationButtons, one for each regular operation listed above.
      The result should look like in the image at the right.
  2. 0 is the most used digit, and the 0 button is bigger than the buttons for the rest of the digits. The digits are split in 2 groups:
    • The 1 through9 buttons have the same dimensions and can be added through a TGridLayout with 3 columns and 3 rows.
    • The 0 and . buttons are added through a TFlowLayout because they do not have the same size as the others.
    1. To group all digit buttons, add a TFlowLayout to the Principal Layout.
    2. Add a TGridLayout object to DigitsButtons to add the regular digit buttons.
    3. Add a TFlowLayout object to DigitsButtons to add the 0 and . digit buttons.
      • In the Object Inspector, with TFlowLayout in focus, do the following:
        • Set Name to SpecialDigitsButtons.
        • Set Width to 150.
        • Set Height to 30, or to the height of a regular button.
        • Set JustifyLastLine to fjCenter.
      • Add 2 TButtons to SpecialDigitsButtons.
        • In the Object Inspector, do the following for each button:
          • Set Text to 0 and 0.
          • Set Height to 30 or to the height of a regular button.
          • For the . button, set the Width to 50 or to the width of a regular button.
          • For the 0 button, set the Width to 100, or to a twice the value of a regular button's width.
      The result should look like in the image at the right.
  3. To add the rest of the operation buttons, add a TGridLayout to the Principal Layout.

The interface should look like in the following image.

File:Calculator_interface.png

Server Response from: ETNASC04