Qml

From LinuxMCE
Jump to: navigation, search

Version: 810 as per --Langstonius 11:10, 21 August 2011 (CEST)

Version: 1004 as per --Langstonius 11:10, 21 August 2011 (CEST)

QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties.

LinuxMCE User Interface and QML

One of the immediate goals of the LinuxMCE project is to move its UI to a more flexible toolkit for a variety of reasons. It has been decided that Qt / Qt quick (QML) will be the main toolkit in which this new user interface will be constructed. With that in mind, there are some core principles and reading one should become familiar with to maximize your time.

Core Reading

These documents are not all that QML encompasses, but they represent a solid start in understanding its basis. For LinuxMCE related documentation, you will need to look to the code and start picking apart relevant parts as you proceed.

Key Software

  • Qt Creator 2.0.1
  • LinuxMCE 1004

Example

QML Light Switch http://svn.linuxmce.org/trac.cgi/browser/branches/LinuxMCE-0810/src/QML_Light_Switch

This is an example of a device that employs the following:

  • A device template, #2181 that describes what commands it has, its device data, and other information. You can see many examples in your own 1004 install.
  • DCEGen and Sql2Cpp to generate the device template defines and code for it to communicate to the DCErouter.
  • A custom c++ device to mimic a light switch. In this case, its a device that also doubling as a QML UI test.
  • A QML user interface that could be completly different and still do the same things as long as it hooked into the proper event

Connecting the Dots

After you have

  • Generated your code stubs and run sql2cpp
  • have a basic version of your device that compiles and runs in some fashion

It is then time to connect the two devices together to make one singular DCE device. For example purposes, i will give brief class definitions

QML_Light_Switch_Base .h/.cpp

This is one of the auto generated classes by DCEgen. Its purpose is to provide the neccesary base (virtual?) classes that are utilized by the class 'QML_Light_Switch'. You will more than likely not need to modify this file, but you will need to make sure its included in the project.


QML_Light_Switch .h/.cpp

This is an autogenerated class from DCEGen. In this class you will note that its built upon QML_Light_Switch_Base. This will also be the communications point from where you will communicate with the DCE thread.

qtlightswitch .h/.cpp

This class is somewhat suspect. I say that because it exists currently as a dummy of the switchManager's functions to pass to the QML interface. This is done because the switchManager class itself contains dce code that duplicates itself when the object is passed to the qml interface. Possible solutions include instantiating the dce device at the time its passed to the qml object, but the wisdom of that approach remains to be seen.

switchManager .h/.cpp

This is the main class of our Qt code. Its purpose is to connect to the dce router, setup the ui, and manage connection between the dce code and the qt code. This is why passing a duplicate of it in the same program creates problems.

main.cpp

The main loop of the program. Please note that this is not the auto generated main.cpp, but the one generated by Qt with parts from the auto generated main.cpp being melded in. This is where we create our switchManager and instantiate it, essentially making it the gui thread (maybe, need confirmation on that)

main.qml

This is the main qml file for the application. This file serves to build the user interface and setup animations, states, etc. It also communicates with the c++ by using signals as well as its own functions that are callable from c++

DCE to QT

While this concept applies to Qt, it may or may not translate to other toolkits and languages. That being said, the basic principle is as follows


QT to QML