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

Return to: REBOL How To

Contents

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

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

REBOL [Title: "Example"]

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

Файлы изображений для примеров ниже можно получить с помощью следующего скрипта:

files: [%button.gif %button2.gif]
site: http://www.rebol.com/how-to/graphics
foreach file files [write/binary file read/binary site/:file]

Создание пользовательского изображения кнопки

Графические изображения можно использовать для создания настраиваемых кнопок.

В примерах ниже это изображение будет использоваться для всех кнопок:

view layout [image %button.gif]

Это выглядит как:

Обратите внимание, что изображение не обязательно должно содержать текст; это твой выбор. Текст может быть предоставлен позже с помощью REBOL, что позволит вам повторно использовать кнопку несколько раз, не перезагружая ее.

Стиль IMAGE будет действовать как кнопка, если за ним следует блок действия. Когда по изображению щелкают мышью, происходит действие.

В приведенном ниже примере показано действие, которое просматривает веб-сайт. Кроме того, предусмотрена строка «REB», которая будет нарисована поверх изображения кнопки.

view layout [
    backcolor white
    image "REB" %button.gif [browse http://www.rebol.com]
]

Результат:

Цвет фона окна установлен на белый, потому что именно эта кнопка лучше всего смотрится на белом фоне.

Кнопка представляет собой файл в формате GIF. Вы также можете использовать графические файлы JPG, PNG и BMP. Обязательно поставте % перед именем файла, иначе произойдет ошибка.

Добавление нескольких пользовательских кнопок

Приведенный выше пример можно расширить, чтобы многократно использовать одно и то же графическое изображение кнопки. В этом примере создаются три кнопки, которые переводят вас на разные веб-сайты.

view layout [
    backcolor white
    style btn image %button.gif
    btn "REB"  [browse http://www.rebol.com]
    btn "CNET" [browse http://www.cnet.com]
    btn "CNN"  [browse http://www.cnn.com]
]

Результат выглядит так:

В этом примере создается стиль лица под названием BTN, который используется несколько раз. Этот метод полезно запомнить. Это экономит ввод текста и позволяет вам изменить изображение кнопки для всех кнопок, просто изменив одну строку.

Кнопки можно расположить по горизонтали, указав в макете ключевое слово ACROSS. Используя предыдущий пример и добавив ACROSS:

view layout [
    backcolor white
    style btn image %button.gif
    across
    btn "REB"  [browse http://www.rebol.com]
    btn "CNET" [browse http://www.cnet.com]
    btn "CNN"  [browse http://www.cnn.com]
]

Результат выглядит так:

Добавление действия щелчка правой кнопкой мыши

Вы можете легко добавить Alt-щелчок (часто называемый правым щелчком, но это зависит от того, как настроена ваша мышь). Для этого предоставьте второй блок действий. Он будет использоваться для альтернативного щелчка. В приведенном ниже примере при обычном щелчке по ссылке открывается REBOL.com, а при щелчке с альтернативным щелчком - по REBOL.org.

view layout [
    backcolor white
    image "REB" %button.gif
        [browse http://www.rebol.com]
        [browse http://www.rebol.org]
]

Кнопка выглядит так же, как и раньше, но чувствительна к нажатию правой клавиши:

Изменение текстовых атрибутов для настраиваемой кнопки

К кнопке с изображением можно применить все стандартные атрибуты шрифта текста. В приведенном ниже примере показан ряд возможностей:

view layout [
    backcolor white
    style btn image %button.gif
    across
    btn "REB"
    btn "REB" italic
    btn "REB" underline
    btn "REB" font-color gold
    btn "REB" font-size 12
    btn "REB" font-name font-serif
]

Результат:

Примечание. Для упрощения примера блок действий не указан. Кнопки в этом примере ничего не делают, когда вы нажимаете на них. См. Выше примеры блоков действий.

Получение размера изображения кнопки

Возможно, вы захотите узнать ширину и высоту настраиваемой кнопки перед ее отображением. Чтобы узнать размер, введите:

graphic: load %button.gif
print graphic/size
halt

Результат:

70x38

HALT не позволяет интерпретатору закрыть окно консоли после того, как он напечатает размер.

Изменение размера настраиваемой кнопки

Кнопка изображения может быть увеличена без необходимости в другом изображении. Качество масштабированного изображения может отличаться. Некоторые изображения также не масштабируются.

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

view layout [
    backcolor white
    image "REB" 80x28 %button.gif [browse http://www.rebol.com]
]

Результат выглядит так:

Вот пример, когда кнопка становится намного больше:

view layout [
    backcolor white
    image "REB" 200 %button.gif [browse http://www.rebol.com]
]

Результат выглядит так:

Обратите внимание, что масштабируется вся кнопка, включая ее закругленные концы. Однако обратите внимание, что текст остается того же размера. Чтобы изменить текст, укажите его новый размер шрифта:

view layout [
    backcolor white
    image "REB" 200 %button.gif font-size 40
        [browse http://www.rebol.com]
]

Результат выглядит так:

Примечание. Другой метод увеличения размера кнопки без воздействия на концы кнопки будет предоставлен в более позднем выпуске REBOL / View.

Другой способ загрузить изображение кнопки

Изображение кнопки можно загрузить до создания макета. Для этого установите для изображения переменную и обратитесь к переменной в макете. Например, переменная img содержит здесь кнопку:

img: load %button.gif

view layout [
    backcolor white
    image "REB" img [browse http://www.rebol.com]
]

Изображение кнопки также можно загрузить с веб-сервера с помощью такой строки, как

img: load http://www.rebol.com/how-to/graphics/button.gif

Чтобы загрузить изображение из Интернета, но кэшировать локальную копию, чтобы ускорить загрузку при последующих запросах:

img: load-thru/binary http://www.rebol.com/how-to/graphics/button.gif

Не забывайте об уточнении /binary.

Отображение альтернативного изображения кнопки при нажатии

Вы можете изменить изображение кнопки при ее нажатии. Для этого загрузите альтернативное изображение для кнопки. Например, у вас может быть изображение и альтернативное изображение, которые выглядят так:

view layout [
    image %button.gif
    image %button2.gif
]

Обычно отображается первое изображение. При нажатии кнопки отображается второе изображение. Для этого создайте пользовательскую функцию REDRAW в соответствии с ощущением (feel) лица изображения. Вот пример. Два изображения загружаются и называются переменными img1 и img2.

img1: load %button.gif
img2: load %button2.gif

view layout [
    backcolor white
    image "REB" img1 feel [
        redraw: func [face act pos] [
            face/image: either face/state [img2][img1]
        ] 
    ][
        browse http://www.rebol.com
    ]
]

Вышеупомянутая функция перерисовки вызывается непосредственно перед отрисовкой кнопки. Изображение, которое используется для кнопки, зависит от состояния кнопки, вверх или вниз.

Итак, кнопка выглядит так же, пока не будет нажата.

При нажатии кнопки будет показано альтернативное изображение:

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

img-styles: stylize [
    btn: image img1 feel [
        redraw: func [face act pos] [
            face/image: either face/state [img2][img1]
        ] 
    ]
]

view layout [
    backcolor white
    styles img-styles
    across
    btn "REB"  [browse http://www.rebol.com]
    btn "CNET" [browse http://www.cnet.com]
    btn "CNN"  [browse http://www.cnn.com]
]

При нажатии каждой кнопки будет показано другое изображение.