wbf2モジュールを使ったHTML表示と操作

wbf2モジュールを使えば、Browser Edge(Chromium)をベースとしたRenderingエンジン(WebView2)を扱うことができます。
wbf2モジュールにあるWebForm2クラスは、そのエンジンを使ってOgOからHTML表示と操作することができます。

旧wbfモジュールのWebFormクラスは、Browser InternetExplorerをベースとしたエンジンを使っているため、
表示が崩れたりJavaScriptがエラーになることが多々ありました。

しかし wbf2モジュールはBrowser Edge(Chromium)をベースとしたエンジン(WebView2)を使っているため、
WebForm2クラスではそのようなことがなく、しかもWebの最新の技術を将来に渡ってMicrosoft社がサポートしてくれます。
その理由で今後、wbf2モジュールを使うことを強くお勧めします。

HTMLで入力(WebForm2) (このPDFにあるサンプルwebform2-sample.js, webform2-sample.html)

OgOとWebForm2の操作とそれぞれが持ってる関数の相関は次のようなイメージとなります。
ここではHTMLを表示するWindowを、クラス名と同じWebForm2と名付けてます。
今後、説明でWebForm2をクラス名とWindow名を同じに使うので読み分けてください。



WebForm2クラスは、wbf2モジュールから次のようにして引き出します。 

    let {WebForm2} = require('wbf2');
以下に、簡単なサンプルを参考にしてwbf2モジュール(WebForm2クラス)の取り扱いを説明します。

実行方法は、OgOスクリプトtest_wbf2.jsから開始します。
開始すると、HTMLファイル test_wbf2.htmlは読み込まれてWebForm2が表示されます。
WebForm2の項目に入力し、計算開始ボタンをclickすると、結果がWebForm2に結果が表示されます。

WebForm2を閉じるボタンをクリックすると終了します。

OgOサイドの実装 実装スクリプトtest_wbf2.js...

  1. 準備
    2.     //メッセージループのためのモジュール
    var axa = require('axa');
    //WebForm2クラスをwbf2モジュールから取り出す
    var {WebForm2} = require('wbf2');
  2. WebForm2を作成
    3.     var wbf = new WebForm2("file:///"+__dirname + "\\test_web2.html");
  3. Windowサイズ
    4.     wbf.wsize(600,800);
  4. イベント受信関数登録
    5.     wbf.on("navigationCompleted",
      function(args) {
        //HTMLを読み込み完了後に起きるイベント
        //args={isSuccess, WebErrorStatus, NavigationId}
        //...
      }
    );
    wbf.on("closing",
      function() {
        //WebForm2終了処理中に起きるイベント//WebForm2終了処理中に起きるイベント(WebForm2の閉じるボタンをクリックまたはwbf.close()が実行されたとき)
        axa.breakLoop();  //メッセージループを中止
      }
    );
  5. OgO内のJS実行環境
    6.     function calc_prime(max) {
      let primes = [];
      for (let n=2; n<=max; n++) {
        let primed = true;
        for (let k of primes) {
          if (k*k>n) break;
          if ((n%k)==0) {
            primed = false;
            break;
          }
        }
        if (primed) {
          primes.push(n);
        }
      }
      return primes;
    }
  6. HTMLからここにある関数、変数へアクセスできるようにする
    7.     wbf.set_env((_s, ..._a)=>eval(_s));
  7. 以上で実行準備ができたので、WebForm2表示
    8.     wbf.show(); //表示処理でHTMLの読み込みが始まる。完了したら、"navigationCompleted"イベントが発生する
  8. メッセージループ
    9.     axa.msgLoop();
  9. WebForm2を閉じる
    10.     wbf.close();

HTMLサイドの実装 HTMLファイルtest_wbf2.html...

  1. HTMLヘッダー
    2.     <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    
    <title>WebForm2テスト</title>
  2. HTML内 JS実行環境
    3.     <script type="text/javascript">
    <!--
    function E(id) {return document.getElementById(id);}

    function print(str) {
      E("result").innerText = str;
    }
    function output(primes) {
      let lines = "";
      for (let i=0, N=primes.length; i<N; i++) {
        lines += `${primes[i]}, `;
        if ((i+1)%10==0) lines += "\n";
      }
      
      print(lines);
    }
    
    async function start_calc() {
      let max = +E("max").value;
      if (! Number.isInteger(max) || max<2) {
        print("2以上の整数を入力してください");
        return;
      }
      
      let primes = await ogo_call('calc_prime', max);
    
      output(primes);
    }
    -->
    </script>

    </head>
  3. HTML body部分
    4.   <body>

  <pre>
  *** テストWebForm2 ***
  </pre>
  <p>
  最大 <input type="text" id="max">までの素数<br>
  <br>
  <input type="button" id="start" value="スタート素数計算" onclick="start_calc();">
  </p>
  計算結果：
  <div id="result"></div>
  </p>
  
  </body>
  </html>

