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

QML勉強中(外部.jsの利用)

引き続き、QMLの勉強中。
.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できるようなんで都合のいい場所で良いぽい。
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がある感じになる。
ファイル名のみを指定した場合はmain.qmlと同じディレクトリ、つまりui/js.jsをimportすることになるが、/を含めてでパス指定もできる。
2番目の引数でコールバックの無名関数を渡してmain.qml側でUI操作をするように改造した。


これで動いた。
というわけで、目的のFeedリーダーはもうすぐ作れそうだ。