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?