Warning: Reason support is experimental. We are looking for beta-tester and contributors.


HTML widgets

Images, CSS, Javascript

To include an image, simply use function Eliom_content.Html5.D.img:

img ~alt:"Ocsigen"
    ~src:(Eliom_content.Html5.F.make_uri ~service:(Eliom_service.static_dir ()) ["images"; "ocsigen1024.jpg"])

The function Eliom_content.Html5.D.make_uri creates a relative URL string from current URL (see above) to the URL of the image (here in the static directory configured in the configuration file).

To simplify the creation of <link> tags for CSS or <script> tags for Javascript, use the following functions:

css_link ~uri:(make_uri ~service:(static_dir ()) ["style.css"]) ()
js_script ~uri:(make_uri ~service:(static_dir ()) ["funs.js"]) ()

Basic menus

To build a menu on your web page, you can use the function Eliom_tools.menu. First, define your menu like this:

let mymenu current =
  Eliom_tools.menu ~classe:["menuprincipal"]
    (home, %:xmllist< Home >>)
     (infos, %:xmllist< More info >>);
     (tutorial, %:xmllist< Documentation >>)
   ] current

Here, home, infos, and tutorial are your three pages (generated for example by Eliom_service.App.service).

Then mymenu service:home will generate the following code:

<ul class="menu menuprincipal"> <li class="current first">Home </li> <li><a href="infos">More info</a> </li> <li class="last"><a href="tutorial">Documentation</a> </li> </ul>

Personalize it in your CSS stylesheet.

Eliom_tools.menu takes a list of services without GET parameters. If you want one of the links to contain GET parameters, pre-apply the service.

Hierarchical menus

(* Hierarchical menu *)
open Eliom_tools_common

let hier1 = service ~path:["hier1"] ~get_params:unit ()
let hier2 = service ~path:["hier2"] ~get_params:unit ()
let hier3 = service ~path:["hier3"] ~get_params:unit ()
let hier4 = service ~path:["hier4"] ~get_params:unit ()
let hier5 = service ~path:["hier5"] ~get_params:unit ()
let hier6 = service ~path:["hier6"] ~get_params:unit ()
let hier7 = service ~path:["hier7"] ~get_params:unit ()
let hier8 = service ~path:["hier8"] ~get_params:unit ()
let hier9 = service ~path:["hier9"] ~get_params:unit ()
let hier10 = service ~path:["hier10"] ~get_params:unit ()

let mymenu =
   (Main_page hier1),

   [([pcdata "page 1"], Site_tree (Main_page hier1, []));

    ([pcdata "page 2"], Site_tree (Main_page hier2, []));

    ([pcdata "submenu 4"],
       (Default_page hier4,
         [([pcdata "submenu 3"],
              [([pcdata "page 3"], Site_tree (Main_page hier3, []));
               ([pcdata "page 4"], Site_tree (Main_page hier4, []));
               ([pcdata "page 5"], Site_tree (Main_page hier5, []))]

          ([pcdata "page 6"], Site_tree (Main_page hier6, []))]

    ([pcdata "page 7"],
     Site_tree (Main_page hier7, []));

    ([pcdata "disabled"], Disabled);

    ([pcdata "submenu 8"],
       (Main_page hier8,
        [([pcdata "page 9"], Site_tree (Main_page hier9, []));
         ([pcdata "page 10"], Site_tree (Main_page hier10, []))]

let f i s () () =
       (head (title (pcdata ""))
          ((style ~contenttype:"text/css"
 "a {color: red;}\n
  li.eliomtools_current > a {color: blue;}\n
  .breadthmenu li {\n
    display: inline;\n
    padding: 0px 1em;\n
    margin: 0px;\n
    border-right: solid 1px black;}\n
  .breadthmenu li.eliomtools_last {border: none;}\n
                Html5_tools.F.structure_links mymenu ~service:s ())
       (body [h1 [pcdata ("Page "^string_of_int i)];
              h2 [pcdata "Depth first, whole tree:"];
                   ~whole_tree:true mymenu ~service:s ());
              h2 [pcdata "Depth first, only current submenu:"];
              div (Html5_tools.F.hierarchical_menu_depth_first mymenu ~service:s ());
              h2 [pcdata "Breadth first:"];
                   ~classe:["breadthmenu"] mymenu ~service:s ())]))

let _ =
  register hier1 (f 1 hier1);
  register hier2 (f 2 hier2);
  register hier3 (f 3 hier3);
  register hier4 (f 4 hier4);
  register hier5 (f 5 hier5);
  register hier6 (f 6 hier6);
  register hier7 (f 7 hier7);
  register hier8 (f 8 hier8);
  register hier9 (f 9 hier9);
  register hier10 (f 10 hier10)


An extension is provided to build Atom fields (modules Eliom_atom and Atom_feed).