소개

CommonLisp 및 GTK+3에서 웹 애플리케이션을 작성할 때 위젯 배치에 관한 메모입니다.
이번에는 테이블을 사용한 배치 방법에 대해 설명합니다.

테이블을 사용한 위젯 배치

아래 코드로 위젯을 배치할 수 있는 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

다음과 같은 화면이 표시됩니다.

마지막으로

테이블을 사용한 위젯 배치는 스스로 자유도가 높고 좋다고 생각했습니다.
그 밖에도 이런 「패킹 위젯」이라고 하는 위젯을 배치하기 위한 위젯(?)이 있으므로, 여러가지 조합할 때 예쁜 GUI를 만들 수 있을 것 같네요.