Difference between revisions of "Haskell in web browser/Haskell web toolkit"
(Widgets) |
(Passive widgets) |
||
Line 4: | Line 4: | ||
[http://en.wikipedia.org/wiki/GUI_Widget Widgets] are basic building blocks of [http://en.wikipedia.org/wiki/GUI Graphical User Interface] (GUI). |
[http://en.wikipedia.org/wiki/GUI_Widget Widgets] are basic building blocks of [http://en.wikipedia.org/wiki/GUI Graphical User Interface] (GUI). |
||
+ | |||
+ | To build a web-based GUI, HsWTK defines the following type: |
||
+ | |||
+ | <haskell> |
||
+ | type Widget = THTMLDocument -> THTMLElement -> Bool |
||
+ | </haskell> |
||
+ | |||
+ | That is, [http://www.golubovsky.org:5984/_utils/yhcws/Graphics-UI-HsWTK.html#t%3AWidget Widget] is a function, or, to be a more precise, an '''action''' (as evaluation of this function does assume side effects). This action's first argument, of type [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Html2.html#t%3ATHTMLDocument THTMLDocument], refers to the HTML document containing the GUI elements. The action's second argument, of type [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Html2.html#t%3ATHTMLElement THTMLElement], refers to a parent HTML element. This makes perfect sense from the DOM standpoint, as in order to create a visible element on a Web page, it is at least necessary to create an element by calling <code>[http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547 Document.createElement]</code> method (which needs a Document), and next to insert the newly created element into some (parent) node by calling <code>[http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-184E7107 Node.appendChild]</code> method. |
||
====HTML elements as widgets==== |
====HTML elements as widgets==== |
||
+ | |||
+ | So, inside the ''Widget'' action, some work may be done to create a HTML element, and make it a child of some other ''Widget''. This is generalized by HsWTK as ''Element Creation Function'', and defined as |
||
+ | |||
+ | <haskell> |
||
+ | type ECRF n = (THTMLDocument -> CPS Bool n) |
||
+ | </haskell> |
||
+ | |||
+ | Now, if we refer to [[#Maker_functions|Maker functions]] defined for HTML-tagged ''Element''s we may see some similarity: |
||
+ | |||
+ | <haskell> |
||
+ | mkDiv :: CHTMLDocument a => a -> CPS c THTMLDivElement |
||
+ | </haskell> |
||
+ | |||
+ | If we substitute ''n'' in ''ECRF'' definition with ''THTMLDivElement'', and remember that ''THTMLDocument'' is an instance of ''CHTMLDocument'', we get a perfect match. From this, it may be concluded that Maker functions may serve as Element creation functions. |
||
+ | |||
====Passive widgets==== |
====Passive widgets==== |
||
+ | |||
+ | The simpliest form of ''Widget'' is passive widget. Passive widgets only display themselves as part of Web GUI, but are not capable of nesting other widgets. A good example of such passive widget is text label or non-clickable image. |
||
+ | |||
+ | HsWTK defines a function <code>[http://www.golubovsky.org:5984/_utils/yhcws/Graphics-UI-HsWTK.html#v%3Apassive passive]</code> which given an ''Element Creation Function'', returns a ''Widget'': |
||
+ | |||
+ | <haskell> |
||
+ | passive :: CNode n => ECRF n -> Widget |
||
+ | </haskell> |
||
+ | |||
+ | Thus, given a ''Maker function'' (e. g. ''mkImg''), applying ''passive'' to it creates an image which will appear in the proper place of a Web page. |
||
+ | |||
====Containers==== |
====Containers==== |
||
− | ==== |
+ | ====Activators==== |
Revision as of 04:47, 16 March 2008
Haskell Web Toolkit (further referred to as HsWTK) is a thin layer built on top of DOM interfaces. It provides program interfaces to compose static layout of a web application page, and to hook up visual elements of an application to event handlers and XML HTTP communication means. HsWTK hides the low-level DOM APIs where possible; however their knowledge may be necessary to develop certain types of visual components and event handlers.
Widgets
Widgets are basic building blocks of Graphical User Interface (GUI).
To build a web-based GUI, HsWTK defines the following type:
type Widget = THTMLDocument -> THTMLElement -> Bool
That is, Widget is a function, or, to be a more precise, an action (as evaluation of this function does assume side effects). This action's first argument, of type THTMLDocument, refers to the HTML document containing the GUI elements. The action's second argument, of type THTMLElement, refers to a parent HTML element. This makes perfect sense from the DOM standpoint, as in order to create a visible element on a Web page, it is at least necessary to create an element by calling Document.createElement
method (which needs a Document), and next to insert the newly created element into some (parent) node by calling Node.appendChild
method.
HTML elements as widgets
So, inside the Widget action, some work may be done to create a HTML element, and make it a child of some other Widget. This is generalized by HsWTK as Element Creation Function, and defined as
type ECRF n = (THTMLDocument -> CPS Bool n)
Now, if we refer to Maker functions defined for HTML-tagged Elements we may see some similarity:
mkDiv :: CHTMLDocument a => a -> CPS c THTMLDivElement
If we substitute n in ECRF definition with THTMLDivElement, and remember that THTMLDocument is an instance of CHTMLDocument, we get a perfect match. From this, it may be concluded that Maker functions may serve as Element creation functions.
Passive widgets
The simpliest form of Widget is passive widget. Passive widgets only display themselves as part of Web GUI, but are not capable of nesting other widgets. A good example of such passive widget is text label or non-clickable image.
HsWTK defines a function passive
which given an Element Creation Function, returns a Widget:
passive :: CNode n => ECRF n -> Widget
Thus, given a Maker function (e. g. mkImg), applying passive to it creates an image which will appear in the proper place of a Web page.