End to End GUI Development with Qt5

End to End GUI Development with Qt5

by Nicholas Sherriff, Guillaume Lazar, Robin Penea, Marco Piccolino
Released November 2018
Publisher(s): Packt Publishing
ISBN: 9781789531909

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn the complete Qt ecosystem and its tools and build UIs for mobile and desktop applications

Key Features

  • Unleash the power of the latest Qt 5.9 with C++14
  • Easily compile, run, and debug your applications from the powerful Qt Creator IDE
  • Build multi-platform projects that target Android, iOS, Windows, MacOS, Linux, and more

Book Description

Qt 5.9 is an application development framework that provides a great user experience and develops full-capability applications with Qt Widgets, QML, and even Qt 3D. This learning path demonstrates the power and flexibility of the Qt framework for desktop application development and shows how you can write an application once and deploy it to multiple operating systems. It will address all the challenges while developing cross-platform applications with the Qt framework.

This course will give you a better understanding of the Qt framework and tools to resolve serious issues such as linking, debugging, and multithreading. It will also upskill you by explaining how to create a to-do-style app and taking you through all the stages in building a successful project. You will build a suite of apps; while developing these apps, you'll deepen your knowledge of Qt Quick's layout systems, and see Qt 3D and widgets in action. The next project will be in the industrial and agricultural sectors: making sense of sensor data via a monitoring system. Your apps should run seamlessly across devices and operating systems such as Android, iOS, Windows, or Mac, and be cost-effective by integrating with existing web technologies. You take the role of lead developer and prototype a monitoring system. In doing so, you'll get to know Qt's Bluetooth and HTTP APIs, as well as the Charts and Web Engine UI modules. These projects will help you gain a holistic view of the Qt framework.

What you will learn

  • Install and configure the Qt Framework and Qt Creator IDE
  • Implement a rich user interface with QML
  • Learn the fundamentals of QtTest and how to integrate unit testing
  • Create stunning UIs with Qt Widget and Qt Quick
  • Develop powerful, cross-platform applications with the Qt framework
  • Design GUIs with Qt Designer and build a library in it for UI previews
  • Build a desktop UI with widgets and Designer
  • Get familiar with multimedia components to handle visual input and output

Who this book is for

This book will appeal to developers and programmers who would like to build GUI-based applications. Knowledge of C++ is necessary and a basic familiarity with Qt would be helpful.

