Как создавать и использовать текстовые поля

Return to: REBOL How To

СОДЕРЖАНИЕ

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

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

REBOL [Title: "Example"]

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

Создание текстовых полей

Подобно всем другим стилям пользовательского интерфейса VID, текстовые поля определяются с помощью LAYOUT и отображаются с помощью функции VIEW.

Встроенные стили

Существует три предопределенных стиля текстовых полей:

field	Используется для однострочного ввода. Клавиши возврата и табуляции завершают ввод текста и переходят к следующему полю.
area	Используется для многострочного ввода абзацев или отдельных строк. Текст можно переносить или нет.
info	Используется для отображения нередактируемого текста.

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

Поле

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

Вот простая однострочная программа, отображающая поле ввода текста:

view layout [field]

При выполнении он отобразит:

Все атрибуты поля предопределены, включая цвет, край и размер. По умолчанию размер 200x24.

Cм. Документацию REBOL/View для описания функций VIEW и LAYOUT.

FДля остальных примеров функции VIEW и LAYOUT не показаны, но все эти примеры являются функциональными и могут запускаться, помещая их в блок, как показано ниже:

view layout [
    (example)
]

Чтобы отобразить текст по умолчанию в поле, укажите текст в виде строки после стиля FIELD:

field "Text here"

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

Можно указать ширину полей в пикселях:

field 80 "Short"
field 480 "Much wider field"

что приводит к:

И ширину, и высоту полей можно указать парой:

field 100x18 "Short"
field 100x48 "Tall"

Это отображается как:

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

style lab label right 60x24
across
lab "Name:" field return
lab "Email:" field return
lab "Phone:" field return
lab
space 0
button "Enter"
button "Cancel"

Обратите внимание, что пустая строка LAB - это простой способ заставить кнопки иметь такой же отступ, что и поля.

Результат:

По мере ввода в поля нажатие табуляции или возврата приведет к переходу к следующему полю. Нажатие клавиши CTRL-tab вернет вас к предыдущему полю.

В следующем разделе вы увидите, как получить содержимое этих полей.

Область

Области похожи на поля, но предназначены для абзацев текста, для которых требуется несколько строк.

Вот стиль области по умолчанию:

view layout [area]

Появится большое пустое поле ввода текста:

Размер по умолчанию для области - 400x150, как показано выше.

Чтобы ввести текст по умолчанию для области, вы можете написать:

area "Text input goes here."

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

Вы можете указать размер области с помощью пары, например:

area 150x50 "A small area"

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

Текст области может быть получен из любого источника. Например, вы можете прочитать файл и отобразить его текст в области:

area 400x400 read %fields.txt

Это создает большую область, которая показывает источник текста для этого документа.

Аналогичным образом вы можете прочитать URL-адрес, например источник веб-страницы или текстового документа в Интернете, поместив URL-адрес вместо имени файла, указанного выше. Попробуйте, но обязательно удалите% для URL-адресов.

area 400x400 read http://www.rebol.com

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

area 200x400 wrap read %fields.txt

Это приводит к:

Противоположность WRAP - AS-IS, которая используется по умолчанию.

Вот пример формы ввода, в которой используются поля и области:

style lab label right 60x24
across
lab "Program:" field return
lab "Purpose:" area return
lab "Notes:" area return
lab
button "Enter"
button "Cancel"

Результат:

В следующем разделе вы увидите, как получить содержимое этих полей.

Информация

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

info "Only displays text"

будет отображать

Его размер можно изменить так же, как в приведенных выше примерах полей.

Настраиваемые поля

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

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

Шрифты

К полям можно применять стандартные настройки шрифта лица.

Вы можете изменить стиль шрифта с помощью:

field "Plain text"
field "Bold text" bold 
field "Italic text" italic 
field "Bold, italic, underlined" bold italic underline

Или измените сам шрифт:

