HTML widgets

Images, CSS, Javascript

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

img ~alt:"Ocsigen"
            ~service:(Eliom_service.static_dir ())
            ["images"; "ocsigen1024.jpg"])

The function Eliom_content.​Html.​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:

         ~service:(Eliom_service.static_dir ()) ["style.css"]) ()
         ~service:(Eliom_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.​create).

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\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                "