ひょんなことからWPF/Eを勉強する必要が出たのですが日本語資料がとても少ない(^^;
なので、ついでにちょっとずつメモを書き残そうかと。
それでは前エントリからの続き(^^;
agHost.jsを利用したWPF/Eコントロールへのアクセス方法です。
まず、WPF/Eコントロールの参照を定義したHTMLファイルのソースです。
1: <html>
2: <head>
3: <title>Hello World Sample</title>
4: <script type="text/javascript" src="js/aghost.js"></script>
5: </head>
6: <body>
7: <div id="WpfeControlHost">
8: <script type=text/javascript>
9: new agHost(
10: "WpfeControlHost", // 1.DIV tag id.
11: "WpfeControl", // 2.WPF/E control id.
12: "400px", // 3.Width of rectangular region of WPF/E control in pixels.
13: "100px", // 4.Height of rectangular region of WPF/E control in pixels.
14: "#D6D6D6", // 5.Background color of rectangular region of WPF/E control.
15: null, // 6.SourceElement property value.
16: "HelloWorld.xaml", // 7.Source property value.
17: "false", // 8.WindowlessMode property value.
18: "30", // 9.MaxFrameRate property value.
19: 'myErrorHandler',; // 10.OnError property value -- notice use of single quotes.
20: 0, // 11.Minimum major version required
21: 8, // 12.Minimum minor version required
22: 5 // 13.Minimum build required
23: )
24: </script>
25: </div>
26: </body>
27: </html>
こちらではdivタグでまずidを設定します。
で、それに基づきagHostのパラメータを以下のように設定します。
1.DIV tag id
そのままですね、<div id="*">で指定したtagのidをそのまま記載します。
今回の例では<div id="WpfeControlHost">となっていますので、"WpfeControlHost"を指定しています。
2.WPF/E control id
WPF/Eの識別子を表記します。
通常、"WpfeControl"固定ですね
3.Width of rectangular region of WPF/E control in pixels
WPF/Eコンテンツを表示する長方形の領域の幅を定義します。
規定の単位はPixelになります。
このタグでは表示可能領域のパーセンテージを"40%"というような感じで指定することも可能です。
4.Height of rectangular region of WPF/E control in pixels
WPF/Eコンテンツを表示する長方形の領域の高さを定義します。
規定の単位はPixelになります。
このタグでは表示可能領域のパーセンテージを"40%"というような感じで指定することも可能です。
5.Background color of rectangular region of WPF/E control.
XAMLコンテンツを表示する長方形の領域（3.や4.で指定した領域)の背景色を設定します。
ここではnamed color("red"や"blue"などの表記）を指定することも可能ですし、例のようにRGBやRGBAを指定することも可能です。
デフォルト値はnullですが、nullの色は白と同等になるようです。
6.SourceElement property value
インラインて記述されたXAMLの定義を指定するパラメータです。 たとえば、<BODY></BODY>の中に
<script type="text/xaml" id="xamlContent">
<?xml version="1.0"?>
--------XAML定義--------
</script>
といった感じでXAMLをHTMLの中に埋め込むことができます。
これをWPF/Eコントロールに引き渡すには、まず、SCRIPTタグにid属性を指定します。 この場合、"xamlContent"がそうですね。
そのidをこのパラメータに設定すれば完了です。 ここに記述されたXAMLを実行してくれます。
このとき、類似したパラメータにSource/SourceStringがありますが、これらが同時指定された場合の優先順位は
1)SourceString （JavaScriptで取得したWPF/Eコントロールに直接XAMLの文字列が指定できるプロパティ）
2)Source （この引数の7番目[Source property value]のこと）
3)SourceElement
という順序になります。
複数指定された場合、この優先順位に沿って利用されますので、そのほかに指定されたものは無視されることになります。
今回、テンプレートでは、xamlは別ファイルに定義しているのでここはnullとしておきます。
7.Source property value
WPF/Eの定義のあるxamlファイルを指定します。
指定されたXAMLファイルをWPF/Eコントロールへ引き渡します。
類似したパラメータにSourceString/SourceElementがありますが、これらが同時指定された場合の優先順位は
1)SourceString （JavaScriptで取得したWPF/Eコントロールに直接XAMLの文字列が指定できるプロパティ）
2)Source
3)SourceElement （この引数の6番目[SourceElement property value]のこと）
という順序になります。
複数指定された場合、この優先順位に沿って利用されますので、そのほかに指定されたものは無視されることになります。
8.WindowlessMode property value
WPF/EコントロールをWindows-lessで表示するかどうかを指定します。
もし、このプロパティを指定されたら5.で指定しているBackcolorは無視されることになります。
その場合、表示されたWindowではbackgroundをtransparentに設定されます。
規定値はfalseです。
9.MaxFrameRate property value.
１秒間にレンダリングするフレームの最大数を指定します。
WPF/Eコンテンツが実際にレンダリングするフレームレートはシステムのパフォーマンス性能に依存します。
これを超えない範囲で指定することができますが、優先度はシステムのパフォーマンス以下となります。
ただし、ここで指定できるフレームレートの最大は64です。 これを超えるとすべて自動的に64となります。
規定値では30となっています。
10.OnError property value -- notice use of single quotes
JavaScriptで記述されたErrorハンドラのメソッドをここで指定します。
規定値はnullとなります。（標準で用意されています）
今回はエラーハンドラのメソッド名はmyErrorHandlerとしていますので
function myErrorHandler(line, col, hr, string)
として定義します。
このメソッドが記述されたら自動的にエラーハンドラとして機能します。
注意しないといけないのは、このパラメータの指定は"notive use of single quotes"とあるように、シングルクォーテーションで指定する必要があります。
11,12,13はバージョンです。
順番にMajorVerision, MinorVersion, BuildVersionです。
未指定の場合は規定値としてそれぞれ0,8,5が設定されます。
以上のパラメータを正しく設定することでWPF/Eコントロールが実行されますできるようになります。
ま、もっともパラメータ見ただけで、だいたい想像はつくとは思いますが、おそらく想像通りのパラメータだったのではないでしょうか(^^;;;;