ScrollBar Data Bindings Demo For Desktop And Mobile

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.

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;
    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);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

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;

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 = <>
    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
  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.