Firefox ExtensionでC++プログラムを動かしてみるテスト 〜その５ XULの実装〜
Firefox ExtensionでC++プログラムを動かしてみるテスト 〜その４ Extentionの作成〜 - かーねる・う゛いえむにっきからの続き。
Firefox上のインタフェースは、XULというマークアップ言語で記述する。
感覚的にはHTMLの親戚という感じ。
このあたりを読みながら、適当なタグを組み合わせてlibtestkvsへget/putするためのGUIを書いてみよう。
最低限、キーとバリューの入力項目とget・putボタンがあれば十分。
ということでこんな感じに書いてみた。
<?xml version="1.0"?> <window id="main" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <label value="key" /> <textbox id="key" /> <label value="value" /> <textbox id="value" /> <button label="get" /> <button label="put" /> </window>
HTMLよりもっとシンプルなソースコードになった。見た目も過度にシンプルだが、今は気にしない。
このファイルをtestkvs@dokukino.com/content/testkvs.xulに保存。
Firefoxを立ち上げ、URLバーへchrome://testkvs/content/testkvs.xulと入力して開いてみる。
こんな感じにWebページっぽいものが表示されただろうか？
見た目はこれで完成しているが、未だkey、valueに値を入れてget、putボタンを押しても何も起きない。
ボタンを押した時に起こすべきアクションをプログラミングしてないからだ。
これはJavaScriptで記述する。
XULの中にJavaScriptを記述する事も出来るが、分けた方が読みやすいだろう。
getボタンが押されたらget()メソッド、putボタンが押されたらput()メソッドを呼び出す事にして、これらのメソッドはtestkvs.jsに記述してみる。
先程のXULはこれに合わせてちょっと変更。
<?xml version="1.0"?> <window id="main" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://testkvs/content/testkvs.js" /> <label value="key" /> <textbox id="key" /> <label value="value" /> <textbox id="value" /> <button label="get" oncommand='get()' /> <button label="put" oncommand='put()' /> </window>
次に、testkvs.jsを実装する。
// testKVS XPCOMモジュールのインスタンスを作成 var kvs = Components.classes["@dokukino.com/testKVS;1"].createInstance(Components.interfaces.testIKVS); kvs.open(); function get() { // <textbox id='key' />からkeyを取ってくる var key = document.getElementById('key').value; // testKVSからkeyに対応するvalueをget var value = kvs.get(key); // <textbox id='value' />へvalueを代入 document.getElementById('value').value = value; } function put() { // <textbox id='key' />からkeyを取ってくる var key = document.getElementById('key').value; // <textbox id='value' />からvalueを取ってくる var value = document.getElementById('value').value; // testKVSへkey/valueのペアをput kvs.put(key, value); // <textbox id='key' />をクリア document.getElementById('key').value = ''; // <textbox id='value' />をクリア document.getElementById('value').value = ''; }
これで完成である。
keyに111, valueに222と入力してputボタンを押し、続いてkeyに111と入力してgetを押してみよう。
value = 222になるはず。
値はブラウザを終了するまで保持されている。
key, valueの型はlongなのだが、文字列を渡してもExceptionも何も起きない。
型チェックとかされてないのだろうか？この辺何がどうなってるのかよく分からない。
