跳轉到內容

Rebol 程式設計/語言特性/VID

來自華夏公益教科書

VID 代表 **Visual Interface Dialect** (視覺介面方言),是使用 Rebol/View 設計圖形使用者介面的最常用方法。對於使用大量圖形的介面(例如影像、動畫)非常有效。

VID 的一大優勢是,只需幾行程式碼就可以建立使用者介面,例如使按鈕執行操作。

GUI 本身是平臺獨立的,這意味著無論在 Windows、MacOSX、Linux 還是其他平臺上執行程式,它看起來都一樣。

關於 VID 最重要的一點是,顧名思義,它是一種方言或 Rebol 的子語言。用 VID 編寫的程式碼不會像 Rebol 程式碼那樣評估,而是必須先轉換為 Rebol 程式碼才能執行。本質上,一個稱為 **layout** 的程式碼生成器建立 Rebol 程式碼,然後由 Rebol View 引擎執行。視覺介面方言中使用的單詞可能與普通 Rebol 函式的拼寫相同,但使用方式完全不同。

view lo: layout [ button "Press Me" return button "Press Me Too!" ]

這裡,**layout** 接受用視覺介面方言編寫的單詞塊。你可以看到這裡使用了 **return** 這個詞,但在這種情況下,它的含義完全不同。它不是用來 **返回** 值,而是告訴 **layout** 引擎將下一個按鈕放置在螢幕的左側,並在下一行。**return** 的這種不同含義也說明了 Rebol 程式設計的上下文敏感性。

**layout** 返回一個 Rebol 程式碼塊,在本例中,它被分配給變數 **lo**。如果你接著檢視由

probe lo

生成的程式碼,你會看到一屏一屏的程式碼在你面前閃過。


以下是一些使用 VID 可以做的事情的示例。

需要更多示例

介面元素

[編輯 | 編輯原始碼]

VID 佈局中的每個圖形元素都稱為 **介面元素**,它本質上是物件的樹結構。一個介面元素可以包含其他介面元素。

介面元素和介面元素物件的完整機制將在下一章中解釋。

示例說明

[編輯 | 編輯原始碼]

示例僅顯示 **layout 程式碼塊**,即用於建立佈局的塊。所有示例應寫為

view layout [button "Hello World!"]

而我們只顯示

button "Hello World!"

這樣寫示例更容易。

按鈕有兩種:BTN 和 BUTTON

btn "Hello World!"


此按鈕是標準型別,最容易使用。它會隨文字自動縮放,但你可以設定按鈕的寬度,例如

btn 150 "Hello World!"
btn 150 "This is Rebol"


為 BTN 提供不同的顏色和尺寸也很容易

btn 150x40 red "Big Red Button!"
btn 200x20 yellow "Wide Yellow Button!"


BUTTON 不同,因為它在顏色、邊框大小和漸變方面提供了更多定製選項。

button "Hello World!"


按鈕操作

[編輯 | 編輯原始碼]

為了對按鈕進行操作,你可以指定一個操作塊。這只是一個程式碼塊,在按下按鈕時(例如在左鍵單擊時)進行評估。這個程式碼塊可以這樣指定

 button "Hello World!" [print "Hello World!"]

執行此程式時,每次單擊按鈕,控制檯都會列印“Hello World!”。

切換按鈕

[編輯 | 編輯原始碼]

切換按鈕是一個有兩種狀態的按鈕。切換按鈕有兩種:TOG 和 TOGGLE。

tog "Activated"
toggle "Activated"

與 BUTTON 一樣,TOGGLE 可以定製。

https://wikibook.tw/wiki/REBOL_Programming

選擇框

[編輯 | 編輯原始碼]

選擇框是一個具有多種狀態的按鈕。它接受多個字串來建立選擇。以下是一個示例

choice "Excellent" "Good" "Ok" "Lacking" "Dismal"

我們可以透過在塊中提供程式碼來擴充套件此示例。選擇框的狀態儲存在 c/data/1 中

c: choice "Excellent" "Good" "Ok" "Lacking" "Dismal" [print c/data/1]

使用它,我們可以使用 SWITCH 基於特定選擇觸發事件

c: choice "Excellent" "Good" "OK" "Lacking" "Dismal" [
    switch c/data/1 [
        "Excellent" [alert "Yeah!!!!!!"]
        "Good" [alert "Thank you!"]
        "OK" [alert "eh"]
        "Lacking" [alert "Come on!"]
        "Dismal" [alert "You can do better than that!"]
    ]
]

簡單列表

[編輯 | 編輯原始碼]

簡單列表是單列列表,可以使用 TEXT-LIST 建立。優點是它很容易訪問,在多列表佈局中非常有用,其中多個列表需要互動。

一個簡單列表

>> view layout [text-list data ["Hello World!" Rebol is Cool!]]


複雜列表

[編輯 | 編輯原始碼]

複雜列表提供了更多功能,但設定需要更多時間。對於複雜列表,你可以使用

  • 多列
  • 不同的字型和顏色方案

對於典型的複雜列表,你可以使用 LIST

l: list [
  ... GUI code ...
] supply [
  ... DATA code ...
]

列表程式碼

[編輯 | 編輯原始碼]

GUI 程式碼是一個簡單的佈局,它代表列表中的一個條目。該佈局可以像 VID 中的任何其他佈局一樣靈活,因此您可以生成帶有文字、圖形或影像的垂直和水平佈局。應遵循某些規則。

示例

l: list 300x100 [across text text text] supply []

將生成一個空的 **迭代面** 列表。

列表資料

[編輯 | 編輯原始碼]

