Multi-Platform Data Bound Radio Button Example

The Update Radio Button Demo is the perfect way to keep your data table up-to-date. Using Live Bindings, this demo cross-platform application automatically updates your in-memory data table whenever a radio button changes. With support for Android, iOS, macOS, Windows, and Linux, you can build a single code base that looks and feels great on any platform.

Download the full cross-platform radio button data binding source code on Github.

This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.

What is a radio button control in software development?

A radio button is a type of graphical user interface (GUI) element that allows the user to choose one option from a group of mutually exclusive options. The radio button control consists of a round button that can be selected or deselected. When the user selects an option, the button becomes “filled” or “checked.” Radio buttons are typically used when there are a limited number of choices to be made, such as choosing a gender or selecting a answer to a yes-or-no question. In software development, radio buttons are often used in preference over other types of GUI elements, such as checkboxes, because they take up less screen space and can be easier for the user to understand.

Screenshot

What does the data bound radio button demo source code look like?

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FireDAC.Stan.Intf, FireDAC.Stan.Option, FireDAC.Stan.Param,
  FireDAC.Stan.Error, FireDAC.DatS, FireDAC.Phys.Intf, FireDAC.DApt.Intf,
  FireDAC.Stan.StorageBin, Data.Bind.EngExt, Fmx.Bind.DBEngExt, System.Rtti,
  System.Bindings.Outputs, Fmx.Bind.Editors, FMX.StdCtrls, FMX.Layouts,
  Data.Bind.Components, Data.Bind.DBScope, Data.DB,
  FireDAC.Comp.DataSet, FireDAC.Comp.Client, FMX.Effects,
  FMX.Controls.Presentation;

type
  TForm1 = class(TForm)
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    Label2: TLabel;
    FDMemTable1: TFDMemTable;
    BindSourceDB1: TBindSourceDB;
    BindingsList1: TBindingsList;
    LinkPropertyToFieldText: TLinkPropertyToField;
    Layout1: TLayout;
    RadioButton1: TRadioButton;
    RadioButton2: TRadioButton;
    RadioButton3: TRadioButton;
    LinkPropertyToFieldIsChecked: TLinkPropertyToField;
    LinkPropertyToFieldIsChecked2: TLinkPropertyToField;
    LinkPropertyToFieldIsChecked3: TLinkPropertyToField;
    procedure RadioButton1Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.RadioButton1Click(Sender: TObject);
begin
  if Sender=RadioButton1 then
    begin
       if not TRadioButton(Sender).IsChecked then
         begin
           FDMemTable1.Edit;
           FDMemTable1.FieldByName('Value').AsString := 'Delphi';
           FDMemTable1.Post;
         end;
    end
  else if Sender=RadioButton2 then
    begin
       if not TRadioButton(Sender).IsChecked then
         begin
           FDMemTable1.Edit;
           FDMemTable1.FieldByName('Value').AsString := 'Is';
           FDMemTable1.Post;
         end;
    end
  else if Sender=RadioButton3 then
    begin
       if not TRadioButton(Sender).IsChecked then
         begin
           FDMemTable1.Edit;
           FDMemTable1.FieldByName('Value').AsString := 'Awesome';
           FDMemTable1.Post;
         end;
    end;
end;

end.

What does the Form component data binding objects look like for the demo?

  object BindSourceDB1: TBindSourceDB
    DataSet = FDMemTable1
    ScopeMappings = <>
    Left = 144
    Top = 224
  end
  object BindingsList1: TBindingsList
    Methods = <>
    OutputConverters = <>
    Left = 20
    Top = 5
    object LinkPropertyToFieldText: TLinkPropertyToField
      Category = 'Quick Bindings'
      DataSource = BindSourceDB1
      FieldName = 'Value'
      Component = Label2
      ComponentProperty = 'Text'
    end
    object LinkPropertyToFieldIsChecked: TLinkPropertyToField
      Category = 'Quick Bindings'
      DataSource = BindSourceDB1
      FieldName = 'Value'
      Component = RadioButton1
      CustomFormat = 'IfThen(ToStr(%s)="Delphi",True, False)'
      ComponentProperty = 'IsChecked'
    end
    object LinkPropertyToFieldIsChecked2: TLinkPropertyToField
      Category = 'Quick Bindings'
      DataSource = BindSourceDB1
      FieldName = 'Value'
      Component = RadioButton2
      CustomFormat = 'IfThen(ToStr(%s)="Is",True, False)'
      ComponentProperty = 'IsChecked'
    end
    object LinkPropertyToFieldIsChecked3: TLinkPropertyToField
      Category = 'Quick Bindings'
      DataSource = BindSourceDB1
      FieldName = 'Value'
      Component = RadioButton3
      CustomFormat = 'IfThen(ToStr(%s)="Awesome",True, False)'
      ComponentProperty = 'IsChecked'
    end
  end

What does the data bindings through LiveBindings look like?

Ready to learn how to program cross-platform apps like this?

Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.