/QmlTrainingApr2023

QML samples prepared for April 2023 training

Primary LanguageQMLMIT LicenseMIT

QML and C++ Examples

This repository presents some examples where the main QML functionalities are exposed, as well as examples where the interaction between QML and C++ is used.

Each of these examples can be run in Qt Creator. The version of Qt Creator used to run each of the examples has been 7.0.2, while the version of Qt used has been 5.15.

Each of the accessible examples and their purpouse are introduced below:

Example1_QML: this example programmed in QML show a replica of the Tribalye website (https://www.tribalyte.com/) using the elements available in QML and the properties available to build it.

Example2_QML: in this case, Example1_QML is completed by adding functionality to what is defined in QML, through the interactions between QML and C++, using context property, QML types and signals.

ExampleQML_Binding: example in QML of binding property, where the underlining of a text will be adjusted to its size.

ExampleQML_KeyboardUserInteraction: this QML example presents user interactions via the signals generating by the keyboard. Where pressing the left and right arrows of the keyboard an image will rotate in one way or another.

ExampleQML_Layouts: this case described in QML study some of the different options available associated with layout and anchors, based on the properties to align various elements created made of rectangles.

ExampleQML_Methods: for this case, in addition to QML, Javascript is used, demonstrating the integration of QML with Javascript calls, specifically a function in charge of increasing a value displayed on the screen.

ExampleQML_MouseUserInteraction: QML example based on two rectangles that will change their color from the signals generated by interactions with the mouse when clicking or holding down.

ExampleQML_Nesting: case in QML where from some elements formed by rectangles the nesting characteristics of QML is used.

ExampleQML_ObjectTypes: in this QML example we use the property of creating our own elements by defining an embedded element in the main .qml file, and another through a separate .qml file.

ExampleQML_Sintaxis: example that simulates the main Tribalyte website, building it through QML, where the syntax to follow in QML is explored.

ExampleQMLCpp_FunctionCall: this example written in QML and C++, shows the call of a C++ function from QML using the context property. This function will be called when the button defined in QML is clicked and will generate a trace that can be seen from Qt Creator.

ExampleQMLCpp_VariableChange: in this case we can see how to handle a C++ variable from QML using the context property. In the example presented there is an editable field where we can put a text that will be saved in the C++ variable. In addition, the value of the variable is obtain and displayed below the button.