====== AJAXによる更新 ======

昨今のウェブアプリでは、JavaScriptによるクライアントサイドプログラムとの協業が欠かせません。
ここでは、サーバサイドにRESTインタフェースを作り、AJAXによる画面更新の例を紹介します。


{{ :prog_cgi:ajax_result.png?direct&300|}}

====== 作成するアプリ ======

  * 数字入力欄を４つ用意する。
  * 数字を入力すると、即座にその値を表した棒グラフが表示される。
  * 数字を変えると、棒グラフもリアルタイムに変わる。


====== 実装開始 ======

hello worldをベースにします。リスト表示の時ややこしいので、READMEファイルは削除しておいてください。

<code sh>
cd controllers
cp -r 00_hello ajax
cd ajax
rm README
</code>

コントローラ名を、変更します。併せてrequireを以下の通り修正してください。

<code ruby main.rb>
require "alone"
require "al_graph"

class AjaxSampleController < AlController
</code>

===== デフォルトアクションの実装 =====

コントローラは、不要なコードを削除した程度で、機能の変更はありません。 

<code ruby main.rb>
  def action_index()
    AlTemplate.run("index.rhtml")
  end
</code>

デフォルトの画面は、今回静的なものなので、本来ならばテンプレート化する必要もありません。

<code html index.rhtml>
<%= header_section %>
<style>
  input[type=text] { text-align: right; }
</style>

<%= body_section %>

<div id="graph"></div>

値１<input type="text" name="v1" value=""><br>
値２<input type="text" name="v2" value=""><br>
値３<input type="text" name="v3" value=""><br>
値４<input type="text" name="v4" value=""><br>

<%= footer_section %>
</code>


===== AJAXによる更新 =====

Aloneでは、サーバサイドとの連携のためのJavaScriptライブラリ、"alone.js" を同梱していますので、それを使います。 
また、今回はクライアントサイドの補助ライブラリとして、jqueryを使っています。 

JavaScriptでは、各テキストボックスに値が入力されたことをトリガーに動作を始めます。
そのハンドラでは、AJAX通信を使ってグラフ生成のREST-APIを使い、結果を <div id="graph"> へ、挿入します。
REST-APIはアクション名 get_graph を使い、追加パラメータとして v1 から v4 の4つの入力値を与えています。

<code html index.rhtml>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/js/alone.js"></script>
<script>
$("input").change( function() {
  var v1 = $("input[name=v1]").val();
  var v2 = $("input[name=v2]").val();
  var v3 = $("input[name=v3]").val();
  var v4 = $("input[name=v4]").val();

  var uri = Alone.make_uri({action:"get_graph", v1:v1, v2:v2, v3:v3, v4:v4});
  $("#graph").load( uri );
});
</script>
</code>


===== REST APIの実装 =====

実際にグラフを描画する機能を、REST APIとして実装します。

Aloneでは、ブラウザからのアクセスは全て action に割り当てられます。先ほど、JavaScriptのコード中で、"get_graph"と名前をつけていますので、def action_get_graph と定義することになります。

<code ruby main.rb>
  def action_get_graph()
    form = AlForm.new(
      AlText.new("v1"),
      AlText.new("v2"),
      AlText.new("v3"),
      AlText.new("v4"),
    )
    form.validate()
    ydata = [ form[:v1].to_f, form[:v2].to_f, form[:v3].to_f, form[:v4].to_f ]

    graph = AlGraph.new()
    graph.set_mode( :NO_XML_DECLARATION )

    graph.add_data_bar(ydata)
    graph.draw()
  end
</code>

パラメータとして渡された v1からv4を取得するために、AlFormを定義します。
AlGraphオブジェクトを作り、formから得た値を add_data_bar()メソッドに与えることで、棒グラフを生成します。

set_mode()メソッドで、:NO_XML_DECLARATION モードを設定していますが、この指示をすることでグラフ生成結果にDOCTYPE宣言とxml宣言をしなくなります。
現在のブラウザでは、この指示をしてもしなくても正しく動作するものがほとんどですが、念の為つけています。

これで完了です。

{{:prog_cgi:ajax_result.png?nolink|}}


===== プログラム全体 =====
 プログラム全体を再掲します。

  * コントローラ main.rb
  * テンプレート（ビュー） index.rhtml


<code ruby main.rb>
require "alone"
require "al_graph"

class AjaxSampleController < AlController
  def action_index()
    AlTemplate.run("index.rhtml")
  end

  def action_get_graph()
    form = AlForm.new(
      AlText.new("v1"),
      AlText.new("v2"),
      AlText.new("v3"),
      AlText.new("v4"),
    )
    form.validate()
    ydata = [ form[:v1].to_f, form[:v2].to_f, form[:v3].to_f, form[:v4].to_f ]

    graph = AlGraph.new()
    graph.set_mode( :NO_XML_DECLARATION )

    graph.add_data_bar(ydata)
    graph.draw()
  end
end
</code>

<code html index.rhtml>
<%= header_section %>
<style>
  input[type=text] { text-align: right; }
</style>

<%= body_section %>

<div id="graph"></div>

値１<input type="text" name="v1" value=""><br>
値２<input type="text" name="v2" value=""><br>
値３<input type="text" name="v3" value=""><br>
値４<input type="text" name="v4" value=""><br>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/js/alone.js"></script>
<script>
$("input").change( function() {
  var v1 = $("input[name=v1]").val();
  var v2 = $("input[name=v2]").val();
  var v3 = $("input[name=v3]").val();
  var v4 = $("input[name=v4]").val();

  var uri = Alone.make_uri({action:"get_graph", v1:v1, v2:v2, v3:v3, v4:v4});
  $("#graph").load( uri );
});
</script>

<%= footer_section %>
</code>