Ocsigen Toolkit provides various user interface widgets and related utilities that assist in the rapid development of interactive Web applications.
Ocsigen Toolkit is built with Eliom.
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).
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.
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.
Ot_buttons: provides a dropdown menu widgetOt_calendar: calendar widget, allowing the user to pick datesOt_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 screenOt_color_picker: color picker widgetOt_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 picturesOt_popup: popup windows that can be controlled in various waysOt_range: widget for picking one among a range of valuesOt_spinner: a spinner that appears while we wait for "slow" HTML content to be generatedOt_swipe: make element swipeable on touch screensOt_time_picker: clock-like widget that allows the user to pick a timeOt_toggle: binary toggle widgetOt_nodeready: produces an Lwt thread allowing one to wait for a node to be inserted in the DOMOt_noderesize: listen to element resize eventsOt_size: utilities to deal with DOM element dimensionsOt_lib: functions useful for other widgetsOt_sticky: make elements "sticky", i.e., do not let them go out of sightOt_style: an interface to Window.getComputedStyle()