Miscellaneous

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"],
     Site_tree
       (Default_page hier4,
         [([pcdata "submenu 3"],
          Site_tree
             (Not_clickable,
              [([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"],
     Site_tree
       (Main_page hier8,
        [([pcdata "page 9"], Site_tree (Main_page hier9, []));
         ([pcdata "page 10"], Site_tree (Main_page hier10, []))]
       )
    )
  ]
  )

let f i s () () =
  return
    (html
       (head (title (pcdata ""))
          ((style ~contenttype:"text/css"
             [cdata_style
 "a {color: red;}\n\n  li.eliomtools_current > a {color: blue;}\n\n  .breadthmenu li {\n\n    display: inline;\n\n    padding: 0px 1em;\n\n    margin: 0px;\n\n    border-right: solid 1px black;}\n\n  .breadthmenu li.eliomtools_last {border: none;}\n\n                "])::
                Html5_tools.F.structure_links mymenu ~service:s ())
             )
       (body [h1 [pcdata ("Page "^string_of_int i)];
              h2 [pcdata "Depth first, whole tree:"];
              div
                (Html5_tools.F.hierarchical_menu_depth_first
                   ~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:"];
              div
                (Html5_tools.F.hierarchical_menu_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)

Atom

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