FMX.NativeControls Sample

This sample demonstrates the use of the Native Controls of FireMonkey

Location

You can find the NativeControls sample project at:

• Start | Programs | Embarcadero RAD Studio Athens | Samples and then navigate to:
  • Object Pascal\Multi-Device Samples\User Interface\NativeControls
  • CPP\Multi-Device Samples\User Interface\NativeControls
• Subversion Repository:
  • You can find Delphi and C++ code samples in GitHub Repositories. Search by name into the samples repositories according to your RAD Studio version.

Description

The NativeControls sample shows the use of the Native Controls of FireMonkey. To this end it uses several components that are configured with its ControlType property set to Platform in order to have the native styling of that control.

Note: Only iOS and Windows support native controls. The following links provide a list of controls that support native presentation on iOS and Windows platforms. The value of ControlType property on any other platform does not have any effect.

How to Use the Sample

1. Navigate to one of the locations given above and open:
   • Delphi: NativeControlsDemo.dproj.
   • C++: NativeControlsDemo.cbproj.
2. Select the target platform in the Projects Window.
3. Press F9 or choose Run > Run.

Files

File in Delphi	File in C++	Contains
NativeControlsDemo.dproj NativeControlsDemo.dpr	NativeControlsDemo.cbproj NativeControlsDemo.cpp	The project itself.
MainFrm.pas MainFrm.fmx	MainFrm.h MainFrm.cpp MainFrm.fmx	The main form.

Classes

TForm1 is the main form that represents the main window of the sample. It contains the following components:

• A TTabControl object with four TTabItem objects.
  • TabItem1 contains:
    • Five TEdit object. The TEdit object named Edit3 contains a TClearEditButton object.
    • Five TLabel objects.
  • TabItem2 contains:
    • A TCalendar object.
    • A TSwitch object.
    • Two TLabel objects.
  • TabItem3 contains:
    • Three TMemo objects.
    • Three TLabel objects.
  • TabItem4 contains:
    • A TListView object.

Implementation

FireMonkey provides native presentation for certain visual components. Although the default value of the ControlType property is Styled, which means that the control has the standard FireMonkey presentation, if you set the ControlType property to Platform, the controls have the native styling. In the sample, when you run the application, it shows four tabs labeled as Edit, Memo, Standard and ListView. Each tab contains several controls. All the controls have the ControlType property set to Platform in order to have the native styling of that control. Moreover, the controls are also configured with other properties that are explained below.

• TabItem1, which is labeled as Edit, contains five edit components:
  • The Edit1 component is configured with the TCaret.Color property set to Green.
  • The Edit2 component uses the TextPrompt property, which is used to display a message when the Text property is empty. In this sample it shows this message: First Name , which is cleared from the entry field as soon as the user begins to type into the edit field.
  • The Edit3 component has a TClearEditButton component attached. It is used for clearing text when you want to quickly erase the text in the edit box.
  • The Edit4 component has the TextAlign property set to Center.
  • The Edit5 component has the StyleLookup property set to transparentedit.

• TabItem2, which is labeled as Standard, contains the following components:
  • A TCalendar component, which is used to display a calendar for one month, where the user can select a day or browse for months and years.
  • A TSwitch component without any functionality attached to it. It could be used to provide the user with a two-way on-off switch.

• TabItem3, which is labeled as Memo, contains three TMemo components:
  • The Memo1 component has the StyleLookup property set to transparentmemo.
  • The Memo2 component is configured with the CheckSpelling property set to True. Moreover, some properties of TextSettings are configured so that the text is underlined and highlighted in bold and italics. Finally, the FontColor is set to Lightcoral.
  • The Memo3 component has the PhoneNumber, Link, Address and CalendarEvent options of the DataDetectorTypes property set to True in order to detect these types of information in the memo text.

• TabItem4, which is labeled as ListView, contains a TListView component that contains a list of names organized by their jobs.

Uses

• TTabControl
• TEdit
• TClearEditButton
• TLabel
• TCalendar
• TSwitch
• TMemo
• TListView

See Also

• Native Controls
• FireMonkey Native iOS Controls
• FireMonkey Native Windows Controls
• Tab Controls
• Mobile Tutorial: Using Tab Components to Display Pages

Samples

• FireMonkey Controls sample
• FireMonkey Tab Slide Transition sample