Example

This module is designed to make certain kinds of example easier to understand by ommitting some of the boring details and yet making them attractive.

Common Views

These views help flesh out some of the views for common things that would needlesly complicate an application:

loading : List (Attribute msg) -> Html msg

Displays a loading spinner indicating an operation in process.

error : Maybe msg -> Error -> Html msg

Shows a friendly (albeit generic) error message based on an HTTP.Error type. Useful for showing when an HTTP request fails.

You can optionally give it a message. If you do, then certain errror will get a "Try again?" button for retrying the request.

Example Applications

These are application templates that provide simple interactive functionality for certain kinds of examples. They are quite specific to their usecase, so it is worth considering if they are appropriate to the example at hand or wheather they should be custom built.

Multi-view Examples

Some examples consist of multiple tabs (each with its own URL) that simply vary some configuration. This provides a simplified application template to make an example like this.

switchableViews : List ( String, a ) -> (a -> Html msg) -> Program () Model Msg

A simple app that shows different tabs based on a string identifier. This identifier will be as the fragment in the URL.

linkTo : String -> List (Attribute msg) -> List (Html msg) -> Html msg

Makes a link to a particular identifier (i.e. this is a wrapper for the <a> element, but it will take care of setting up the approriate href attribute.)

Configurable Examples

Some examples can be made interactive by allowing the user to configure parts of the view with some parameters. This application type will handle managing the model and messages for you. It includes an automatic form builder as well as updating the serialized representation to the URL.

configurable :

Configuration model

-> (model -> Html (ConfigMsg model))

-> Program () ( Key, model ) (ConfigMsg model)

An application type where the view will simply render some output based on some input that we want the user to modify.

This application will take care of dealing with the model and messages as well as persisting the model state to the URL and then restoring it on reload.

type Configuration model

This type stores how to modify the model.

configuration : model -> List (Field model) -> Configuration model

Accepts the initial (or default) model as well as a list of fields that describe how to modify the model.

verticalPanel : String -> Configuration model -> model -> Html (ConfigMsg model)

Renders a form for changing the configuration in a vertical layout.

The first argument is a heading for the form.

intSlider :

String

-> (model -> Int)

-> (Int -> model -> model)

-> Int

-> Field model

Modify an int field in the model. Takes a label, a getter, a setter and min/max bounds on the value. Renders as a slider in the form.

floatSlider :

String

-> (model -> Float)

-> (Float -> model -> model)

-> Float

-> Field model

Modify an float field in the model. Takes a label, a getter, a setter and min/max bounds on the value. Renders as a slider in the form.

colorPicker : String -> (model -> Color) -> (Color -> model -> model) -> Field model

Modify an Color field in the model. Takes a label, a getter, and a setter. Renders as a color picker in the form.

type ConfigMsg model

Modules

Example