How to create your first app for FMX

Documentation | Tutorials | First FMX app

In this tutorial, we create an app in Delphi 10 FMX with the DK11. For those who will port code from DK10 to DK11, it is recommended to read the Migrating to DK11 guide.

Create Multi-Device Application. Then select the Blank Application.

Open the Design tab and add controls on the blank Form. Choose controls from the Tool Palette.

Tool Palette contains all components to design the form. Dedicated TatukGIS components are included in the category 'TatukGIS'.

Object Inspector contains Properties and Events associated with a specified object. In this section you can for example set: Caption, Name, Align, Position, Size, etc.

1. Add TStatusBar and put TLabel on it. Change the name of label for lblPosition and set its text to ‘Position: ‘.
2. Add TGIS_ViewerWND. Change its name to ‘GIS’. In the Object Inspector set Align to ‘Client’.
3. Add TToolBar, set Align to ‘Top’.
4. Add four buttons(TButton) to TToolBar:
   • Name: btnOpen, text: Open
   • Name: btnSelect, text: Select
   • Name: btnDrag, text: Drag
   • Name: btnZoom, text: Zoom
     Set Align of each button to the ‘Left’.
5. Add TGIS_ControlLegend. In the Object Inspector set GIS_Viewer to ‘GIS’ and set Align to ‘Left’. Double click on the layer in the Legend invokes the Visual Properties dialog box.
6. Add TGIS_ControlScale and TGIS_ControlNorthArrow to GIS (in the Structure window you can drag and drop the components to set the hierarchy). In the Object Inspector assign ‘GIS’ as GIS_Viewer.

The final result should look like this:

After designing a form, go to the Code tab.

- Add “uses System.IOUtils, GisLicense, GisTypes, GisAllLayers, GisUtils, GisLayerVector ” just below the {$R *.fmx} in the implementation section.

• System.IOUtils
  returns either the home path of the user or the application's writable scratch directory or storage like TPath.GetDocumentsPath.
• GisLicense
  contains information about the TatukGIS License.
• Mistypes
  common constants and types like TGIS_Point. To be frequently used by client code and including it is almost a requirement.
• GisAllLayers
  allows using layers from the folder with TatukGIS Samples data.
• GisUtils
  Common methods like GisPoint() wrapped into TGIS_Utils class methods. To be frequently used by client code and including it is almost a requirement.

GisLayerVector – contains types like TGIS_Shape, TGIS_LayerVector.

Next, attach events to the components. To attach an event handler select tab ‘Events’ in the Object Inspector and double click on the event. You can also double click on the component if you want to invoke the ‘OnClick’ event. In this example we use the following events:

• btnaopenclick
  

  procedure TForm2.btnOpenClick(Sender: TObject);
  begin
    GIS.RotationAngle := 0 ;
    {$IFDEF WIN32}
      GIS.Open( TGIS_Utils.GisSamplesDataDir + '/world/worldDCW/world.shp');
    {$ELSEIF Defined(MACOS) and Defined(IOS)}
      GIS.Open( TPath.GetDocumentsPath + PathDelim + 'world.shp')  ;
    {$ELSE ANDROID}
      GIS.Open( TPath.GetDocumentsPath + PathDelim + 'ne_10m_admin_0_countries.shp')  ;
    {$ENDIF}
  end;

• btnSelectClick
  

  procedure TForm2.btnSelectClick(Sender: TObject);
  begin
    GIS.Mode := TGIS_ViewerMode.Select ;
  end;

• btnDragClick
  

  procedure TForm2.btnDragClick(Sender: TObject);
  begin
    GIS.Mode := TGIS_ViewerMode.Drag ;
  end;

• btnZoomClick
  

  procedure TForm2.btnZoomClick(Sender: TObject);
  begin
    GIS.Mode := TGIS_ViewerMode.Zoom ;
  end;

