Create Re-Usable Cross-Platform Tabs Through Frames

Embarcadero

2 years ago

Frame Tabs Demo lets you easily build a set of tabbed navigation pages for your Android, iOS, macOS, Windows, or Linux app. Using the Frames feature in Delphi, you can isolate and re-use code and UI elements in multiple places. This makes it easy to create a consistent look and feel across your app. Frame Tabs Demo is a cross-platform application built using a single code base. This makes it easy to maintain and update your app.

Download the full cross-platform Frame based Tabs interface 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

Is in a good idea to create re-usable elements in software development?

In software development, re-usable elements are pieces of code or functionality that can be used in multiple places within a single project, or across different projects. There are many benefits to creating re-usable elements, including improved code quality and efficiency, reduced development time, and the ability to share code between team members. However, there are also some potential drawbacks to re-usable elements, such as the need for ongoing maintenance and the risk of introduce errors into multiple parts of the codebase. When deciding whether to create re-usable elements, developers must weigh the advantages and disadvantages carefully to determine if the benefits outweigh the risks.

Screenshot

What does some source code of this project 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,
  System.ImageList, FMX.ImgList, FMX.TabControl, FMX.StdCtrls, FMX.Effects,
  FMX.Controls.Presentation, Unit2, Unit4, Unit3;

type
  TForm1 = class(TForm)
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    Label1: TLabel;
    MaterialOxfordBlueSB: TStyleBook;
    TabControl1: TTabControl;
    TabItem1: TTabItem;
    TabItem2: TTabItem;
    TabItem3: TTabItem;
<strong>    SecondFrame1: TSecondFrame;
    ThirdFrame1: TThirdFrame;
    FirstFrame1: TFirstFrame;</strong>
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

uses
  Unit5;

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,

System.ImageList, FMX.ImgList, FMX.TabControl, FMX.StdCtrls, FMX.Effects,

FMX.Controls.Presentation, Unit2, Unit4, Unit3;

type

TForm1 = class(TForm)

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

Label1: TLabel;

MaterialOxfordBlueSB: TStyleBook;

TabControl1: TTabControl;

TabItem1: TTabItem;

TabItem2: TTabItem;

TabItem3: TTabItem;

<strong> SecondFrame1: TSecondFrame;

ThirdFrame1: TThirdFrame;

FirstFrame1: TFirstFrame;</strong>

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

uses

Unit5;

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.