圖形介面

介紹

使用 newLISP，您可以輕鬆地為您的應用程式構建圖形介面。本入門文件已經足夠長，所以我不打算詳細介紹 newLISP-GS 的功能集。但是，這裡有一個簡短的例子，讓您瞭解它的工作原理。

newLISP-GS 的基本組成部分是容器、 小部件 、事件和標籤。您的應用程式由容器組成，容器包含小部件和其他容器。透過給所有東西一個標籤（一個符號），您可以輕鬆地控制它們。當應用程式的使用者點選、按下和滑動東西時，事件會發送回 newLISP-GS，您需要編寫程式碼來處理每個事件。

一個簡單的應用程式

為了介紹基本概念，本章展示了構建一個簡單的應用程式（顏色混合器）是多麼容易。

您可以移動滑塊來改變視窗中央區域的顏色。顏色分量（紅色、綠色和藍色的數字，在 0 到 1 之間）顯示在視窗底部的文字字串中。

在 newLISP-GS 中，容器的內容根據您選擇的佈局管理器型別進行排列 - 目前您可以使用流、網格或邊框佈局。

下圖顯示了應用程式介面的結構。主容器（在本例中是一個名為 'Mixer' 的框架）中填充了其他容器和小部件。視窗的頂部區域（包含滑塊）由一個名為 'SliderPanel' 的面板組成，該面板又包含三個面板，每個面板對應一個滑塊，分別稱為 'RedPanel'、'GreenPanel' 和 'BluePanel'。在下面，中間區域有一個名為 'Swatch' 的畫布，用於顯示顏色，在底部區域有一個名為 'Value' 的文字標籤，用於顯示 RGB 值作為文字。每個區域都使用不同的佈局管理器進行佈局。

只需要一個處理程式。它被分配給滑塊，並且在滑塊移動時觸發。

第一步是載入 newLISP-GS 模組

#!/usr/bin/env newlisp

(load (append (env "NEWLISPDIR") "/guiserver.lsp"))

它在一個名為 gs 的上下文中提供了所有所需的物件和函式。

圖形系統使用單個函式初始化

(gs:init)

介面的各個部分可以逐個新增。首先我定義主視窗，並選擇邊框佈局。邊框佈局允許您將每個元件放置到五個區域之一，分別標記為“north”、“west”、“center”、“east”和“south”。

(gs:frame 'Mixer 200 200 400 300 "Mixer")
(gs:set-resizable 'Mixer nil)
(gs:set-border-layout 'Mixer)

現在可以新增用於容納滑塊的頂部面板。我希望滑塊垂直堆疊，所以我將使用一個 3 行 1 列的網格佈局

(gs:panel 'SliderPanel)
(gs:set-grid-layout 'SliderPanel 3 1)

定義了三個顏色面板中的每一個，以及它們伴隨的標籤和滑塊。滑塊被分配了 slider-handler 函式。我可以在定義完介面後編寫該函式。

(gs:panel  'RedPanel)
(gs:panel  'GreenPanel)
(gs:panel  'BluePanel)

(gs:label  'Red   "Red"   "left" 50 10 )
(gs:label  'Green "Green" "left" 50 10 )
(gs:label  'Blue  "Blue"  "left" 50 10 )

(gs:slider 'RedSlider   'slider-handler "horizontal" 0 100 0)
(gs:slider 'GreenSlider 'slider-handler "horizontal" 0 100 0)
(gs:slider 'BlueSlider  'slider-handler "horizontal" 0 100 0)

(gs:label  'RedSliderStatus   "0"  "right" 50 10)
(gs:label  'GreenSliderStatus "0"  "right" 50 10)
(gs:label  'BlueSliderStatus  "0"  "right" 50 10)

gs:add-to 函式使用分配給它的佈局將元件新增到容器中。如果沒有分配佈局，則使用流佈局，它是一個簡單的順序佈局。首先指定目標容器，然後給出要新增的元件。因此，標記為 'Red'、'RedSlider' 和 'RedSliderStatus' 的物件被逐個新增到 'RedPanel' 容器中。當完成三個面板後，它們可以被新增到 SliderPanel 中

(gs:add-to 'RedPanel 'Red 'RedSlider 'RedSliderStatus) 
(gs:add-to 'GreenPanel 'Green 'GreenSlider 'GreenSliderStatus)
(gs:add-to 'BluePanel 'Blue 'BlueSlider 'BlueSliderStatus)

(gs:add-to 'SliderPanel 'RedPanel 'GreenPanel 'BluePanel)

您可以在畫布上繪製各種圖形，儘管對於這個應用程式，我只打算使用畫布作為色板，一個單色的區域

(gs:canvas 'Swatch)

(gs:label 'Value "")
(gs:set-font 'Value "Sans Serif" 16)

現在，三個主要元件（滑塊面板、色板和值的標籤）可以新增到主框架中。因為我為框架分配了邊框佈局，所以可以使用方向放置每個元件

(gs:add-to 'Mixer 'SliderPanel "north" 'Swatch "center" 'Value "south")

我們沒有使用 east 和 west 區域。

預設情況下，框架和視窗在建立時不可見，所以現在是使主框架可見的好時機

(gs:set-visible 'Mixer true)

這完成了應用程式的結構。現在需要一些初始化，以便在應用程式啟動時顯示一些合理的東西

(set 'red 0 'green 0 'blue 0)
(gs:set-color 'Swatch (list red green blue))
(gs:set-text  'Value (string (list red green blue)))

最後，我不能忘記為滑塊編寫處理程式程式碼。處理程式接收生成事件的物件的 ID 和滑塊的值。程式碼將值（小於 100 的整數）轉換為 0 到 1 之間的數字。然後，set-color 函式可用於將畫布的顏色設定為顯示新的混合顏色。

(define (slider-handler id value)
  (cond 
     ((= id "MAIN:RedSlider") 
        (set 'red (div value 100))
        (gs:set-text 'RedSliderStatus (string red)))
     ((= id "MAIN:GreenSlider") 
       (set 'green (div value 100))
        (gs:set-text 'GreenSliderStatus (string green)))
     ((= id "MAIN:BlueSlider") 
       (set 'blue (div value 100))
       (gs:set-text 'BlueSliderStatus (string blue)))
     )
  (gs:set-color 'Swatch (list red green blue))
  (gs:set-text  'Value (string (list red green blue))))

只需要一行程式碼，我們就完成了。gs:listen 函式監聽事件並將它們分派給處理程式。它會持續執行，所以您不必做任何其他事情。

(gs:listen)

這個小小的應用程式僅僅觸及了 newLISP-GS 的皮毛，所以請檢視文件，並試一試吧！