User Tools

Site Tools


guides:tutorials:first-fmx-app

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 New Project

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

Design form

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:

Add code

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.

Attach events

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 to Deployment

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 .

Test

Compile and Run the project.

Source Code

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.
2019/09/27 13:14