Difference between revisions of "Qt Quick development process"

From GCompris
Jump to: navigation, search
(added some pointers to learn qt quick)
(better instructions with the new createit.sh script)
Line 16: Line 16:
  
 
= Adding a new activity =
 
= Adding a new activity =
 +
 +
== Automatically ==
  
 
Let's say you want to port the algebra_by activity.
 
Let's say you want to port the algebra_by activity.
  
* create a directory algebra_by in src/activities:
+
<pre>
 +
cd src/activities
 +
./createit.sh algebra_by
 +
</pre>
 +
 
 +
And you're done, you can run GCompris in QtCreator and your actvitity should appear on the list.
 +
 
 +
== Manually ==
 +
 
 +
You must create a directory for your activity in src/activities. In it, create an ActivityInfo.qml, algebra_by.pri and your qml entry point Algebra_by.qml.
 +
 
 +
* in src/activities/activities.txt add the directory name of your activity (keep the file sorted).
 +
* add an include for your .pri in the top level GCompris.pro (to be correct it should be kept sorted with the others): include(src/activities/algebra_by/algebra_by.pri)
 +
* check algebra_by/ActivityInfo.qml that the name references you Qml activity entry point and that the icon point to your icon name.
  
cd src/activities
+
== Getting old menus ==
mkdir algebra_by
 
  
* Copy the existing old GCompris menu
+
If your activity is an existing one, you can copy its ported ActivityInfo
  
git mv menus/algebra_by.qml algebra_by/Algebra_by.qml
+
* git mv menus/algebra_by.qml algebra_by/Algebra_by.qml
  
 
the svg icon is not under git so you have to pick the old GCompris's icon named algebra_by.svg and copy it in algebra_by. You can get it from the GCompris-gtk GitHub: https://github.com/bdoin/GCompris/tree/master/src
 
the svg icon is not under git so you have to pick the old GCompris's icon named algebra_by.svg and copy it in algebra_by. You can get it from the GCompris-gtk GitHub: https://github.com/bdoin/GCompris/tree/master/src
  
* Copy an existing activity for example 'erase'
+
== Extending another activity ==
 
 
cp erase/.qml algebra_by/
 
cp erase/erase.pri  algebra_by/algebra_by.pri
 
cp erase/erase.js  algebra_by/algebra_by.js
 
  
* edit ../../GCompris.pro and add the line:
+
If the activity is just an extension of an existing one you have to create it either manually or automatically and then change you .qml file to extend another one. The 'erase_clic' activity is a good example.
  
include(src/activities/algebra_by/algebra_by.pri)
+
In your .qml file:
to be correct it should be kept sorted with the others
 
  
* now in QtCreator, algebra_by should appear, no restart needed
+
* just import the activity you want to extend with for example: import "qrc:/gcompris/src/activities/erase"
* edit algebra_by.pri and replace erase.svg by algebra_by.svg, same for the javascript and the qml file.
+
* instead of have your root item being an 'ActivityBase' you just create an object of the base type you want to extend like Erase.
* in src/activities/activities.txt add the directory name of your activity (keep the file sorted).
+
* Use a property to pass parameters to your base item and customize it
* check algebra_by/ActivityInfo.qml that the name references you Qml activity entry point and that the icon point to your icon name.
 
* run GCompris and the new activity is there!
 
  
* Ok, the activity is just an extension of an existing one
+
= Adding resources =
* now copy and existing Activity.qml and its javascript from another activity
 
* If you look at erase / Activity , the root of you activity is in pageComponent:
 
  
 
* For the media, you have to put them in the qrc file and then reference it by qrc: in the source. The path is defined in the qrc file.
 
* For the media, you have to put them in the qrc file and then reference it by qrc: in the source. The path is defined in the qrc file.

Revision as of 11:47, 16 February 2014

Learning Qt Quick

Some pointers to discover Qt Quick:

Compilation

  • Get the source code
  • Download and Install the lastest stable version of QtCreator for Android
  • Start QtCreator and open the project file GCompris.pro at the root of the source code
  • Compile and run it.

To make it run on Android you need first to follow these instructions.

Adding a new activity

Automatically

Let's say you want to port the algebra_by activity.

cd src/activities
./createit.sh algebra_by

And you're done, you can run GCompris in QtCreator and your actvitity should appear on the list.

Manually

You must create a directory for your activity in src/activities. In it, create an ActivityInfo.qml, algebra_by.pri and your qml entry point Algebra_by.qml.

  • in src/activities/activities.txt add the directory name of your activity (keep the file sorted).
  • add an include for your .pri in the top level GCompris.pro (to be correct it should be kept sorted with the others): include(src/activities/algebra_by/algebra_by.pri)
  • check algebra_by/ActivityInfo.qml that the name references you Qml activity entry point and that the icon point to your icon name.

Getting old menus

If your activity is an existing one, you can copy its ported ActivityInfo

  • git mv menus/algebra_by.qml algebra_by/Algebra_by.qml

the svg icon is not under git so you have to pick the old GCompris's icon named algebra_by.svg and copy it in algebra_by. You can get it from the GCompris-gtk GitHub: https://github.com/bdoin/GCompris/tree/master/src

Extending another activity

If the activity is just an extension of an existing one you have to create it either manually or automatically and then change you .qml file to extend another one. The 'erase_clic' activity is a good example.

In your .qml file:

  • just import the activity you want to extend with for example: import "qrc:/gcompris/src/activities/erase"
  • instead of have your root item being an 'ActivityBase' you just create an object of the base type you want to extend like Erase.
  • Use a property to pass parameters to your base item and customize it

Adding resources

  • For the media, you have to put them in the qrc file and then reference it by qrc: in the source. The path is defined in the qrc file.
  • You can see the qrc in qtcreator, it is Ressources/gcompris.qrc it is auto generated at build time
  • To add new images, create a resource directory in your activity folder and in you .pri file add:

APP_FILES += \ $$PWD/resource/myCuteImage.jpg \

  • And in your source use : qrc:/gcompris/src/activities/algebra_by/resource/myCuteImage.jpg

Speeding startup

When you work on an activity you will run GCompris many time and the final stage that combines the qrc in the binary is long. To speep your development process, just comment the include of the activities you don't need in the top level GCompris.pro