QML勉強中 (JavaScript連携編)
引き続き、QMLの勉強中。
今回は、前回ListViewを表示してみたが、ListViewをJavaScriptで動的に更新してみる実験。
main.qml
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のアドレス設定ができるようにしたいし。
今回は、前回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リファレンスのバージョン（最新？）に合わせることにした。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"});
})()
}
}
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のアドレス設定ができるようにしたいし。