wxHaskell コントロール

ホーム   目次

ユーザーが操作できるウィジェット(Widget、GUI部品)をコントロールと言います。この章では、チェックボックス(CheckBox)、スライダー(Slider)、ラジオボックス(RadioBox)、チョイス(Choice)、リストボックス(ListBox)、ツリーコントロール(TreeCtrl)を紹介します。

チェックボックス

checkbox.hs

module Main where

import Graphics.UI.WX
import Graphics.UI.WXCore

main :: IO ()
main = start gui

gui :: IO ()
gui = do
    f <- frame [text := "チェックボックス"]
    p <- panel f []
    c <- checkBox p [text := "タイトルを表示する", checked := True]
    set c [on command := toggleTitle c f]
    set f
        [layout := container p $ floatCentre (widget c),
         clientSize := sz 250 150
        ]
    return ()
    where
        toggleTitle c f = do
            bool <- get c checked
            if bool
            then set f [text := "チェックボックス"]
            else set f [text := ""]
    

スライダー

スライダーは、横方向の hslider と、縦方向の vslider があります。ここでは hslider を紹介します。

slider.hs

module Main where

import Graphics.UI.WX
import Graphics.UI.WXCore

main :: IO ()
main = start gui

gui :: IO ()
gui = do
    f <- frame [text := "スライダー"]
    p <- panel f []
    s <- hslider p True 0 100 []
    t <- staticText p [text := "0"]
    set s [on command := valueChanged s t]
    set f
        [layout := margin 15 $ container p $ column 0
            [
                floatCenter (widget t),
                floatCenter (hfill (widget s))
            ],
         clientSize:= sz 250 100
        ]
    return ()
    where
        valueChanged s t = do
            val <- get s selection
            set t [text := show val]
    

ラジオボックス

radioBox関数は、第2引数にHorizontalを指定すれば横並びに、Verticalを指定すれば縦並びになります。

radiobox.hs

module Main where

import Graphics.UI.WX
import Graphics.UI.WXCore

main :: IO ()
main = start gui

gui :: IO ()
gui = do
    f <- frame [text := "ラジオボックス"]
    p <- panel f []
    r <- radioBox p Horizontal ["赤","緑","青"] [text := "赤",
        on select ::= radioSelect]
    set f
        [layout := margin 15 $ container p $ column 0
            [
                floatCenter (fill (widget r))
            ],
        clientSize := sz 250 150
        ]
    return ()
    where
        radioSelect w = do
            i <- get w selection
            s <- get w (item i)
            set w [text := read (show s)]
            {-
            case i of
                0 -> set w [text := "赤"]
                1 -> set w [text := "緑"]
                2 -> set w [text := "青"]
                _ -> return ()
            -}
    

チョイス

チョイス(Choice)は文字列のリストを選択できます。

choice.hs

module Main where

import Graphics.UI.WX
import Graphics.UI.WXCore

main :: IO ()
main = start gui

gui :: IO ()
gui = do
    f <- frame [text := "選択"]
    p <- panel f []
    t <-  staticText p [text := "..."]
    c <- choice p [items := ["mac","win","lin"], on select ::= itemSelect t]
    set f
        [layout := margin 15 $ container p $ column 0
            [
                hfill (widget c),
                floatCenter (widget t)
            ],
         clientSize := sz 250 150
        ]
    return ()
    where
        itemSelect t c = do
            i <- get c selection
            s <- get c (item i)
            set t [text := read (show s)]
    

リストボックス

リストボックス(ListBox)は、リストを一覧で表示するウィジェットです。

リストボックスには、一つの項目だけ選択できるsingleListBoxと、複数の項目を選択できるmultiListBoxがあります。ここでは、singleListBoxの紹介をします。

listbox.hs

module Main where

import Graphics.UI.WX
import Graphics.UI.WXCore

main :: IO ()
main = start gui

gui :: IO ()
gui = do
    f <- frame [text := "リストボックス"]
    p <- panel f []
    t <- staticText p [text := "..."]
    l <- singleListBox p [items := ["mac","win","lin"], on select ::= itemSelect t]
    set f
        [layout := margin 15 $ container p $ column 0
            [
                fill (widget l),
                floatCenter (widget t)
            ],
        clientSize := sz 300 300
        ]
    return ()
    where
        itemSelect t l = do
            i <- get l selection
            s <- get l (item i)
            set t [text := read (show s)]
    

macOSでは、リストボックスの何もない所をクリックして、選択状態を解除することができます。Windowsでは、何もない所をクリックしても、選択状態は解除できません。

ツリーコントロール

treectrl.hs

module Main where

import Graphics.UI.WX
import Graphics.UI.WXCore

main :: IO ()
main = start gui

gui :: IO ()
gui = do
    f   <-  frame       [text := "Tree control"]
    p   <-  panel     f []
    t   <-  treeCtrl  p []
    pl  <-  treeCtrlAddRoot t "Programming languages" (-1) (-1) objectNull
    sl  <-  treeCtrlAppendItem t pl "Scripting launguages" (-1) (-1) objectNull
    _   <-  treeCtrlAppendItem t sl "Python" (-1) (-1) objectNull
    _   <-  treeCtrlAppendItem t sl "Perl" (-1) (-1) objectNull
    _   <-  treeCtrlAppendItem t sl "PHP" (-1) (-1) objectNull
    cl  <-  treeCtrlAppendItem t pl "Compliled languages" (-1) (-1) objectNull
    _   <-  treeCtrlAppendItem t cl "C" (-1) (-1) objectNull
    _   <-  treeCtrlAppendItem t cl "C++" (-1) (-1) objectNull
    _   <-  treeCtrlAppendItem t cl "Java" (-1) (-1) objectNull

    treeCtrlExpand t pl
 
    status <- statusField []
    
    set t   [on treeEvent := onTreeEvent t status]

    set f   [layout := margin 5 $ container p $ fill (widget t)
            ,statusBar  := [status]
            ,clientSize := sz 250 250
            ]
    
    return ()

onTreeEvent :: TreeCtrl a -> StatusField -> EventTree -> IO ()
onTreeEvent t status event =
    case event of
        TreeSelChanged item_ _olditem | treeItemIsOk item_
            ->  do
                str <- treeCtrlGetItemText t item_
                set status [text := str]
        _   ->  return ()
    

ホーム   目次   ページトップ