ジャンル不定の日記です。

QML勉強中 (JavaScript連携編)

引き続き、QMLの勉強中。
今回は、前回ListViewを表示してみたが、ListViewをJavaScriptで動的に更新してみる実験。

main.qml
import QtQuick 2.5
import QtQuick.Controls 1.4
 
Column{
    ListView{
        id:lv;
        ListModel{
            id:model
            ListElement{
                tx:"1"
            }
            ListElement{
                tx:"2"
            }
            ListElement{
                tx:"3"
            }
        }
        width:100
        height:200
        model:model
        delegate:Text{text:tx}
    }
    Button{
        text: "Button"
        onClicked:(function(){
            model.clear();
            model.append({"tx":"append1"});
            model.append({"tx":"append2"});
        })()
    }
}
前回は import QtQuick 2.0 としていたが、適切なバージョン番号がわからないのでAPIリファレンスのバージョン(最新?)に合わせることにした。
Arch Linux環境なので最新版がすぐ来るはずだし。
古い環境の場合はバージョン落とす必要があるかも。

今回はColumn型とButton型のオブジェクトを使用したが、Buttonを使うには QtQuick.Controls をimportする必要がある。

ボタンを押すとリストを更新する実験なんだが、
QMLの最上位にはオブジェクトは一個しか置けないぽくて、最上位にListViewとButtonを並べるのはダメみたい。
Column型は、子要素を縦方向に順番に並べてくれる。

ListViewは前回からちょっと省略した感じだが、ListViewには高さが無いのかな?
heightを指定しないとButtonと重なっちゃうようだったんでサイズ指定した。


Buttonは、onClickedでQMLのメソッドや自分で定義したJavaScriptのfunctionをクリック時に実行できる。
model.clear()でリストのデータを消去して、appendで新しく追加。
appendに渡す引数はJavaScriptのオブジェクト(ハッシュ)ぽい。

再利用もしない簡単な処理なんで無名関数を書いたが、当然だが名前付き関数を実行することもできる。
名前付きのfunctionを別の場所に定義する場合は、Button自身と親要素のColumn以外で定義した場合は id.func() の様にid指定で実行する必要がある。
ルート要素は一つしか置けないようで、Columnの外側には別のオブジェクトを置くこともできないし、JavaScriptのfunctionを置くこともできないぽい。
複数オブジェクトで同じfunctionを利用するような場合は、.jsを別ファイルにしてimportした方が自然かね。


QMLとJavaScriptの連携ができたんで、次はクロスドメイン制約無しでXMLHttpRequestができるかどうかを試してみる。
それができればJavaScriptでパース処理書くだけで目的のFeedリーダーが作れそう。

だが、まだPlasmoidの設定ボタン押した時の処理の書き方がわからないな。
できれば、設定ボタン経由でFeedのアドレス設定ができるようにしたいし。