QML(Qt)でシグナルを使う

QMLでもイベントハンドラ的な動きを実装できます。
Javaならinterfaceクラスを定義する感じで上位のオブジェクトへ通知する事ができます。

詳細はこちらを御覧ください。
QML Signal and Handler Event System
使い方的にはこちらだけでスグわかると思いますが・・・。

ぶっちゃけQMLが1ファイルしかない場合は必要ないと思います。返って面倒。
どうしてこの仕組を使うかってのはオブジェクトをファイルに分けていった時にオブジェクト指向な感じで疎にする感じですね。

さて、例をあげて説明します。
例Aのように親のオブジェクトへアクセスする事ができます。
ファイルを分けていない場合はこの方法を使わないとやってられないです。
ですが、例Aがありなので例Bも実はできます。ただ、これをやってしまうとファイルを分けて可読性を上げたのかさっぱり意味がわからなくなります。
なので、例Cの用にシグナルを使います。

例A
import QtQuick 1.0

Rectangle {
    id: _root
    width: 512
    height: 360

    Rectangle{
        width: 100
        height: 20
        color: "#dd0000"

        MouseArea{
            anchors.fill: parent
            onClicked: {
                _root.width -= 50;
            }
        }
    }
}


例B
//ファイル:Main.qml
import QtQuick 1.0

Rectangle {
    id: _root
    width: 512
    height: 360

    Button{
        width: 100
        height: 20
        color: "#00dd00"	//あえて色を変える
    }
}

//ファイル:Button.qml
import QtQuick 1.0

Rectangle{
    width: 100
    height: 20
    color: "#dd0000"

    MouseArea{
        anchors.fill: parent
        onClicked: {
            _root.width -= 50;
        }
    }
}


例C
//ファイル:Main.qml
import QtQuick 1.0

Rectangle {
    id: _root
    width: 512
    height: 360

    Button{
        width: 100
        height: 20
        color: "#00dd00"	//あえて色を変える
  
        //ハンドラの定義
        onClicked: {
            _root.width -= e;   //signalの定義の引数が使える
        }
    }
}


//ファイル:Button.qml
import QtQuick 1.0

Rectangle{
    id: _root       //ファイルで一番根っこを文字通り_rootにする
    width: 100
    height: 20
    color: "#dd0000"

    signal clicked(int e)  //シグナルの定義

    MouseArea{
        anchors.fill: parent
        onClicked: {
            //ハンドラの呼出し
            _root.clicked(100);
        }
    }
}
これは自分ルールでもあるのですが、ファイルの根っこを_rootに定義するようにしてわかりやすくしてます。

/// ポイント ///
・シグナルの引数
 定義では型を指定します。
 Javascript使ってたりと全体的に型を意識しない言語なのに不思議ですね。
・ハンドラの定義
 シグナルで定義した名前の前に「on」をつけて最初の文字を大文字にします。
 引数は書きません。
 引数はいきなり使えます。再定義しないように注意しましょう。