Qt 5 Projects

Book description

Design, build, and deploy powerful applications with amazing user interfaces on embedded, mobile, and desktop platforms

About This Book

  • Easily compile, run, and debug your applications from the powerful Qt Creator IDE
  • Future-proof your applications with Qt Test and modern architecture principles
  • Build multi-platform projects that target Android, iOS, Windows, macOS, Linux, and more

Who This Book Is For

This book is for developers who want to successfully build and maintain cross-platform applications with advanced UI and connectivity features. Basic knowledge of C++ is required.

What You Will Learn

  • Learn the basics of modern Qt application development
  • Develop solid and maintainable applications with BDD, TDD, and Qt Test
  • Master the latest UI technologies and know when to use them: Qt Quick, Controls 2, Qt 3D and Charts
  • Build a desktop UI with Widgets and the Designer
  • Translate your user interfaces with QTranslator and Linguist
  • Get familiar with multimedia components to handle visual input and output
  • Explore data manipulation and transfer: the model/view framework, JSON, Bluetooth, and network I/O
  • Take advantage of existing web technologies and UI components with WebEngine

In Detail

Qt is a professional cross-platform application framework used across industries like automotive, medical, infotainment, wearables, and more. In this book you'll initially create a to-do style app by going via all stages for building a successful project. You'll learn basics of Qt's C++ and QML APIs, test-driven development with Qt Test, application architecture, and UIs with Qt Quick & Quick Controls 2.

Next, you'll help two startups build their products. The first startup, Cute Comics, wants to help independent comic creators with a suite of apps that let them experiment with comic pages, image composition, comic dialogues, and scene descriptions. While developing these apps you'll deepen your knowledge of Qt Quick's layout systems, and see Qt 3D and Widgets in action.

The second startup, Cute Measures, wants to create apps for industrial and agricultural sectors, to make sense of sensor data via a monitoring system. The apps should run seamlessly across devices and operating systems like Android, iOS, Windows, or Mac, and be cost-effective by integrating with existing web technologies. You take the role of lead developer and prototype the 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.

Style and approach

Practical projects based guide

Publisher resources

Download Example Code

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Qt 5 Projects
  3. PacktPub.com
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. Additional and Upcoming Qt Features
    1. Additional Qt features in 5.9 LTS
    2. New and upcoming Qt features
  16. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Qt 5 Projects
  • Author(s): Marco Piccolino
  • Release date: February 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788293884