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.
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.
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:
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.btnDragClick(Sender: TObject); begin GIS.Mode := TGIS_ViewerMode.Drag ; 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;
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:
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.