Gtk2Hs ウィジェット2
ホーム
目次
この章でも引き続きウィジェットの紹介をいたします。
コンボボックス
コンボボックスは、ユーザーがリストから項目を選択できるウィジェットです。
「combox3.hs」がGtk3Hs対応のコードで、「combobox2.hs」がGtk2Hs対応のコードです。
WindowsとmacOSの場合は、Gtk3Hs対応のコードしか実行できません。
Linuxの場合は、それぞれのバージョンに合ったファイルしか実行できません。
combobox3.hs
import Graphics.UI.Gtk
import qualified Data.Text as T
comboChanged :: ComboBox -> Label -> IO ()
comboChanged combobox label = do
Just text <- comboBoxGetActiveText combobox
labelSetText label text
main :: IO ()
main = do
initGUI
window <- windowNew
set window [windowTitle := "コンボボックス",
windowWindowPosition := WinPosCenter,
windowDefaultWidth := 300,
windowDefaultHeight := 200]
containerSetBorderWidth window 15
hbox <- hBoxNew False 0
vbox <- vBoxNew False 15
combo <- comboBoxNew
comboBoxSetModelText combo
comboBoxAppendText combo (T.pack "Windows")
comboBoxAppendText combo (T.pack "macOS")
comboBoxAppendText combo (T.pack "Ubuntu")
comboBoxAppendText combo (T.pack "Mint")
comboBoxAppendText combo (T.pack "Debian")
boxPackStart vbox combo PackNatural 0
label <- labelNew (Just "...")
boxPackStart vbox label PackGrow 0
boxPackStart hbox vbox PackGrow 0
containerAdd window hbox
on combo changed $ comboChanged combo label
on window objectDestroy mainQuit
widgetShowAll window
mainGUI
combobox2.hs
import Graphics.UI.Gtk
comboChanged :: ComboBox -> Label -> IO ()
comboChanged combobox label = do
Just text <- comboBoxGetActiveText combobox
labelSetText label text
main :: IO ()
main = do
initGUI
window <- windowNew
set window [windowTitle := "コンボボックス",
windowWindowPosition := WinPosCenter,
windowDefaultWidth := 300,
windowDefaultHeight := 200]
containerSetBorderWidth window 15
hbox <- hBoxNew False 0
vbox <- vBoxNew False 15
combo <- comboBoxNew
comboBoxSetModelText combo
comboBoxAppendText combo "Windows"
comboBoxAppendText combo "macOS"
comboBoxAppendText combo "Ubuntu"
comboBoxAppendText combo "Mint"
comboBoxAppendText combo "Debian"
boxPackStart vbox combo PackNatural 0
label <- labelNew (Just "...")
boxPackStart vbox label PackGrow 0
boxPackStart hbox vbox PackGrow 0
containerAdd window hbox
on combo changed $ comboChanged combo label
on window objectDestroy mainQuit
widgetShowAll window
mainGUI
セパレーター
セパレーター (Separator)は区切り線です。セパレーターには、水平方向のHseparatorと縦方向のVSeparatorがあります。
separator.hs
import Graphics.UI.Gtk
main :: IO ()
main = do
initGUI
window <- windowNew
set window [windowWindowPosition := WinPosCenter,
windowTitle := "セパレーター",
windowResizable := False]
containerSetBorderWidth window 10
label1 <- labelNew (Just
("Zinc is a moderately reactive, blue gray metal" ++
"that tarnishes in moist air and burns in air with a bright " ++
"bluish-green flame, giving off fumes of zinc oxide. It " ++
"reacts with acids, alkalis and other non-metals. " ++
"If not completely pure, zinc reacts with dilute acids to " ++
"release hydrogen."))
labelSetLineWrap label1 True
label2 <- labelNew (Just
("Copper is an essential trace nutrient to all high " ++
"plants and animals. In animals, including humans, it is " ++
"found primarily in the bloodstream, as a co-factor in " ++
"various enzymes, and in copper-based pigments. However, " ++
"in sufficient amounts, copper can be poisonous and even " ++
"fatal to organisms."))
labelSetLineWrap label2 True
vbox <- vBoxNew False 10
containerAdd window vbox
hseparator <- hSeparatorNew
boxPackStart vbox label1 PackNatural 0
boxPackStart vbox hseparator PackNatural 10
boxPackStart vbox label2 PackNatural 0
on window objectDestroy mainQuit
widgetShowAll window
mainGUI
この例では「windowResizable := False]」によって、ウィンドウのサイズを変えることができなくなっています。
LinuxのGtk3Hsでは、ウィンドウがスクリーンの横いっぱいに広がってしまいます。LinuxのGtk2Hsでは、正しく表示されます。
エントリー
エントリー(Entry)は、単一行の文字列を入力できるウィジェットです。
entry.hs
import Graphics.UI.Gtk
main :: IO ()
main = do
initGUI
window <- windowNew
windowSetPosition window WinPosCenter
set window [windowTitle := "エントリー"]
containerSetBorderWidth window 10
table <- tableNew 3 2 False
containerAdd window table
label1 <- labelNew (Just "名前")
label2 <- labelNew (Just "年齢")
label3 <- labelNew (Just "職業")
align <- alignmentNew 0 0 0 0
containerAdd align label3
tableAttach table label1 0 1 0 1 [Fill,Shrink] [Fill,Shrink] 5 5
tableAttach table label2 0 1 1 2 [Fill,Shrink] [Fill,Shrink] 5 5
tableAttach table align 0 1 2 3 [Fill,Shrink] [Fill,Shrink] 5 5
entry1 <- entryNew
entry2 <- entryNew
textview <- textViewNew
widgetSetSizeRequest textview 0 25
frame <- frameNew
containerAdd frame textview
tableAttach table entry1 1 2 0 1 [Fill,Expand] [Fill,Shrink] 5 5
tableAttach table entry2 1 2 1 2 [Fill,Expand] [Fill,Shrink] 5 5
tableAttach table frame 1 2 2 3 [Fill,Expand] [Fill,Expand] 5 5
widgetShowAll window
on window objectDestroy mainQuit
mainGUI
ウィンドウを最大化してレイアウトがどう変わるかみてください。
イメージ
イメージ(Image)は画像を表示するウィジェットです。
サンプルで使用する画像はここからダウンロードできます。解凍した img フォルダをコードファイルと同じディレクトリに置いてください。
image.hs
import Graphics.UI.Gtk
main :: IO ()
main = do
initGUI
window <- windowNew
windowSetPosition window WinPosCenter
set window [windowTitle := "イメージ"]
image <- imageNewFromFile "img/precipice2.jpg"
containerAdd window image
on window objectDestroy mainQuit
widgetShowAll window
mainGUI
ステータスバー
ステータスバー(Statsbar)は、ウィンドウの下側にある、ちょっとした情報を表示するためのウィジェットです。
statusbar.hs
import Graphics.UI.Gtk
buttonpressed :: Button -> Statusbar -> IO ()
buttonpressed button statusbar = do
str <- buttonGetLabel button
--print (str)
id <- statusbarGetContextId statusbar str
--print (id)
statusbarPush statusbar id (str ++ "ボタンがクリックされました")
return ()
main :: IO ()
main = do
initGUI
window <- windowNew
windowSetPosition window WinPosCenter
windowSetDefaultSize window 300 200
set window [windowTitle := "ステータスバー"]
vbox <- vBoxNew False 0
hbox <- hBoxNew False 0
containerAdd window vbox
halign <- alignmentNew 0 0 0 0
containerAdd halign hbox
boxPackStart vbox halign PackGrow 5
button1 <- buttonNewWithLabel "了解"
widgetSetSizeRequest button1 100 30
button2 <- buttonNewWithLabel "適用"
widgetSetSizeRequest button2 100 30
boxPackStart hbox button1 PackNatural 5
boxPackStart hbox button2 PackNatural 0
balign <- alignmentNew 0 1 1 0
statusbar <- statusbarNew
containerAdd balign statusbar
boxPackStart vbox balign PackNatural 0
on button1 buttonActivated $ buttonpressed button1 statusbar
on button2 buttonActivated $ buttonpressed button2 statusbar
on window objectDestroy mainQuit
widgetShowAll window
mainGUI
アイコンビュー
アイコンビュー(IconView)は画像のリストを表示するウィジェットです。
サンプルで使用する画像はここからダウンロードできます。解凍した img フォルダをコードファイルと同じディレクトリに置いてください。
iconview.hs
import Graphics.UI.Gtk
import System.FilePath -- for
-- Define a string column and an image column on the store holding
-- the computer types.
compPicCol :: ColumnId CompType Pixbuf
compPicCol = makeColumnIdPixbuf 1
compStrCol :: ColumnId CompType String
compStrCol = makeColumnIdString 2
data CompType
= MacBookPro
| MacBook
| Printer
| MacPro
| Xserve
| IMac
deriving (Enum, Bounded, Show)
showCT :: CompType -> String
showCT ct = case show ct of
'I':xs -> 'i':xs
xs -> xs
initIconView = do
iconview <- iconViewNew
let pNames = map ("img" )
["laptop.png","laptopSmall.png","printer.png",
"tower.png","server.png","desktop.png"]
pics <- mapM pixbufNewFromFile pNames
-- the area with the possible computer types
compTypes <- listStoreNew [minBound :: CompType .. maxBound]
-- define extractor functions for the two column
treeModelSetColumn compTypes compPicCol $
\t -> pics !! fromEnum t
treeModelSetColumn compTypes compStrCol showCT
set iconview [iconViewModel := Just compTypes]
return iconview
main :: IO ()
main = do
initGUI
window <- windowNew
set window [windowTitle := "アイコンビュー",
windowWindowPosition := WinPosCenter,
containerBorderWidth := 10,
windowDefaultWidth := 600, --350
windowDefaultHeight := 300]
sw <- scrolledWindowNew Nothing Nothing
containerAdd window sw
scrolledWindowSetPolicy sw PolicyAutomatic PolicyAutomatic
scrolledWindowSetShadowType sw ShadowIn
-- create an icon view of all the computer types
iconview <- initIconView --iconViewNew
containerAdd (toContainer sw) iconview
set iconview [iconViewTextColumn := compStrCol,
iconViewPixbufColumn := compPicCol,
iconViewSelectionMode := SelectionMultiple,
iconViewColumns := 3]
--iconViewColumns := 6]
on window objectDestroy mainQuit
widgetShowAll window
mainGUI
20125 visits
Posted: Dec. 27, 2018
Update: Dec. 27, 2018