WebForm2クラス ...

wbf2モジュールにあるクラスで、 Microsoft Edgeと同じエンジンWebView2コンポーネントを扱うクラスです。
使用前に次のスクリプトを実行してください。 

  let {WebForm2} = require('wbf2');


WebForm2 : プロパティ・関数・・・リスト
コンストラクタ
WebForm2HTMLを表示するWebForm2オブジェクトを作成
メンバ関数
navigateHTMLを表示
goBack前ページへ戻る
canGoBack前ページへ戻れるかを判定
goForward次ページへ進む
canGoForward次ページへ進めれるかを判定
closeWebForm2を閉じる
isClosedWebForm2が閉じられているかを判定
showWebForm2を表示
hideWebForm2を非表示
titleタイトルの取得/設定
wposWebForm2のWindow位置とサイズを取得/設定
wsizeWebForm2のWindowサイズを取得/設定
set_envHTMLからOgOの関数(スクリプト)を実行するときの実行環境を設定
プロパティ
hwndWebForm2のbrowserWindowハンドル
hownerWebForm2の親Windowハンドル
sourceWebForm2の表示ページのソースURL
イベント受信
on, addEventListenerイベント受信関数の登録
off, removeEventListenerイベント受信関数の削除
closeWebForm2を閉じる
messageReceiverHTML側でogo_postMessage関数で送ったデータを受信する関数を登録
OgOからHTML内の関数,変数,DOMを扱う(非同期)
get, setHTML内のJS変数・要素へのアクセス
callHTML内のJS関数呼び出し
exec, evalHTML内でOgOスクリプトを実行
postMessageHTMLのJSへデータを送る
get_value, set_valueHTML要素のvalue値
get_number, set_number HTML要素のvalue数値
get_checked, set_checkedHTML要素のchecke属性値
get_radio, set_radioHTML(radio)要素群からselect idの取得/設定
get_option, set_optionselectタグ要素内にあるoption要素の選択を取得/設定
get_attribute, set_attributeHTML要素の属性値へのアクセス
get_innerHTML, set_innerHTMLHTML要素内のHTMLの取得と設定
get_innerText, set_innerTextHTML要素内のTextの取得と設定

WebForm2 コンストラクタ― WebForm2...

HTMLを表示するWebForm2オブジェクトを作成

let {WebForm2} = require('wbf2');
wbf = new WebForm2();
wbf = new WebForm2(url[, ops]);
wbf = new WebForm2(ops);

引数
url : String
HTMLのリソースを指定
opts : Object {title, wsize, wpos, howner, icon, curdir, env, menu}
title : Windowタイトル名
wsize :[width, height]
wpos : [left, top, width, height]
visible: wbf作成後、表示(true)/非表示(false)。省略された場合 非表示(false)とする。
howner : wbfの親Windowハンドル 、-1ならアプリメインのWindowハンドルに内部変換
icon : アイコンファイルパス名
curdir : wbfカレントディレクトリ
env : HTMLからアクセス可能な実行環境オブジェクト (後でwbf.set_env(…)で設定可能)
menu : true/false メニューバーの表示/非表示
html : , url : , uri : 第一引数のurlをこのプロパティ名で指定可能
返値
WebView2コンポーネントを操作できるWebForm2オブジェクトを返します。
解説
WebForm2表示のちらつきや、イベント取得を確実にするため、
基本的にWebForm2オブジェクト作成後、Windowは非表示にしています。ただし、ops.visibleがtrueならWindowが作成後すぐ表示します。
表示するために wbf.show() または wbf.navigate(url) を実行してください。

作成から表示までの手順は、以下の流れになります。
  1. WebForm2作成
    2.       var {WebForm2} = require('wbf2');
      var wbf = new WebForm2(url); //var wbf = new WebForm2();
  2. WebForm2のサイズやイベントを登録
    3.       wbf.wsize(wideth, height);
      /*
      次のメソッド関数でshapeや実行環境、イベント登録などを行う。
      wbf.title(...),wbf.wpos(...), wbf.hownerプロパティ
      wbf.set_env(...)
      wbf.on(...),wbf.off(...), wbf.messageReceiver(...)
      */
  3. WebForm2を表示
    4.       wbf.show();  //wbf.navigate(url)

navigate 関数WebForm2...

HTMLを表示

wbf.navigate( url )

引数
url : String
HTMLのリソースを指定
解説
urlのコンテンツをload完了したら、イベント"navigationCompleted"が発生します。

