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

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

Что будет изучаться

В этом уроке:

Время выполнения

На выполнение этого урока требуется примерно два часа.

Файлы урока

Файлы-носители:

Нет

Стартовые файлы:

Lesson13/Assets/validate1.fla
Lesson13/Assets/flashWriter1.fla

Законченные проекты:

validate7.fla
flashWriter3.fla

Почему необходимо проверять данные

Мы с вами каждый день что-то, да проверяем – начиная с порядка слов в предложении (чтобы оно было построено правильно) и заканчивая сдачей в магазине. Так что разъяснять тут особенно нечего. Возьмем для примера такой вот телефонный номер: 555-34567.

Скорее всего, вы быстро поймете, что номер этот неверный. Ваш мозг, анализируя номер, обнаружит, что он состоит из восьми цифр. Сравнивая этот факт с известным ему правилом – "городские телефонные номера состоят из семи цифр", вам мозг сделает вывод, правильный ли это номер (истинный) или неправильный (ложный). Если номер правильный, значит, по нему можно позвонить. Если же номер неправильный, мозг выдаст вам сообщение об ошибке – что-нибудь вроде: "Этот номер неверный. Нужно узнать правильный, и тогда уже звонить."

Если представить процесс проверки по пунктам, получится примерно следующее:

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

Необходимость проверки данных во Flash-приложениях обычно возникает там, где от пользователя требуется ввод информации в текстовые поля – это, например, различные формы (имя, адрес, номер телефона и т.п.), пароли, вопросы викторин, карточки заказов электронной коммерции (количество, размер, цвет и т.п.).

Применение процедур проверки

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

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

Функции процедур сверки могут быть двух основных типов:

Рассмотрим каждый из этих видов подробнее.

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

function validateTelephone () {
  if (telephone.length == 9) {
    // номер правильный, выполняемые действия
  } else {
    // номер неправильный, выполняемые действия
  }
}

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

function validateTelephone (lookForAreaCode, pNumber) {
  if (lookForAreaCode == true  pNumber.length == 13) {
    message.text = "Это правильный десятизначный телефонный номер";
  } else if (lookForAreaCode == false  pNumber.length == 9) {
    message.text = "Это правильный семизначный телефонный номер";
  }
  } else {
    message.text = "Это неправильный телефонный номер";
  }
}

При вызове этой функции сверки ей передаются два параметра: lookForAreaCode имеет значение true либо false и показывает, присутствует ли в телефонном номере код города; pNumber представляет собой сам проверяемый номер. Если в момент вызова функции параметр lookForAreaCode имеет значение true, то переданный функции телефонный номер ( pNumber ) считается верным только в том случае, если он десятизначный. Если же lookForAreaCode равно false, то верным будет считаться только семизначный номер.

Сам вызов процедуры проверки будет выглядеть, например, так:

validateTelephone(true, 812-555-12-34);

В результате обработки этого вызова в текстовом поле message будет выведено сообщение: "Это правильный десятизначный телефонный номер".

Совет Из предыдущих уроков вы должны помнить, что в качестве параметров функции могут указываться не только конкретные значения, но и переменные. Так, в приведенном примере при вызове функции в качестве второго параметра можно сослаться на соответствующее свойство текстового поля ( textField.text ).

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

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

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

Обработка ошибок

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

Обычно обработка ошибки включается непосредственно в условный оператор внутри процедуры проверки. Вот, например:

if (dataValid) {
  // выполнить действия
} else {
  // выполнить действие, сообщающее об ошибке
}

Обработка ошибок – самая важная часть процесса проверки; поэтому о том, как именно будут обрабатываться ошибки в конкретном проекте или ситуации, следует подумать заранее – до того, как программировать что-либо.

В этом упражнении мы с вами "заложим фундамент" для обработки ошибок в нашем проекте.