field "Sans serif font (default)" font-name font-sans-serif
field "Serif font like Times" font-name font-serif
field "Fixed width font" font-name font-fixed

В поле можно использовать шрифт любого размера.

field 200x18 "Small text" font-size 9
field 200x44 "Big text" font-size 32

Кроме того, поле можно выровнять по-разному:

field "Left aligned" left
field "Centered" center
field "Right aligned" right

field 200x32 "Top aligned" top
field 200x32 "Middle aligned" middle
field 200x32 "Bottom aligned" bottom

Цвета

TЦвет области поля за шрифтом можно изменить. Это то же правило, что и для кнопок, а не для текста. Просто укажите цвет:

field "This is red" red
field "This is purple" purple
field "This is greenish" 80.180.120

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

field "This is red text" font-color red
field "This one stands out" black font-color white
field "Hot field here" bold black font-color red

Чтобы полностью исключить цвет области поля:

field "No backdrop area" colors none

Но не путайте это со стилем ИНФО. Этот стиль все еще можно редактировать.

Цвет фокусировки

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

field "No highlight color" colors [240.240.240 240.240.240]

создаст поле:

который не станет желтым при нажатии на него.

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

field "Light blue highlight color" colors reduce [white sky]

Края

Вы можете изменить размер, цвет и эффект краев окружающего поля.

Например, вот несколько вариантов размера кромки:

field "Normal edge"
field "Thin edge" edge [size: 1x1]
field "Thick edge" edge [size: 3x3]
field "Really thick edge" edge [size: 4x4]
field "No edge at all" edge none

Края могут быть неровными по своим размерам:

field "Thick on top and bottom" edge [size: 2x4]
field "Thick on sides" edge [size: 4x2]

Иногда вам нужно создать поле без краев или фона:

field "No frills field" colors none edge none

Цвет кромки можно изменить с помощью:

field "Brown edges" edge [color: rebolor]
field "Blue edges" edge [color: 100.100.200]

А краевой эффект можно изменить с помощью:

