F hi ho is the type of a fudget that consumes an high-level input stream of values of type hi and produces an high-level output stream of values of type ho. It can also generate a number of user interface elements, and can read input from and send output to those user interface elements.

We use the notation a+b for Either a b, the standard disjoint union type in Haskell.

runF is typically used only once in the main function of a program. It runs the fudget and adds any user interface elements it generates to the documentBody of the web page.

Creates a button, like <input type="button" value="label">. It outputs Click when pressed. (Click received on the input is propagated directly to the output, allowing button clicks to be simulated programmatically.)

Creates a button with another fudget inside (which should be something simple, e.g. an imgF or a stringDisplayF...), <button>...</button>.

A checkboxF with a label

A checkbox, <input type=checkbox>.

A group of checkboxes allowing you to select one of several alternatives

A radioGroupF without the built-in vertical layout

A menu of options, <select><option>...</option>...</select>

A menu of options that can be modified dynamically

A slider which lets you choose a value from an enumeration, <input type="range">

A progress meter <progress max=...></meter>

A meter for scalar value between given minimum and maximum. <meter min=... max=...></meter>

An output-only element displaying text, <span>...</span>

An output-only element displaying HTML content

stringF combined with show, marked read-only

readShowF restricted to numbers, <input type="number">

stringF combined with show and read

A string input/output field, <input type="text">

A string input/output field that shows **** instead of the actual input, <input type="password">

Creates a canvas of given width and height. Use the functions from Graphics.UI.Threepenny.Canvas to draw things. The canvas produces output on mouseup events (becase mouseup up seems to work for both the left and the right mouse button, while click only works for the left mouse button).

canvasF with an option to render on top of or replace the current picture

An image, <img src="url" alt=""> You can change the image dynamically by sending in the URL of another image.

An image with extra attributes, <img src="url" ...>. You can change the image dynamically by sending in the URL of another image.

Allows you to observe and control the focus of a fudget. (Focus determines where keyboard input goes.)

Disable and enable buttons and other input elements.

Add event handlers to the elements generated by a fudget. Event types can be imported from Graphics.UI.Threepenny.Events.

Plain text

Text with HTML markup

A hyperlink <a href="url">...</a>

Level 1 header <h1>...</h1>

Level 2 header <h2>...</h2>

Level 3 header <h3>...</h3>

Level 4 header <h4>...</h4>

Paragraph <p>...</p>

A table with n columns. The elements generated by the argument fudget are placed in separate table cells.

A div element <div>...</div>

A div element with a black border and some padding

Unordered list <ul>...</ul>

Ordered list <ol>...</ol>

List item <li>...</li>

A pre element <pre>...</pre>

Rearrange the elements generated by a fudget. Note that Elements can not be duplicated.

With traditional Fudgets, shellF creates top-level application windows. With WebFudgets, using shellF is entierly optional. It just puts a title above another fudget and adds a couple of <div> elements that can be styled to look like a traditional application window with a title bar, if you wish. <div class="shellF"><h4>title</h4><div>...</div></div>

Place elements vertically

Place elements horizontally

Set the class attribute of the elements generated by a fudget

Apply attributes to the elements generated by a fudget

Dynamically change element attributes

A fudget that can be replaced dynamically

Tagged parallel composition. Messages to/from the left fudget are tagged Left. Messages to/from the right fudget are tagged Right.

Parallel composition where only the left fudget is connected. The right fudget is typically static content.

Parallel composition where only the right fudget is connected. The left fudget is typically static content.

Tagged parallel composition of a list of fudgets

Right-to-left serial composition. The output stream of the right fudget is connected to the input stream of the left fudget. This was originally called >==< in Fudgets.

Left-to-right serial composition. The output stream of the left fudget is connected to the input stream of the right fudget. (This was not included in the original implementation of Fudgets. Using both =>= and =<= in the same expression might lead to confusion...)

Creates a feedback loop. loopLeftF fud behaves as follows: output from fud tagged Left will be sent back to the input of fud. Output from fud tagged Right will be sent to the output of loopLeftF fud. Input to loopLeftF fud will be tagged Right and delivered to fud.

Copy output back to the input. The fudget needs to send on average strictly less than one output message per input message, otherwise it will become busy reacting to its own messages.

loopThroughRightF master slave is similar to loopLeftF master, but the loop goes through the slave fudget. (A better name might be encapsulateF since all communication with the slave has to go via the master, so the slave is encapsulated in this sense.) loopThroughRightF :: F (ro+hi) (ri+ho) -> F ri ro -> F hi ho

Like map for lists. mapF f outputs f x for every x in the input stream

Like filter for lists. Propagates values from the input stream to the output stream if they pass a test.

Like mapMaybe for lists. A combination of mapF and filterF.

Like concatMap for lists. A combination of concatF and mapF.

stateF is used to maintain an internal state. Given a state transition function f and an initial state s, stateF f s responds to input by applying f to it to update the internal state and generate zero or more output messages.

Like stateF, but also uses LocalStorage to retain the state between activations of the web application. The first argument is a key that should be unique among all web applications on the same server.

Outputs one message read from LocalStorage on startup. Writes any input to LocalStorage.

putF x fud outputs x, then behaves like fud

putF xs fud outputs xs, then behaves like fud

Ignores all input. Doesn't produce any output.

mapF id, propagates all input directly to the output

Like concat for lists, flattens a stream of lists.

After the first Left a and Right b has arrived on the input, gatherF output pairs (a,b) with the most recent a and b values received.

gatherF with initial values.

timerF outputs Tick at regular intervals. The timer starts when it receives Just interval on its input. The timer stops when it receives Nothing in its input.

Like idF but also writes messages to stdout

The type of an event handler

An attribute is a function that modifies a user interface element. See also Graphics.UI.Threepenny.Attributes.

a=:v is the same as v # set a

Draw a straight line between to points