Этот проект состоит из двух сцен: Registration и Confirm. Сценой Confirm мы займемся в следующем упражнении, а сейчас сосредоточимся на сцене Registration, которая содержит форму для заполнения пользователем – введенные в нее данные нужно будет проверять. Эта сцена состоит из четырех слоев, названных в соответствии с их содержимым. Слой Background содержит общее графическое оформление сцены, за исключением кнопок, которые находятся в слое Buttons. Слой Text Fields содержит пять текстовых полей. Четыре из них расположены поверх рисованных прямоугольников, показывающих области для ввода. Эти поля называются (сверху вниз) name, email, state и zip. Как вы уже поняли, эти поля относятся к типу Input Text – в них пользователь будет вводить информацию. Справа от этих текстовых полей находится более крупное текстовое поле; оно имеет имя errorLog. Это многострочное динамич еское текстовое поле; в нем будут отображаться ошибки, обнаруженные в процессе проверки. Если вы откроете инспектор Параметры, то сможете увидеть, что для этого поля включена опция HTML. Тем самым мы дали Flash указание интерпретировать текст, передаваемый в это поле, как код HTML, а не выводить все подряд.

stop ();
errors = new Array();

Первое действие останавливает воспроизведение фильма на кадре 1 до получения дальнейших инструкций.

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

function clearForm() {
  name.text = "";
  email.text = "";
  state.text = "";
  zip.text = "";
  errorLog.text = "";
  errors.length = 0;
}

При вызове этой функции значения элементов сцены – текстовых полей для ввода и поля errorLog – будут сбрасываться в изначальное состояние. Также будут удалены из массива errors все имеющиеся сообщения об ошибках.

on (release) {
  clearForm();
}

Этот скрипт при нажатии кнопки Clear будет вызывать функцию clearForm(), которую мы только что описали.

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

Проверка текстовых строк

Как уже говорилось, если приходится проверять данные различных типов (имена, номера телефонов, адреса e-mail и т.п.), процесс лучше разделить между несколькими специализированными функциями – процедурами проверки. Этим мы и займемся в данном упражнении.

Первый вид данных в нашей форме – имя пользователя. Для нас введенная информация должна удовлетворять следующим условиям:

Совет Мы могли бы, при желании, установить и другие требования – например, максимальную длину имени, или даже чтобы имя начиналось непременно с буквы D; однако, в данном случае нам достаточно двух перечисленных условий.

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

Мы продолжаем работу с проектом, начатым в предыдущем упражнении.

function validateName () {
  if (name.text.length < 2 || isNaN(name.text) == false) {
    errors.push("Please enter a valid name.");
  }
}

Эта функция при вызове проверяет данные, введенные в текстовое поле name, по двум условиям – длине и типу. Условный оператор здесь гласит, что если текст в поле name состоит менее чем из двух символов либо является числом, в массив errors добавляется строка "Please enter a valid name" (просьба ввести новое имя). Свойство length мы с вами уже применяли и знакомы с ним, а вот другая конструкции, возможно, требует пояснения.

Одно из установленных нами условий – то, что текст, введенный в поле name, не должен быть числом. Для проверки этого условия мы используем функцию isNaN(). Это встроенная функция, возвращающая значение true в том случае, если аргумент (значение, указанное в скобках) не является числом (поэтому функция так и называется – isNaN, то есть is Not a Number, "не число"). Рассмотрим несколько примеров с использованием этой функции.

isNaN("Box") возвратит значение true, поскольку "Box" – это текстовая строка, а не число.

isNaN(465) возвратит значение false, поскольку 465 – число.

Таким образом, выражение isNaN(name.text) == false в переводе на "человеческий" язык означает "то, что указано в поле name, есть число".

Если хотя бы одно из условий оператора if выполнено, значит, введены неверные данные. В результате выполняется действие внутри условного оператора. Это действие, при помощи метода push() объекта Array, добавляет новый элемент в конец массива errors (значением элемента станет аргумент метода). Если вообразить себе массив errors в виде книжки, то метод push() добавляет в конец этой книжки новую страницу, текст которой – это строковое значение в скобках. Номером этой страницы можно считать индекс элемента в массиве.

В нашей функции, если данные в текстовом поле name неверны, в массив errors добавляется строка "Please enter a valid name".

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

function validateForm() {
  errorLog.text = "";
  errors.length = 0;
  validateName();
  if (errors.length > 0) {
    errorLog.htmlText = "<b>These errors were found:</b><br>";
    var i = -1;
    while (++i < errors.length) {
      errorLog.htmlText += errors[i] + newline;
    }
  } else {
    gotoAndStop ("Confirm", 1);
  }
}

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

