package fmlib_browser

  1. Overview
  2. Docs
Write web applications for the browser in elm style

Install 

dune-project
 Dependency

github.com Readme Changelog Edit opam file Versions (9)

Authors

  1. H
    Helmut Brandl <helmut.brandl@gmx.net>

Maintainers

  1. H
    Helmut Brandl <helmut.brandl@gmx.net>

Sources

0.6.0.tar.gz
sha256=650393b6315075780d51cc698e2ee19bc359f114fc39365fbe137b24f663189e

doc/fmlib_browser/Fmlib_browser/index.html

Module Fmlib_browserSource

Web Applications Running in the Browser

This library helps to write web applications which run in the browser. See some simple live examples and their source code.

For a step by step introduction see "Introduction to Web Applications".

Utilities

Sourcemodule Random : sig ... end

Generate Random Numbers

Sourcemodule Time : sig ... end

Posix Time

Sourcemodule File : sig ... end

A file handle that represents a user-selected file in the local filesystem. See Command.select_file and Command.select_files on how to obtain file handles.

Sourcemodule Event_flag : sig ... end

Event flags to stop propagation and prevent default action.

Sourcemodule Url : sig ... end

Construct and parse URLs.

Sourcemodule Navigation : sig ... end

Encode and Decode Javascript Values

Sourcemodule Value : sig ... end

Javascript Values

Sourcemodule Decoder : sig ... end

Http

Sourcemodule Http : sig ... end

Data of an Http Request.

Virtual Dom

Sourcemodule Attribute : sig ... end
Sourcemodule Html : sig ... end

Virtual Dom

Commands and Subscriptions

Sourcemodule Task : sig ... end

Tasks to be performed within Commands

Sourcemodule Command : sig ... end

Commands to be executed.

Sourcemodule Subscription : sig ... end

Subscriptions to global events.

Debugging

Sourceval debug : string -> unit

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

Sourceval 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.

Sourceval 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.

Sourceval 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 subscribe to events.

Full Web Application

A full web application has full user interaction, can execute arbitrary commands and subscribe to all possible global events. It allows controlling the browser's title bar (through the return value of the update function) and the browser's address bar (see module Navigation for more details).

Sourceval application : string -> (Url.t -> 'msg Navigation.key -> ('state * 'msg Command.t) Decoder.t) -> ('state -> 'msg Html.t * string) -> ('state -> 'msg Subscription.t) -> ('state -> 'msg -> 'state * 'msg Command.t) -> (Navigation.url_request -> 'msg) -> (Url.t -> 'msg) -> unit

application my_app init view subs update on_url_request on_url_change

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)

Basic Web Application

Sourceval 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 with the following differences:

  • it cannot interact with the surrounding javascript. I.e. it cannot receive initialization data, it cannot receive or send messages to/from the javscript world
  • it cannot use navigation commands such as push_url or back

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).

Sourceval 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)