Ocsigenで再帰するフォーム

Ocsigenで再帰するフォームを作ってみた。

OcsigenのチュートリアルのActionというところを真似してみた。

作ってみたページの外観↓
再帰するフォーム(html)（入力しても意味ないよ）

以下はそのコード

open XHTML.M
open Eliom
open Eliom.Xhtml
open Lwt

let list_mapi f l =
  let rec local i = function
    | [] -> []
    | hd::tl -> f i hd :: local (i+1) tl
  in
    local 0 l

let mylist = ref []

let table_of_hitchart () =
  table 
    (tr (td[pcdata "[トラック]"]) [td[pcdata "　　[曲名]"]])
    (list_mapi (fun i s ->
		  tr (td[pcdata (string_of_int(i+1))]) [td[pcdata s]]) !mylist)

let my_table = create_table ()



let action_session = 
  new_service ~url:["add"] ~get_params:unit ()

let connect_action = 
  new_post_coservice' ~post_params:(string "moji") ()
    
let disconnect_action = 
  Actions.register_new_post_coservice'
    unit 
    (fun sp () () -> 
      close_session sp >>= 
      (fun () -> return []))

let disconnect_box sp s = 
  post_form disconnect_action sp 
    (fun _ -> [p [submit_input s]]) ()

let input_box sp moji = 
  [p [pcdata "曲目を追加する: "; 
      string_input moji]]

let home_action sp () () = 
  let f = post_form connect_action sp (input_box sp) () in
  return
    (html
       (head (title (pcdata "ADD")) [])
       (body [h1 [pcdata "recursive form Example"];
	      h2 [pcdata "再生する曲目リスト"];
	      f;
	      table_of_hitchart()]))
    
let _ = register ~service:action_session home_action

let rec launch_session sp moji =
  mylist := (moji :: !mylist);
  set_session_data my_table sp moji

let _ = Actions.register
    connect_action
    (fun sp () login -> 
      close_session sp >>=
      (fun () -> launch_session sp login;
        return []))

Ocsigenでフォームを作ってみる

Ocsigenで入力フォームを作ってみた。

こんなページができた: ページの外観(html)(ボタンは押しても意味ないよ。)

このページを生成するプログラムを以下のようにかいた。

open XHTML.M
open Eliom
open Eliom.Xhtml
open Lwt

let no_post_param_service = 
  register_new_service 
    ~url:["post"]
    ~get_params:unit
    (fun _ () () -> return
      (html
         (head (title (pcdata "")) [])
         (body [h1 [pcdata 
                      "Version of the page without POST parameters"]])))

let my_service_with_post_params = 
  register_new_post_service
    ~fallback:no_post_param_service
    ~post_params:(string "value1" ** string "value2")
    (fun _ () (value1,value2) ->  return
      (html
         (head (title (pcdata value1)) [])
         (body [h1 [pcdata value2]])))

let form2 = register_new_service ["form2"] unit
  (fun sp () () -> 
     let f =
       (post_form my_service_with_post_params sp
          (fun (chaine1, chaine2) -> 
            [p [pcdata "TITLE: ";
                string_input chaine1];
	     p [pcdata "BODY: ";
		string_input chaine2];
	     p [submit_input "GO"]]) ()) in
     return
       (html
         (head (title (pcdata "form")) [])
         (body [f])))

このフォームにはふたつの入力ボックスがある。

例えば上のボックスに hugahuga 下のボックスに mugomugo と入力して、ボタンを押すと、タイトルが hugahuga で、本文が mugomugo であるようなページに遷移する。

ちょうど、こんな感じのページ(html)だ。

ちなみに入力ボックス内にタグを入れられても、それは単なる文字列として扱い、入力によってページの構造を破壊されることを防いでいる。
タグを入れられても大丈夫！(html)

Ocsigen入門 手順7

7. ブラウザで確認

ブラウザを起動してhttp://localhost/my_samples/helloにアクセスしてみる。

できた！

Ocsigenで生成されたページのソース(html)

Ocsigen入門 手順6

6. ocsigenを起動

# ocsigen
で、ocsigenを起動させた。

Ocsigen入門 手順5

5. コンパイルして、ocsigen.confを設定

先ほどのファイルhello.mlを以下のようにコンパイルした。

$ ocamlc -I /usr/local/GODI/lib/ocaml/site-lib/ocsigen/ -c hello.ml

これで/home/source/ディレクトリ内にhello.cmoというファイルができあがった。

そして/etc/ocsigen/にあるocsigen.confというocsigenの設定ファイルに以下の3行を追加した。

      <site dir="my_samples" charset="iso-8859-1">
        <eliom module="/home/source/hello.cmo" />
      </site>

これでmy_samplesというディレクトリの中で、先ほど指定したプログラムによるページがみれるはずである。