field "Reversed edge" edge [effect: 'bevel]
field "Flat edge" edge [effect: none]
field "Chooser edge" edge [size: 3x3 effect: 'bezel]

Изображения и эффекты

Как и любое другое лицо VID, изображения могут появляться за текстом поля. Однако это может сделать текст:

1. Сложно читать.
2. Медленнее вводить.
3. Странно для пользователей.

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

Вот поле с изображением:

field "Text field with NYC" %nyc.jpg

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

field "Text field with all NYC" %nyc.jpg effect [fit]

Конечно, сейчас вы не можете читать текст. Итак, меняем цвет текста:

field "Field with NYC" bold font-color white %nyc.jpg effect [fit]

Тем не менее, это не очень удобно. Возможно, попробуйте размыть изображение:

field "Field with washed NYC" bold %nyc.jpg effect [fit luma 120]

Вот так лучше. Нью-Йорк просто нужно было помыть.

Чтобы использовать только часть NYC, используйте эффект CROP, а не FIT:

field "Field with cropped NYC" bold %nyc.jpg 
    effect [crop 10x200 300x24 luma 120]

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

img: to-image layout [origin 0  image %nyc.jpg effect [luma 120]]
view layout [field "Washed NYC" bold img effect [fit]]

Не забывайте об эффекте FIT.

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

field "Gradient" bold effect [gradient 240.200.200 200.200.240]
field "Gradient" bold effect [gradient 120.0.0 0.0.120]
    font-color white

area "Gradient" bold effect [gradient 1x1 240.200.200 200.200.240]
area "Gradient" bold effect [gradient 1x1 120.0.0 0.0.120]
    font-color white

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

Наконец, чтобы создать эффект типа тени:

field "Dropshadow text" bold font-color white
    colors [0.120.120 120.120.0] shadow 2x2

Используйте стили!

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

Например, если у вас более одного поля с одинаковыми атрибутами, НЕ пишите:

field "Field 1" 300 bold beige font-name font-fixed
field "Field 2" 300 bold beige font-name font-fixed
field "Field 3" 300 bold beige font-name font-fixed

Вместо этого напишите это как:

style fld field 300 bold beige font-name font-fixed

fld "Field 1"
fld "Field 2"
fld "Field 3"

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

Использование текстовых полей

Теперь, когда вы знаете, как создавать поля, вы захотите узнать, как их использовать. Это тема этого раздела.

Получение ввода из полей

Поле предназначено для приема ввода текста от пользователя. Итак, как ваша программа получает этот ввод? Есть несколько методов, в зависимости от ваших потребностей.

Использование значений действия

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

В приведенном ниже примере будет напечатано содержимое поля после того, как оно было введено:

field [print value]

В действии лица слово VALUE содержит строку поля ввода. Это особый случай, поэтому обратитесь к руководству View, если вам нужна дополнительная информация о том, как это работает.

Вы можете выполнять практически любую обработку в рамках действия. Например, эта строка принимает URL-адрес для просмотра:

across
label "URL:"
field [browse to-url value]

Для веб-страниц не забудьте ввести часть URL-адреса HTTP://. Вы можете проверить это в блоке и при необходимости добавить.

field [
    if not find/match value "http://" [insert value "http://"]
    show face
    browse to-url value
]

В этом примере будет вставлен HTTP://, если он отсутствует. Поле будет обновлено, чтобы показать, что оно было добавлено. Подробнее о SHOW позже.

Использование переменных лица

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

a-fld: field

Теперь к значению поля face можно обращаться по имени.

Примечание. Старайтесь не использовать имя переменной, которое совпадает со словом стиля или атрибута, иначе это может привести к путанице в дальнейшем. Например, не называйте переменную "field".

Теперь вы можете написать в своем коде:

print a-fld/text

чтобы распечатать содержимое поля. Уточнение /text обращается к текстовой строке поля.

Вот пример, который принимает три поля и отправляет их кому-то в сообщении электронной почты:

style lab label right 60x24
across
lab "Name:"  f-name:  field return
lab "Phone:" f-phone: field return
lab "Age:"   f-age:   field return
lab
button "Send Email" [
    send fred@example.com reform [
        "name:"  f-name/text  newline
        "phone:" f-phone/text newline
        "age:"   f-age/text   newline
    ]
]

Этот пример отображается как:

Поиск полей по имени стиля

Есть еще один метод, который можно использовать для доступа к полям макета. Вы можете получить к ним доступ по именам их стилей.

Например, если вы напишете:

out: layout [
    style lab label right 60x24
    across
    lab "Name:"  field return
    lab "Phone:" field return
    lab "Age:"   field return
]

Вы можете распечатать все поля с помощью:

foreach face out/pane [
    if face/style = 'field [print face/text]
]

Это сканирует весь макет на наличие всех полей и распечатывает их.

Изменение полей

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

Например:

f-name: field
across space 0
button "Set to Ann" [
    f-name/text: copy "Ann"
    show f-name
]
button "Set to Bob" [
    f-name/text: copy "Bob"
    show f-name
]

Обратите внимание, что для текста необходимо использовать функцию COPY, в противном случае буквальная строка будет изменена, когда пользователь изменит поле.

Пример выглядит так:

При нажатии на кнопки поле изменится соответствующим образом.

Обратите внимание, что SHOW необходимо выполнить для обновления поля в окне. Самая распространенная ошибка при изменении полей - это забыть обновить поля с помощью SHOW.

Вот еще один пример:

text-list "Red" "Forest" "Blue" "Gold" "Teal" [
    f-color/text: copy value
    f-color/font/color: get load value
    show f-color
]
f-color: field "Pick a color"

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

Когда вы нажимаете на один из цветов, текст и цвет текста будут установлены в поле.

Очистка всех полей

Бывают случаи, когда вам нужно очистить все поля макета, чтобы пользователь мог вводить новые данные. Это можно сделать с помощью функции CLEAR-FIELDS.

Предоставьте функцию CLEAR-FIELDS гранью макета. Например:

view out: layout [
    style lab label right 60x24
    across
    lab "Name:"  field return
    lab "Phone:" field return
    lab "Age:"   field return
    lab space 0
    button "Clear" [clear-fields out  show out]
    button "Enter"
]

Название этого макета - OUT. Когда пользователь нажимает кнопку «Очистить», все поля очищаются.

Обновление полей

При изменении полей, содержащих более 200 символов, вам потребуется предоставить дополнительную информацию, чтобы обновить лицо целиком.

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

Вот пример:

f-data: area 400x400 read %fields.txt
button "Clear" [
    clear f-data/text
    f-data/line-list: none
    show f-data
]

Это показывает крупное начертание текста. Нажатие кнопки Clear очищает строку /text, а список строк сбрасывается на NONE, чтобы указать, что был затронут весь текст.

Установка фокуса

Лицо поля, которое получает ввод с клавиатуры, называется фокальным лицом. Это фокус ввода.

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

Функция FOCUS вызывается с лицом поля, которому требуется фокусировка. Например:

out: layout [
    f1: field "field 1"
    f2: field "field 2"
]
focus f1
view out

установит фокус на первое поле при отображении макета.

Этот пример можно расширить, добавив в него кнопки, показывающие, как можно перемещать фокус:

view layout [
    across
    f1: field "field 1"
    button "Focus 1" [focus f1]
    return
    f2: field "field 2"
    button "Focus 2" [focus f2]
    return
    button "No Focus" [unfocus]
]

Он отображается как:

Нажатие на первые две кнопки изменит фокус. Нажатие на третью кнопку полностью снимет фокус

Если ваш интерфейс включает несколько макетов, рекомендуется очистить фокус перед изменением макета. Это можно сделать с помощью функции UNFOCUS. Не требует аргументов.

unfocus

Скрытые поля

Для некоторых типов полей, таких как ввод пароля, вы можете не захотеть отображать вводимый текст. Любое поле можно настроить на скрытый ввод, задав слово HIDE. Например:

f-pass: field hide

Для каждого вводимого симвала в поле будет отображаться "

Обратите внимание, что доступ к тексту в этом поле также отличается. F-проход / текст будет ""строка, которая отображается. Поле f-pass / data содержит фактический текст. Чтобы распечатать содержимое поля выше, используйте:

print f-pass/data

Ниже приведен пример ввода имени пользователя и пароля. Пароль скрыт.

view layout [
    style lab label right 60x24
    across
    lab "User:" f1: field return
    lab "Pass:" f2: field hide return
    lab
    button "Enter" [
        print [f1/text f2/data]
    ]
]

Он отображается как:

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

Предопределенные поля запроса

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

Request-Text

Эта функция позволяет запрашивать строку у пользователя. Появится всплывающее окно для принятия ввода.

Его можно использовать так же просто, как:

print request-text

Вы также можете указать уточнение /title, чтобы задать вопрос:

print request-text/title "What is your name?"

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

print request-text/title/default "What is your name?" "bob"

Если пользователь нажимает CANCEL, возвращается значение NONE.

Request-Pass

Для запроса имени пользователя и пароля есть предопределенная функция REQUEST-PASS. Появится всплывающее окно.

Функция вернет блок, содержащий строки имени пользователя и пароля. Например:

probe request-pass

Чтобы установить результат в переменные, вы можете написать:

set [user pass] request-pass

Чтобы изменить заголовок запроса:

request-pass/title "Enter your account:"

Чтобы указать имя пользователя по умолчанию:

request-pass/user "Bob"

Чтобы запросить только пароль без имени пользователя:

request-pass/only

Если пользователь нажимает CANCEL, возвращается значение NONE.

Дополнительные документы

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