Home Cooker Classes Others Rice CookerGX
Cooker  >  userinterface
ユーザインターフェースのためのブラウザ

ユーザインターフェース

Cookerは、ユーザインタフェースとして、Internet Explorer互換のブラウザ(WebBrowser Control)を利用しています。このため、ユーザインタフェースの実装に関して、ブラウザに起因する制限が幾つかあります。

以下のセクションで、この制限について説明します。

遷移不可

ユーザインタフェースブラウザ(以下 UIブラウザ)が制限されている機能の中で一番重要なのは、このブラウザが遷移しないようになっていることです。つまり、リンクをクリックしても何も起きません。

UIブラウザが遷移しないので、ユーザインタフェースを遷移により書き換えることは出来ません。ユーザーインタフェイスは、DOM(Document Object Model)を使用して書き換える必要があります。

レンダリングモード

Cooker が起動したときのUIブラウザには、以下のhtmlが設定されています。

1:

<!DOCTYPE html>

2:

<html>

3:

<head>

4:

<meta charset='utf-8'>

5:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

6:

<meta http-equiv='Pragma' content='no-cache'>

7:

<meta http-equiv='Cache-Control' content='no-cache'>

8:

<meta http-equiv='Expires' content='0'>

9:

</head>

10:

<body>

11:

</body>

12:

</html>

上記のHtmlは、UIブラウザにユーザインタフェースを構築する上での重要な情報を含んでいます。

1 : <!DOCTYPE html>

UIブラウザは、このタグによって、ユーザインタフェースのhtmlをHtml5規格として解釈します。

2 : <meta charset='utf-8'>

このタグはutf-8でユーザインタフェースhtmlをエンコードすることを要求します。

3 : <meta http-equiv='X-UA-Compatible' content='IE=edge'>

このタグにより、UIブラウザは、インストールされている Internet Explorer と同じレンダリングモードでHtmlを描画します。

Javascript

UIブラウザは、セキュリティ関連の設定で Internet Explorer の影響を受ける仕様になっています。

UIブラウザにとって特に重要なのは、Javascriptの設定です。Internet Explorer でJavascriptの実行を不可に設定している場合、UIブラウザでもJavascriptを利用することはできません。

ユーザインターフェースの実装例

ユーザインターフェースの実装例を示します。

InnerHTML

ユーザインターフェースを実装する一番簡単な方法は、<body>タグの内容を、InnerHTMLセッタを使って書き換えることです。

例として、以下のようなコンソール画面の横幅一杯のボタンを三つ表示してみます。

図 1 : コンソール画面

最初に css を示します。css.txt ファイルに次の css コードが記述してあるとします。

1:

button{width:100%;margin-top:5px;padding: 5px;border:solid 1px black;}

次は、html を示します。html.txt ファイルに次の html コードが記述してあるとします。

1:

<button id="b1" type="button">Button 1</button>

2:

<br>

3:

<button id="b2" type="button">Button 2</button>

4:

<br>

5:

<button id="b3" type="button">Button 3</button>

最後に、Rice コードを示します。consoleSample.cook に次の Rice コードが記述してあるとします。

12行目で、css.txt の内容が PushCss(string) メソッドで書き込まれます。

17行目で、html.txt の内容が <body> タグに InnerHTML セッタで書き込まれます。

1:

class main

2:

document _doc;

3:

rice _rice;

4:

open method void start()

5:

//ソースファイルのあるディレクトリを取得。

6:

file source = new file(_rice.SourceFileName);

7:

directory dir = source.Directory;

8:

// ------------------------------------------コンソールの初期化

9:

//css

10:

reader cssReader = new reader(dir.FullName + "\css.txt");

11:

string cssText = cssReader.ReadToEnd();

12:

_doc.PushCss(cssText);

13:

cssReader.Release();

14:

//html

15:

reader htmlReader = new reader(dir.FullName + "\consoleSampleHtml.txt");

16:

string htmlText = htmlReader.ReadToEnd();

17:

_doc.Body.InnerHTML = htmlText;

18:

htmlReader.Release();

19:

endmethod

20:

endclass

css.txt と html.txt と consoleSample.cook を同じディレクトリに置いて、Cookerで、consoleSample.cook を実行すると上の図のようにUIブラウザにボタンが三つ表示されます。

この時の、UIブラウザの html 全体を以下に示します。

1:

<!DOCTYPE html>

2:

<html>

3:

<head>

4:

<meta charset='utf-8'>

5:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

6:

<meta http-equiv='Pragma' content='no-cache'>

7:

<meta http-equiv='Cache-Control' content='no-cache'>

8:

<meta http-equiv='Expires' content='0'>

9:

<style>

10:

button{width:100%;margin-top:5px;padding: 5px;border:solid 1px black;}

11:

</style>

12:

</head>

13:

<body>

14:

<button id="b1" type="button">Button 1</button>

15:

<br>

16:

<button id="b2" type="button">Button 2</button>

17:

<br>

18:

<button id="b3" type="button">Button 3</button>

19:

</body>

20:

</html>

イベントハンドラの割り当てと動的なユーザインターフェースの追加

このセクションでは、イベントハンドラの割り当てと、ユーザインターフェース要素の動的な追加について説明します。

前セクションのユーザインターフェース実装例を、ボタンがクリックされると、ボタンを一つ追加するように拡張します。

