Clever Geek Handbook

Sailfish OSの開発：C ++でのカスタムQMLコンポーネントの作成

こんにちは この記事は、モバイルプラットフォームSailfish OSの開発に関する一連の記事の続きです。 この記事では、C ++でのカスタムQMLコンポーネントの作成、特にQMLで使用可能なプロパティとメソッドの作成、シグナルとバインディングについて説明します。 また、新しいコンポーネントをアプリケーションに接続する方法も示します。



やる気



そもそも、C ++でのコンポーネントの使用が理にかなっているケースを特定する価値があります。 組み込みタイプのQt Quickは、ネットワークやBluetooth、D-Busなどのさまざまなシステム機能を備えたデータベースや通知を備えたセンサーを操作するためのツールを提供します。 ただし、これらのツールの機能はかなり制限されており、より複雑なアプリケーションの作成には適していません。 この場合、C ++では、Qt Quickが提供する以上の機能を実装できます。



C ++を支持するもう1つの議論は、さまざまな低レベルライブラリを使用できることです。 さらに、複雑なロジックは、C ++クラスにより正確に割り当てられます。 これが、グラフの時間軸にデータを表示するためのコンポーネントを作成するときに導かれたものです。



コンポーネントの説明



コンポーネントの外観は、さまざまなグラフが描かれた座標平面です。 スケジュールを左右に移動するには、コンポーネントの下のボタンを使用します。 飛行機のデータは、1週間、1か月、4か月、1年など、さまざまな期間で表示できます。 さらに、最後の3つの期間のいずれかを選択すると、データが圧縮されます。 したがって、たとえば、1か月の場合、グラフには範囲の各日の平均値が表示され、四半期および年次の範囲の場合は、それぞれ3日と12日ごとの平均値が表示されます。 座標平面の上にあるボタンを使用して、目的の期間を選択できます。









コンポーネントの実装



コンポーネントの作成プロセスはQtのプロセスと変わらないことに注意してください。ただし、Sailfish OSにはいくつかの特定の機能がまだあります。 それらについては以下で説明します。



まず、 QObjectまたはその子孫から継承され、 Q_OBJECTマクロを含むC ++クラスを作成する必要があります。 



#include <QQuickPaintedItem> #include <QObject> class PlotView : public QQuickPaintedItem { Q_OBJECT public: explicit PlotView(QQuickItem* parent = NULL); void paint(QPainter* painter); };


クラスはQQuickPaintedItemから継承され、 QQuickPaintedItem :: paint（）メソッドをオーバーライドできます。このメソッドは、 QPainterインターフェイスを使用してグラフをプロットするプロセスを実装します。 描画せずに視覚的なコンポーネントを実装するには、 QQuickItemクラスを使用できます。



