simple tabbed panel example

tabbar.hs

import Window
import Mouse
import Graphics.Input (Input, input, clickable)
import Dict

-- UTIL

enumerate : [a] -> [(Int, a)]
enumerate l = zip [1..length l] l

emap : (Int -> a -> b) -> [a] -> [b]
emap f = map (uncurry f) . enumerate

-- INPUTS AND SIGNALS

activeTab : Input Int
activeTab = input 1

-- MODEL

tabContent = 
  [ ("Foo", "I are Foo tab panel")
  , ("Bar", "I are Bar tab panel")
  , ("Baz", "I are Baz tab panel")
  , ("Blah", "I are nobody")
  ]

clickableRow : Input Int -> [Element] -> [Element]
clickableRow rowInput = emap (clickable rowInput.handle)

-- DISPLAY

pad w h el = container (w + widthOf el) (h + heightOf el) middle el

tabStyle : Bool -> Element -> Element
tabStyle active = if active then color yellow else color grey

toTabElement : Int -> Int -> String -> Element
toTabElement a i = pad 1 0 . tabStyle (a == i) . pad 15 10 . plainText

tabbar : Int -> [String] -> Element
tabbar active = flow right . clickableRow activeTab . emap (toTabElement active)

content : Int -> Element
content n =
  let
    (head, body) = unzip tabContent
    bodyDict = Dict.fromList . enumerate . map (pad 20 20 . plainText) <| body
  in 
    flow down <| 
      [ tabbar n head
      , Dict.getOrElse empty n bodyDict
      ]
  
scene (w,h) activeTabNum = container w h middle <| content activeTabNum

main = scene <~ Window.dimensions ~ activeTab.signal

Neat. It looks like the tab contents can only be strings right now. Is it possible to make it so that they are arbitrary elements or a [Form] that are rendered when the tab is selected?