Table of contents

  1. Title Page - Courses
  2. Copyright and Credits - Courses
    1. End to End GUI Development with Qt5
  3. Packt Upsell - Courses
    1. Why subscribe?
    2. PacktPub.com
  4. Preface
    1. Who this learning path is for
    2. What this learning path covers
    3. To get the most out of this learning path
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  5. Learn Qt 5
  6. Hello Qt
    1. Installing Qt
      1. Maintaining your installation
      2. Qt Creator
      3. Scratchpad project
      4. qmake
    2. Summary
  7. Project Structure
    1. Projects, MVC, and unit testing
      1. Project creation
      2. cm-lib
      3. cm-tests
      4. cm-ui
    2. Mastering MVC
      1. QObject
      2. QML
      3. Project output
    3. Summary
  8. User Interface
    1. UX
    2. Creating views
    3. StackView
    4. Anchors
    5. Sizing
    6. Navigation
      1. Fixing conflicts
    7. Summary
  9. Style
    1. Style resource
    2. Font Awesome
    3. Components
    4. Styling the navigation bar
      1. Clicking
      2. Commands
      3. Command bar
    5. Summary
  10. Data
    1. JSON
    2. Object hierarchy
    3. DataDecorators
    4. Entities
    5. Entity collections
    6. Data models
    7. Custom TextBox
    8. Summary
  11. Unit Testing
    1. Unit testing
    2. The default Qt approach
    3. Custom approach
    4. DataDecorator tests
    5. Entity Tests
    6. Mocking
    7. Summary
  12. Persistence
    1. SQLite
      1. Primary keys
      2. Creating clients
    2. Panels
      1. Finding clients
      2. Editing clients
      3. Deleting clients
    3. Summary
  13. Web Requests
    1. Network access
    2. Web Requests
      1. RSS View
      2. RSS
    3. Summary
  14. Wrapping Up
    1. Object factory
      1. UI scaling
      2. Dashboard
      3. Enumerator selectors
      4. Contacts
      5. Deployment preparation
      6. OS X
      7. Linux
      8. Windows
      9. Qt Installer framework
      10. Installation
    2. Summary
  15. Mastering Qt 5
  16. Discovering QMake Secrets
    1. Designing a cross-platform project
      1. Adding the Windows implementation
      2. Adding the Linux implementation
      3. Adding the Mac OS implementation
    2. Transforming SysInfo into a singleton
    3. Exploring Qt Charts
    4. CpuWidget using QCharts
    5. Memory using Qcharts
    6. The .pro file in depth
    7. Under the hood of qmake
    8. Beneath Q_OBJECT and signals/slots
    9. Summary
  17. Dividing Your Project and Ruling Your Code
    1. Designing a maintainable project
    2. Defining data classes
    3. Storing your data in a database
    4. Protecting your code with a smart pointer
    5. Implementing the model
    6. Summary
  18. Conquering the Desktop UI
    1. Creating a GUI linked to a core shared library
    2. Listing your albums with AlbumListWidget
    3. Creating a ThumbnailProxyModel
    4. Displaying the selected album with AlbumWidget
    5. Enhancing thumbnails with PictureDelegate
    6. Displaying a picture with PictureWidget
    7. Composing your Gallery app
    8. Summary
  19. Dominating the Mobile UI
    1. Starting with Qt Quick and QML
    2. Checking your development environment
    3. Creating a Qt Quick project
    4. Preparing your Qt Quick gallery entry point
    5. Displaying albums with ListView
    6. Theming the application with a QML singleton
    7. Loading a database on mobile
    8. Creating a new album from a custom InputDialog
    9. Loading images with an ImageProvider
    10. Displaying thumbnails in a GridView
    11. Swiping through full resolution pictures
    12. Summary
  20. Even Qt Deserves a Slice of Raspberry Pi
    1. Discovering Qt3D
    2. Configuring Qt for your Raspberry Pi
    3. Creating an entry point for your Qt3D code
    4. Setting up the scene
    5. Assembling your Qt3D entities
    6. Preparing the board game
    7. Crafting entities from the factory
    8. Building a snake engine in JavaScript
    9. Varying the HUD with QML states
    10. Profiling your QML application
    11. Summary
  21. Third-Party Libraries Without a Headache
    1. Creating your Qt Designer plugin
    2. Configuring the project for Windows
    3. Configuring the project for Linux
    4. Configuring the project for Mac
    5. Implementing your OpenCV filters
    6. Designing the UI with FilterWidget
    7. Exposing your plugin to Qt Designer
    8. Using your Qt Designer plugin
    9. Building the image-filter application
    10. Summary
  22. Animations - Its Alive, Alive!
    1. Preparing an SDK
    2. Creating your plugins
    3. Loading your plugins dynamically
    4. Using the plugins inside the application
    5. Discovering the Animation Framework
    6. Making your thumbnails jump
    7. Fading the picture in
    8. Flashing the thumbnail in a sequence
    9. Summary
  23. Keeping Your Sanity with Multithreading
    1. Discovering QThread
    2. Flying over Qt multithreading technologies
    3. Architecting the Mandelbrot project
    4. Defining a Job class with QRunnable
    5. Using QThreadPool in MandelbrotCalculator
    6. Displaying the fractal with MandelbrotWidget
    7. Summary
  24. Need IPC? Get Your Minions to Work
    1. Architecturing an IPC project
    2. Laying down the foundations with an SDK
    3. Working with QDataStream and QTcpSocket
    4. Interacting with sockets in the worker
    5. Interacting with sockets from the application
    6. Building your own QTcpServer
    7. Summary
  25. Having Fun with Serialization
    1. Architecting the drum machine project
    2. Creating a drum track
    3. Making your objects serializable with QVariant
    4. Serializing objects in JSON format
    5. Serializing objects in XML format
    6. Serializing objects in binary format
    7. Playing low latency sounds with QSoundEffect
    8. Triggering a QButton with your keyboard
    9. Bringing PlaybackWorker to life
    10. Accepting mouse drag and drop events
    11. Summary
  26. You Shall (Not) Pass with QTest
    1. Discovering Qt Test
    2. Executing your tests
    3. Writing factorized tests with datasets
    4. Benchmarking your code
    5. Testing your GUI
    6. Spying on your application with QSignalSpy
    7. Summary
  27. All Packed and Ready to Deploy
    1. Packaging your application
    2. Packaging for Windows
    3. Packaging for Linux with a distribution package
    4. Packaging for Linux with AppImage
    5. Packaging for Mac OS X
    6. Packaging for Android
    7. Packaging for iOS
    8. Summary
  28. Qt Hat Tips and Tricks
    1. Managing your workspace with sessions
    2. Searching with the Locator
    3. Increasing the compilation speed
    4. Examining the memory with Qt Creator
    5. Generating random numbers
    6. Silencing unused variable warnings
    7. Logging custom objects to QDebug
    8. Improving log messages
    9. Saving your logs to a file
    10. Generating a command-line interface
    11. Sending and receiving HTTP data
    12. Summary
  29. Qt 5 Projects
  30. Writing Acceptance Tests and Building a Visual Prototype
    1. Don't come to me with an idea, come to me with a plan
    2. The problem — what's in my fridge?
      1. The solution — an app idea
      2. The plan — start from user stories
    3. Writing features and scenarios
    4. Implementing scenarios as acceptance tests
      1. Our project structure
      2. QML and C++ — when to use each of them
      3. Writing the first acceptance tests in C++
        1. Creating the first C++ test case
        2. Adding the first C++ test
          1. Given there is a list of available grocery items
          2. And (given) one or more grocery items are actually available
          3. When I check available groceries
          4. Then I am given the list of available grocery items
          5. And (then) the grocery items are ordered by name, ascending
        3. A huge step for humanity
      4. Writing usecase tests in QML
        1. A short QML primer
        2. Expressing the first acceptance test in QML
    5. Building a visual prototype
      1. Deciding upon the UI technology
        1. What kind of visual metaphors should our application use?
        2. What kind of devices should our application run on?
        3. Should a non-coding designer implement the UI?
        4. Why limit yourself to one?
        5. Our initial choice
      2. Prototyping with Qt Quick Designer
        1. Creating the UI subproject
        2. Laying out the UI components required by the scenarios
          1. Check available groceries
          2. Add grocery item
          3. Remove grocery item
    6. Taking it further
    7. Summary
  31. Defining a Solid and Testable App Core
    1. Implementing the first usecase
      1. Creating the usecase class
        1. Anatomy of a QObject-derived class
        2. Describing the usecase flow with signals and slots
      2. From usecases to business objects
        1. Introducing the almighty QVariant
        2. Implementing the GroceryItems entity
      3. Implementing a fake data repository
    2. Making the first usecase test pass
      1. Using the AutoTest plugin
      2. Wait a second!
    3. Adding a textual user interface
      1. Setting up the console application project
      2. Writing the textual application
        1. QCoreApplication's many responsibilities
        2. Creating the business objects
        3. Defining application output upon success
        4. Collecting and acting upon user input
      3. Running the console app
    4. About unit testing
    5. Summary
  32. Wiring User Interaction and Delivering the Final App
    1. Completing the app's core functionality
      1. Adding a grocery item
        1. Defining the precondition step
        2. Test init and cleanup
        3. Defining the usecase action step
        4. Defining the first outcome step
        5. Defining the second outcome step
        6. use case implementation
        7. Implementing the GroceryItems entity
      2. Removing a grocery item
      3. Adding a fridge
    2. Connecting visual input/output and usecases
      1. Setting up the client application
      2. Exposing C++ objects to QML
        1. QML engines and contexts
        2. Exposing object instances via context properties
      3. Triggering usecases from the UI
        1. Triggering usecases::CheckAvailabeGroceries::run
        2. Triggering usecases::AddGroceryItem::run
        3. Triggering usecases::RemoveGroceryItem::run
      4. Showing usecase outcomes in the UI
        1. Exposing the groceryItems list to QML
        2. Binding groceriesListView.model to groceryItems.list
      5. Trying out the usecases from the UI
      6. Improving the UI
    3. Deploying the app
      1. Deploying the app to macOS
      2. Deploying the app to Windows
      3. Deploying the app to Android
      4. Deploying the app to iOS
      5. Deploying the app to Linux
    4. Summary
  33. Learning About Laying Out Components by Making a Page Layout Tool
    1. A tool to prototype page layouts quickly
    2. Initial setup
      1. Creating sub-projects
      2. Previewing QML code
      3. Creating a QML module
      4. Creating a Qt Resource Collection
      5. Back to scenarios
    3. Adding a panel to the page
      1. Implementing usecases and entities
      2. Designing and implementing the UI for the usecase
        1. The anchors positioning model
        2. Adding the page
        3. Creating the comic panels
        4. The Qt Quick Layouts system
        5. Managing comic panels with a grid layout
        6. Creating new panels dynamically with a repeater
        7. Defining the comic panel
        8. Simulating the usecase action
    4. Removing a panel from the page
    5. Taking a picture and loading it into a panel
    6. Loading an existing picture into a panel
    7. Summary
  34. Creating a Scene Composer to Explore 3D Capabilities
    1. Arranging 3D elements in a composition
    2. Defining feature scenarios
      1. Adding elements to a composition
      2. Removing elements from a composition
      3. Saving a composition as an image
    3. Defining entities and their visual counterparts
      1. Introducing Qt 3D
      2. Comparing C++ and QML APIs
      3. Previewing Qt 3D entities in QML
      4. The Element entity
        1. Adding visual components to the element
        2. Varying the properties of the mesh
        3. Changing the element's position
        4. Selecting an element
        5. Dealing with user input
        6. Keeping track of the currently selected element
      5. The Composition entity
        1. Having the composition reference a list of entities
        2. Previewing the composition
        3. Adding elements to the composition
        4. Adding camera and interaction to the composition
        5. Adding custom lighting and changing the background color
    4. Creating the client application
      1. Exporting QML components in a namespaced module
      2. Setting up the client application
      3. Creating the 2D controls
        1. Adding the controls menu and the element creation options
        2. Adding the Background color selector and the grab image button
      4. Prototyping the usecases in JavaScript
        1. Adding the elements business object
        2. Adding the usecases
        3. Implementing add element to Composition
        4. Implementing remove element from composition
        5. Implementing save composition to an image
    5. Going further
    6. Summary
  35. Building an Entity-Aware Text Editor for Writing Dialogue
    1. Writing comic scripts efficiently
    2. Defining use cases
    3. Setting up the project
    4. Prototyping the UI
      1. Introducing Qt Widgets
      2. Using Qt Widgets Designer
      3. Adding the main layout
      4. Adding the left column and the text editor
      5. Adding the List View, button, and line edit
    5. Implementing the characters entity
      1. Introducing QAbstractItemModel and QAbstractListModel
      2. Creating the characters entity
    6. Adding a character to the characters model
    7. Inserting a character's name into the dialogue script
    8. Auto-highlighting a character name
    9. Saving the comic script
    10. Exporting the comic script to PDF
    11. Styling the UI
    12. Summary
  36. Sending Sensor Readings to a Device with a Non-UI App
    1. Outline
    2. Setting up the project
    3. Publishing sensor readings
      1. Setting up the use case project
      2. Implementing the background steps
    4. Defining the sensor entity
      1. Introducing Qt Sensors
      2. Modeling the sensor abstraction
    5. Implementing the Broadcaster entity
    6. Adding the broadcaster Bluetooth channel
      1. Setting up the channel project
      2. Defining the BroadcasterChannel API
      3. Introducing the Qt Bluetooth module
      4. Creating the channel base and derived classes
      5. Implementing the channel initialization method
        1. Making the server listen to the adapter
        2. Providing information about the service ID
        3. Providing information about the service's textual descriptors
        4. Providing information about service discoverability
        5. Providing information about the transport protocol
        6. Registering the service with the adapter
      6. Connecting the broadcaster channel to the Broadcaster entity
    7. Gluing components into the CM Broadcast console app
      1. Including and instantiating the components
      2. Testing the service discovery
    8. Summary
  37. Building a Mobile Dashboard to Display Real-Time Sensor Data
    1. Overview
    2. Project setup
      1. Setting up the CM Monitor project
      2. Creating the Bluetooth Receiver channel project
    3. Implementing the Bluetooth Receiver channel
      1. Implementing the init method
      2. Implementing the receiveReadings method
      3. Having the broadcaster emit readings at regular intervals
      4. Checking the broadcaster-receiver communication
    4. Implementing the readings chart
      1. Introducing QtCharts
      2. Adding a line series to the chart view
    5. Wiring the receiverChannel to the chart
    6. Adding internationalization support
      1. Marking strings for translation
      2. Generating the XML translation files
      3. Translating a string
      4. Compiling translations
      5. Loading translations
    7. Summary
  38. Running a Web Service and an HTML5 Dashboard
    1. Overview
    2. Creating a BroadcasterChannel based on HTTP
      1. Networking support in Qt
      2. Compiling and linking the QHttp library
      3. Adding the QHttp library to the channel broadcaster project
      4. Implementing the HTTP BroadcasterChannel
    3. Making an HTTP ReceiverChannel implementation
      1. Subclassing the ReceiverChannel
      2. Implementing the constructor and init method
      3. Performing the HTTP request and consuming the response
    4. Implementing an HTML5 UI
      1. Browser technologies in Qt: WebEngine, WebView, and WebKit
      2. Adding WebEngineView to cmmonitor
      3. Data transport between app and browser with WebChannel
      4. Adding an HTML5 time series
    5. Summary
  39. Additional and Upcoming Qt Features
    1. Additional Qt features in 5.9 LTS
    2. New and upcoming Qt features
  40. Bibliography

Product information

  • Title: End to End GUI Development with Qt5
  • Author(s): Nicholas Sherriff, Guillaume Lazar, Robin Penea, Marco Piccolino
  • Release date: November 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789531909