ErlyWebのアプリケーション

ErlyWebのディレクトリ構造

以下は、musicアプリケーションの最初のテンプレートのディレクトリ構造です。
(ここまでのことはErlyWebのインストールを参照)

└─music
   ├─src
   │  │  music_app_controller.erl
   │  │
   │  └─components
   │          html_container_view.et
   │          html_container_controller.erl
   │
   ├─www
   │      index.html
   │      style.css
   │
   └─ebin

/musicパス以下へのアクセスは music/src以下のソースファイルによって処理されます。それ以外へのアクセスは、music/www 以下に対して通常のYawsとして動作します。

[編集]

コンポーネントについて

ErlyWebにアクセスするときはyaws.confのappmods=<"パス名", erlyweb>で指定したパス名にアクセスすることができます。上記例では、アプリケーション名(AppName)はmusicになりますがパス名とアプリケーション名は関係ありません。
http://サーバ/パス名/コンポーネント名(ComponentName)/関数名/引数1/引数2/...　のようなパスにアクセスすると、以下で説明するコンポーネントのコントローラファイル中の関数が指定した引数を使って呼び出されます。コンポーネント名だけ指定すると、コンポーネント中のindex(Arg)関数が呼び出されます。

[編集]

コンポーネントの作成

コンポーネントはコントローラファイルとビューファイルからなり、/src/componentsフォルダ内に作成します。コントローラファイルにはモデルを使うことがあります。モデルはデータベースを使用するときに使うので、今回のテストでは触れません。また、ビューファイルは使用しないのであれば必要ありません。
コンポーネントのファイルの名前はコンポーネント名を使って次のようにします。コントローラファイルは　[ComponentName]_controller.erl　でビューファイルは[ComponentName]_view.[Extension]になります。[Extension]はErlangファイルの場合は 'erl'でテンプレートファイルの場合は 'et' です。

[編集]

テンプレートを使用してみる

[編集]

コンポーネントを作成する

テンプレートを使用したコンポーネントを作成してみます。名前は forms にしました。コントローラファイル forms_controller.erlとビューファイルforms_view.etをcomponentsフォルダ内に作成します。
（内容は music と関係ないです。＾＾）

最後の {data, ...}でテンプレートにデータを渡して出力させます。コンポーネントの各関数の出力については、以下を参考にしてみたください。

http://erlyweb.org/doc/

forms_controller.erl

-module(forms_controller).

-export([index/1]).

index(A) ->
	case yaws_arg:method(A) of
		'GET' ->
        	Sel = get;
		'POST' ->
            % fruitsの値を取得します。
            case yaws_api:postvar(A,"fruits") of
                {ok,Val} ->
                    Sel = Val;
                Ret ->
               	    % 取得できなかった場合の返り値をSelに代入します。
                    Sel = yaws_api:f("~p",[Ret])
            end
    end,
    % テンプレートにデータを渡して表示します。
   {data, {Sel, "Fruits List",[{"1","Apple"},{"2","Grape"},{"3","Orange"}]}}.

テンプレートを作成します。テンプレートの書式の詳細はこちら

ちなみに<%! xxxx %>はコメントで<%@ func(xxx) %>は関数を実行します。
<% erlang code %>はerlangのコードを実行します。

forms_view.et

<%! コントローラファイルの index() から渡されたデータを使用して
結果を出力します %>
<%@ index({Method,Title,Fruits}) %>
<html>
<head>
<title>Table List</title>
<link rel="stylesheet" href="/style.css" type="text/css">
</head>
<body>
<div id="content">
<h1><% Title %></h1>
<%! erlnagのコードを実行します。
最初の引数がgetの場合だけformを表示し,その他の場合は、Selの内容を表示します 
%>
<% 
case Method of
	get -> form(Fruits);　% formを呼び出します
	Val -> "<div>Your Select:"++Val++"<div>"
end
%>

<%! データからテーブルを表示します %>
<table>
<%! リストから順番に下にある　fruits 関数を呼び出します。　%>
<% [fruits(Number, Name) || {Number, Name} <- Fruits] %>
</table>
<br>
</div>
</body>
</html>

<%! ------- 以下関数 ---------- %>
<%! formを出力します。 %>
<%@ form(Fruits) %>
<form method="POST">
Fruits:
<select name="fruits">
<% [fruitsOption(Name) || {_Number, Name} <- Fruits] %>
</select>
<input type="submit"/>
</form>

<%@ fruitsOption( Name) %>
  <option value="<% Name %>"><% Name %></option>

<%! テーブルのレコードを出力します。 %>
<%@ fruits(Number, Name) %>
<tr>
  <td><% Number %></td>
  <td><% Name %></td>
</tr>

コンパイルします。

(win@PC-114)2> erlyweb:compile("/work/apps/music",[]).
debug:erlyweb_compile:382: Compiling Erlang file "music_app_controller"
debug:erlyweb_compile:382: Compiling Erlang file "forms_controller"
debug:erlyweb_compile:377: Compiling ErlTL file "forms_view"
debug:erlyweb_compile:382: Compiling Erlang file "html_container_controller"
debug:erlyweb_compile:377: Compiling ErlTL file "html_container_view"
{ok,{{2008,2,22},{10,27,53}}}

[編集]

実行結果

http://localhost:8000/music/forms/ を開きます。

実行すると選択した結果が表示されます。

ErlyWebのテンプレート

目次

ErlyWebのアプリケーション

ErlyWebのディレクトリ構造

コンポーネントについて

コンポーネントの作成

テンプレートを使用してみる

コンポーネントを作成する

実行結果