goBack 関数WebForm2...

前ページへ戻る

wbf.goBack()

返値
なし
解説
canGoBack()関数がtrueを返すなら、戻れる前ページがあり戻れます。
falseを返すなら、前ページへ戻れません。

canGoBack 関数WebForm2...

前ページへ戻れるかを判定

wbf.canGoBack() : Boolean

返値
trueなら、goBack()関数で前ページへ戻れます。
falseなら、前ページへ戻れません。

goForward 関数WebForm2...

次ページへ進む

wbf.goForward()

返値
なし
解説
canGoForward()関数がtrueを返すなら、進めるページがあり進めます。
falseを返すなら、次ページへ進めません。

canGoForward 関数WebForm2...

次ページへ進めれるかを判定

wbf.canGoForward() : Boolean

返値
trueなら、goForward()関数で次ページへ進めます。
falseなら、次ページへ進めません。

close 関数WebForm2...

WebForm2を閉じる。

wbf.close()

解説
この関数が実行されると、Windowをclose中、イベント"closing" が発生します。

isClosed 関数WebForm2...

WebForm2が閉じられているかを判定

wbf.isClosed() : Boolean

返値
trueならWebForm2が閉じられている。
falseなら閉じられていない。

show 関数WebForm2...

WebForm2を表示

wbf.show( [b=true] ) : Integer

引数
b : Boolean
true(省略時default値)ならWebForm2を表示させる。
falseなら非表示にする。
返値
この関数実行後、表示なら0以外の値を返します。非表示なら0を返します。

hide 関数WebForm2...

WebForm2を非表示

wbf.hide() : Integer

返値
この関数実行後、表示なら0以外の値を返します。非表示なら0を返します。
解説
wbf.show(false) と同じ。

title 関数WebForm2...

タイトルの取得/設定

wbf.title([name]) : String

引数
name : String
設定したいタイトル名
引数を渡さない場合、タイトル名は変更しない。
返値
この関数実行前のタイトル名(旧タイトル名)を返します。

wpos 関数WebForm2...

WebForm2のWindow位置とサイズを取得/設定

pos = wbf.wpos([left,top, width,height]) : Array

引数
left,top, width,height : Integer
left, top ： 左上位置(Screen座標)
width, height ： 幅と高さ
返値
WebForm2のWindow位置とサイズを配列にして返します。
(pos[0], pos[1]) : 左上、 (pos[0], pos[1]) : 幅, 高さ

wsize 関数WebForm2...

WebForm2のWindowサイズを取得/設定

size = wbf.wsize([width,height]) : Array

引数
width,height : Integer
width, height ： 幅と高さ
返値
WebForm2のWindowサイズを配列にして返します。
(size[0], size[1]) : 幅, 高さ

set_env 関数WebForm2...

HTMLからOgOの関数(スクリプト)を実行するときの実行環境を設定

    //簡単に 実行環境を設定したい場合
    oldenv = wbf.set_env( (_s,…_a)=>eval(_s) );
      または
    //より管理しやすい実行環境を設定したい場合
    oldenv = wbf.set_env( ()=>{
        //HTMLからアクセス許可する変数、関数を記述
        ・・・・・
        return (_s,…_a)=>eval(_s);
    })());

引数
(()=>{ ・・・ return (_s,…_a)=>eval(_s);})()：
{}内に、変数宣言や関数を記述
返値
この関数実行前のOgO実行環境オブジェクトを返します。
解説
このset_env関数またWebForm2 コンストラクタ―でOgO実行環境オブジェクトを指定していなければ、
グローバルスコープがOgO実行環境オブジェクトとなります。

特にWebForm2オブジェクトを関数内だけで使用したい場合、このse_env関数を使う必要があります。

hwnd プロパティWebForm2...

WebForm2のbrowserWindowハンドル

wbf.hwnd : Integer [ReadOnly]

howner プロパティWebForm2...

WebForm2の親Windowハンドル

wbf.howner : Integer

解説
hownerプロパティにWindowハンドルをsetすると、WebForm2のWindowはそのhownerの上に必ず表示するようになります。

howner=-1なら、MainアプリのWindowのハンドルがhownerに設定されます。
howner=0なら、必ずその上に表示される親Windowがない状態になります。

source プロパティWebForm2...

WebForm2の表示ページのソースURL

wbf.source : String [ReadOnly]

on, addEventListener 関数WebForm2...

イベント受信関数の登録

wbf.on(eventname, func) : WebForm2(=wbf)
wbf.addEventListener(eventname, func) : Boolean

