common-lisp
gtk
GTK3

CommonLispとGTK+3を使ったGUIアプリケーションでウィジェット配置メモ

More than 1 year has passed since last update.


はじめに

CommonLispとGTK+3でWebアプリケーションを作成するときの、ウィジェット配置に関するメモです。

今回はテーブルを使った配置方法について、記載します。


テーブルを使ったウィジェット配置

以下のコードでウィジェットを配置できる6×5のグリッドを作成出来ます。

(table (make-instance 'gtk-table :n-rows 6 :n-columns 5))

ウィジェットは以下のコードで配置します。

(gtk-table-attach table "ウィジェット名" "左端" "右端" "上端" "下端")

配置するときに以下のような図をコメントで書いておくとわかりやすいかも。

               Row

0 1 2 3 4 5 6
0 +---+---+---+---+---+---+
| | | | | | |
1 +---+---+---+---+---+---+
| | | | | | |
C 2 +---+---+---+---+---+---+
o | | | | | | |
l 3 +---+---+---+---+---+---+
| | | | | | |
4 +---+---+---+---+---+---+
| | | | | | |
5 +---+---+---+---+---+---+


サンプルソースコード

ラベル、エントリ、ボタンをを適当に配置したプログラム。


gtk-table-sample.lisp

(ql:quickload :cl-cffi-gtk)

(defpackage :my-gtk3-app
(:use :cl
:gtk
:gdk
:gdk-pixbuf
:gobject
:glib
:gio
:pango
:cairo))

(in-package :my-gtk3-app)

(defun main ()
(within-main-loop
(let ((window (make-instance 'gtk-window
:title "GTK+3 Practice"
:type :toplevel
:border-width 12))
(label1 (make-instance 'gtk-label :label "Label1:"))
(label2 (make-instance 'gtk-label :label "Label2:"))
(label3 (make-instance 'gtk-label :label "Label3:"))
(entry1 (make-instance 'gtk-entry))
(entry2 (make-instance 'gtk-entry))
(entry3 (make-instance 'gtk-entry))
(button1 (make-instance 'gtk-button :label "Button1"))
(label4 (make-instance 'gtk-label :label "Label4:"))
(entry4 (make-instance 'gtk-entry))
(button2 (make-instance 'gtk-button :label "Button2"))
(table (make-instance 'gtk-table :n-rows 6 :n-columns 5)))
;; Define the signal handlers
(g-signal-connect window "destroy"
(lambda (widget)
(declare (ignore widget))
(leave-gtk-main)))
;; Put the widgets into the table
;; Row
;; 0 1 2 3 4 5 6
;; 0 +---+---+---+---+---+---+
;; | | | | | | |
;; 1 +---+---+---+---+---+---+
;; | | | | | | |
;; C 2 +---+---+---+---+---+---+
;; o | | | | | | |
;; l 3 +---+---+---+---+---+---+
;; | | | | | | |
;; 4 +---+---+---+---+---+---+
;; | | | | | | |
;; 5 +---+---+---+---+---+---+
;;
;; R1 R2 C1 C2
(gtk-table-attach table label1 0 1 0 1)
(gtk-table-attach table label2 2 3 0 1)
(gtk-table-attach table label3 4 5 0 1)
(gtk-table-attach table entry1 1 2 0 1)
(gtk-table-attach table entry2 3 4 0 1)
(gtk-table-attach table entry3 5 6 0 1)
(gtk-table-attach table button1 1 6 1 2)
(gtk-table-attach table label4 0 1 3 4)
(gtk-table-attach table entry4 1 6 3 4)
(gtk-table-attach table button2 1 6 4 5)
;; Put the table into the window
(gtk-container-add window table)
;; Show the window
(gtk-widget-show-all window))))

;; Execution!
(main)



実行

以下のコマンドで実行

ros run --load gtk-table-sample.lisp

以下のような画面が表示されます。

Screenshot from 2018-02-11 15-23-15.png


最後に

テーブルを使ったウィジェット配置は自分的には自由度が高くて良いと思いました。

他にもこういった「パッキングウィジェット」というウィジェットを配置するためのウィジェット(?)があるので、色々組み合わせるときれいなGUIが作れそうですね。