Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Использование компонентов в Macromedia Flash #8


Информационный Канал Subscribe.Ru

Выпуск №8.

Доброе время суток. Сразу перейдем к делу, и отметим, что сегодня нашему внимаю, предстанет компонент TextInput. Это однострочное текстовое поле, в определенном смысле практически полный аналог инструмента - Text Tool. Ни говоря более, посмотрим, что может предоставить справочная система Flash о данном компоненте.

Перевод: Using Components > Components Dictionary > TextInput component > About the TextInput component

О компоненте TextInput

Компонент TextInput - однострочное текстовое поле, которое является надстройкой над объектом ActionScript TextField. Данный компонент, как и прочие другие, позволяет использовать для оформления внешнего вида стили. Если экземпляр заблокирован, то текст в нем будет иметь цветовую гамму согласно стилю disabledColor. Текст в компоненте TextInput может быть отформатирован как HTML, а также имеется возможность маскировать введенный пароль.

Компонент TextInput может быть активен для ввода или заблокирован. В последнем случае компонент не реагирует на воздействия от мыши и клавиатуры. В активном состоянии компонент имеет фокус, выделение, и правила навигации такие же, как и объект ActionScript TextField. Когда экземпляр TextInput обладает фокусом можно использовать следующие клавиши для изменения состояния:
КлавишаОписание
Клавиши позиционированияПеремещает точку введения на один символ влево и вправо.
Shift+TabПеремещает фокус на предшествующий объект.
TabПеремещает фокус на следующий объект.

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

При использовании компонента TextInput в проекте его содержимое можно сделать доступным для программ чтения с экрана. Для этого необходимо воспользоваться панелью Accessibility.


Перевод: Using Components > Components Dictionary > TextInput component > Using the TextInput component

Использование компонента TextInput

Вы можете использовать компонент TextInput в любом месте, где необходимо применение однострочного текстового поля. Если же требуется многострочное текстовое поле, то для данных целей следует использовать компонент TextArea. Например, компонент TextInput может быть использован в форме как поле для ввода пароля. Можно установить Листенер, проверяющий количество введенных символов, и в случае ошибки он мог бы выводить соответствующее оповещение пользователю.

Параметры TextInput

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

  • text определяет содержание компонента TextInput. Нельзя ввести символ перевода строки. Значение по умолчанию - "" (пустая строка).

  • editable указывает, может, быть ли изменён текст компонента (true) или нет (false). Значение по умолчанию является true.

  • password устанавливает режим пароля - маскирование введенного текста. Значение по умолчанию false (текст отображается как есть).

Эти и другие свойства компонента TextInput могут быть изменены с помощью кода ActionScript.

Использование компонента TextInput в проекте

Следующая процедура объясняет, как добавить компонент TextInput к проекту в среде разработки. В этом примере, компонент является полем для ввода пароля, с Листенером, определяющим введено ли нужное количество символов.

  1. Перетащите компонент TextInput с панели Components на сцену.
  2. В инспекторе свойств сделайте следующее:
    • Введите имя экземпляра passwordField.
    • Оставьте параметр text пустым.
    • Установите параметр editable в true.
    • Установите параметр password в true.
  3. Выберитесь кадр 1 на временной диаграмме, открыв панель Actions, введите следующий код:
    textListener = new Object();
    textListener.handleEvent = function (evt){
      if (evt.type == "enter"){
        trace("You must enter at least 8 characters");
      }
    }
    passwordField.addEventListener("enter", textListener);
    

    Этот код устанавливают слушателя события enter для экземпляра TextInput passwordField, который оповещает пользователя о нужном количестве символов.

  4. Как только текст будет введен в экземпляр passwordField, его значение можно получить следующим образом:
    var login = passwordField.text;

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

Мы же рассмотрим только свойства, методы и события, которые непосредственно принадлежат классу TextInput.

Событие TextInput.change

Как уже отмечалось, можно использовать два вида синтаксиса для обработки событий. Мы естественно остановим свой выбор на модели Генератор-Листенеры. Особенности этой модели нами были рассмотрены.

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