イベントハンドラ

イベントハンドラを割り当てるための Rice コードを以下に示します。

1:

element b1Button = _doc.GetElementById("b1");

2:

ehswitch b1Switch = b1Button.Click(this, "buttonHandler(elementeventargs)");

3:

b1Switch.Start();

一行目は、ボタンを表すインスタンスの取り出しです。

二行目は、取り出したエレメントの Click イベントへのハンドラの割り当てです。Click メソッドで割り当てます。

Click メソッドの第一引数は、ハンドラをメンバとして持つインスタンスです。第二引数は、ハンドラのシグネチャです。

割り当ての結果として、ハンドラの実行を制御する ehswitch クラスのインスタンスが返ります。

三行目がハンドラの実行の開始です。ehswitch クラスの start メソッドでハンドラを開始しています。


二行目に注目して下さい。Click メソッドに this ( mainクラスのインスタンス )とシグネチャ"buttonHandler(elementeventargs)"を渡しています。この結果、b1Button の Click イベントに対して、main クラスの buttonHandler メソッドが呼び出されます。

buttonHandler メソッドは外部から呼び出されるので、open でなければなりません。更に、シグネチャで指定したように、elementeventargs クラスの引数を一つ持つ必要があります。

buttonHandler メソッドの定義のアウトラインを以下に示します。

1:

open method void buttonHandler(elementeventargs eea)

2:

// ハンドラの実装。

3:

endmethod

この buttonHandler メソッドの中に、ボタンを追加するコードを記述します。

ボタンを追加するコードを以下に示します。

1:

open method void buttonHandler(elementeventargs eea)

2:

eea.EHSwitch.Stop(); // Stop handling.

3:

// ------------------------------------------新しいボタンの動的追加

4:

// ボタン作成

5:

element br =_doc.CreateElement("br");

6:

element newButton =_doc.CreateElement("button");

7:

newButton.SetAttribute("id", "b4");

8:

newButton.SetAttribute("type", "button");

9:

newButton.InnerText = "New button";

10:

// 追加

11:

_doc.Body.AppendChild(br);

12:

_doc.Body.AppendChild(newButton);

13:

endmethod

ハンドラに渡される引数(elementeventargsクラス)には、EHSwitchゲッタがあります。このゲッタは、ハンドラ割り当ての際に生成した ehswitch クラスのインスタンス ( b1Switch ) を持っています。

これを利用すると、二行目で行っているように、ハンドラ内部でハンドラ自身の実行を制御することが出来ます。


イベントハンドラの割り当てを加えた、consoleSample.cook の実装を以下に示します。

1:

class main

2:

document _doc;

3:

rice _rice;

4:

open method void start()

5:

//ソースファイルのあるディレクトリを取得。

6:

file source = new file(_rice.SourceFileName);

7:

directory dir = source.Directory;

8:

// ------------------------------------------コンソールの初期化

9:

//css

10:

reader cssReader = new reader(dir.FullName + "\css.txt");

11:

string cssText = cssReader.ReadToEnd();

12:

_doc.PushCss(cssText);

13:

cssReader.Release();

14:

//html

15:

reader htmlReader = new reader(dir.FullName + "\consoleSampleHtml.txt");

16:

string htmlText = htmlReader.ReadToEnd();

17:

_doc.Body.InnerHTML = htmlText;

18:

htmlReader.Release();

19:

// ------------------------------------------イベントハンドラの割り当て

20:

element b1Button = _doc.GetElementById("b1");

21:

ehswitch b1Switch = b1Button.Click(this, "buttonHandler(elementeventargs)");

22:

b1Switch.Start();

23:

endmethod

24:
25:

open method void buttonHandler(elementeventargs eea)

26:

eea.EHSwitch.Stop(); // ハンドラの停止。

27:

// ------------------------------------------新しいボタンの動的追加

28:

// ボタン作成

29:

element br =_doc.CreateElement("br");

30:

element newButton =_doc.CreateElement("button");

31:

newButton.SetAttribute("id", "b4");

32:

newButton.SetAttribute("type", "button");

33:

newButton.InnerText = "New button";

34:

// 追加

35:

_doc.Body.AppendChild(br);

36:

_doc.Body.AppendChild(newButton);

37:

endmethod

38:

endclass

consoleSample.cook を実行して、一番上のボタンをクリックすると結果は次の様になります。

図 2 : ボタン追加

この時の、UIブラウザの html 全体を以下に示します。

1:

<!DOCTYPE html>

2:

<html>

3:

<head>

4:

<meta charset='utf-8'>

5:

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

6:

<meta http-equiv='Pragma' content='no-cache'>

7:

<meta http-equiv='Cache-Control' content='no-cache'>

8:

<meta http-equiv='Expires' content='0'>

9:

<style>

10:

button{width:100%;margin-top:5px;padding: 5px;border:solid 1px black;}

11:

</style>

12:

</head>

13:

<body>

14:

<button id="b1" type="button">Button 1</button>

15:

<br>

16:

<button id="b2" type="button">Button 2</button>

17:

<br>

18:

<button id="b3" type="button">Button 3</button>

19:

<br>

20:

<button id="b4" type="button">New button</button>

21:

</body>

22:

</html>

Copyright © Rice All rights reserved.