1. Geospatial Research & Solutions GIS.ASU.EDU

2. Cross Platform Mobile GIS applications Using QT and ESRI
Geospatial Research & Solutions
GIS.ASU.EDU
Ayan Mitra is an application developer in the Geospatial Reseach & Solutions Group at Arizona State University. He specializes in developing data driven, interactive GIS applications. He also likes the finer things in life, like beer and chicken wings.

3. Make me a mobile App! Step 1: Hell Yeah! Step 2: Define Requirements.
Step 3: Pick a SDK ( Hyperventilation + Light crying ).

4. Cross Platform Mobile Development with ESRI
Do you need to support only IOS OR Android (use the corresponding Esri runtime SDK)
Do you need to support BOTH IOS AND Android (use Cross Platform App Frameworks) QT
Xamarin
Phonegap

5. WHY QT Supports IOS, Android, Windows, OSX, Linux
Code compiled natively for each platform but shares the same codebase
More performant than hybrid / Html frameworks such as Phonegap
Lets you use Javascript to write UI & business logic
More mature technology than Xamarin (as far as the ESRI SDK’s are concerned)
As of 2016 supports the largest number of OS, compared to Esri’s Xamarin SDK
Arrghh….working with Beta Software sucks! (Esri Xamarin SDK is in beta)
Top notch for building Fluid responsive user interfaces

6. WHY TO NOT USE QT You need to support only 1 OS (Like Ios OR Android)
You don’t need offline capabilities (such as large tile caches, lots of offline data) (use hybrid frameworks like Phonegap or maybe just a Mobile web version of your app)
You are a Microsoft Shop / Invested in Visual Studio (use Xamarin)

7. Introduction to Esri & QT: Two ways to build your app
Esri QT SDK (QML Version)
QML, Javacript
Esri QT SDK (C++ Version)
C++
QML / JS – Easier to work with. QML is the markup language to instantiate pre-existing components (Like HTML or MXML). Use JS to build user interaction and business logic. (for Flex developers this is similar to using MXML and Actionscript).
C++ - More complexity. Gives you full use of the local server.
Example - lets you run custom geoprocessing services offline on device.

8. Anatomy of a QML App Programming Languages & IDE
QML – QT meta language – A markup language (like html) that lets you reuse pre-created user interface objects (like buttons, drop-down menus).
JavaScript – Used to write code for user interface interactions and custom business logic.
(optional ) C++ - can optionally use C++ to extend components (ie create a custom C++ class that runs an algorithm and trigger that class from QML UI)
IDE – QT Creator. I also had to get comfortable with Xcode (To troubleshoot for IOS builds).

9. Anatomy of a QML App Sample QML Code
QML Component Name
Rectangle Component
QT supports reactive programming
When the Data model that is bound to
a UI object changes, the UI changes
automatically.
Rectangle {
id: sprite ;
width: 25;
height: 25;
x: 50;
y: 15 ;
onXChanged: console.log("x property changed, emitted xChanged signal") onYChanged: console.log("y property changed, emitted yChanged signal") }
Defining Properties
Id (unique)
Width, height and
Position (x,y)
Signals & Signal Handlers (event handling)
Inline Javascript Code in the signal handler.
Run when x or y properties change.

10. Event-Driven Programming QML Signal and Handler Event System
Signals provide a way to notify other objects when an event has occurred.
Connect Signals to other signals or methods (slots)
Signals and slots are loosely coupled and are type safe.
This is very similar – dojo’s event handlers/ signals & slots implementation is based off the same concept.

11. QML Application Development Development Workflow Overview
Create your application user interface using QML
If you need custom user interface components, string existing QML components to do that
Create custom javascript code that drive your applications business logic
Define your event handling (using signals & slots)
For Ios, make sure the appropriate Xcode developer components are installed.
Then build and test on simulator.
Build and test with device (Ipad, Iphone, etc).
Sign app and deploy to test devices (Internal deployments or TestFlight).
Finally when done with Testing, deploy to app store for approval.

12. Prepping Data for Runtime SDK applications
Operational vector data – created from mxd document
Customize > ArcMap Options > Sharing > Enable ArcGIS Runtime Tools
Then Open Arcmap, prep your data and then pick File > Share As > ArcGIS Runtime Content.
Copy over your runtime content to your mobile device (for Ios use itunes)
For debugging on your workstation, copy over the Arcgis runtime content to the appropriate location
Stored as .geodatabase extension ( based on sqlite )
Tiled Basemaps
Create tile packages (.tpk) files and copy to appropriate location

13. Questions Geospatial Research & Solutions GIS.ASU.EDU