Два первых действия очищают текстовое поле errorLog и удаляют все элементы, имеющиеся в массиве errors. Конечно, при первой проверке формы эти действия не имеют смысла, поскольку и поле, и массив и так пусты. Однако при всех последующих проверках необходимо в первую очередь очистить текстовое поле и массив.

Следующая строка вызывает функцию validateName(), описанную нами на предыдущем шаге. Эта функция проверит данные в текстовом поле name, и либо добавит сообщение об ошибке в массив errors, либо не станет добавлять.

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

Далее в функции идет оператор if. Он вступает в действие после того, как закончит свою работу функция validateName() – и это не случайно. Если в результате выполнения функции validateName() в массив errors будет помещено сообщение об ошибке, то свойство length этого массива изменится с 0 на 1. А оператор if как раз и проверяет значение свойства length массива errors. Если значение этого свойства больше 0 (а это означает, что в массиве имеется по меньшей мере одно сообщение об ошибке), то выполняются действия, выводящие эти сообщения в поле errorLog. Если же errors.length равно 0, значит, сообщений об ошибках не было, и, стало быть, все данные верны. В этом случае действием goToAndStop() фильм отправляется к сцене Confirm.

Действия, выводящие сообщения об ошибках, просты и понятны. Первое создает заглавную строку. При помощи HTML-тегов ( <b></b> ) жирным шрифтом выводится текст "These errors were found:", после чего следует перевод строки ( <br> ). Далее идет оператор цикла, последовательно выводящий все сообщения, имеющиеся в массиве errors, в текстовое поле errorLog.

Вы уже знакомы со свойством текстовых полей text, но, наверное, обратили внимание, что в данном скрипте в отношении поля errorLog применено другое свойство – htmlText. Это свойство текстовых полей имеет два применения (как и свойство text ): для получения (в виде HTML) текста, отображенного в текстовом поле, либо для вывода в текстовом поле текста, полученного после интерпретации HTML-кода. Чтобы вы лучше поняли это, давайте рассмотрим пример:

message.text = "<b>Hello there!</b>";

Этот скрипт отобразит в текстовом поле message такой текст: <b>Hello there!</b>. Поскольку здесь использовано свойство text, отображаемый текст воспринимается как обычное строковое значение. А теперь сделаем так:

message.htmlText = "<b>Hello there!</b>";

Этот скрипт отобразит в текстовом поле текст Hello there!. Здесь мы использовали свойство htmlText, тем самым сообщив текстовому полю, что предназначенная для вывода строка содержит HTML-теги, которые следует соответствующим образом интерпретировать.

Само текстовое поле должно быть предварительно подготовлено к восприятию HTML-кода. Чтобы поле могло интерпретировать HTML, для него в инспекторе Параметры следует нажать кнопку "Просчитать текст как HTML" (Render text as HTML), либо установить свойство html текстового поля в значение true. В этом проекте мы просто включили нужную опцию для поля errorLog в инспекторе Параметры.

on (release) {
  validateForm();
}

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

Введите какое-либо заведомо неправильное имя в поле name, и посмотрите, чем закончится процесс проверки. Кнопкой Clear можно вернуть визуальные элементы фильма и внутренние данные к изначальным значениям.

Мы продолжим работу с этим файлом в следующем упражнении.

Проверка последовательностей

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

Символы внутри подобной последовательности могут меняться, однако общее их расположение и количество должно соответствовать некоторым правилам формата. Проверять последовательности, как правило, сложнее, чем другие виды данных, поскольку здесь должны соответствовать довольно большому числу условий. Давайте рассмотрим процесс по пунктам на примере проверки адресов электронной почты. Условия проверки e-mail адреса таковы:

Совет Шести перечисленных условий вполне достаточно для проверки адресов e-mail. Конечно, можно добавить и другие условия (например, чтобы символы после точки обязательно были com, net, org и т.п.), однако в этом случае процедура проверки может стать чересчур длинной, и к тому же будет нуждаться в исправлении в случае изменения стандартов Интернета. Тут важно определить основные, наиболее важные условия и проверять только их.

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

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

Мы продолжаем работу с проектом, начатым в предыдущих упражнениях.

function validateEmail() {
  if (email.text.indexOf("@") < 2) {
    errors.push("@ missing in email or in the wrong place.");
  }
  if (email.text.lastIndexOf(".") <= (email.text.indexOf("@") + 2)) {
    errors.push(". missing in email or in the wrong place.");
  }
  if (email.text.length < 8) {
    errors.push("Email address not long enough.");
  }
}

