module Graphics.UI.Threepenny (
-- * Introduction
-- $intro
-- * Example
-- $example
-- * Modules
module Graphics.UI.Threepenny.Attributes,
module Graphics.UI.Threepenny.Core,
module Graphics.UI.Threepenny.Canvas,
module Graphics.UI.Threepenny.DragNDrop,
module Graphics.UI.Threepenny.Elements,
module Graphics.UI.Threepenny.Events,
module Graphics.UI.Threepenny.JQuery,
module Graphics.UI.Threepenny.Timer,
module Graphics.UI.Threepenny.Widgets,
) where
import Graphics.UI.Threepenny.Attributes
import Graphics.UI.Threepenny.Canvas
import Graphics.UI.Threepenny.Core
import Graphics.UI.Threepenny.DragNDrop
import Graphics.UI.Threepenny.Elements
import Graphics.UI.Threepenny.Events
import Graphics.UI.Threepenny.JQuery
import Graphics.UI.Threepenny.Timer
import Graphics.UI.Threepenny.Widgets
{- $intro
Welcome to the Threepenny library for graphical user interfaces.
A program written with Threepenny is essentially a small web server
that displays the user interface as a web page to any browser that connects to it.
For an introduction, see the example below.
The module "Graphics.UI.Threepenny.Core" contains the main functions.
-}
{- $example
The following example should help to get you started with Threepenny.
(The lines of code below are meant to be concatenated into a single file.)
> module Main where
First, we have to import the library.
It is a good idea to import the core module verbatim
and import all other functions with a mandatory @UI@ prefix.
> import qualified Graphics.UI.Threepenny as UI
> import Graphics.UI.Threepenny.Core
We begin by starting a server on port @8023@ using the 'startGUI' function.
Additional static content is served from the @../wwwroot@ directory.
> main :: IO ()
> main = do
> startGUI defaultConfig
> { jsPort = Just 8023
> , jsStatic = Just "../wwwroot"
> } setup
Whenever a browser connects to the server,
the following function will be executed to start the GUI interaction.
It builds the initial HTML page.
> setup :: Window -> UI ()
> setup window = do
First, set the title of the HTML document
> return window # set UI.title "Hello World!"
Then create a button element
> button <- UI.button # set UI.text "Click me!"
DOM elements can be accessed much in the same way they are
accessed from JavaScript; they can be searched, updated, moved and
inspected. In the line above, we set the 'text' contents.
To actually display the button, we have to attach it to the body of the HTML element.
The '#+' combinator allows you to nest elements quickly
in the style of a HTML combinator library.
> getBody window #+ [element button]
Finally, we register an event handler for the 'click' event,
which occurs whenever the user clicks on the button.
When that happens, we change the text of the button.
> on UI.click button $ const $ do
> element button # set UI.text "I have been clicked!"
That's it! Now, run the program and visit the URL
in your browser to interact with the user interface.
The library comes with a
.
-}