Cross-Platform UI for C++ Apps Using QML at Quartz

Lucas Danzinger

March 8–11, 2016 | Palm Springs, CA

Esri Developer Summit

C++ UI Options

• wxWidgets• GTK+ (GIMP Toolkit)• FLTK (Fast Light Toolkit)• Qt

Qt FrameworkQt Quick & QML

Agenda

• Qt Quick & QML• Benefits of QML for C++ devs• Benefits of C++ for QML devs• Integrating C++ and QML

What is Qt Quick?

What is Qt Quick

• Implies QML• Modern UI Framework• Separates declarative UI (QML) with procedural business logic (C++)• High performance• Native cross platform

- Supports nearly any platform- Scales well- Support for touch

QML

Highly readableJSON syntax

Dynamic property binding async communication via signal and handler

Why use C++ and Qt Quick?It depends…

Benefits of Qt Quick for C++ Devs

• Dynamic user interfaces• Fluid animation• Separate UI and business logic

- Designer focus on UI- Developer focus on functionality

• Cross platform- Scales well for touch screens

• Rapid UI Development• Speedy performance

Benefits of Qt Quick for C++ Devs

Qt WidgetsQt Quick

Benefits of C++ for QML Devs

• QML is designed for UI• Declarative QML === great• Imperative QML < great• Performance

- Loops- String parsing- Workerscript

QML vs C++ Performance Comparison

How to integrate C++ and QML

Your map-app pattern

• Qt Widgets or Qt Quick?• MapView types• 10.2.6 Options:

- Pure QML API - Pure C++ API (using Qt Widgets)

• Quartz Options:- The same as 10.2.6- Plus a C++ API with QML MapView

Display a Map in QML

“Hello World” Map App with C++ & QML

MapQuickView with C++ and QMLRegister classes in your main.cpp

• Register your C++ Class with QML

• Register your C++ MapView with QML

MapQuickView with C++ and QMLDeclare objects in your QML

• Import the namespace you registered

• Declare your C++ class (which inherits from QQuickItem)

• Declare your MapView and give it an ID

MapQuickView with C++ and QMLAdd a Map to your MapView in C++

• Find the QML Object in C++

• Create a Map and add to MapView

Functions

Executing C++ functions from QML

Invokable C++ functionCall a C++ function from QML

• Add function declaration

• Use Q_INVOKABLE macro

• Implement the member function

• Call from QML

Properties

Bindable Properties

Bindable PropertiesC++ header declaration

• Create a getter

• Create member to hold property value

• Create signal

• Use Q_PROPERTY macro

Bindable Properties (cont)C++ implementation

• Set a value on the member• Emit the signal

• Implement the getter

Bindable Properties (cont)QML implementation

• Bind to the property

• Connect to signals viasignal handlers

Models and Views

Models and Views

• MVC architecture in Qt• 3 components of this system in Qt

- Model – contains the data- Delegate – UI element that determines how each item in the

model will be displayed- View - Displays a delegate for each item in the model

• Models automatically notify the view to update when data changes

• You can bind list properties to QML Views

Models and Views

Models and Views

• Expose as a Q_PROPERTY

• Register ListModel with QML

• Consume in QML

Recap

• Qt Quick & QML• Benefits of QML for C++ devs• Benefits of C++ for QML devs• Integrating C++ and QML

- Displaying a map- Calling functions- Binding to properties- Using Models and Views

Related sessions

• Cross-platform Native App Development with Qt/QML- Thursday 2:30 – 3:30 pm in Demo Theater 3

• The Road Ahead: ArcGIS Runtime- Thursday 5:30 – 6:30 pm in Primrose A

Questions?