Проверка и форматирование данных

Динамическое форматирование текста с помощью HTML

Во Flash динамические текстовые поля и поля для ввода способны интерпретировать несложный HTML-код – а значит, вы можете отображать текст, содержащий гиперссылки, менять его цвет и стиль. Flash может интерпретировать следующие теги HTML:

Для отображения HTML-форматированного текста для текстового поля должна быть включена соответствующая опция (об этом говорилось в этом уроке, в разделе "Проверка текстовых строк"). Если эта опция включена, для отображения HTML-форматированного текста используется следующий синтаксис:

myText.htmlText = "<b>Hello! </b><br>Tnank <u>you</u> for visiting our site.";

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

Примечание Не следует думать, что можно ввести HTML-код непосредственно в текстовое поле, и Flash тут же, "на лету", интерпретирует его.

Свойство htmlText содержит HTML-код того, что содержится в текстовом поле. Продолжая наш пример, возьмем такой скрипт:

myVariable = myText.htmlText;

В результате переменная myVariable будет содержать строковое значение "<b>Hello! </b><br>Tnank <u>you</u> for visiting our site." А вот другой скрипт:

myVariable = myText.text;

Здесь myVariable получит строковое значение "Hello! Tnank you for visiting our site." – тот же текст, но без HTML-тегов, поскольку здесь использовано свойство text.

Для создания динамически формируемых сообщений можно использовать теги HTML в сочетании со значениями переменных. К примеру:

myText.htmlText = "<b>Hello " + name + "!</b><br>Tnank <u>you</u> for visiting our site.";

Если name имеет значение "Jack", получится вот что:

myText.htmlText = "<b>Hello Jack!</b><br>Tnank <u>you</u> for visiting our site.";

Можно даже теги использовать динамически. Например:

tagToUse = "u";
myText.htmlText = "<" + tagToUse + ">Hello Jack!</" + tagToUse + ">";

В итоге получится такая HTML-строка:

<u>Hello Jack!</u>;

В результате текст "Hello Jack!" будет отображен с подчеркиванием. А вот еще пример:

tagToUse = "b";
myText.htmlText = "<" + tagToUse + ">Hello Jack!</" + tagToUse + ">";

Получится такая HTML-строка:

<b>Hello Jack!</b>;

Текст "Hello Jack!" будет отображен жирным шрифтом.

Примечание Выделив динамическое текстовое поле или поле для ввода, вы можете в инспекторе Параметры назначить полю переменную. Это значит, что значение, которое содержит эта переменная, автоматически будет отображаться в текстовом поле. Если значение переменной есть текстовая строка, содержащая HTML-теги, текст в поле автоматически будет отображен соответствующим образом – если, конечно, вы включили для этого поля опцию "Просчитать текст как HTML" (Render text to HTML). И наоборот: при изменении текста в текстовом поле меняется значение переменной. Ранее мы с вами применяли другой способ: присваивали имя экземпляру текстового поля и затем использовали свойство htmlText. Во Flash MX этот способ более предпочтителен; а первый способ (с назначением переменной) используют только ради совместимости с Flash 5.

В следующем упражнении мы с вами используем некоторые из введенных пользователем (и проверенных нами – см. предыдущие упражнения) значений для генерации текста на странице, подтверждающей регистрацию.

1. Откройте файл validate6.fla из папки Lesson13/Assets.

Мы продолжаем работу с проектом, начатым в предыдущих упражнениях. В этом упражнении мы будем работать главным образом со сценой Confirm, а потому нам нужно внести коекакие несложные дополнения в функцию validateForm() (в сцене Registration ).

