diff options
Diffstat (limited to 'desktop_devguide/chapter_07')
13 files changed, 63 insertions, 102 deletions
diff --git a/desktop_devguide/chapter_07/index.rst b/desktop_devguide/chapter_07/index.rst index dcde192..b3bb036 100644 --- a/desktop_devguide/chapter_07/index.rst +++ b/desktop_devguide/chapter_07/index.rst @@ -11,11 +11,11 @@ Deploying the NoteApp Application ================================= -We have reached the point where we would to make the application available and deployable for a typical desktop environment. As described in the first chapters, we have used a Qt Quick UI project in Qt Creator to develop the NoteApp* application. This means that `qmlviewer` is used to load the `main.qml` file, and therefore, have *NoteApp* running. +We have reached the point where we would like to make the application available and deployable for a typical desktop environment. As described in the first chapters, we have used a Qt Quick UI project in Qt Creator to develop the NoteApp* application. This means that `qmlscene` is used to load the `main.qml` file, and therefore, have *NoteApp* running. -At first, the simplest way of making NoteApp* available is to create a package that bundles all the qml files, `qmlviewer` and a simple script that loads the `main.qml` file using `qmlviewer`. You need to refer to the documentation of each desktop platform on how to create small script. For instance, under a Linux platform, you could use a small `bash` shell script for this, while for Windows a simple batch file. This approach works well as being so straightforward, but it could be the case that you would not want to ship the source code because your application is using proprietary code. The application should be shipped in a binary format, in which all the qml files are bundled. This could help make the installation process and the user experience even more pleasant. +At first, the simplest way of making NoteApp* available is to create a package that bundles all the qml files, `qmlscene` and a simple script that loads the `main.qml` file using `qmlscene`. You need to refer to the documentation of each desktop platform on how to create small script. For instance, under a Linux platform, you could use a small `bash` shell script for this, while for Windows a simple batch file. This approach works well as being so straightforward, but it could be the case that you would not want to ship the source code because your application is using proprietary code. The application should be shipped in a binary format, in which all the qml files are bundled. This could help make the installation process and the user experience even more pleasant. -Hence, we need to create an executable file for NoteApp* that should be fairly simple to install and use. In this chapter, you will you see how to create a Qt Quick application that bundles qml files and images in an executable binary file. Moreover, we will explore how to use the Qt Resource System with QML. +Hence, we need to create an executable file for NoteApp* that should be fairly simple to install and use. In this chapter, you will you see how to create a Qt Quick application that bundles qml files and images in an executable binary file. Moreover, we will explore how to use the Qt Resource System with QML. .. note:: diff --git a/desktop_devguide/chapter_07/src/notezapp/noteapp.desktop b/desktop_devguide/chapter_07/src/notezapp/noteapp.desktop deleted file mode 100644 index e06338c..0000000 --- a/desktop_devguide/chapter_07/src/notezapp/noteapp.desktop +++ /dev/null @@ -1,11 +0,0 @@ -[Desktop Entry] -Encoding=UTF-8 -Version=1.0 -Type=Application -Terminal=false -Name=noteapp -Exec=/opt/noteapp/bin/noteapp -Icon=noteapp64 -X-Window-Icon= -X-HildonDesk-ShowInToolbar=true -X-Osso-Type=application/x-executable diff --git a/desktop_devguide/chapter_07/src/notezapp/noteapp_harmattan.desktop b/desktop_devguide/chapter_07/src/notezapp/noteapp_harmattan.desktop deleted file mode 100644 index bf9e5eb..0000000 --- a/desktop_devguide/chapter_07/src/notezapp/noteapp_harmattan.desktop +++ /dev/null @@ -1,11 +0,0 @@ -[Desktop Entry] -Encoding=UTF-8 -Version=1.0 -Type=Application -Terminal=false -Name=noteapp -Exec=/usr/bin/single-instance /opt/noteapp/bin/noteapp -Icon=/usr/share/icons/hicolor/80x80/apps/noteapp80.png -X-Window-Icon= -X-HildonDesk-ShowInToolbar=true -X-Osso-Type=application/x-executable diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Marker.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Marker.qml index e94407c..157c482 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Marker.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Marker.qml @@ -36,10 +36,10 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 // Marker.qml -// The Image element as top level is convenient as the Marker component +// The Image type as top level is convenient as the Marker component // simply is a graphical UI with a clicked() signal. Image { id: root @@ -89,7 +89,7 @@ Image { } ] - // creating a MouseArea element to intercept the mouse click + // creating a MouseArea type to intercept the mouse click MouseArea { id: mouseArea anchors.fill: parent diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/MarkerPanel.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/MarkerPanel.qml index 8885083..a645f24 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/MarkerPanel.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/MarkerPanel.qml @@ -36,7 +36,7 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 // MarkerPanel.qml diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Note.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Note.qml index 75235a5..3a8442f 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Note.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Note.qml @@ -36,7 +36,7 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 // Note.qml Item { @@ -105,7 +105,7 @@ Item { onPaintedHeightChanged: updateNoteHeight() } - // defining a behavior when the height property changes for root element + // defining a behavior when the height property changes for root type Behavior on height { NumberAnimation {} } // javascript helper function that calculates the height of the note diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/NoteToolbar.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/NoteToolbar.qml index b8bf590..082b2db 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/NoteToolbar.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/NoteToolbar.qml @@ -36,7 +36,7 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 // NoteToolbar.qml @@ -55,11 +55,11 @@ Item { border.right: 10; border.bottom: 10 } - //declaring a property alias to the drag property of MouseArea element + //declaring a property alias to the drag property of MouseArea type property alias drag: mousearea.drag //this default property enables us to create QML Items that will be automatically - //laid out in the Row element and considered as toolItems + //laid out in the Row type and considered as toolItems default property alias toolItems: layout.children MouseArea { @@ -74,7 +74,7 @@ Item { onPressed: root.pressed() } - //using a Row element for laying out tool items to be added when using the NoteToolbar + //using a Row type for laying out tool items to be added when using the NoteToolbar Row { id: layout layoutDirection: Qt.RightToLeft @@ -83,10 +83,10 @@ Item { } spacing: 20 - //the opacity depends if the mousearea elements has the cursor of the mouse. + //the opacity depends if the mousearea types has the cursor of the mouse. opacity: mousearea.containsMouse ? 1 : 0 - //using the behavior element to specify the behavior of the layout element + //using the behavior type to specify the behavior of the layout type //when on the opacity changes. Behavior on opacity { //Using NumberAnimation to animate the opacity value in a duration of 350 ms diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Page.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Page.qml index 482244b..0b9c2ef 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Page.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Page.qml @@ -36,7 +36,7 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 import "noteDB.js" as NoteDB @@ -64,7 +64,7 @@ Item { Note { } } - // creting an Item element that will be used as a note container + // creting an Item type that will be used as a note container // we anchor the container to fill the parent as it will be used // later in the code to control the dragging area for notes Item { id: container; anchors.fill: parent } @@ -99,7 +99,7 @@ Item { } // a Javascript helper function for iterating through - // the children elements of the container item + // the children types of the container item // and calls destroy() for deleting them function clear() { for (var i=0; i<container.children.length; ++i) { diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/PagePanel.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/PagePanel.qml index e495cb2..d8c4908 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/PagePanel.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/PagePanel.qml @@ -36,7 +36,7 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 import "noteDB.js" as NoteDB // PagePane.qml diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Tool.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Tool.qml index c89a87e..e439418 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Tool.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/Tool.qml @@ -36,18 +36,18 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 // Tool.qml -// Use Image as the top level element +// Use Image as the top level type Image { id: root //defining the clicked signal signal clicked() - //using a MouseArea element to capture the mouse click of the user + //using a MouseArea type to capture the mouse click of the user MouseArea { anchors.fill: parent onClicked: root.clicked() diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/main.qml b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/main.qml index 35bc299..eb6e9b9 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/main.qml +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/main.qml @@ -36,7 +36,7 @@ ** ****************************************************************************/ -import QtQuick 1.1 +import QtQuick 2.0 import "noteDB.js" as NoteDB @@ -95,7 +95,7 @@ Rectangle { } // the toolbar - - // using a Column element to layout the Tool items vertically + // using a Column type to layout the Tool items vertically Column { id: toolbar spacing: 16 diff --git a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/noteDB.js b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/noteDB.js index 9f31b65..b2b91f8 100644 --- a/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/noteDB.js +++ b/desktop_devguide/chapter_07/src/notezapp/qml/noteapp/noteDB.js @@ -40,14 +40,14 @@ //making the nodeDB.js a stateless library .pragma library - +.import QtQuick.LocalStorage 2.0 as Sql // declaring a global variable for storing the database instance var _db // function openDB() { print("noteDB.createDB()") - _db = openDatabaseSync("StickyNotesDB","1.0","The stickynotes Database",1000000); + _db = Sql.LocalStorage.openDatabaseSync("StickyNotesDB","1.0","The stickynotes Database",1000000); createNoteTable(); } diff --git a/desktop_devguide/chapter_07/step_1.rst b/desktop_devguide/chapter_07/step_1.rst index ba8c557..f36af52 100644 --- a/desktop_devguide/chapter_07/step_1.rst +++ b/desktop_devguide/chapter_07/step_1.rst @@ -11,53 +11,50 @@ Creating the NoteApp Qt Application =================================== -The goal is to create a single executable NoteApp* binary file that the user will just run to get *NoteApp* loaded. +The goal is to create a single executable NoteApp* binary file that the user will run to get *NoteApp* loaded. Let's see how we can use Qt Creator for this. - Creating a Qt Quick Application ------------------------------- -First we need to create a :creator:`Qt Quick Application <quick-projects.html#creating-qt-quick-applications>` using Qt Creator and make sure that we have selected *Built-in elements only (for all platforms)** in the Qt Quick Application wizard. Let's name the application *noteapp*. +First we need to create a :creator:`Qt Quick Application <quick-projects.html#creating-qt-quick-applications>` using Qt Creator and make sure that we have selected *Built-in elements only (for all platforms)** in the Qt Quick Application wizard. Let's name the application *noteapp*. -So now we have a newly created project from the wizard and we notice that a qmlapplicationviewer* project is generated for us. The generated *qmlapplicationviewer* project is a basic 'template' application that loads QML files. This application, as being a very generic one for deploying Qt Quick applications across devices and targets, includes several platform specific code for each of those deployment targets. We will not go through these specific parts of the code because it doesn't fit the purpose of this guide. +So now we have a newly created project from the wizard and we notice that a *qtquick2applicationviewer* project is generated for us. The generated *qtquick2applicationviewer* project is a basic 'template' application that loads QML files. This application, as being a very generic one for deploying Qt Quick applications across devices and targets, includes several platform-specific code for each of those deployment targets. We will not go through these specific parts of the code because it doesn't fit the purpose of this guide. -Nevertheless, there are certain peculiarities of the qmlapplicationviewer* that somewhat limit us to achieve what we want. The application expects the developer to ship the QML files along with with the executable binary. Using the Qt Resource System becomes impossible, but you will see how to overcome this problem as we proceed. +Nevertheless, there are certain peculiarities of the qtquick2applicationviewer* that somewhat limit us to achieve what we want. The application expects the developer to ship the QML files along with with the executable binary. Using the Qt Resource System becomes impossible, but you will see how to overcome this problem as we proceed. -For the noteapp* project, there is just one CPP source file, `main.cpp`. In the `main.cpp` file, you will see how the `viewer` object, the `QmlApplicationViewer` class, is used to load the `main.qml` file by calling the `QmlApplicationViewer::setMainQmlFile()` function. +For the noteapp* project, there is one source file, `main.cpp`. In the `main.cpp` file, you will see how the `viewer` object, the `QtQuick2ApplicationViewer` class, is used to load the `main.qml` file by calling the `QtQuick2ApplicationViewer::setMainQmlFile()` function. .. code-block:: cpp // main.cpp ... - Q_DECL_EXPORT int main(int argc, char argv[]) + int main(int argc, char *argv[]) { - QScopedPointer<QApplication> app(createApplication(argc, argv)); - QScopedPointer<QmlApplicationViewer> viewer( - QmlApplicationViewer::create()); + QGuiApplication app(argc, argv); - viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto); - viewer->setMainQmlFile("qml/noteapp/main.qml"); - viewer->showExpanded(); + QtQuick2ApplicationViewer viewer; + viewer.setMainQmlFile(QStringLiteral("qml/noteapp/main.qml")); + viewer.showExpanded(); - return app->exec(); + return app.exec(); } -Note, there is a basic `main.qml` file generated by the Qt Quick Application wizard which will be replaced by the `main.qml` file we have created for NoteApp*. +Note, there is a basic `main.qml` file generated by the Qt Quick Application wizard which will be replaced by the `main.qml` file we have created for NoteApp*. -The folder structure of the generated noteapp* project is very straightforward to understand. +The folder structure of the generated noteapp* project is very straightforward to understand. noteapp - root folder of the *noteapp* project - qml - this folder contains all the QML files - qmlapplicationviwer - the generated application used for loading QML files + * qml - this folder contains all the QML files + * qtquick2applicationviewer - the generated application used for loading QML files noteapp.pro - the project file - main.cpp - the C++ file where a Qt Application is created that will produce a binary file for us + * main.cpp - the C++ file where a Qt Application is created -We need to copy our QML files including the `fonts` and `images` directories in the `qml` directory of the newly created noteapp* project. Additionally, we need to import these files into the project so that we will be able to work with them in Qt Creator. +We need to copy our QML files including the `fonts` and `images` directories in the `qml` directory of the newly created noteapp* project. Qt Creator identifies changes to the project folder and adds the new files to the project view. If it doesn't, right-click on the project and choose *Add Existing Files* to add the new files. .. image:: img/importqmlfiles.png :scale: 80% @@ -65,7 +62,7 @@ We need to copy our QML files including the `fonts` and `images` directories in .. note:: Make sure to add all existing files including images called from the `nodeDDB.js` file -At this point, let's start to build and run the project and see if everything has gone well with the project creation. Before building the noteapp* project, let's make sure we have the right settings in place for our project. Please refer to :creator:`Configure Projects <creator-configuring-projects.html>` in Qt Creator documentation. +At this point, let's start to build and run the project and see if everything has gone well with the project creation. Before building the noteapp* project, let's make sure we have the right settings in place for our project. Refer to the :creator:`Configure Projects <creator-configuring-projects.html>` section in Qt Creator documentation. Once the application is successfully built, an executable binary file called `noteapp` should be produced in the root folder of the project. If you have Qt configured properly for your system, you'll be able run the file by clicking on it. @@ -86,7 +83,7 @@ We have created an executable that loads the QML file for the application to run Seems that it is expected to actually ship the QML files along with the executable file, but this is not what we would like to achieve. -Qt provides a quite intuitive :qt:`Resource System <resources.html>` that works seamlessly with QML. We need to create a resource file, `noteapp.qrc` for the noteapp* root project so that we can add our QML and image files in it. Please refer to the :qt:`Creating a Resource File <creator-writing-program.html#creating-a-resource-file>` in Qt Creator documentation for detailed steps. +Qt provides a quite intuitive :qt5:`Resource System <qtcore/resources.html>` that works seamlessly with QML. We need to create a resource file, `noteapp.qrc` for the noteapp* root project so that we can add our QML and image files to it. Refer to the :creator:`Creating a Resource File <creator-writing-program.html#creating-a-resource-file>` in Qt Creator documentation for detailed steps. .. image:: img/resourcefile.png :scale: 100% @@ -105,51 +102,37 @@ First we comment out the first lines in the `noteapp.pro`: .... -In addition to that, we can remove the following lines from the `noteapp.pro` file since they are Symbian platform related. - -.. code-block:: bash - - ... - symbian:TARGET.UID3 = 0xE68D5D88 - ... - # Allow network access on Symbian - symbian:TARGET.CAPABILITY += NetworkServices - ... - - -In the `main.cpp` file, we see the `QmlApplicationViewer::setMainQmlFile()` function being called with the relative path to the `main.qml` file. +In the `main.cpp` file, we see the `QtQuick2ApplicationViewer::setMainQmlFile()` function being called with the relative path to the `main.qml` file. .. code-block:: cpp - // qmlapplicationviewer.cpp + // qtquick2applicationviewer.cpp ... - void QmlApplicationViewer::setMainQmlFile(const QString &file) + void QtQuick2ApplicationViewer::setMainQmlFile(const QString &file) { - d->mainQmlFile = QmlApplicationViewerPrivate::adjustPath(file); + d->mainQmlFile = QtQuick2ApplicationViewerPrivate::adjustPath(file); setSource(QUrl::fromLocalFile(d->mainQmlFile)); } ... -The `QmlApplicationViewer` class inherits :qt:`QDeclarativeView <qdeclarativeView.html>`, which is a convenient class for loading and displaying QML files. The `QmlApplicationViewer::setMainQmlFile()` function is not optimized for using resources because it adjusts the path of the QML file before calling the :qt:`setSource() <qdeclarativeview.html#source-prop>` function. +The `QtQuick2ApplicationViewer` class inherits :qt5:`QQuickView <qtquick/qquickview.html>`, which is a convenient class for loading and displaying QML files. The `QtQuick2ApplicationViewer::setMainQmlFile()` function is not optimized for using resources because it adjusts the path of the QML file before calling the :qt5:`setSource() <qtquick/qquickview.html#source-prop>` function. -The simplest approach to overcome this would be to directly call :qt:`setSource() <qdeclarativeview.html#source-prop>` on the `viewer` object in the `main.cpp` file, but this time we pass the `main.qml` as part of the resource file. +The simplest approach to overcome this would be to directly call :qt5:`setSource() <qtquick/qquickview.html#source-prop>` on the `viewer` object in the `main.cpp` file, but this time we pass the `main.qml` as part of the resource file. .. code-block:: cpp // main.cpp ... - Q_DECL_EXPORT int main(int argc, char argv[]) + int main(int argc, char *argv[]) { - QScopedPointer<QApplication> app(createApplication(argc, argv)); - QScopedPointer<QmlApplicationViewer> viewer( - QmlApplicationViewer::create()); + QGuiApplication app(argc, argv); - viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto); - viewer->setSource(QUrl("qrc:/main.qml")); - viewer->showExpanded(); + QtQuick2ApplicationViewer viewer; + viewer.setMainQmlFile(QStringLiteral("qml/noteapp/main.qml")); + viewer.showExpanded(); - return app->exec(); + return app.exec(); } There is no other change to be done in the QML files where we use the image files and the font file since the path of the files is a relative one, which will point to the resource internal filesystem. So now we can build the project in Qt Creator that will produce us a binary executable file that bundles all the QML files, images and the font. @@ -164,7 +147,7 @@ A graphical enhancement that is highly recommended is to set an icon for the app Inside the noteapp* folder, you may have noticed a few *PNG* files and one *SVG* file by now. These image files will be used to set the icon for the application depending on the icon size since we can have 64x64 or 80x80 icons or a vectorized one. -For more details concerning how these icon files are deployed on various platforms, you need to take a close look at the `qmlapplicationviewer.pri` file. You can find find detailed information on application icons in the :qt:`How to Set the Application Icon <appicon.html>` Qt reference documentation. +For more details concerning how these icon files are deployed on various platforms, you need to take a close look at the `qtquick2applicationviewer.pri` file. You can find find detailed information on application icons in the :qt:`How to Set the Application Icon <appicon.html>` Qt reference documentation. We need to call the :qt:`setWindowIcon() <qwidget.html#windowIcon-prop>` function on the `viewer` in order to set the icon for the application window. @@ -173,8 +156,8 @@ We need to call the :qt:`setWindowIcon() <qwidget.html#windowIcon-prop>` functio // main.cpp ... QScopedPointer<QApplication> app(createApplication(argc, argv)); - QScopedPointer<QmlApplicationViewer> viewer( - QmlApplicationViewer::create()); + QScopedPointer<QtQuick2ApplicationViewer> viewer( + QtQuick2ApplicationViewer::create()); viewer->setWindowIcon(QIcon("noteapp80.png")); ... @@ -187,15 +170,15 @@ We need a default window-title for our application and we will use the :qt:`setW ... QScopedPointer<QApplication> app(createApplication(argc, argv)); - QScopedPointer<QmlApplicationViewer> viewer( - QmlApplicationViewer::create()); + QScopedPointer<QtQuick2ApplicationViewer> viewer( + QtQuick2ApplicationViewer::create()); viewer->setWindowIcon(QIcon("noteapp80.png")); viewer->setWindowTitle(QString("Keep Your Notes with NoteApp!")); ... -The NoteApp* is now ready to be shipped and deployed onto various desktop platforms. +The NoteApp* is now ready to be shipped and deployed onto various desktop platforms. Deploying NoteApp ----------------- |