Как создавать субпанели

Return to: REBOL How To

СОДЕРЖАНИЕ

Как запустить примеры

Чтобы запустить любой из примеров, показанных ниже, откройте текстовый редактор и создайте строку заголовка REBOL, например:

REBOL [Title: "Example"]

Затем просто вырежьте пример текста и вставьте его после этой строки. Сохраните текстовый файл и дайте ему имя, например example.r. Затем запустите файл так же, как и любой файл REBOL.

Создание главного окна

Вот как создать подпанели, которые можно быстро переключать из одного окна.

В макете верхнего уровня (окна) укажите область окна, которая будет содержать субпанели. Это можно сделать с помощью стиля VID, например BOX.

Вот пример макета верхнего уровня. BOX размером 240x200 предназначен для размещения субпанелей, а две кнопки предназначены для переключения между панелями.

main: layout [
    vh2 "Subpanel Examples"
    guide
    pad 20
    button "Panel 1" [panels/pane: panel1  show panels]
    button "Panel 2" [panels/pane: panel2  show panels]
    button "Quit" [quit]
    return
    box 2x140 maroon
    return
    panels: box 220x140
]

Это будет выглядеть так:

Слово панели будет относиться к окну, и оно используется кнопками для переключения его содержимого. Действия кнопок будут описаны позже.

Для отладки вы можете захотеть увидеть расположение субпанелей, вы можете использовать этот удобный трюк. Установите цвет окна при отладке. Например, цвет рамки панели ниже установлен на темно-синий.

main: layout [
    vh2 "Subpanel Examples"
    guide
    pad 20
    button "Panel 1" [panels/pane: panel1  show panels]
    button "Panel 2" [panels/pane: panel2  show panels]
    button "Quit" [quit]
    return
    box 2x140 maroon
    return
    panels: box 220x140 coal
]

Это будет выглядеть так:

Создание субпанелей

Теперь вы можете создавать субпанели, которые будут отображаться в окне. Вы можете иметь любое количество субпанелей в области BOX, и эти субпанели могут включать в себя любые возможности REBOL/View, такие как изображения, анимации, списки или даже другие субпанели.

Первая субпанель имеет заголовок, два поля и кнопку.

panel1: layout [
    origin 8x8
    h3 "Panel 1"
    field "Field 1"
    field "Field 2"
    button "The Answer" [alert "I know nothing."]
]

Он будет выглядеть так:

Вторая субпанель содержит пару ползунков и флажков. Флажки изменят цвет фона субпанели.

panel2: layout [
    origin 8x8
    h3 "Panel 2"
    across
    txt "X:"
    slider 150x16
    return
    txt "Y:"
    slider 150x16
    return
    check [panel2/color: maroon  show panel2]
    txt "Don't click this"
    return 
    check [panel2/color: silver  show panel2]
    txt "Click this" 
    return
]

Он будет выглядеть так:

Сборка и запуск

Приведенные выше примеры собраны здесь в единую программу, которую вы можете вырезать и вставить в текстовый редактор.

REBOL [Title: "Subpanels"]

main: layout [
    vh2 "Subpanel Examples"
    guide
    pad 20
    button "Panel 1" [panels/pane: panel1  show panels]
    button "Panel 2" [panels/pane: panel2  show panels]
    button "Quit" [quit]
    return
    box 2x140 maroon
    return
    panels: box 220x140
]

panel1: layout [
    origin 8x8
    h2 "Panel 1"
    field "Field 1"
    field "Field 2"
    button "The Answer" [alert "I know nothing."]
]

panel2: layout [
    origin 8x8
    h2 "Panel 2"
    across
    txt "X:"
    slider 150x16
    return
    txt "Y:"
    slider 150x16
    return
    check [panel2/color: maroon  show panel2]
    txt "Don't click this"
    return 
    check [panel2/color: silver  show panel2]
    txt "Click this" 
    return
]

panel1/offset: 0x0
panel2/offset: 0x0

panels/pane: panel1

view main

Смещения панели установлены на 0x0, чтобы уменьшить необходимое пространство.

Вторая предпоследняя строка устанавливает начальную панель на panel1. Если этого не сделать, начальная панель отображаться не будет.

Чтобы изменить панель, действия кнопок изменяют панель для BOX, затем обновляют BOX с помощью функции SHOW.

Вы можете расширить этот пример и добавить несколько панелей, добавив несколько стилей BOX к вашему основному макету и определив дополнительные субпанели.