Editing WxHaskell/Quick start (section)

=== Hello world in wxHaskell ===

Start your favorite editor and write the following program (that will show a frame with a single button that closes the frame when pressed).

[[Image:quick1-win.png|Hello world on Windows XP]]
<pre>module Main where
import Graphics.UI.WX

main :: IO ()
main
  = start hello

hello :: IO ()
hello
  = do f&#160;&#160;&#160; &lt;- frame&#160;&#160;&#160; [text := &quot;Hello!&quot;]
       quit &lt;- button f [text := &quot;Quit&quot;, on command := close f]
       set f [layout := widget quit]</pre>
[[Image:quick1-gtk.png|Hello world on Red Hat Linux]]
Now start GHCi and run the program:

<pre>&gt; ghci -package wx Hello.hs
[snip]
Loading package wx ... linking ... done.
Compiling Main ( Hello.hs, interpreted )
Ok, modules loaded: Main.
*Main&gt; main</pre>
Note: On MacOS X, you can only use the interpreter with special scripts, as you need to build MacOS X ''applications''. Normally, the following commands will do the job:

ChengWei: On Windows 7, ghci will complain "can't load .so/.DLL for: std c++ ...". But "ghc --make Hello.hs; Hello.exe" on the command line works well. 

[[Image:quick1-mac.png|Hello world sample]]
<pre>&gt; ghc -package wx -o hello Hello.hs
&gt; /usr/local/wxhaskell/bin/macosx-app -v hello
&gt; ./hello</pre>
You can read the MacOS X [[WxHaskell/Building_on_MacOS_X|notes]] for more information on using wxHaskell on MacOS X, and how to use it from an interpreter prompt.

==== Types ====

A typical wxHaskell program imports the <tt>Graphics.UI.WX</tt> library. If you need to access specific wxWidgets functionality, you would also import the lower level <tt>Graphics.UI.WXCore</tt> library. The <tt>main</tt> function uses <tt>start</tt> to start our GUI. The function <tt>start</tt> initializes the GUI framework with the provided argument and starts the window event loop until the application quits or when all top-level windows are closed. The GUI itself is described with the following functions:

<pre>frame&#160;&#160;::&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;[Prop&#160;(Frame&#160;())]&#160;-&gt;&#160;IO&#160;(Frame&#160;())
button&#160;::&#160;Window&#160;a&#160;-&gt;&#160;[Prop&#160;(Button&#160;())]&#160;-&gt;&#160;IO&#160;(Button&#160;())

text&#160;&#160;&#160;::&#160;Attr&#160;(Window&#160;a)&#160;String
layout&#160;::&#160;Attr&#160;(Frame&#160;a)&#160;&#160;Layout

(:=)&#160;&#160;&#160;::&#160;Attr&#160;w&#160;a&#160;-&gt;&#160;a&#160;-&gt;&#160;Prop&#160;w
set&#160;&#160;&#160;&#160;::&#160;w&#160;-&gt;&#160;[Prop&#160;w]&#160;-&gt;&#160;IO&#160;()

command::&#160;Event&#160;(Control&#160;a)&#160;(IO&#160;())
on&#160;&#160;&#160;&#160;&#160;::&#160;Event&#160;w&#160;a&#160;-&gt;&#160;Attr&#160;w&#160;a

widget&#160;::&#160;Window&#160;a&#160;-&gt;&#160;Layout</pre>
Actually, some of these functions have (even) more general types – you can use the <tt>:t</tt> command in GHCi to see them.

The types <tt>Frame ()</tt> and <tt>Button ()</tt> denote graphical objects. These objects can have ''properties''. When an object is created we can supply an initial list of properties but we can also set them later using <tt>set</tt>. The type of properties for frames are <tt>Prop (Frame ())</tt> and for buttons <tt>Prop (Button ())</tt>.

Properties are created by combining ''attributes'' with values. Examples of attributes are <tt>text</tt> and <tt>layout</tt>. An attribute of type <tt>Attr w a</tt> applies to objects of type <tt>w</tt> and values of type <tt>a</tt>. Values can be assigned to attributes using the <tt>(:=)</tt> operator. You can find out more about attributes in the haddock documentation for the modules [http://wxhaskell.sourceforge.net/doc/Graphics-UI-WX-Attributes.html WX.Attributes] and [http://wxhaskell.sourceforge.net/doc/Graphics-UI-WX-Classes.html WX.Classes].

Somewhat special attributes are ''events''. An event of type <tt>Event w a</tt> can be transformed into an attribute <tt>Attr w a</tt> using <tt>on</tt>. The value of an event attribute is normally an <tt>IO</tt> action that is executed when the event happens. Find out more about events in the haddock documentation for [http://hackage.haskell.org/packages/archive/wx/latest/doc/html/Graphics-UI-WX-Events.html WX.Events] and the lower level [http://hackage.haskell.org/packages/archive/wxcore/latest/doc/html/Graphics-UI-WXCore-Events.html WXCore.Events]

Since wxHaskell is based on an object-oriented framework, we also encode inheritance. The extra type parameter of objects encodes the inheritance relationship. When the parameter of an object is unit <tt>()</tt>, it denotes an object of that exact class. When the parameter is a type variable <tt>a</tt>, it denotes any object that is instance of that class. For example, both the <tt>frame</tt> and <tt>button</tt> functions return precisely a frame or button and use a <tt>()</tt> type parameter. However, the <tt>text</tt> attribute applies to any kind of window, including frames and buttons, and has a <tt>Window a</tt> as its argument. We can now use the <tt>text</tt> attribute for example for both frames and buttons. In wxHaskell, this works since a <tt>Frame&#160;()</tt> is actually a type synonym for <tt>Window&#160;(CFrame&#160;())</tt> and can thus be passed where a <tt>Window a</tt> is expected. The same hold for a <tt>Button ()</tt> that is a synonym for <tt>Control&#160;(CButton&#160;())</tt> that is again a synonym for <tt>Window&#160;(CControl&#160;(CButton&#160;()))</tt>.

==== Layout ====

The layout of a window is specified through the <tt>layout</tt> attribute. The layout of the current program is rather terse and we will spice it up by letting the button float in the center when the window is resized. This is also a good opportunity to add a small margin around the button.

[[Image:quick2-win.png|Hello world sample]]
<pre>set f [layout := margin 10 (floatCentre (widget quit))]</pre>
We can also add a text label above the button that is also centered. The argument of <tt>column</tt> specifies the amount of space between the items.

[[Image:quick3-win.png|Hello world sample]]
<pre>set f [layout := margin 10 (column 5 [floatCentre (label &quot;Hello&quot;)
                                     ,floatCentre (widget quit)
                                     ] )]</pre>
You can find out more about layout in the documentation for the [http://wxhaskell.sourceforge.net/doc/Graphics-UI-WXCore-Layout.html WXCore.Layout] module.