引数
eventname : String
イベント名. 現在受け付けるイベントは次の３つだけです。
"navigationCompleted"、"closing"、"messageReceived"
func : Function
イベント名により関数タイプが決まります。

"navigationCompleted" --- HTMLのロードを完了したときのイベント
function (args) { //args={isSuccess, WebErrorStatus, NavigationId}
　　・・・
}
"closing" --- WebForm2が閉じる途中のイベント
function () {
　　・・・//HTML内の要素にアクセス可能
}
"messageReceived" --- HTML側でogo_postMessage関数で送ったデータを受信したときのイベント
function (data) {
　　・・・//dataはHTMLからogo_postMessage(data)で送られたdata
}
これは、wbf.messageReceiver( function(data) {...} ) と同じ。
返値
onメソッド関数の場合、wbfを返す。
addEventListenerメソッド関数の場合、trueなら登録を成功、falseなら失敗しています。

off, removeEventListener 関数WebForm2...

イベント受信関数の削除

wbf.on(eventname, func) : WebForm2(=wbf)
wbf.removeEventListener(eventname) : Boolean

引数
eventname : String
イベント名. 現在受け付けるイベントは次の３つだけです。
"navigationCompleted"、"closing"、"messageReceived"
返値
offメソッド関数の場合、wbfを返す。
removeEventListenerメソッド関数の場合、trueなら登録を成功、falseなら失敗しています。

messageReceiver 関数WebForm2...

HTML側でogo_postMessage関数で送ったデータを受信する関数を登録

wbf.messageReceiver(func) : Function

引数
func : Function または null
次のような関数です。
function (data) {
　　・・・//dataはHTMLからogo_postMessage(data)で送られたdata
}

Function, null以外を渡すと例外が発生します。
返値
登録前の関数を返します。(登録されていなければnullを返す)
解説
wbf.on("messageReceived", func) と同じ。

get, set 関数WebForm2...

HTML内のJS変数・要素へのアクセス

ret = await wbf.get(name) //値取得 (ret = await wbf.eval(name) と同じ)
await wbf.set(name, value) //値設定 (await wbf.exec("name=_a[0]", value) と同じ)

引数
name : String
HTML内JS変数名あるいはobject.propertyなどを文字列にして渡す。
value
設定したい値
返値
ret : 取得した値。

call 関数WebForm2...

HTML内のJS関数呼び出し