QMLで表示されるプロパティを作成する方法と、現在選択されている期間のインデックスを担当するperiodIndexプロパティの例を使用して、それらを操作する方法を示します。 プロパティを宣言するには、 Q_PROPERTYマクロを使用する必要があります。 



 class PlotView : public QQuickPaintedItem { //... Q_PROPERTY(int periodIndex READ periodIndex WRITE setPeriodIndex NOTIFY periodIndexChanged) private: int periodIndexValue; //... public: void setPeriodIndex(int periodIndex); int periodIndex() const; //... signals: void periodIndexChanged(); };


例からわかるように、プロパティの名前、タイプ、およびREAD関数を指定して、プロパティの値を取得する必要があります。 プロパティに新しい値を割り当てるためのWRITE関数を指定することもできます。 利用可能なオプションの完全なリストは、 ここにあります 。 さらに、クラス内では、プロパティの値を格納する変数を宣言するのが最適です（この例で行いました）。



また、 periodIndexプロパティのNOTIFYパラメーターを使用して、QML内でバインディングメカニズムを使用するために、その値の変更に関するシグナルが決定されます。 対応する信号の呼び出しは、 PlotView :: setPeriodIndex（）メソッド内に配置する必要があります。 



 void PlotView::setPeriodIndex(int periodIndex) { periodIndexValue = periodIndex; //... emit periodIndexChanged(); //... }


コンポーネント内で宣言されたすべての信号について、QMLでコンポーネントを宣言するときに適切なハンドラーを作成できます。 したがって、現在の期間のインデックスを変更するシグナルハンドラは次のようになります。 



 PlotView { onPeriodIndexChanged: {} //... }


QML内での呼び出しに使用できるメソッドを作成するには、宣言時にQ_INVOKABLEマクロを追加する必要があります。 グラフのデータを更新してコンポーネントを再描画するメソッドを宣言します。 



 class PlotView : public QQuickPaintedItem { //... public: Q_INVOKABLE void drawPlot(); //... };


これで、このメソッドの呼び出しをonPeriodIndexChanged（）ハンドラーに追加できます 

 PlotView { onPeriodIndexChanged: drawPlot() }


したがって、 periodIndexプロパティが変更されると、座標平面とグラフが自動的に更新されます。



Q_INVOKABLEを使用する代わりに、メソッドをスロットとして宣言することができます。これにより、QML内でメソッドが表示されるようになります。



前述のように、Qtライブラリが提供する標準クラスを使用して、コンポーネント自体が描画されます。 座標平面の水平線を描く例は次のとおりです。 



 void PlotView::drawVerticalScaleLines(QPainter* painter) { painter->setPen(QPen(QBrush(Qt::white), 1)); for (float i = minValue; i < maxValue; i += step) { int y = calculatePlotYCoordinate(i); painter->drawLine(0, y, width(), y); } }


そのため、QML内でコンポーネントを使用可能にするには、アプリケーション内でコンポーネントを登録する必要があります。 ここでは、Sailfishアプリケーションに固有のいくつかの機能、つまりハーバーストアでの公開に注目する価値があります。



  1. アプリケーションの名前は、 harbourで始まり、「-」で始まる必要があります。 たとえば、 harbour-plot-app
  2. コンポーネントを登録するURIは、「-」が「。」に置き換えられたアプリケーションの名前で始まることが不可欠です。 この場合、 harbour.plot.app.plotviewのようになります


ストアでアプリケーションを公開するための名前の要件の完全なリストは、 ここにあります 。



登録はqmlRegisterType（）メソッドを使用して実行され、次のようになります。 



 #include <QtQuick/QQuickView> #include <QGuiApplication> #include "plotview.h" //... int main(int argc, char *argv[]) { QGuiApplication* app = SailfishApp::application(argc, argv); //... qmlRegisterType<PlotView>("harbour.plotapp.plotview", 1, 0, "PlotView"); //... return app->exec(); }


したがって、QMLでこのコンポーネントを使用すると、次のようになります。 



 import QtQuick 2.0 import Sailfish.Silica 1.0 import harbour.plotapp.plotview 1.0 //... PlotView { id: plotView periodIndex: 0 onPeriodIndexChanged: drawPlot(); //... } //...


コンポーネント内では、 Sailfish Silicaライブラリのクラスとプロパティを使用できるため、Sailfish OS UIを満たすコンポーネントを作成できることに注意することが重要です。 この好例はThemeクラスで、カラーフォントやパディングなどの標準のSailfish OSスタイルの機能へのアクセスを提供します。 



 PlotView { //... width: parent.width - Theme.horizontalPageMargin * 2 anchors.horizontalCenter: parent.horizontalCenter //... }


おわりに



その結果、独自のコンポーネントを作成するための基本的な手順が示されました。 同様の手順を使用して、アプリケーションの非ビジュアルコンポーネントを作成できます。 このトピックの詳細については、 こちらとこちらをご覧ください 。 コンポーネントの動作を示す小さなアプリケーションのソースコードは、 Bitbucketで入手できます。



技術的な問題は、ロシア語を話すコミュニティのSailfish OSのTelegramまたはVKontakteグループのチャネルでも議論できます。



著者：ダリア・ロイチコワ


More articles:


All Articles