Fmlib_browser (fmlib_browser.Fmlib

Utilities

module Random : sig ... end

Generate Random Numbers

module Time : sig ... end

Posix Time

module Event_flag : sig ... end

Event flags to stop propagation and prevent default action.

Encode and Decode Javascript Values

module Value : sig ... end

Javascript Values

module Decoder : sig ... end

Decoder for Javascript Values

Virtual Dom

module Attribute : sig ... end

Attributes of Dom Elements.

module Html : sig ... end

Virtual Dom

Commands and Subscriptions

module Task : sig ... end

Tasks to be performed within Commands

module Command : sig ... end

Commands to be executed as a result of an update operation.

module Subscription : sig ... end

Subscriptions to global events.

Debugging

val debug : string -> unit

debug str Log str to the console as a side effect.

val debug_value : Value.t -> unit

debug_value v a Log the javascript value v to the console as a side effect.

Sandbox Applications

A sandbox application has only limited user interactions. A sandbox application cannot execute commands. It can only get messages from user interactions like mouse clicks, keyboard strokes on elements in focus etc.

The dom of a sandbox application is put directly under the body of the html page i.e. it occupies the whole browser window.

val sandbox : 
  'state ->
  ('state -> 'msg Html.t) ->
  ('state -> 'msg -> 'state) ->
  unit

sandbox state view update

A sandbox application is started with the command

let _ = sandbox state view update

and it needs only a very simple html file of the form

        <!-- file: index.html -->
        <!DOCTYPE html>
        <html>
            <head>
                <script type="text/javascript" src="webapp.js">
                </script>
            </head>
            <body>
            </body>
        </html>

The application is started on the onload event of the browser window.

val sandbox_plus : 
  'state ->
  ('state -> 'msg Html.t) ->
  ('state -> 'msg Subscription.t) ->
  ('state -> 'msg -> 'state) ->
  unit

sandbox_plus state view subs update

A sandbox_plus application is like a sandbox application. In addition it can receive notifications.

Full Web Application

A full web application has full user interaction, can execute arbitrary commands and subscribe to all possible global events.

val application : 
  string ->
  ('state * 'msg Command.t) Decoder.t ->
  ('state -> 'msg Html.t * string) ->
  ('state -> 'msg Subscription.t) ->
  ('state -> 'msg -> 'state * 'msg Command.t) ->
  unit

application my_app init view subs update

Browser application named my_app on the javascript side. The application creates the global object named my_app which contains the two functions init and post.

The application is started on the javascript side with

        my_app.init ({
            data: <initialisation object>,
            onMessage: <function to receive messages on the javascript side from
                        the application>
        })

The javascript code can post messages to the application by

        my_app.post (message)

val basic_application : 
  'state ->
  'msg Command.t ->
  ('state -> 'msg Html.t * string) ->
  ('state -> 'msg Subscription.t) ->
  ('state -> 'msg -> 'state * 'msg Command.t) ->
  unit

basic_application state command view subs update

A basic_application is like an application which cannot interact with the surrounding javascript. I.e. it cannot receive initialization date, it cannot receive messages and cannot send messages from the javscript world.

Element Application

An element application is like application above with the difference that the dom is inserted directly under a certain element of the dom tree. The web application generated by the library does not touch the dom outside the user chosen element.

Purpose of the element application: Use an already written webapplication in javascript and add certain functions written in ocaml by using this library.

The element application offers a smooth path to start using the library without rewriting an already existing application from scratch.

The javascript part and the ocaml part can communicate via message passing i.e. the javascript part can post a javascript object to ocaml (see Subscription.on_message) and the ocaml part can send javascript objects (see Value and Task.send_to_javascript).

val element : 
  string ->
  ('state * 'msg Command.t) Decoder.t ->
  ('state -> 'msg Html.t) ->
  ('state -> 'msg Subscription.t) ->
  ('state -> 'msg -> 'state * 'msg Command.t) ->
  unit

element my_app init view subs update

Browser application named my_app on the javascript side. The application creates the global object named my_app which contains the two functions init and post.

The application is started on the javascript side with

        my_app.init ({
            data: <initialisation object>,
            element_id: <id of the element under which the application works>,
            onMessage: <function to receive messages on the javascript side from
                        the application>
        })

The javascript code can post messages to the application by

        my_app.post (message)