Pickers in FireMonkey. What are they, what they are necessary for, and how to use them?

Here we discuss the Picker control elements–what are they, what they are necessary for, and how to use them to program cross-platform UI elements, which behavior depends upon the used platform. Pickers are available in FireMonkey 2.0.

Introduction

Each platform has its own methodology of UI and its own set of available services. They both dictate the general principles of the user interaction with the UI and define the available sets of such UI control elements as buttons, switches, drop-down lists, and others.

To demonstrate, let us compare –how to look native date-selection controls under different platforms:

Windows 7: The ordinary Calendar.

Mac OS: The Calendar has almost the same control elements as under Windows. The main difference is only in presentation of controls.

iOS: Provides absolutely new way of date selection with the rotating wheels.

Problem

What can we do when a control not only has to look like a ‘native’ under each OS, but also have to provide the proper behavior? One can use Pickers that are provided with FireMonkey 2.0 framework.

Solution

Pickers provide the platform-specific engine giving controls with a different view and different behavior under different platforms.

In RAD Studio XE3, the FireMonkey 2.0 framework provides two types of pickers:

1. DateTimePicker - the platform-specific control supporting selection of date (and time under iOS).
2. ComboBoxPicker - the platform-specific control supporting selection of data from a drop-down list.

Pickers are activated on different platforms using the new IFMXPickerService service. (About usage of service approach you can read in the Darren Kosinski’s blog "FireMonkey 2 Under The Hood Changes: PlatformServices" http://blogs.embarcadero.com/darrenkosinski/2012/10/01/51/.)

How to use Pickers?

Components, which need to use the platform-specific behavior for date (and time) selection and for selection of data from a drop-down list, can use the IFMXPickerService service.

To use the IFMXPickerService service:

1. Check whether the required service is supported by the current platform (this trick can be used to check whether any service is supported by a platform):

var
  PickerService: IFMXPickerService;
begin
  if PlatformServices.Current.SupportsPlatformService(IFMXPickerService, IInterface(PickerService)) then
    raise Exception.Create(‘Picker Service does not support’);

2. Request for the required picker and pass to it the appropriate parameters and event handlers:

2.1. For the date (and time) selection:

procedure ShowComboBoxPicker(AParentControl: TControl; AValues: TStrings; const AItemIndex: Integer;
  const ACountVisibleItem: Integer; AOnChange: TOnValueChanged;
  AOnClose: TOnClosePicker; AOnShow: TNotifyEvent);

2.2. For the data selection from the drop-down list:

procedure ShowDateTimePicker(AParentControl: TControl; const ADate: TDateTime;
  const AOptions: TCalendarViewOptions; AOnChange: TOnDateChanged;
  AOnClose: TOnClosePicker; AOnShow: TNotifyEvent);

For example, look how ShowComboBoxPicker is used in the FMX.ListBox.TCustomComboBox.DropDown method to show the control providing native behavior and native view under all supported platforms.

Results

These pickers provide the platform-specific behavior of corresponding control elements. For example, FMX.ListBox.TComboBox under Windows 8 centers a drop-down list on the selected element.

In order to make this behavior effective, you need:

1. Set ddkNative to the TComboBox.DropDownKind property.
2. The TStyleDescriptor property should provide the [METROPOLISUI] style. The PlatformTarget property defines platforms to which this style can be implemented. If you do not specify this style, them the selection control works as standard (Win7, MacOS) drop-down list without centering on the selected element.

Posted by ybrovin on October 11th, 2012 under Firemonkey (ENG) |