ret = await wbf.call(fname, arg, ...) (ret = await wbf.eval("fname(_a[0],...), arg, ...) と同じ)

引数
fname : String
HTML内JSで実行する関数名あるいはobject.methodなどを文字列にして渡す。
arg, ...
関数に渡す引数値
返値
HTML内JSで関数あるいはメソッドの実行結果を返します。

exec, eval 関数WebForm2...

HTML内でOgOスクリプトを実行

ret = await wbf.exec(script, arg,...)
ret = await wbf.eval(script, arg,...)

引数
script : String
HTML内JSで実行するスクリプト
arg, ...
実行するスクリプトに渡す値。
スクリプト内で、引数の順に_a[0],_a[1]....で値を参照できます。
返値
HTML内のJSでスクリプトをevalして、最後に実行された式の値を返します。

postMessage 関数WebForm2...

HTMLのJSへデータを送る

wbf.postMessage(data)

引数
data
数値、文字列、Object, 配列, null値
dataはJSON形式に変換可能な値であればよい。
JSONJSON形式に変換できない値を渡すとエラーが起きます。
arg, ...
実行するスクリプトに渡す値。
スクリプト内で、引数の順に_a[0],_a[1]....で値を参照できます。
返値
なし
解説
HTML側は
ogo_messageReceiver( function(data) {
　　・・・・
});
で受け取ります。

get_value, set_value 関数WebForm2...

HTML要素のvalue値

ret = await wbf.get_value(id) //取得 (ret = await wbf.get("document.getElementById(id).value") と同じ)
await wbf.set_value(id, value) //設定 (await wbf.set("document.getElementById(id).value", value) と同じ)

引数
id : String
HTML要素のid
value
設定する値
返値
ret : HTML要素のidのvalueプロパティの取得値。

get_number, set_number 関数WebForm2...

HTML要素のvalue数値

ret = await wbf.get_number(id) //取得 (ret =+await wbf.get("document.getElementById(id).value") と同じ)
await wbf.set_number(id, num) //設定 (await wbf.set("document.getElementById(id).value", num) と同じ)

引数
id : String
HTML要素のid
num : Number
設定する数値
返値
ret : HTML要素のidのvalueプロパティの取得数値。

get_checked, set_checked 関数WebForm2...

HTML要素のchecke属性値

ret = await wbf.get_checked(id) //取得 (ret =+await wbf.get("document.getElementById(id).checked") と同じ)
await wbf.set_checked(id, checked) //設定 (await wbf.set("document.getElementById(id).checked", checked) と同じ)

引数
id : String
HTML要素のid
checked : Boolean
チェック化を付けたいなら true, はずしたいならfalse。
返値
ret : HTML要素のidのchekedプロパティのtrue/falseを取得。

get_radio, set_radio 関数WebForm2...

HTML(radio)要素群からselect idの取得/設定

ret = await wbf.get_radio(name) //checkedされてる要素のidを取得
await wbf.set_radio(name, id) //name要素内のid要素にcheckedする

引数
name : String
HTMLのradio要素群の名前
document.getElementByName(name)でnameの要素群が指定される。
id : String
(radio)要素群内のid要素がselect idとなるようにする。
返値
ret : HTML要素のidのchekedプロパティのtrue/falseを取得。

get_option, set_option 関数WebForm2...

selectタグ要素内にあるoption要素の選択を取得/設定

ret = await wbf.get_option(id) //option要素の選択されたopidを取得
await wbf.set_option(id, opid) //option要素のopidを選択状態にする

引数
id : String
HTMLのoption要素のid
opid : String
option要素内の要素群で opid要素を選択状態にする。
返値
ret : option要素内の要素群で 選択状態になってる(op)id要素を取得。

get_attribute, set_attribute 関数WebForm2...

HTML要素の属性値へのアクセス

ret = await wbf.get_attribute(id, attr) //属性値を取得 (ret=await wbf.eval(`document.getElementById(${id}).getAttribute(${attri})`)と同じ)
await wbf.set_attribute(id, attr, value) //属性値を設定 (await wbf.exec(`document.getElementById(${id}).setAttribute(${attri}, ${value})`)と同じ)

引数
id : String
HTML要素のid
attr : String
属性名
value
属性値
返値
ret: 取得された属性値。

get_innerHTML, set_innerHTML 関数WebForm2...

HTML要素内のHTMLの取得と設定

ret = await wbf.get_innerHTML(id) //取得 (ret=await wbf.eval(`document.getElementById(${id}).innerHTML`)と同じ)
await wbf.set_innerHTML(id, html) //設定 (await wbf.exec(`document.getElementById(${id}).innerHTML = ${html})`)と同じ)

引数
id : String
HTML要素のid
html : String
html文字列
返値
ret: 取得されたhtml。

get_innerText, set_innerText 関数WebForm2...

HTML要素内のTextの取得と設定

ret = await wbf.get_innerText(id) //取得 (ret=await wbf.eval(`document.getElementById(${id}).innerText`)と同じ)
await wbf.set_innerText(id, Text) //設定 (await wbf.exec(`document.getElementById(${id}).innerText = ${Text})`)と同じ)

引数
id : String
HTML要素のid
text : String
text文字列
返値
ret: 取得されたtext。

HTML内で使う ogo_関数...

WebForm2内HTMLのJavaScriptから、OgOにアクセスするための関数を以下に説明します。

すべて先頭に"ogo_"が付き、HTMLのJavaScript内から呼び出す関数です。


ogo_関数 : 関数・・・リスト
ogo_closeOgOとの接続を閉じ、WebForm2を終了。
ogo_get, ogo_setOgO内JS変数へのアクセス
closeWebForm2を閉じる
ogo_exec, ogo_evalOgO内のJS関数呼び出し
ogo_postMessageOgOのJSへデータを送る
ogo_set_envOgOからHTML内の関数あるいはスクリプトを実行するときのHTML実行環境を設定
ogo_messageReceiverOgO側でwbf.postMessage関数で送られたデータを受信する関数を登録

ogo_close 関数HTML ogo_...

OgOとの接続を閉じ、WebForm2を終了

ogo_close()

引数
なし
返値
なし
解説
OgO側にclosingイベントを送ります。

ogo_get, ogo_set 関数HTML ogo_...

OgO内JS変数へのアクセス

ret = await ogo_get(name) //値取得 (ret = await ogo_eval(name) と同じ)
await ogo_set(name, value) //値設定 (await ogo_exec("name=_a[0]", value) と同じ)

引数
name : String
OgO内JS変数名あるいはobject.propertyなどを文字列にして渡す。
value
設定したい値
返値
ret : 取得した値。

ogo_call 関数HTML ogo_...

OgO内JS変数へのアクセス

ret = await ogo_call(fname, arg. ...) (ret = await ogo_eval("fname(_a[0],...), arg, ...) と同じ)

引数
fname : String
OgO内JSで実行する関数名あるいはobject.methodなどを文字列にして渡す。
arg, ...
関数に渡す引数値
返値
OgO内JSで関数あるいはメソッドの実行結果を返します。

ogo_exec, ogo_eval 関数HTML ogo_...

OgO内でJSスクリプトを実行

ret = await ogo_exec(script, arg,...)
ret = await ogo_eval(script, arg,...)

引数
script : String
OgO内JSで実行するスクリプト
arg, ...
実行するスクリプトに渡す値。
スクリプト内で、引数の順に_a[0],_a[1]....で値を参照できます。
返値
OgO内のJSでスクリプトをevalして、最後に実行された式の値を返します。

ogo_postMessage 関数HTML ogo_...

OgOのJSへデータを送る

ogo_postMessage(data)

引数
data
dataは,数値、文字列、Object, 配列, null値
dataがJSON形式に変換可能な値であればよい。
JSONJSON形式に変換できない値を渡すとエラーが起きます。
arg, ...
実行するスクリプトに渡す値。
スクリプト内で、引数の順に_a[0],_a[1]....で値を参照できます。
返値
なし
解説
OgO側は
wbf.messageReceiver( function(data) {
　　・・・・
});
で受け取ります。

ogo_set_env 関数HTML ogo_...

OgOからHTML内の関数あるいはスクリプトを実行するときのHTML実行環境を設定

    oldenv = ogo_set_env( ()=>{
      //OgOから HTMLにアクセス許可する変数、関数を記述
        ・・・・・
        return (_s,…_a)=>eval(_s);
    })());

引数
(()=>{ ・・・return (_s,…_a)=>eval(_s);})()
{}内に、変数宣言や関数を記述。
返値
この関数実行前のHTML実行環境オブジェクトを返します。
解説
このogo_set_env関数でHTML実行環境オブジェクトを指定していなければ、
グローバルスコープがHTML実行環境オブジェクトとなります。

ogo_messageReceiver 関数HTML ogo_...

OgO側でwbf.postMessage関数で送られたデータを受信する関数を登録

ogo_messageReceiver(func) : Function

引数
func : Function または null
次のような関数です。
function (data) {
　　・・・//dataはOgOからwbf.postMessage(data)で送られたdata
}
nullを渡した場合、postMessage関数で送られたデータは受け取りません。
Function, null以外を渡すと例外が発生します。
返値
登録前の関数またはnullを返します。

WebFormクラス ... 非推奨

WebFormクラスは、Windows Web Browser(IE, Edge)を使ってHTMLを表示するオブジェクトを扱います。
HTMLで入力(WebForm)


CommonDialogクラス ...

CommonDialogクラスは、Windows CommonDialogコントロールを扱うためのクラスです。
現時点では、ShowOpenとShowSave Dialog のみを提供しています。
このクラスを使う場合、最初に 

  var {CommonDialog} = require('commDlg');

を記述しておく必要があります。

使用例は、ShowOpenとShowSave関数を参照してください


CommonDialog : プロパティ・関数・・・リスト
コンストラクタ
CommonDialogCommonDialogオブジェクト作成
プロパティ
DefaultExtデフォルト拡張子
DialogTitleダイアログタイトル名
FileName初期ファイル名
Filterファイルフィルタ
FilterIndexフィルタインデックス
Flagsフラッグ
InitDir初期フォルダー
MaxFileSizeファイル名バッファーの最大サイズ
ParentWnd親(オーナー)Windowハンドル
メンバ関数
ShowOpenファイル選択ダイアログを開く
ShowSaveファイル保存ダイアログを開く
定数
ShowOpen, ShowSaveで使う定数 cdlOFNReadOnly, OFN_READONLY
cdlOFNOverwritePrompt, OFN_OVERWRITEPROMPT
cdlOFNHideReadOnly, OFN_HIDEREADONLY
cdlOFNNoChangeDir, OFN_NOCHANGEDIR
cdlOFNHelpButton, OFN_SHOWHELP
cdlOFNNoValidate, OFN_NOVALIDATE
cdlOFNAllowMultiselect, OFN_ALLOWMULTISELECT
cdlOFNExtensionDifferent, OFN_EXTENSIONDIFFERENT
cdlOFNPathMustExist, OFN_PATHMUSTEXIST
cdlOFNFileMustExist, OFN_FILEMUSTEXIST
cdlOFNCreatePrompt, OFN_CREATEPROMPT
cdlOFNShareAware, OFN_SHAREAWARE
cdlOFNNoReadOnlyReturn, OFN_NOREADONLYRETURN
cdlOFNNoLongNames, OFN_NOLONGNAMES
cdlOFNNoDereferenceLinks, OFN_NODEREFERENCELINKS
cdlOFNLongNames, OFN_LONGNAMES
BrowserFolderフォルダー選択ダイアログを開く

CommonDialog コンストラクタ CommonDialog...

CommonDialogオブジェクト作成します.

commdlg = new CommonDialog() : CommonDialog

引数
なし
返値
CommonDialogオブジェクトを返します。

DefaultExt プロパティ CommonDialog...

デフォルト拡張子

commdlg.DefaultExt = ext : String

解説
ShowOpen,ShowSaveダイアログで、ファイル名に拡張子を省略した場合、DefaultExtプロパティにセットされた文字列が拡張として付加されます。

DialogTitle プロパティ CommonDialog...

ダイアログタイトル名

commdlg.DialogTitle = title : String

解説
ShowOpen,ShowSaveダイアログのタイトルを設定します。

undefinedまたは空文字列であれば、
  ShowOpenダイアログのタイトルは「開く」(Open)、
  ShowSaveダイアログのタイトルは「名前を付けて保存」(Save As)
となります。

FileName プロパティ CommonDialog...

初期ファイル名

commdlg.FileName = filename : String

解説
ShowOpen,ShowSaveダイアログのファイル名入力欄の初期ファイル名となります。

Filter プロパティ CommonDialog...

ファイルフィルタ

commdlg.Filter = filter : String

解説
ShowOpen,ShowSaveダイアログの「ファイルの種類」を指定します。
フォーマットは
  ファイル種類の説明 | フィルタ
複数種類の指定は「|」 でつなぎ合わせます。

commdlg.Filter = "すべて (*.*)|*.*"

複数種類は
commdlg.Filter = "テキスト (*.txt)|*.*|すべて (*.*)|*.*"

FilterIndex プロパティ CommonDialog...

フィルタインデックス

commdlg.FilterIndex = filterindex : Integer

解説
インデックスで指定した Filterプロパティのファイル種類を表示します。

commdlg.Filter = "JScript(*.js)|*.js|VBScript(*.vbs)|*.vbs";
commdlg.FilterIndex = 2; // ２番目のファイルの種類(*.vbs)が表示される

Flags プロパティ CommonDialog...

フラッグ

commdlg.Flags = flags

解説
設定できるフラッグは、「ShowOpen, ShowSaveで使う定数」にリストアップしｔます。
複数のフラッグ指定は、定数を「|」でつないで指定できます。

InitDir プロパティ CommonDialog...

初期フォルダー

commdlg.InitDir = initdir : String

解説
ShowOpen,ShowSaveダイアログに最初にこの初期フォルダーのファイルがリストアップされます。

MaxFileSize プロパティ CommonDialog...

ファイル名バッファーの最大サイズ

commdlg.MaxFileSize = maxfilesize

解説
選択・入力されたファイル名のバッファーの最大サイズを指定します。
指定がされていない場合、Windowsの最大ファイルパスのサイズが採用されます。
Flagsプロパティに cdlOFNAllowMultiselect または OFN_ALLOWMULTISELECTが設定された場合、複数ファイルが格納される十分なサイズを指定してください。

ParentWnd プロパティ CommonDialog...

親(オーナー)Windowハンドル

commdlg.ParentWnd = parentwnd

解説
commonDialogの親(オーナー)Windowを指定します。
指定がされていない場合、アプリケーションのMainWindow(__hmainWnd__)がParentWndとなります。
commonDialogはParentWndの上に常に表示されます。

ShowOpen 関数 CommonDialog...

ファイル選択ダイアログを開きます.

ans = commdlg.ShowOpen()

引数
なし
返値
[キャンセル]または[終了]した場合、undefined値を返します。
[開く]でファイルを選択すれば、通常は選択されたファイル名がフルパスで返します。
FlagsプロパティにcdlOFNAllowMultiselect または OFN_ALLOWMULTISELECTが設定されていた場合、 複数ファイルのフルパス名がセットされた配列を返します。
例
var {CommonDialog} = require('commDlg');

var dlg = new CommonDialog();

dlg.DialogTitle = "ファイルを選択せよ"; //ダイアログタイトルを設定
dlg.InitDir = "d:\work";  //初期表示するディレクトリ
dlg.Filter  = "テキスト ファイル|*.txt|すべてのファイル|*.*"; // ファイル検索条件（フィルタ）を設定

var ans = dlg.ShowOpen();

if (ans) {
  print(ans); // 選択ファイルのフルパス名
}

var {cdlOFNAllowMultiselect} = require('commDlg');
dlg.Flags = cdlOFNAllowMultiselect;

ans = dlg.ShowOpen();

if (ans) {
  // 複数選択ファイルのフルパス名を表示
  for (var i=0; i<ans.length; i++) {
    print( ans[i] );
  }
}

ShowSave 関数 CommonDialog...

ファイル保存ダイアログを開きます.

ans = commdlg.ShowSave()

引数
なし
返値
[キャンセル]または[終了]した場合、undefined値を返します。
[保存]でファイル名を入力すれば、通常は入力されたファイル名がフルパスで返します。
FlagsプロパティにcdlOFNAllowMultiselect または OFN_ALLOWMULTISELECTが設定されていた場合、 複数ファイルのフルパス名がセットされた配列を返します。
例
var {CommonDialog} = require('commDlg');

var dlg = new CommonDialog();

dlg.DialogTitle = "ファイル名を入力せよ"; //ダイアログタイトルを設定
dlg.DefaultExt = "txt";  //デフォルト拡張子
dlg.InitDir = "d:\\work";  //初期表示するディレクトリ
dlg.Filter  = "テキスト ファイル|*.txt|すべてのファイル|*.*"; // ファイル検索条件（フィルタ）を設定

var ans = dlg.ShowSave();

if (ans) {
  print(ans); // 入力ファイルのフルパス名
}

ShowOpen, ShowSaveで使う定数 CommonDialog...

以下の定数の値は 
  var {cdlOFNAllowMultiselect, cdlOFNFileMustExist} = require('commDlg');
を実行してセットされます。

cdlOFNReadOnly, OFN_READONLYダイアログが開かれたときに、[読み取り専用ファイルとして開く] チェック ボックスが最初からオンになっているようにします。
cdlOFNOverwritePrompt, OFN_OVERWRITEPROMPTShowSave ダイアログで、選択されたファイルが既に存在している場合はメッセージを表示するようにします。
cdlOFNHideReadOnly, OFN_HIDEREADONLY[読み取り専用] チェックボックスを非表示にします。
cdlOFNNoChangeDir, OFN_NOCHANGEDIRダイアログが開かれた時に、前回のディレクトリを設定します。
cdlOFNHelpButton, OFN_SHOWHELP [ヘルプ] ボタンを表示します。
cdlOFNNoValidate, OFN_NOVALIDATE取得されたファイル名に無効な文字が含まれることを許可します。
cdlOFNAllowMultiselect, OFN_ALLOWMULTISELECT複数のファイルを選択できるようにします。 このフラグが設定された場合、ShowOpen,ShowSave関数は複数パス名の配列を返します。
cdlOFNPathMustExist, OFN_PATHMUSTEXIST有効なパス名しか入力できないようにします。 このフラグが設定され、無効なパスが入力された場合、警告が表示されます。
cdlOFNFileMustExist, OFN_FILEMUSTEXISTFileName で設定したファイル名のみ入力出来るようにします。 このフラグが設定され、ユーザが無効なファイル名を入力した場合、警告が表示されます。 またこのフラグを設定すると自動的に cdlOFNPathMustExist フラグも設定されます。
cdlOFNCreatePrompt, OFN_CREATEPROMPT存在しないファイルを指定した場合、新規に作成するかどうかユーザーに問い合わせるように設定します。 このフラグが設定された場合、自動的にcdlOFNPathMustExist および cdlOFNFileMustExist フラグも設定されます。
cdlOFNShareAware, OFN_SHAREAWARE共有違反エラーは無視するようにします。
cdlOFNNoReadOnlyReturn, OFN_NOREADONLYRETURNShowSave ダイアログで、読み取り専用属性を持つファイル、または読み取り専用ディレクトリに存在するファイルを選択できないようにします。 このフラグが設定され、該当ファイルを選択した場合、警告が表示されます。
cdlOFNNoLongNames, OFN_NOLONGNAMES長いファイル名を使用しません。
cdlOFNNoDereferenceLinks, OFN_NODEREFERENCELINKSショートカットファイルの参照を禁止します。（ショートカットファイルを選択できるようにします） このフラグを設定しない場合、ショートカットファイルを指定すると、参照先のファイルが設定されます。
cdlOFNLongNames, OFN_LONGNAMES長いファイル名を使用します。

BrowserFolder 関数 CommonDialog...

フォルダー選択ダイアログを開きます.

ans = commdlg.BrowserFolder()

引数
なし
返値
[キャンセル]またはDialogを閉じた場合、undefined値を返します。
[OK]で選択したフォルダーのフルパスが返されます。
例
var {CommonDialog} = require('commDlg');

var dlg = new CommonDialog();

dlg.DialogTitle = "フォルダを選択してください";
dlg.InitDir = "d:\\work";  //初期選択フォルダー

var ans = dlg.BrowserFolder();

if (ans) {
  print(ans); // 選択したフォルダーのフルパス名
}