Объект, передаваемый функции обработчику, содержит два свойства:

  • target - путь к компоненту, в котором произведено изменение текста (пример, _level0.tc1)
  • type - тип события, содержит change

Пример использования:

function ch1(eventObj) {
 for (var k in eventObj)
  trace(k + ': ' + eventObj[k]);
 
}
tc1.addEventListener('change', ch1);

Событие TextInput.enter

Возникает, когда пользователь нажал клавишу Enter. Событие может быть использовано, например, в случае имитации работы html-формы. Событийный объект содержит аналогичные свойства, только свойство type будет иметь значение enter.

Пример совместного использования рассмотренных событий:

function ch1(eventObj) {
 switch (eventObj.type) {
  case 'enter':
   trace('Отправка данных');
   break;
  case 'change':
   trace('Текст в компоненте ' + eventObj['target'] + ' изменен');
 } 
}
tc1.addEventListener('enter', ch1);
tc1.addEventListener('change', ch1);

Переходим к свойствам компонента TextInput.

TextInput.editable

Как было уже сказано выше, отвечает за возможность изменения текста компонента пользователем. Может принимать два значения: true - текст может быть изменен, false - не может быть изменен. По умолчанию true.

TextInput.hPosition

Данное свойство для меня так и осталось загадочным. В справочной системе говориться, что оно отвечает за горизонтальное выравнивание текста в поле. Там же есть такой пример:
myTextInput.hPosition = 0;

Попытки ввода других значений ни к чему не привели.

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

TextInput.maxHPosition

Данное свойство предназначено только для чтения. У меня оно возвращало 0, возможно, поэтому попытки модификации свойства рассмотренного выше ни давали никакого результата.

TextInput.length

Данное свойство также предназначено только для чтения. С помощью него можно узнать количество символов в тексте компонента. Думаю, ни кого не удивит, что символ табуляции (\t) - один символ.

Пример:
var length = myTextInput.length;

TextInput.maxChars

Устанавливает максимальное количество символов, которое может ввести пользователь. Однако с помощью программного кода можно ввести текст, превышающий этот предел. Значение по умолчанию - null, что означает отсутствие лимита на количество вводимых символов.

Пример:
myTextInput.maxChars = 255;

TextInput.password

Уже не раз упоминавшаяся возможность компонента - режим пароля. Здесь все просто: true - введенный текст маскируется (все символы будут иметь вид звездочки), false - пользователя видит текст как есть.

Пример:
myTextInput.password = true;

TextInput.text

Главное свойство, которое хранит текст компонента.

TextInput.restrict

Указывает набор символов, которые пользователь может вводить в текстовое поле. Значение по умолчанию undefined. Если значение свойство равно пустой строке или undefined, то пользователь может вводить любые символы.

Для составления нужного набора символов можно использовать следующие правила:

  1. последовательно перечислить все символы
    myText.restrict = "0123456789,.";
  2. использовать диапазон символов (диапазон высчитывается исходя из Unicode-коде граничных символов)
    myText.restrict = "0-9а-яА-Я";
  3. совместное использование предыдущих двух пунктов
    myText.restrict = "0123А-Я";
  4. обозначение символов как не приемлемых
    myText.restrict = "^0-9";
  5. совместное использование приемлемых и не приемлемых символов (сначала должны идти приемлемые)
    myText.restrict = "A-z^rR";
  6. обозначение символов через Unicode
    myText.restrict = "\u0030-\u0039"; // 0-9
  7. экранирование специальных символов: \, ^, - (перед ними необходимо поставить символ \, а так как он сам должен быть экранирован, то \\)
    myText.restrict = "\\^\\-\\\\"; // ^, -, \

(Более подробную информацию смотрите в справочной системе)

Так как собственных методов класс TextInput не имеет, будем подводить итоги. Данный компонент хорошо подходит в качестве решения для однострочного текстового поля. Это объясняется тем, что он содержит только необходимую функциональность, что естественно облегчает его использование.

На этом мы закончим сегодняшний обзор. До встречи...


Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора
Подписан адрес:
Код этой рассылки: inet.webbuild.flashmx
Отписаться
Вспомнить пароль

В избранное