Функция validateEmail() будет проверять текст, введенный в поле email. В ее составе – три условных оператора; каждый из них проверяет одно из условий, перечисленных в начале упражнения. Заметьте, это три самостоятельных оператора if (а не конструкция типа if/else, if/else if ), поэтому все они будут выполнены. Рассмотрим каждый из них подробнее. Первый условный оператор:

if (email.text.indexOf("@") < 2) {
  errors.push("@ missing in email or in the wrong place.");
}

Вы, наверное, помните, что метод indexOf() объекта String возвращает индекс (порядковый номер в строке) первого встреченного символа, совпадающего с указанным в скобках. С помощью этого метода условный оператор определяет, не стоит ли на первом или втором месте в поле email символ @. Индексы символов в строке начинаются с 0, поэтому логическое выражение даст результат true, если первый попавшийся символ @ имеет индекс 0 или 1. В этом случае в массив errors будет добавлено сообщение об ошибке. Если символ @ в поле email вообще не встретится, метод indexOf() вернет значение –1; это тоже меньше 2, значит, результат логического выражения и в этом случае будет true, и сообщение об ошибке будет добавлено в массив.

Совет С помощью метода indexOf() можно находить в строке не только отдельные символы, но и сочетания символов (подстроку). Например, чтобы проверить, встречается ли в строке сочетание символов "http://", следует использовать выражение string.indexOf("http://"). Возвращенным результатом будет индекс в строке первого символа подстроки.

Рассмотрим второй условный оператор функции.

if (email.text.lastIndexOf(".") <= (email.text.indexOf("@") + 2)) {
  errors.push(". missing in email or in the wrong place.");
}

Здесь использован метод lastIndexOf() объекта String – он похож на метод indexOf(), только возвращает индекс последнего встречающегося в строке символа (или подстроки). Например, если email.text = "derek.franklin@derekfranklin.com", то email.text.lastIndexOf(".") вернет значение 27. таким образом, этот условный оператор определяет положение в строке последней точки относительно символа @. Если между символом @ и последней точкой меньше двух символов, логическое выражение дает результат true, и в массив errors добавляется сообщение об ошибке.

Третий условный оператор совсем простой. Вот как он выглядит:

if (email.text.length < 8) {
  errors.push("Email address not long enough.");
}

Как уже было сказано, наименьший возможный адрес e-mail выглядит как aa@bb.cc – восемь символов, включая @ и точку. Таким образом, если значение свойства length строки, введенной в поле email, меньше восьми, в массив errors помещается сообщение о том, что адрес слишком короткий.

В процессе выполнения функции может оказаться, что текст в поле email не соответствует всем трем условиям. Что ж, в этом случае в массив errors будет помещено три различных сообщения об ошибках.

validateEmail();

Это – вызов только что описанной нами функции. Теперь функция validateForm() получила возможность проверять и текст в поле email. Этот вызов функции должен стоять перед оператором, проверяющим длину массива errors, ведь она тоже может добавить в массив сообщения об ошибках. В итоге, если функция validateName() и/или функция validateEmail() обнаружит ошибки, соответствующие сообщения будут отображены в поле errorLog.

Примечание К кнопке Submit в этой сцене мы ранее присоединили вызов функции validateForm(). Только что мы расширили возможности этой функции, и при нажатии кнопки Submit новые действия тоже будут выполнены.

Введите заведомо неправильный адрес в поле email, и, если хотите, в поле name. Посмотрите, чем закончится процесс проверки. Кнопкой Clear можно вернуть визуальные элементы фильма и внутренние данные к изначальным значениям.

Мы продолжим работу с этим файлом в следующем упражнении.

Сверка с перечнем возможных значений

Бывают ситуации, когда введенное пользователем значение должно соответствовать одному из нескольких возможных. Допустим, вы просите пользователя указать какой-либо цвет (например, "red", "yellow" или "blue"), а он нечаянно вводит "rod" или "yullow". Подобные ошибки тоже можно и нужно отслеживать.

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

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

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

Мы продолжаем работу с проектом, начатым в предыдущих упражнениях.

