QMLは、ユーザーインターフェイスを作成するための新しいマークアップ言語です。 その主なタスクは、美しいアニメーションインターフェイスを備えたアプリケーションを簡単かつ迅速に作成する機能を提供することです。
少し前に公開バージョンがリリースされました。 これは、API全体が安定し、バージョンを安全にテストして使用できることを意味します。
Qt 4.7のリリースにDeclarative UIを含める予定ですが、現時点では、 ftpトロールに必要なすべてのファイルとインストール手順を見つけることができます。
この記事では、qmlでC ++オブジェクト（QObject）を使用する方法を示したいと思います。
最初のステップは、ftpからダウンロードしてqt-4.6.0-declarative.tar.gzをビルドすることです。 代わりに、必要なライブラリを含む既にビルドされたQtCreatorを使用できます
プロジェクトを作成しましょう：
QtCreator GUIを使用してQt4アプリケーションを作成する最も簡単な方法は、QWidgetを基本クラスとして使用することです。
qmltest.pro
SOURCES += main.cpp \
widget.cpp \
myobject.cpp
HEADERS += widget.h \
myobject.h
# , qt-declarative
QT += declarative \
script
#INCLUDEPATH += # , include/qt-declarative/
ウィジェットのヘッダーファイル
widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
class QmlView;
class MyObject;
class Widget : public QWidget
{
Q_OBJECT
public :
explicit Widget(QWidget *parent = 0);
private :
QmlView *view;
MyObject * object ;
private slots:
void onSceneResized(QSize size);
};
#endif // WIDGET_H
* This source code was highlighted with Source Code Highlighter .
まず、システムヘッダーを削除し、背景を透明にするとよいでしょう。
setWindowFlags(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground);
setAttribute(Qt::WA_NoSystemBackground);
view = new QmlView( this );
view->viewport()->setAutoFillBackground( false );
* This source code was highlighted with Source Code Highlighter .
次に、QMLビューアを初期化し、実行するファイルへのパスを指定します。
view->setFocus();
QString filename = qApp->applicationDirPath() + "/qmlpopups/default/popup.qml" ;
view->setUrl(QUrl::fromLocalFile(filename));//url - main.qml
* This source code was highlighted with Source Code Highlighter .
ここからが面白い部分です。C++オブジェクトのプロパティをqmlファイルから見えるようにします。 このためには、オブジェクトがQObjectを継承する必要があります。 Q_PROPERTYマクロを使用して、qmlオブジェクトとjavascriptからプロパティを利用可能にします
Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
* This source code was highlighted with Source Code Highlighter .
READは、値を取得するために使用する関数を示します。
WRITEは、変更に使用される機能を示します
NOTIFYは、値が変更されたときに呼び出される信号を示し、バインダーで使用されます
それに応じてオブジェクトを準備することにより、qmlからこれらのプロパティにアクセスできます。
view->rootContext()->setContextProperty( "MyObject" , object );
view->rootContext()->setContextProperty( "MyText" , "Hello, QML!" );
view->rootContext()->setContextProperty( "Avatar" ,qApp->applicationDirPath() + "/qmlpopups/default/star.png" );
* This source code was highlighted with Source Code Highlighter .
新しいオブジェクトの追加は、rootContext（）関数が返すポインターであるQmlContextを介して行われます。 個々のプロパティとオブジェクト全体の両方を追加できます。
それでは、qmlファイルに移りましょう。
Rectangle {
id: rect
width:250
height: 100
height: Behavior { NumberAnimation { duration: 1000; easing: "InOutQuad" } }
color: "transparent"
* This source code was highlighted with Source Code Highlighter .
コードは、透明な塗りつぶしで250x100の長方形を描画します。 奇妙なプロパティがなければトリッキーなことはありません。
height: Behavior { NumberAnimation { duration: 1000; easing: "InOutQuad" } }
Behaviorプロパティは、高さの値が変化したときのオブジェクトの動作を示します。 この場合、アニメーションにする必要があります。 新しい高さの値を設定するアクションの場合、長方形はこの値をすぐに受け入れませんが、アクションの特定のシーケンスを実行した後にのみ、アニメーションGUIを作成するときに非常に便利です。
BorderImage {
source: "background.png"
height: rect.height
width: rect.width
border.left: 20
border.top: 20
border.bottom: 20
border.right: 20
}
* This source code was highlighted with Source Code Highlighter .
このブロックは、フレーム付きの背景画像の作成を示しています。 そして、これはすべて1つの画像からのものであり、手でカットする必要はもうありません。すべてはあなたのために行われ、境界線のサイズを指定するだけです。
長方形のサイズに合わせて画像のサイズを自動的に変更するには、プロパティバインディングをqmlオブジェクトで使用できます。その本質は、あるパラメーターの値が別のパラメーターの値にバインドされ、元のパラメーターの値が変更されると自動的に変更されることです。
今テキストを書きます
Text {
id: title
text: MyText
font.pointSize: 14
wrap: true
color: "white"
effect: DropShadow {
color: "white"
blurRadius: 2
offset.x: 0
offset.y: 0
}
anchors.top: rect.top
anchors.topMargin : 5
anchors.left: avatar.right
anchors.leftMargin : 5
}
* This source code was highlighted with Source Code Highlighter .
要素をqmlに配置するには、アンカーを使用します。アンカーは、他のオブジェクトに対するオブジェクトの位置を示します。これは非常に便利です。 シャドウ効果など、さまざまな効果をテキストに適用できます。 テキスト自体は、前に示したコンテキストから取得されます。 wrapの値は、改行する必要があることを示します。
Text {
id: body
text: MyObject.text
font.pointSize: 12
wrap: true
color: "white"
//ancors
anchors.top: title.bottom
anchors.topMargin: 5
anchors.right: rect.right
anchors.rightMargin: 5
anchors.left: avatar.right
anchors.leftMargin : 5
onTextChanged: rect.height = calculateMyHeight();
}
* This source code was highlighted with Source Code Highlighter .
このブロックにはスロットがあり、テキストが変更されるとアクティブになり、javascript関数を呼び出します。この関数は、シーンが囲まれている長方形全体の高さを再カウントします。 また、C ++オブジェクトのsetText関数を呼び出すだけで、テキストを変更できます。
Script {
function calculateMyHeight() {
console.log( "height : " + (body.y + body.height + 20));
return (edit.y + edit.height + 20);
}
* This source code was highlighted with Source Code Highlighter .
スクリプトブロックでは、任意のqmlオブジェクトで対話できるjavascriptを記述することができます
残りのコードはこちらにあります。
最後に、このような素敵な小さなウィンドウを取得する必要があります。
今日は以上です。 その他の可能性については、ドキュメントと例を参照してください。
PS
彼らはWin7からスクリーンショットを送信しましたが、それを出すのを助けることができませんでした、 qtwinはぼかしを作成するために使用されます
