Ocsigen

Toolkit

Home

Doc

Blog

Eliom

Js_of_ocaml

Server

Lwt

Tyxml

Start

Ocsigen Toolkit

Ocsigen Toolkit is a set of reusable user-interface widgets for Eliom applications. The widgets can be produced on the server or on the client from the same code, which makes them particularly suited to mobile, client-server applications.

Ocsigen Toolkit is part of the Ocsigen project.

Installation and getting started

You can install Ocsigen Toolkit via OPAM:

opam install ocsigen-toolkit

You may want to use Ocsigen Toolkit in conjunction with Ocsigen Start, which provides an application template for quickly getting started with Ocsigen. The template provides various runnable examples of Ocsigen Toolkit widgets. See the Ocsigen Start manual for details.

See the widgets in action in Ocsigen Start's demo application (also available for Android and iOS, or in your mobile browser).

Programming style

Most of the Ocsigen Toolkit widgets can be produced invariably on the server or on the client (with the same code). This enables a mobile-friendly programming paradigm, where most code lies in shared sections. The server instance of the code can be used to produce pages (with Ocsigen Toolkit widgets) during traditional Web interaction, while the client instance can be used to render the same pages and widgets on a mobile device without contacting the server. See the mobile applications section of the Eliom manual for details.

The widgets generally follow a reactive programming style. We use Eliom.Shared extensively, which allows us to produce this reactive content on both sides. See the respective manual chapter for more info. Eliom.Shared signals and events appear in the Ocsigen Toolkit APIs, and can be used as a mechanism for composing different widgets.

CSS

Most widgets need appropriate CSS to display properly. We provide default CSS files, normally installed in

~/.opam/${SWITCH}/share/ocsigen-toolkit/css/

Ocsigen Start uses these files by default. If your application does not use Ocsigen Start, you will need to include the CSS manually.

Of course, you are free to modify the style to suit the desired look.

Widgets overview

  • Ot.Buttons: provides a dropdown menu widget
  • Ot.Calendar: calendar widget, allowing the user to pick dates
  • Ot.Carousel: container for blocks, only one of which is displayed at a time, with various ways to move between them (buttons, swipe, keyboard arrows)
  • Ot.Tongue: swipable element appearing from one side of the screen
  • Ot.Color_picker: color picker widget
  • Ot.Drawer: a drawer menu that typically appears on an edge of the screen. It can appear/disappear via buttons or by swiping.
  • Ot.Picture_uploader: user interface for uploading pictures
  • Ot.Popup: popup windows that can be controlled in various ways
  • Ot.Range: widget for picking one among a range of values
  • Ot.Spinner: a spinner that appears while we wait for "slow" HTML content to be generated
  • Ot.Swipe: make element swipeable on touch screens
  • Ot.Time_picker: clock-like widget that allows the user to pick a time
  • Ot.Toggle: binary toggle widget

Non-widget utilities

  • Ot.Nodeready: produces an Lwt thread allowing one to wait for a node to be inserted in the DOM
  • Ot.Noderesize: listen to element resize events
  • Ot.Size: utilities to deal with DOM element dimensions
  • Ot.Lib: functions useful for other widgets
  • Ot.Sticky: make elements "sticky", i.e., do not let them go out of sight
  • Ot.Style: an interface to Window.getComputedStyle()