126 lines
2.8 KiB
Plaintext
126 lines
2.8 KiB
Plaintext
---
|
|
title: 3. Writing your first application
|
|
layout: docs
|
|
---
|
|
|
|
:doctitle: 3. Writing your first application
|
|
:notitle:
|
|
|
|
== Writing your first application
|
|
|
|
=== Building the QSkinny repository
|
|
|
|
In this chapter we will write a simple QSkinny application on Linux from scratch.
|
|
As a prerequisite, a recent Qt version (>= 5.6) should be available and the directory of
|
|
its `qmake` binary in the current `$PATH`.
|
|
|
|
Then we can build and install QSkinny to `/opt/qskinny` with the following commands:
|
|
|
|
[source,xml]
|
|
....
|
|
cd /home/user/dev/
|
|
git clone https://github.com/uwerat/qskinny.git
|
|
cd qskinny
|
|
PREFIX=/opt/qskinny qmake
|
|
make
|
|
sudo make install
|
|
....
|
|
|
|
=== Compiling our first app
|
|
|
|
As a next step, we need to write our app. Let's start with a simple `main.cpp` file in a directory `myapp`:
|
|
|
|
.main.cpp
|
|
[source]
|
|
....
|
|
#include <QskWindow.h>
|
|
#include <QGuiApplication>
|
|
|
|
int main( int argc, char* argv[] )
|
|
{
|
|
QGuiApplication app( argc, argv );
|
|
|
|
QskWindow window;
|
|
window.show();
|
|
|
|
return app.exec();
|
|
}
|
|
....
|
|
|
|
For now this will just create an empty window (the `QskWindow`) without any controls.
|
|
Next, we need to create a `myapp.pro` file in our `myapp` directory.
|
|
|
|
.myapp.pro
|
|
[source,xml]
|
|
TEMPLATE = app
|
|
TARGET = myapp
|
|
|
|
QT *= quick
|
|
|
|
QSK_ROOT=/opt/qskinny
|
|
|
|
INCLUDEPATH += $${QSK_ROOT}/include
|
|
LIBS += -L$${QSK_ROOT}/lib -lqskinny
|
|
|
|
QMAKE_RPATHDIR *= $${QSK_ROOT}/lib
|
|
|
|
SOURCES += \
|
|
main.cpp
|
|
....
|
|
|
|
Now we can compile our app:
|
|
|
|
[source,xml]
|
|
....
|
|
cd myapp
|
|
qmake
|
|
make
|
|
....
|
|
|
|
When running myapp it needs to find the skin plugins. Setting QT_PLUGIN_PATH is one
|
|
option ( see https://doc.qt.io/qt-5/deployment-plugins.html ):
|
|
|
|
[source,xml]
|
|
....
|
|
QT_PLUGIN_PATH=/opt/qskinny/plugins ./myapp
|
|
....
|
|
|
|
This should show just an empty window.
|
|
|
|
=== Adding UI controls
|
|
|
|
Now that we have our app running, we can add some UI controls to it by extending the `main.cpp` file we created earlier. We will add some additional include directives, and then create a horizontal layout containing two push buttons. The layout with the two buttons will be shown in the window. Below is the complete updated source file:
|
|
|
|
.main.cpp
|
|
[source]
|
|
....
|
|
#include <QskWindow.h>
|
|
#include <QskLinearBox.h>
|
|
#include <QskPushButton.h>
|
|
|
|
#include <QGuiApplication>
|
|
|
|
int main( int argc, char* argv[] )
|
|
{
|
|
QGuiApplication app( argc, argv );
|
|
|
|
auto* horizontalBox = new QskLinearBox( Qt::Horizontal );
|
|
auto* button1 = new QskPushButton( "button 1", horizontalBox );
|
|
auto* button2 = new QskPushButton( "button 2", horizontalBox );
|
|
|
|
QskWindow window;
|
|
window.addItem( horizontalBox );
|
|
window.show();
|
|
|
|
return app.exec();
|
|
}
|
|
....
|
|
|
|
Now the app is displaying the two buttons:
|
|
|
|
image::../images/writing-first-application.png[An app showing two buttons]
|
|
|
|
That's it; you just created a QSkinny application from scratch.
|
|
|
|
For information on how the controls and layouts above behave, see the next chapters.
|