function validateState() {
  states = ["California", "Indiana", "North Carolina", "Oklahoma"];
  matchFound = false;
  i = -1;
  while (++i < states.length) {
    if (state.text == states[i]) {
      matchFound = true;
    }
  }
  if (!matchFound) {
    errors.push("Please enter a valid state.");
  }
}

Функция validateState() будет проверять то, что введено в текстовое поле state.

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

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

Следующие несколько строк функции составляют оператор цикла, который перебирает все значения в массиве states, сравнивая каждое из них с текстом, введенным в поле state. Если значения совпадают, matchFound получает значение true. Если ни одного совпадения так и не нашлось, значение этой переменной так и остается false (как в начале) – это значит, что введенное значение ошибочно.

Последняя часть функции – оператор if, выполняемый после того, как завершит свою работу оператор цикла. Если matchFound равно false (совпадений не встретилось), в массив errors добавляется сообщение об ошибке (как и в тех функциях, которые мы создали до этого).

validateState();

Это – вызов только что описанной нами функции. Теперь функция validateForm() сможет проверять и названия штатов. Этот вызов функции стоит перед оператором, проверяющим длину массива errors, ведь функция тоже может добавить в массив сообщения об ошибках. В итоге, если функции validateName(), validateEmail() или validateState() обнаружат ошибки, соответствующие сообщения будут отображены в поле errorLog.

Введите заведомо неправильный название штата (не входящее в массив) в поле email, и посмотрите, чем закончится процесс проверки. Кнопкой Clear можно вернуть визуальные элементы фильма и внутренние данные к изначальным значениям.

Мы продолжим работу с этим файлом в следующем упражнении.

Проверка числовых значений

Проверка числовых значений не слишком отличается от проверки строк, о которой мы уже говорили.

В этом упражнении мы создадим последнюю проверочную функцию – она будет проверять данные, введенные в поле zip. Правильный почтовый индекс США должен удовлетворять двум условиям:

Совет Вообще при проверке может еще понадобиться сравнить введенное число с неким эталоном, чтобы определить, какое из них больше или меньше – но уж это-то совсем простая для вас задача!

Мы продолжаем работу с проектом, начатым в предыдущих упражнениях.

function validateZip() {
  if (zip.text.length != 5 || isNaN(zip.text) == true) {
    errors.push("Please enter a valid zip.");
  }
}

Эта функция будет проверять то, что введено пользователем в текстовое поле zip, по двум условиям, установленным нами в начале: длине и типу. Условный оператор, в том случае, если текстовое поле zip содержит не пять символов или является не числом, а текстом, в массив errors добавляется сообщение "Please enter a valid zip".

Примечание Если вам нужно освежить в памяти информацию о функции isNaN(), загляните в упражнение Проверка текстовых строк.

validateZip();

Это – вызов только что описанной нами функции. Теперь функция validateForm() сможет проверять и почтовый индекс. Этот вызов функции стоит перед оператором, проверяющим длину массива errors, ведь функция тоже может добавить в массив сообщения об ошибках. В итоге, если функции validateName(), validateEmail(), validateState() или validateZip() обнаружат ошибки, соответствующие сообщения будут отображены в поле errorLog.

Введите заведомо неправильный почтовый индекс в поле zip и посмотрите, чем закончится процесс проверки. Кнопкой Clear можно вернуть визуальные элементы фильма и внутренние данные к изначальным значениям.

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

Если в процессе проверки окажется, что все введенные пользователем правила верны, монтажный стол фильма переместится к сцене Confirm. В этой сцене будет отображено некое сообщение, составленное на основе проверенных данных, а мы приукрасим это сообщение – заодно изучим возможности Flash в плане форматирования текста с использованием HTML.

Динамическое форматирование текста с помощью 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.

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

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

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

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

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

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

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

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

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

confirmMessage = new Array();

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

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

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 поначалу может сбивать с толку, но – немного практики, и все станет проще.

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>, как в нашем примере.

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 будет отображено жирным курсивом. Заканчивается предложение разрывом строки.

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 будет отображено жирным шрифтом. Заканчивается предложение разрывом строки.

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.

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

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

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

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

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

Вы уже знакомы с различными возможностями создания и конфигурирования текстовых полей в среде разработки. Однако текстовые поля можно создавать и "на лету" – в процессе воспроизведения фильма, что дает дополнительные колоссальные возможности обработки текстовой информации в проектах. Давайте посмотрим, как выглядит процесс динамического создания текстовых полей.