DATA 程式碼是為列表提供資料的程式碼,它是一個函式,在列表中的每個面都進行迭代。兩個變數 **index** 和 **count** 可直接用於自動迭代函式中的資料。**index** 值由列表的每個 **列** 使用,而 **count** 指定每個 **行**。對於一個有 3 列的列表,序列將是

ROW1 COLUMN1
ROW1 COLUMN2
ROW1 COLUMN3

ROW2 COLUMN1
ROW2 COLUMN2
ROW2 COLUMN3

ROW3 COLUMN1
ROW3 COLUMN2
.
.
.

對於列表,**捲軸** 是獨立的,也應該手動管理。它也可以放置在您想要的位置。

選擇值

[編輯 | 編輯原始碼]

列表佈局中的事件可用於在您將滑鼠懸停在列表條目上時選擇或顯示 **over** 顏色。

完整示例

[編輯 | 編輯原始碼]

一個完整的示例

l: list 300x200 [
  across
  text 200 bold
  text 50 red
  text 50 blue
] supply [
  (complete this)
]

操作迭代的面

[編輯 | 編輯原始碼]

**supply** 函式可以操作列表佈局,因為您正在向下迭代列表。當您想要使文字樣式、背景顏色或其他面屬性資料依賴時,這很有用。

交替背景顏色示例
[編輯 | 編輯原始碼]
l: list 300x200 [
  across space 0
  text 200 bold
  text 50 red
  text 50 blue
] supply [
  (complete this)
]

佈局函式

[編輯 | 編輯原始碼]

VID 提供了各種函式用於按特定佈局排序您的面。

調整大小

[編輯 | 編輯原始碼]

將 VID 與可調整大小的視窗一起使用有點困難,但仍然可行:您需要檢測視窗何時調整大小,然後根據這個新大小重新繪製您的 GUI。

遵守可調整大小的佈局

[編輯 | 編輯原始碼]

要將 VID 與可調整大小的面一起使用,您需要了解 GUI 的尺寸。

VID 沒有直接用於將面“附加”到 GUI 的特定尺寸相關位置的函式,因此我們需要自己執行這些計算。

面板是 VID 面組。這有很多優勢

  • 面板中的面可以一起移動
  • 面板中的文字欄位可以一起更新

更新面板面

[編輯 | 編輯原始碼]

當您有一個需要自動填充的表單時,您可以一次填充每個欄位,或者將它們分組到一個面板中,並使用 SET-FACE 一次性更新所有欄位

person: panel [
  field field field
]

並更新所有欄位

set-face person ["This" "is" "Cool"]

不僅可以使用字串

set-face person [25$ now http://www.rebol.com]

如果您有除欄位以外的其他面,則可以透過在塊中插入 NONE 來跳過它們

person: panel [
  field field box field
]
set-face person ["This" "is" none "Cool"]

TODO:請檢查 SET-FACE 在哪些面上有效

多個視窗

[編輯 | 編輯原始碼]

在 REBOL 中,沒有真正的“主視窗”概念,除了控制檯。如果您關閉控制檯,您將關閉所有視窗並退出正在執行的程式。如果您有一個從 Windows XP 中雙擊指令碼圖示執行的指令碼,您將能夠在沒有控制檯視窗的情況下執行您的程式,因此沒有主視窗。

您可以開啟任意數量的視窗,它們在功能上彼此平等,並且可以完全控制彼此。

VID 視窗實際上是面組,儲存在另一個面對象中。這使您可以靈活地在視窗中或作為較大 GUI 的一部分呈現您的 GUI。

要開啟一個視窗,您通常使用 VIEW

view layout [btn "Hello World"]

要從這個視窗開啟其他視窗,請向 BTN 新增一個操作

view layout [
  btn "Hello World" [view/new layout [h1 "New Window"]]
]

VIEW/NEW 也很有用,如果您想在捕獲來自已建立視窗的事件之前設定變數或執行其他程式碼。

寫一些關於 DO-EVENTS 的內容。

如果您想快速顯示帶有訊息和幾個按鈕的對話方塊,警報很有用。它是獲取使用者反饋的快速方法。ALERT 是最簡單的

alert "This is an Alert Window"

將給出以下內容

REQUEST 提供了更多靈活性和各種按鈕排列。

request "Do you want to Rock and REBOL?"

對話方塊

[編輯 | 編輯原始碼]

如果您想要更多地控制對大範圍面的視覺外觀,樣式很有用。假設您想讓所有按鈕都變紅?您可以使用 **stylize** 來做到這一點。您可以生成一種不同於標準按鈕的行為的新按鈕。面中的所有部分都可以在自定義樣式中進行更改。**樣式是建立定製但統一的 GUI 外觀和行為的最簡單方法。**

可以將其視為文字處理器的樣式調色盤。您可以定義各種樣式,在您的 GUI 中使用它們,並像更改文件中的所有部分標題一樣更改它們。該概念也類似於與網頁和 HTML 一起使用的層疊樣式表。

使用樣式有兩種方法

'style 單詞在佈局中使用

view layout [
  style my-btn btn red
  my-btn "Customized Button"
]

如果您想要一個更大的獨立樣式部分,您可以將其定義為一個塊

my-styles: stylize [
  my-btn: btn red
]

view layout [
   styles my-styles
   my-btn "Customized Button"
   my-btn "Another Button"
]

這可能應該移到檢視,因為它比 VID 更基本的功能。

所有面都共享同一個事件系統,這意味著**處理面的事件的方式對所有面都是一樣的**。(正確嗎?)

要控制面的事件,可以使用 FEEL 關鍵字。

影像可以載入到 VID GUI 中。

特殊效果

[編輯 | 編輯原始碼]
華夏公益教科書