webixとREST_API(業務アプリ）について

webixというJavascriptのライブラリを紹介していますが、Webixというライブラリは、ほとんどJavascriptだけで、希望するリッチクライアントの画面を描画できます。（一部、スタイル定義にCSSを利用しますが）HTMLタグを使わずに、フォーム画面や一覧表を簡単に定義して実装できます。かつ、画面に表示するデータは、Ajax通信で、画面を開いた後に、ボタン操作やマウス操作のイベントで、サーバ側に条件情報を渡して、、結果をJSONデータで取得して特定の画面コンポーネントに設定できます。一覧表は、JSONタグと一覧表のフィールド名が一致している場合は、Parse関数で設定して描画できます。とても簡単な記述で、業務で扱う画面を構築できるメリットがあります。EXCELやCSV情報のインポート機能や一覧情報をEXCELやCSVで出力することも可能です。PHP側でライブラリを使えば、PDFで表示したり、出力も可能で、電子帳簿対応の機能なども簡単に実装できます。サーバ側は、PHP言語以外にも実装可能ですが、本記事では、PHP言語で紹介します。
今回は、Webix（UI）とサーバ側(PHP言語）側のAjax通信について、少し詳しく紹介します。
webixというライブラリを公開しているサイトに詳しいドキュメントがあります。日本語での記述ではありませんが、翻訳機能を使えば、わかりやすい日本語に簡単に変換できます。英語の文章が、きちんと記述されているので、自動翻訳しても大丈夫です。
Ajaxに関する記事は、以下のURLで紹介されています。

Ajax Operations - AJAX usage: POST requests, JSON sending, incoming data parsing, etc. Webix Docs

簡単なメソッドは、GETとPOSTです。同期処理も非同期処理も実装できます。同期処理は、リクエストした結果が返信されるまで待つ実装です。非同期処理は、リクエストした処理はそのまま継続し、次のUI操作に移るロジックがかけます。(時間のかかる検索や更新処理で、並列して処理した場合など有効です。）GET時は、URLにパラメータを記載し、POST時は、大量の情報を含め、URLとは別の領域でサーバに情報を渡すことができます。このあたりは、通常のhttpプロトコルと同じ動作です。Webix（Javascript）から送信したメソッドとパラメータは、PHP言語の場合、簡単に取り出すことができます。リクエストタイプ（GETかPOSTかを判断し、パラメータのキー情報を指定して、PHPの変数に代入するイメージです）
配列情報は、そのままでは、送信できませんので、配列情報をJSON形式の文字列にJavascript側で変換してパラメータとして付与、PHP側では、一度、文字列のデータで受信し、その後、JSON形式を意識して連想配列に変換するメソッドを記述すれば、PHP言語内の連想版列に簡単に組み込めます。例えば、画面に検索条件を指定してDBを検索し、その結果を一覧に反映したい場合は、検索パラメータをGETメソッドに付与し、送信します。複数の検索条件を指定できるようにAPIを実装し、PHP言語（サーバ側）で、対象パラメータがあるかをチェックしながら、検索条件を取り出すことが可能です。取り出した検索条件からDBを検索し、フィールド名を連想配列のキーにして読み出すように指定すれば、そのまま、JSON形式に変換して画面に応答することもできます。Webix(Javascript)側では、応答結果を確認し、正常に応答があった場合は、JSON形式のデータを取り込み、一覧にする画像コンポーネントにparseすれば、簡単に一覧表示できます。実際にコーディングして動作を確認すれば、いかに簡単に実装できるかを実感できます。
前回のサンプルで記述したソースからAjax部分だけ取り出すと、以下のようになります。

    var send_prm = {};
    send_prm.userid = userid;
    var xhr =webix.ajax().sync().get("<?php  echo SUB_FOLDER; ?>/rest_api/ZTEST/ZTEST_get_users.php",send_prm);
    var resp = xhr.responseText;
    var resp_info = JSON.parse(resp);
    var resp = resp_info["resp"];
    if(resp_info["resp"] == "ok"){
        $$("table01").parse(resp_info.val_array);
        var array_count = resp_info.val_array.length;
        $$("lists_count").setValue(array_count);
        if(array_count > 0){
            webix.message({type:"success",text:"従業員一覧を読出ししました。"});
        }
        else{
            webix.alert("検索結果は0件です。");
        }
    }
    else{
        webix.message({type:"error",text:"従業員一覧を確認できませんでした｡"});
    }

サーバに送信する情報は、ユーザ情報(userid)だけにしています。すべてのデータを取得するため、絞り込むパラメータの指定をしていません。
PHP（サーバ）からの応答は、OK/NGを示すrespとrespが”ok"のときに、val_arrayに連想配列で結果が入る構造にしています。
var xhr =webix.ajax().sync().getでアクセス先のURLと送信パラメータを指定し、同期処理で記述しているので、結果は、xhr変数に代入されます。
xhr変数からresponseText部分を取り出し、JSON形式でparsdすると、大きく、resp情報とval_array情報で返信情報を取り出すことができます。
サンプルでは、resp変数が”ok"なら、val_array情報（配列）を事前に定義している画面コンポーネント$$("table01")にparseメソッドで代入します。
代入と同時に、画面には、一覧表示されます。
画面上の一覧表は、datatableというコンポーネントで定義します。
各コンポーネントは、連想配列で定義します。詳細は、Webixのマニュアルを参照していただければ、理解でします。datatableは、columsというキーで列情報を配列で定義しますが、フィールドを識別するidや名称、フィルタの定義、サイズ、フォーマットなども定義します。テーブルの初期データは、
[]なら、無しで、初期データを配列で指定も可能です。サンプルソースでは、各画面コンポーネントを定義（webix.uiメソッドで実施）後に、定義した関数get_table_lists()で、サーバ側にと問い合わせ（Ajax通信）して、応答結果を定義したdatatableに、$$("table01").parse(resp_info.val_array)で設定しています。datatableを指定するidを"table01"で定義しているので、$$(指定id).parse(代入したい値が入った配列)で描画できます。画面コンポーネントを連想配列で事前に定義し、定義した配列に対し、parseメソッドで値を代入。
値は、サーバ側からJSONフォーマットで受信し、キー情報と一覧表のフィールドidが一致していれば、自動的に代入して描画できます。とっても簡単なコーディングでリッチな一覧表を表示できます。

{view:"datatable",
   id:"table01",
   columns:[
       { id:"id"         ,header:"id"                                  ,width:60 , css:{"text-align":"right"},sort:"int"},
       { id:"username"  , header:["名前"    , {content:"textFilter"} ] ,width:100,                            sort:"string"}, 
       { id:"section_id", header:["所属組織", {content:"selectFilter"}],width:100, options:section_options,   sort:"string"},
       { id:"tel_no"    , header:["内線番号", {content:"textFilter"}]  ,width:100, css:{"text-align":"right"},sort:"int"},
       { id:"entry_date", header:["入社日"  , {content:"selectFilter"}],width:120, css:{"text-align":"right"},sort:"string"}
   ],
   data: [],
   select:"row",
}

ポイントは、定義する各コンポーネントのid情報は、同じ画面では、ユニークにするということ。重複した定義をすると、エラーとなり描画できません。ブラウザには、Javascriptのデバッガーがありますので、ソースを表示させて動作させれば、エラー箇所も指摘され、修正も可能です。（ソースがある程度、動く状態でないと、エラーにもならないことがありますが）
次回は、サーバ側のデータをDB上に格納して、一覧表示したり、その情報を編集して、サーバに送信し、更新処理したりする操作を記述します。お待ちください。