Чтобы с помощью ActionScript создать текстовое поле, следует воспользоваться методом createTextField():

_root.createTextField(имяЭкземпляра, depth, x, y, width, height);

Здесь в скобках следует указать, помимо имени экземпляра текстового поля, значения свойств – глубины, X- и Y-координат, ширины и высоты. Вот пример создания текстового поля с помощью метода createTextField():

_root.createTextField("myField", 10, 20, 50, 200, 30);

Эта строка скрипта создаст на главном монтажном столе фильма текстовое поле с именем myField и соответствующими значениями свойств depth, x, y, width и height. Учтите, что текстовые поля можно создавать не только на корневом монтажном столе, как в этом примере, но и на любом другом – нужно просто использовать соответствующую адресацию:

_root.myMovieClip.createTextField("myField", 10, 20, 50, 200, 30);

Всякое текстовое поле – неважно, было ли оно помещено на сцену в процессе разработки фильма, или создано динамически – рассматривается как экземпляр объекта TextField. А посему текстовые поля кое в чем похожи на экземпляры фильмов-символов. Во-первых, каждое текстовое поле получает имя (оно указывается в инспекторе Параметры или при динамическом создании, как вы только что видели). В скриптах для указания на текстовое поле используется адресация, включающая имя экземпляра.

Для экземпляров текстовых полей доступны некоторые методы (причем не все они перечислены среди инструментов панели Действия), присущие объекту MovieClip. Например:

startDrag("myField", true);

Эта строка включает перетаскивание мышью текстового поля myField. Конечно, есть и такие методы, которые применительно к экземплярам текстовых полей не имеют смысла – ведь у текстовых полей нет монтажного стола (например, методы prevFrame(), attachMovie(), loadMovie() и т.п.).

Также экземпляры текстовых полей имеют некоторые свойства, схожие со свойствами фильмов-символов. Например:

myField._alpha = 50;

Эта строка сделает текстовое поле myField на 50 процентов прозрачным. Немного поэкспериментировав, вы сами сможете выяснить, какие методы и свойства являются общими для экземпляров фильмов-символов и текстовых полей.

Однако это далеко не все. Мы говорили о свойствах и методах, управляющих самим экземпляром текстового поля; однако текстовые поля располагают также многочисленными уникальными свойствами и методами, предназначенными для манипуляций с текстом внутри поля. Некоторые из этих методов предназначены для форматирования текста в поле посредством объекта TextFormat – мы изучим его в следующем разделе, "Применение объекта TextFormat ". А пока следует упомянуть о двух весьма полезных методах, не относящихся к форматированию.

Для удаления динамически созданного текстового поля служит метод removeTextField():

myField.removeTextField();

Эта строка скрипта удалит со сцены текстовое поле с именем myField.

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

Еще один метод предназначен для добавления и удаления текста – это метод replaceSel(). C помощью этого метода можно заменить выделенный текст каким-либо другим.

Для примера предположим, что текстовое поле myField содержит текст "Я люблю своих кошку и собаку!". Далее, предположим, что часть "кошку и собаку" выделена. Теперь воспользуемся методом replaceSel(), чтобы заменить этот текст:

myField.replaceSel("змею и черепаху");

Теперь в поле myField будет отображен текст "Я люблю своих змею и черепаху!".

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

Как мы уже говорили, текстовые поля имеют множество свойств, с помощью которых можно конфигурировать экземпляр поля в ходе воспроизведения фильма. Эти свойства управляют не только внешним видом поля и отображением текста, но также и тем, как функционирует текстовое поле. Некоторые свойства покажутся вам знакомы, поскольку мы с вами уже применяли их; другие соответствуют опциям, устанавливаемым в инспекторе Параметры при создании поля в среде разработки. Например, свойство bold – следующая строка установит полужирное начертание для текста в поле myField:

myField.bold = true;

Мы перечислим здесь некоторые из свойств текстовых полей, смысл которых не столь очевиден.

При создании текстового поля его свойства получают следующие стандартные значения:

type = "dynamic";
border = false;
background = false;
password = false;
multiline = false;
html = false;
embedFonts = false;
variable = null;
maxChars = null;