デスクトップおよびモバイル向けのScrollBarデータバインディングデモ

エンバカデロ

2年前

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!

フルクロスプラットフォームのScrolllBarデータバインディングデモのソースコードをGithubからダウンロード

このデモは、カメラデモ、絵文字デモ、ペイントデモなど、100以上のクロスプラットフォームデモの一部です。

ソフトウェア開発におけるScrollBar

ScrollBarは、ユーザーがドキュメントまたは Webページをスクロールできるようにするグラフィカルユーザーインターフェイス要素です。ScrollBarは水平または垂直に設置することができ、通常はウィンドウまたはフレームの右側にあります。ほとんどの場合、ScrollBarは垂直方向のスクロールに使用されますが、場合によっては水平方向のスクロールにも使用できます。ScrollBarを使用して水平方向にスクロールさせることもあります。ソフトウェア開発では、長いドキュメントや Web ページをスクロールするためにScrollBarがよく使用されます。また、ユーザーインターフェイスの画像やその他の要素をスクロールするためにも使用できます。

画面ショット

ScrollBarデモのソースコード

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.クラス, 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.

デモのデータバインディング設定

Formのプロパティ設定

  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

クロスプラットフォームアプリのプログラミング手法を学ぶには

今すぐ Coding Boot Camp 2022に登録してください。ゲーム、JavaScript、Web、Python、SQL、データベース、iOS、MacOS、Android、モバイル、Linux、Windows、デスクトップ、サーバー、Arduinoなど、プログラミングに関するさまざまなトピックを学ぶことができます。