ScrollBar Data Bindings Demo For Desktop And Mobile

Embarcadero

2 years ago

Scroll Bar Demo data bindings for desktop

The Update ScrollBar Demo is the perfect way to see how Live Bindings can help keep your Edit control and Scrollbar control in sync. This cross-platform application has been built using a single codebase and UI, so it’s easy to use no matter what your preferred operating system might be. The Delphi-based app is fully compatible with Android, iOS, macOS, Windows, and Linux, making it incredibly versatile. With this demo, you’ll see how Live Bindings can make it easy to keep your information up-to-date and accurate – no matter where you are or what device you’re using. Take a look!

Download the full cross-platform scrollbar data binding demo 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.

Table of Contents

What is a scroll bar in software development?

A scroll bar is an element of a graphical user interface that allows a user to scroll through a document or web page. Scroll bars can be horizontal or vertical, and are typically located on the right side of a window or frame. In most cases, scroll bars are used to scroll vertically, but they can also be used to scroll horizontally in some cases. When a scroll bar is used to scroll horizontally, it is typically called a scroll bar. In software development, scroll bars are often used to scroll through long documents or web pages. They can also be used to scroll through images or other elements of a user interface.

Screenshot

What does the source code for the scrollbar demo 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, FireDAC.Stan.StorageJSON,
  Data.Bind.Components, Data.Bind.DBScope, Data.DB, FireDAC.Comp.DataSet,
  FireDAC.Comp.Client, FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation,
  FMX.Edit;

type
  TForm1 = class(TForm)
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    Label2: TLabel;
<strong>    ScrollBar1: TScrollBar;
    FDMemTable1: TFDMemTable;
    BindSourceDB1: TBindSourceDB;
    BindingsList1: TBindingsList;
    FDStanStorageJSONLink1: TFDStanStorageJSONLink;
    Edit1: TEdit;
    LinkControlToField1: TLinkControlToField;
    LinkPropertyToFieldText: TLinkPropertyToField;
    procedure ScrollBar1Change(Sender: TObject);
    procedure Edit1Validate(Sender: TObject; var Text: string);</strong>
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.Edit1Validate(Sender: TObject; var Text: string);
var
  LValue: Single;
begin
  LValue := Text.ToSingle;
  if LValue&lt;&gt;ScrollBar1.Value then
    ScrollBar1.Value := Text.ToSingle;
end;

procedure TForm1.ScrollBar1Change(Sender: TObject);
begin
  Edit1.Text := ScrollBar1.Value.ToString;
  TLinkObservers.ControlChanged(Edit1);
end;</strong>

end.

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, FireDAC.Stan.StorageJSON,

Data.Bind.Components, Data.Bind.DBScope, Data.DB, FireDAC.Comp.DataSet,

FireDAC.Comp.Client, FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation,

FMX.Edit;

type

TForm1 = class(TForm)

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

Label2: TLabel;

<strong> ScrollBar1: TScrollBar;

FDMemTable1: TFDMemTable;

BindSourceDB1: TBindSourceDB;

BindingsList1: TBindingsList;

FDStanStorageJSONLink1: TFDStanStorageJSONLink;

Edit1: TEdit;

LinkControlToField1: TLinkControlToField;

LinkPropertyToFieldText: TLinkPropertyToField;

procedure ScrollBar1Change(Sender: TObject);

procedure Edit1Validate(Sender: TObject; var Text: string);</strong>

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

<strong>procedure TForm1.Edit1Validate(Sender: TObject; var Text: string);

var

LValue: Single;

begin

LValue := Text.ToSingle;

if LValue<>ScrollBar1.Value then

ScrollBar1.Value := Text.ToSingle;

end;

procedure TForm1.ScrollBar1Change(Sender: TObject);

begin

Edit1.Text := ScrollBar1.Value.ToString;

TLinkObservers.ControlChanged(Edit1);

end;</strong>

end.

What does the data bindings look like for the demo?

What does the Form object control code look like?

  object BindSourceDB1: TBindSourceDB
    DataSet = FDMemTable1
    ScopeMappings = &lt;&gt;
    Left = 144
    Top = 224
  end
  object BindingsList1: TBindingsList
    Methods = &lt;&gt;
    OutputConverters = &lt;&gt;
    Left = 20
    Top = 5
    object LinkControlToField1: TLinkControlToField
      Category = 'Quick Bindings'
      DataSource = BindSourceDB1
      FieldName = 'Value'
      Control = Edit1
      Track = False
    end
    object LinkPropertyToFieldText: TLinkPropertyToField
      Category = 'Quick Bindings'
      DataSource = BindSourceDB1
      FieldName = 'Value'
      Component = Label2
      ComponentProperty = 'Text'
    end
  end
  object FDStanStorageJSONLink1: TFDStanStorageJSONLink
    Left = 168
    Top = 368
  end

object BindSourceDB1: TBindSourceDB

DataSet = FDMemTable1

ScopeMappings = <>

Left = 144

Top = 224

end

object BindingsList1: TBindingsList

Methods = <>

OutputConverters = <>

Left = 20

Top = 5

object LinkControlToField1: TLinkControlToField

Category = 'Quick Bindings'

DataSource = BindSourceDB1

FieldName = 'Value'

Control = Edit1

Track = False

end

object LinkPropertyToFieldText: TLinkPropertyToField

Category = 'Quick Bindings'

DataSource = BindSourceDB1

FieldName = 'Value'

Component = Label2

ComponentProperty = 'Text'

end

object FDStanStorageJSONLink1: TFDStanStorageJSONLink

Left = 168

Top = 368

end

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.