2. Откройте панель Действия, выделите кадр 1 слоя Actions и вставьте в описание функции validateForm(), между строками }else{ и gotoAndStop("Confirm", 1), следующие строки:

name = name.text;
email = email.text;
state = state.text;
zip = zip.text;

Как вы помните, эта секция else условного оператора выполняется в том случае, если все данные, введенные в форму, верны. До того, как мы добавили новые строки, в этой секции выполнялось только действие gotoAndStop(), отсылающее монтажный стол фильма к сцене Confirm. Добавленные нами строки создают четыре переменные, и это должно быть сделано прежде, чем фильм перейдет к другой сцене. Значения этих переменных представляют собой строки из текстовых полей формы. Для чего мы создаем эти переменные? Дело в том, что нам нужно сохранить значения из текстовых полей. При переходе от сцены к сцене переменные и их значения фильм "помнит", а значения свойств текстовых полей – нет. Таким образом, с помощью этих переменных мы переносим текстовые значения из сцены Registration в сцену Confirm.

3. Открыв панель Сцена (Scene), перейдите в сцену Confirm.

Эта сцена содержит четыре слоя, названных в соответствии с их содержимым. Слой Background содержит общее графическое оформление, за исключением кнопок – они находятся в слое Buttons. Слой Text Fields содержит единственное текстовое поле, confirmText, расположенное в середине сцены. В этом поле будет отображаться сообщение об успешном завершении процесса регистрации.

4. Открыв инспектор Параметры (Property), выделите текстовое поле confirmText, что в середине сцены.

Посмотрите на параметры этого текстового поля. Как видите, оно является динамическим. Опция Multiline означает, что в этом поле текст может отображаться в несколько строк. Также обратите внимание, что включена опция "Просчитать текст как HTML" (Render text to HTML). Благодаря этому поле будет интерпретировать HTML, а не отображать сам код.

Также обратите внимание на опции отображения текста:

• Шрифт – _sans
• Размер – 12
• Цвет – черный

Эти настройки будут использоваться по умолчанию – при отсутствии HTML-тегов, форматирующих шрифт. Мы же с вами в этом упражнении будем изменять эти свойства с помощью тегов <font face>, <font size> и <font color>.

Давайте приступим к написанию скриптов.

5. Откройте панель Действия, выделите кадр 1 слоя Actions и введите следующий скрипт:

confirmMessage = new Array();

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

Это действие (как и все прочие, которые мы запрограммируем в этом упражнении) мы помещаем в кадр 1, чтобы оно было выполнено сразу, как только фильм перейдет к этой сцене.

6. В конец текущего скрипта добавьте следующую строку:

confirmMessage.push("<font size = \"15\" color = \"#FF9900\">
  <b>Thank you " + name + "!</b></font><br>");

Это действие добавляет закодированное предложение в массив confirmMessage – оно станет первым элементом массива. Предложение представляет собой текстовую строку, включающую в себя значение переменной name (созданной на шаге 2), а также различные HTML-теги.

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

"<font size = \"15\" color = \"#FF9900\"><b>Thank you "

Здесь четырежды встречается сочетание символов \". Это – так называемая управляющая последовательность (или ESC-последовательность), необходимая для того, чтобы разделить код HTML и код ActionScript. В принципе, эта строка должна выглядеть так:

"<font size = "15" color = "#FF9900"><b>Thank you "

Значения, определяющие размер и цвет шрифта, заключены в кавычки. Однако в ActionScript кавычки используются для указания на строковой тип значения. Нужен синтаксический механизм, позволяющий отделить одно от другого, – иначе мы получим ошибку, когда Flash "расшифрует" код таким образом:

("<font size = ")(15)(" color = ")(#FF9900)("><b>Thank you ")

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

"<font size = "15" color = "#FF9900"><b>Thank you "

Следующая часть предложения:

+ name +

При помощи конкатенации значение переменной name вставляется в середину строки HTML-кода. После этого идет завершающая часть предложения:

"!</b></font><br>");

Здесь содержатся завершающие теги форматирования шрифта, а также тег разрыва строки.

Предположим, что name имеет значение "Jill". Тогда полностью строка расшифруется так:

"<font size = "15" color = "#FF9900"><b>Thank you Jill!</b></font><br>");

В текстовом поле с включенной опцией HTML отобразится текст "Thank you Jill!", оранжевым жирным шрифтом размера 15.

Примечание Ничего удивительного, если вам придется по нескольку раз переделывать свои скрипты, прежде чем удастся построить синтаксически правильную конструкцию. Соединение ActionScript и HTML поначалу может сбивать с толку, но – немного практики, и все станет проще.

7. В конец текущего скрипта добавьте следующую строку:

confirmMessage.push("This product has been registered to 
  <font color = \"#3399CC\"><u>
     <a href = \"mailto:" + email + "\">" + name + "</a></u></font>. ");

Это действие добавляет закодированное предложение в массив confirmMessage – оно станет вторым элементом массива. Предложение представляет собой текстовую строку, включающую в себя значения переменных email и name (созданных на шаге 2), а также различные HTML-теги.

Если предположить, что name имеет значение "Jill", а email – значение "jill@mydomain.com", то эта строка расшифруется так:

This product has been registered to <font color = "#3399CC"><u>
  <a href = "mailto: jill@mydomain.com">Jill</a></u></font>.

В текстовом поле с включенной опцией HTML отобразится текст "This product has been registered to Jill", где слово Jill будет отображено синим цветом с подчеркиванием, и будет являться гиперссылкой на соответствующий e-mail адрес.

Совет В браузерах при просмотре обычных HTML-страниц гиперссылки подчеркиваются и отображаются цветом, отличающимся от цвета остального текста. Однако это не произойдет автоматически при вставке ссылок в HTML-код, обрабатываемый текстовым полем Flash. Если вам нужно пометить часть текста как гиперссылку, следует вручную установить нужные атрибуты для этого текста, используя теги <font color> и <u>, как в нашем примере.

8. В конец текущего скрипта добавьте следующую строку:

confirmMessage.push("We hope you enjoy using <b><i>NotSoSoft LastPage</i>
  </b> as much as we enjoyed developing it for you.<br>");

Это действие добавляет закодированное предложение в массив confirmMessage – оно станет третьим элементом массива. Эта строка не включает в себя значений каких-либо переменных.

В текстовом поле с включенной опцией HTML отобразится текст "We hope you enjoy using NotSoSoft LastPage as much as we enjoyed developing it for you.", где NotSoSoft LastPage будет отображено жирным курсивом. Заканчивается предложение разрывом строки.

9. В конец текущего скрипта добавьте следующую строку:

confirmMessage.push("There are many users in the state of <b>" + state + 
  "</b> that have had great success with our product.<br>");

Это действие добавляет закодированное предложение в массив confirmMessage – оно станет четвертым элементом массива. Эта текстовая строка включает в себя значение переменной state, а также различные HTML-теги.

Предположим, переменная state содержит значение "Indiana", тогда эта строка расшифруется так:

There are many users in the state of <b>Indiana
   </b> that have had great success with our product.<br>

В текстовом поле с включенной опцией HTML отобразится текст "There are many users in the state of Indiana that have had great success with our product.", где слово Indiana будет отображено жирным шрифтом. Заканчивается предложение разрывом строки.

10. В конец текущего скрипта добавьте следующую строку:

confirmMessage.push("For more information about this product, 
please visit our web site at <font color = \"#3399CC\"><u><i>
<a href =\"http:\\www.notsosoft.com\">www.notsosoft.com</a></i></u></font>.");

Это действие добавляет еще одно закодированное предложение в массив confirmMessage – оно станет пятым элементом массива. Эта строка не включает в себя значений каких-либо переменных.

Cтрока будет расшифрована так:

For more information about this product, please visit our web site at 
  <font color = "#3399CC"><u><i><a href ="http:\\www.notsosoft.com">
www.notsosoft.com</a></i></u></font>.

В текстовом поле с включенной опцией HTML отобразится текст "For more information about this product, please visit our web site at www.notsosoft.com.", где www.notsosoft.com будет отображено синим цветом с подчеркиванием, и будет являться гиперссылкой на адрес http:\\www.notsosoft.com.

Совет Применение массива, в который помещаются отдельные предложения – отличный способ снизить число ошибок, которые неизбежно возникнут при попытке ввести длинный текст с помощью одной строки ActionScript.

11. В конец текущего скрипта добавьте следующие строки:

i = -1;
while (++i < confirmMessage.length) {
  confirmText.htmlText += confirmMessage[i];
}

Здесь мы используем оператор цикла, который перебирает по очереди все элементы массива confirmMessage и помещает все предложения в текстовое поле confirmText. Поскольку в массиве содержатся текстовые строки с HTML-тегами, мы должны использовать свойство htmlText, чтобы получить в текстовом поле нормальный текст с соответствующим форматированием.

12. Командой Управление > Проверить фильм (Control > Test Movie) запустите тестирование проекта.

Заполните регистрационную форму правильными данными, затем нажмите кнопку Submit – фильм переместится к сцене Confirm, и в середине экрана отобразится сообщение, которое мы только что запрограммировали. Внешний вид текста определяют HTML-теги, которые мы использовали.

13. Закрыв тестовый фильм, вернитесь в среду разработки и сохраните файл как validate7.fla.

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