Jul 302012
 

動作確認環境:Qt 4.8.1 / Qt Creator 2.4.1 / Windows XP

QMLアプリケーションにおけるQMLとC++のコードの連携方法について見ていく。
今回は、例としてQMLからWindowsAPIのBeep()関数を呼び出してみる。

まずは、QMLから呼び出されるC++クラスの作成から始める。
QMLプロジェクト内にC++のソースを追加する。

追加するのは「Beeper」という名前の新規クラスで、QDeclarativeItemというQtのクラスを継承している。
QDeclarativeItemは、C++コードとQMLとの橋渡しをするための基本クラスである。
QMLから呼び出されるC++コードは全てこのQDeclarativeItemを継承していなければならない。

ソースコードは以下のようになる。
まずはヘッダファイルを示す。

12行目で、メソッドの冒頭にQ_INVOKABLEというマクロを記述している。
このようにすると、そのメソッドをQMLから呼び出せるようになる。
次に、実装ファイルを以下に示す。

WindowsAPIを使うので、冒頭で「windows.h」をインクルードしている。
9行目からの、先のヘッダファイルで宣言したbeep()メソッドの実装は、WindowsAPIのBeep()関数を呼び出しているだけである。
以上がQMLから呼び出されるC++クラスとなる。

さて、このクラスをQMLから使うには、もう一つ手順が必要である。
それは、ここで作ったC++クラスの型をQMLとして登録しなければならないということである。
そのためのコードはQtCreatorのプロジェクト生成時に作られている「main.cpp」に記述する。
その内容は以下のようになる。

元からあった部分に追記したのは4行目と11行目である。
4行目で、先に作成したクラスのヘッダファイルをインクルードし、
11行目でqmlRegisterType()というQtのAPIを使い、型の登録を行っている。
メソッドの第1引数はQMLのimport文で指定する名前、第2引数と第3引数は登録する型のメジャーバージョンとマイナーバージョン、そして第4引数がQMLで使用するときの名前である。

それでは、このクラスをQMLから使ってみよう。
その前に、前回作成した「Button.qml」をプロジェクトに追加しておく。
メインのQMLは以下のようになる。

2行目のインポート文でqmlRegisterType()で登録したときの名前とバージョンを記述しておく。
すると、QML内にクラスの名前を宣言するだけで、そのクラスのインスタンスが生成されることになる。
実際には10行目でBeeperのインスタンスを作成し、「beeper」というidを付けている。
そして18行目のボタンが押されたタイミングで、beep()メソッドを呼び出している。

アプリを起動し、ボタンを押すとBeep音が鳴る。
以上が、QMLとC++コードを連携させた例となる。

Jun 272012
 

動作確認環境:Qt 4.8.1 / Qt Creator 2.4.1 / Windows XP

前回作成したQMLのボタンは、必要最低限の動作しかしていなかった。
今回はもう少しボタンらしい見た目にしてゆく。

QMLは以下のようになった。

ボタンコンポーネントとして汎用的に使えるよう、6-9行目でプロパティの定義をしている。
こうすることで、外部からボタンの枠線の色やラベルの文字列の設定を行える。

28行目、29行目ではMouseAreaのonEnteredイベントとonExitイベントに呼応して枠線の色を変えている。
hoveredBorderColorはプロパティとして定義された色で、デフォルトはgoldとなっている。
borderColorも同様にプロパティとして定義された色で、デフォルトはwhiteとしている。

32行目以降に2つのGradientを定義している。これらはボタンの表面のグラデーションに使うことができ、
ここでは通常時のグラデーションと、ボタンが押されたときのグラデーションを定義してある。

最後の46行目で、MouseAreaの状態によってグラデーションを切り替えている。
このようにQMLで定義したボタンは以下のような外観となる。

平常時
ホバー時
クリック時

最後に、このボタンを使用したQMLの例を示す。

このQMLアプリケーションを実行すると、以下のようになる。

Apr 232012
 

動作確認環境:Qt 4.8.1 / Qt Creator 2.4.1 / Windows XP

Qt Quickアプリケーションの作り方を学んでいくにあたって、まずはボタンを作ってみることにする。
はじめに、QtCreatorで Qt Quickアプリケーション のプロジェクトを作成する。
次に、そのプロジェクトにQMLファイルを新規作成する。名前は「Button.qml」とする。
QMLは以下のように記述する。

最もシンプルに書くならばこのような感じになるだろう。
4行目でRectangleエレメントの中にbuttonoClick()というシグナルを定義し、
6行目でMouseAreaが全体に有効になるよう配置する。
MouseAreaがクリックされるとbuttonClick()シグナルが発生するようになっている。

それでは、このボタンをメイン側で使ってみる。
QtCreaterでQt Quickのプロジェクトを作った場合はmain.qmlというファイルができているはずなので、
そこへ以下のように記述する。

このように、同じフォルダ内にqmlファイルがある場合は、その名前を宣言して配置することができる。
Button.qml内でbuttonClick()というシグナルを定義しておいたので、
onButtonClickという名前のプロパティが使えるようになっている。
ここにボタンが押されたときの処理を記述すれば良い。
今回は単純にログにメッセージを出力しているだけである。

このプログラムを実行すると以下のようになる。

緑色の四角形に表示された部分をマウスでクリックすると
コンソールログに「button clicked!」と表示されるだろう。