QML勉強中（外部.jsの利用）
引き続き、QMLの勉強中。
.qmlファイル中にJavaScriptコード書いてクロスドメイン制約無しでXMLHttpRequestが使えることはわかったが、
設定画面はmain.qmlと別ファイルになるんで、JavaScriptは外部ファイルにして共有したほうが良さそう。
というわけで、.jsのimportをやってみた。
js.js
XMLHttpRequestでレスポンスを取得するfunctionだが、別ファイル化するのだから他も使えるように、.js側でUIの変更は行わずにコールバックで.qmlの方でUI変更を行う感じにした。
main.qml
ファイル名のみを指定した場合はmain.qmlと同じディレクトリ、つまりui/js.jsをimportすることになるが、/を含めてでパス指定もできる。
2番目の引数でコールバックの無名関数を渡してmain.qml側でUI操作をするように改造した。
これで動いた。
というわけで、目的のFeedリーダーはもうすぐ作れそうだ。
.qmlファイル中にJavaScriptコード書いてクロスドメイン制約無しでXMLHttpRequestが使えることはわかったが、
設定画面はmain.qmlと別ファイルになるんで、JavaScriptは外部ファイルにして共有したほうが良さそう。
というわけで、.jsのimportをやってみた。
js.js
function HttpGet(url,cb){
var http=new XMLHttpRequest();
http.open("GET",url);
http.onreadystatechange=function(){
if(http.readyState==4){
cb(http.responseText);
}
}
http.send();
}
置き場所はmain.qmlと同じuiディレクトリ下にしたが、パス指定どころかURL指定でもimportできるようなんで都合のいい場所で良いぽい。var http=new XMLHttpRequest();
http.open("GET",url);
http.onreadystatechange=function(){
if(http.readyState==4){
cb(http.responseText);
}
}
http.send();
}
XMLHttpRequestでレスポンスを取得するfunctionだが、別ファイル化するのだから他も使えるように、.js側でUIの変更は行わずにコールバックで.qmlの方でUI変更を行う感じにした。
main.qml
import QtQuick 2.5
import QtQuick.Controls 1.4
import "js.js" as JavaScript
Column{
property var url:"http://jvn.jp/rss/jvn.rdf"
width:640
height:480
Text{
id:tv
}
Button{
text: "Button"
onClicked:JavaScript.HttpGet("http://example.com/",function(res){tv.text=http.responseText;})
}
Component.onCompleted:JavaScript.HttpGet(url,function(res){tv.text=res;})
}
importのasで指定した名前がオブジェクトになって、その下にfunctionがある感じになる。import QtQuick.Controls 1.4
import "js.js" as JavaScript
Column{
property var url:"http://jvn.jp/rss/jvn.rdf"
width:640
height:480
Text{
id:tv
}
Button{
text: "Button"
onClicked:JavaScript.HttpGet("http://example.com/",function(res){tv.text=http.responseText;})
}
Component.onCompleted:JavaScript.HttpGet(url,function(res){tv.text=res;})
}
ファイル名のみを指定した場合はmain.qmlと同じディレクトリ、つまりui/js.jsをimportすることになるが、/を含めてでパス指定もできる。
2番目の引数でコールバックの無名関数を渡してmain.qml側でUI操作をするように改造した。
これで動いた。
というわけで、目的のFeedリーダーはもうすぐ作れそうだ。