• GISTapSimpleEvent
  Tap Simple event makes a flash on the selected shape and displays the position of cursor in the status bar. To invoke the event use the following code:
  

   procedure TForm2.GISTapSimpleEvent(Sender: TObject; Button: TMouseButton;
    Shift: TShiftState; X, Y: Single);
  var
    ptg : TGIS_Point ;
    shp : TGIS_Shape ;
  begin
    if GIS.IsEmpty then
      exit ;
    if GIS.Mode <> TGIS_ViewerMode.Select then
      exit ;
    ptg := GIS.ScreenToMap( Point(Round(X), Round(Y)) ) ;
    shp := TGIS_Shape( GIS.Locate( ptg, 5 / GIS.Zoom ) ) ;
    if not Assigned( shp ) then exit ;
    shp.Flash ;
  lblPosition.Text := Format( 'x: %.4f, y: %.4f ', [ptg.X,  ptg.Y] ) ;
  end;

Add files and set paths in Deployment.

Using the Project/Deployment menu item, chose the Android and, the iOS Device platforms and for each one, add files you want to deploy with your app and set the Remote Path column value:

• Set the remote path for Android: assets\internal\
  
• Set the remote path for iOS: StartUp\Documents\
  

If you want to set a remote path for a few files at the same time, click on the icon DK11 .

Compile and Run the project.

The final code should look like this:

unit Unit2;
 
interface
 
uses
 
System.SysUtils,
System.Types, System.UITypes, System.Classes, System.Variants, FMX.Types,
FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls,
FMX.GisControlNorthArrow, FMX.GisControlScale, FMX.Layouts, FMX.TreeView,
FMX.GisControlLegend, GisTypesUI, FMX.GisViewerWnd, FMX.Controls.Presentation ;
 
type
  TForm2 = class(TForm)
    ToolBar1: TToolBar;
    statusBar: TStatusBar;
    GIS: TGIS_ViewerWnd;
    GIS_ControlLegend1: TGIS_ControlLegend;
    GIS_ControlScale1: TGIS_ControlScale;
    GIS_ControlNorthArrow1: TGIS_ControlNorthArrow;
    btnOpen: TButton;
    btnSelect: TButton;
    btnDrag: TButton;
    btnZoom: TButton;
    lblPosition: TLabel;
    procedure GISTapSimpleEvent(Sender: TObject; Button: TMouseButton;
      Shift: TShiftState; X, Y: Single);
    procedure btnOpenClick(Sender: TObject);
    procedure btnSelectClick(Sender: TObject);
    procedure btnDragClick(Sender: TObject);
    procedure btnZoomClick(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;
 
var
  Form2: TForm2;
 
implementation
 
 
{$R *.fmx}
 
uses System.IOUtils, GisLicense, GisTypes, GisAllLayers, GisUtils, GisLayerVector;
 
procedure TForm2.btnDragClick(Sender: TObject);
begin
  GIS.Mode := TGIS_ViewerMode.Drag ;
end;
 
procedure TForm2.btnOpenClick(Sender: TObject);
begin
  GIS.RotationAngle := 0 ;
  {$IFDEF WIN32}
    GIS.Open( TGIS_Utils.GisSamplesDataDir + '/world/worldDCW/world.shp' );
  {$ELSEIF Defined(MACOS) and Defined(IOS)}
    GIS.Open( TPath.GetDocumentsPath + PathDelim + 'world.shp' )  ;
  {$ELSE ANDROID}
  GIS.Open( TPath.GetDocumentsPath + PathDelim + 'ne_10m_admin_0_countries.shp' )  ;
  {$ENDIF}
end;
 
procedure TForm2.btnSelectClick(Sender: TObject);
begin
  GIS.Mode := TGIS_ViewerMode.Select ;
end;
 
procedure TForm2.btnZoomClick(Sender: TObject);
begin
  GIS.Mode := TGIS_ViewerMode.Zoom ;
end;
 
procedure TForm2.GISTapSimpleEvent(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Single);
var
  ptg : TGIS_Point ;
  shp : TGIS_Shape ;
begin
  if GIS.IsEmpty then
    exit ;
  if GIS.Mode <> TGIS_ViewerMode.Select then
    exit ;
  ptg := GIS.ScreenToMap( Point(Round(X), Round(Y) ) ) ;
  shp := TGIS_Shape( GIS.Locate( ptg, 5/GIS.Zoom ) ) ;
 
  if not Assigned( shp ) then exit ;
  shp.Flash ;
  lblPosition.Text := Format( 'x: %.4f, y: %.4f', [ptg.X, ptg.Y] ) ;
end;
 
end.