Приложение разработчика

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

Если ваша программа не работает на бумаге, то она вообще не будет работать.

Это возвращает нас к традиционным представлениям о разработке программного обеспечения, но это неоспоримая правда для случая с Flash-приложениями для интернета. Если вы не знаете, куда нужно идти (т.е. не проектируете ваше приложение), как же вы доберетесь туда, куда вам нужно?

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

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

Идем дальше!

Создание компонента кнопки

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

На данный момент я просто скажу вам, что мы не собираемся особо "наворачивать" этот компонент, и что здесь мы не будем добавлять его на панель Component в среде разработки Flash MX.

1. Создайте новый фильм и сохраните его в файле formmailer.fla. В этом фильме создайте фильм с именем FSimpleButton и настройте временную шкалу так, чтобы она выглядела примерно следующим образом.
   

   
   

   Наш компонент использует новую возможность Flash MX для реализации "кнопочных" действий, и в этом непосредственную роль играют метки кадров _up, _over и _down. Также возможно добавление кадра _hit для определения области щелчка для кнопки, однако здесь эта возможность не используется.

   Когда фильму присвоен управляющий элемент onPress или onRelease, он действует, как кнопка и будет автоматически отображен в соответствующем кадре временной шкалы, изображенной на рисунке выше. Это немного сократит количество необходимого кода, поэтому я решил использовать здесь эту возможность, хотя выключенное состояние придется создавать вручную, так как оно не является одним из состояний стандартной кнопки.
2. Разберемся с графикой. Вы можете скопировать изображения со следующего рисунка или самостоятельно создать рисунок кнопки для каждого из ее состояний в слое Stage Images.
   

   
   
3. Наконец, добавьте динамическое текстовое поле в кадр 1 слоя Caption с именем инстанса caption_txt. Не беспокойтесь о цвете текста (мы решим этот вопрос в коде ActionScript через некоторое время), однако установите текстовое поле так, чтобы оно было точно отцентрировано и перекрывало всю ширину кнопки.
4. Теперь все готово для того, чтобы начать работу с кодом, реализующим действие кнопки. Сначала нужно создать новый класс кнопок, который будет носить имя FSimpleButton. Введите следующий код в кадр 1 слоя Definitions.

   #initclip 1
   
   // Constructor 
   FSimpleButton = function(){
     // Initialise component
     this.init();
   };
   
   // Inherit from MovieClip object 
   FSimpleButton.prototype = new MovieClip();
   // Register component class
   Object.registerClass("FSimpleButton", FSimpleButton);

   Весь этот код почти в точности повторяет реализацию компонента Tool Tip в "Компоненты" . Не будем больше на этом останавливаться. Если вам что-то непонятно, обратитесь к "Компоненты" .
5. Перед тем, как двигаться дальше, нужно определить некоторые параметры компонента. Щелкните правой кнопкой мыши на фильме в Library, выберите Component Definition... из меню и создайте параметры, указанные на следующем рисунке.
   

   
   
6. Далее нужно определить метод init, который будет вызываться при создании нового инстанса нашего компонента и подготавливать его к использованию.

   // Initialise component
   FSimpleButton.prototype.init = function(){
     // Set caption text and color
     this.caption_txt.text = this.captionText;
     this.caption_txt.textColor = this.captionColor;
   
     // Setup cursor and disable tabbing 
     this.useHandCursor = this.showHand; 
     this.tabEnabled = false;
   
     // Set event handlers
     this.onRollOut = this.myRollOut;
     this.onRollOver = this.myRollOver;
     this.onPress = this.myPress;
     this.onRelease = this.myRelease;
     this.onDragOut = this.myDragOut;
     this.onDragOver = this.myDragOver;
     this.onReleaseOutside = this.myReleaseOutside;
   };

   Здесь мы устанавливаем текст и цвет текста для текстового поля caption_txt. Использованные для этого переменные находятся среди параметров, установленных в предыдущем шаге.

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

   Наконец, мы устанавливаем управляющие элементы событий мыши для нашего компонента, и, так как осуществляется наследование из объекта MovieClip, нужно предусмотреть немало деталей. Мы, на самом деле, не будем здесь обрабатывать все события, но я включил их на тот случай, если вы захотите реализовать нечто отличное с применением вашего компонента кнопки.
7. Теперь переходим к созданию рассмотренных только что управляющих элементов событий. В первую их группу, которую необходимо реализовать, входят элементы управления onRollOut и onRollOver, и мы будем использовать их для установки переменной состояния в родительской временной шкале.

   FSimpleButton.prototype.myRollOut = function() {
     this._parent [this.statusVar] = _global.oldStatusText; 
   };
   
   FSimpleButton.prototype.myRollOver = function() {
     _global.oldStatusText = this._parent[this.statusVar]; 
     this._parent[this.statusVar] = this.statusText;
   };

   Переменная состояния указывается в виде еще одного параметра компонента, как и непосредственный текст состояния. Мы используем глобальную переменную oldStatusText для хранения и получения предыдущего текста состояния. Причина этому станет ясна, когда мы перейдем к работе над фильмом Flash.
8. Продолжим работу с управляющими элементами onPress и onRelease. Из кода ниже можно заметить, что последний элемент на самом деле здесь не используется. Это один из тех управляющих элементов "на всякий случай", о которых я говорил ранее. Он может быть полезным при желании расширить функциональные возможности компонента.

   FSimpleButton.prototype.myPress = function() {
   };
   
   FSimpleButton.prototype.myRelease = function() {
     // Execute callback
     this._parent[this.clickHandler](this); 
   };

   Управляющий элемент onRelease, вероятно, наиболее важный элемент управления во всем компоненте. Это элемент управления, вызывающий функцию, указанную в параметре компонента clickHandler.

   Здесь мы передаем ссылку на текущий объект функции обратной связи. Это полезно в том случае, если у вас есть одна функция обратной связи для нескольких кнопок, и необходимо определять, какой кнопкой была инициализирована обратная связь. Мы не будем использовать это непосредственно в нашем приложении, но, тем не менее, иметь такую возможность достаточно полезно.
9. Остался лишь один управляющий элемент события, который непосредственно применен в нашем случае. Это onDragOut.

   FSimpleButton.prototype.myDragOut = function() { 
     this.gotoAndStop("_up");
   };

   Я использовал его для устранения одного небольшого препятствия при реализации работы кнопок во Flash. В наиболее распространенных операционных системах, когда вы удерживаете кнопку мыши в момент нахождения указателя над кнопкой, и затем перетаскиваете указатель за пределы кнопки и отпускаете ее, это действие не воспринимается как нажатие кнопки. Однако во Flash кнопка останется в "нажатом" состоянии _down. Чтобы обойти эту особенность, я реализовал возврат кнопки в кадр _up при перетаскивании мыши за пределы области кнопки. Вам решать, применят этот способ здесь или нет, однако я бы на вашем месте не отказывался от этого дополнения.
10. Оставшиеся управляющие элементы событий не применяются.

    FSimpleButton.prototype.myDragOver = function() { 
    };
    
    FSimpleButton.prototype.myReleaseOutside = function() {
    };
11. Последнее, что нужно сделать для нашего компонента, это создать некоторые методы для обеспечения возможности включения и выключения кнопки извне компонента. Здесь вступает в свою роль кадр _disabled.

    FSimpleButton.prototype.disable = function() {
      this.caption_txt.textColor = this.captionDisabledColor; 
      this.gotoAndStop("disabled");
      this.enabled = false;
    };

    Из этого кода видно, что здесь мы всего лишь меняем цвет текста метки на текст, указанный в параметре компонента captionDisabledColor, переходя к кадру выключения и выключая компонент. При выключенном компоненте события не будут обрабатываться, и компонент будет оставаться в указанном кадре.
12. Рассмотрим следующий метод.

    FSimpleButton.prototype.enable = function() { 
      this.enabled = true; 
      this.gotoAndStop("_up");
      this.caption_txt.textColor = this.captionColor;
    };

    Метод enable просто обращает изменения, сделанные в методе disable, включая кнопку, перемещая ее обратно в кадр _up и заново устанавливая цвет текста метки.
13. Я также добавил метод isEnabled, который позволит определять состояние кнопки. Эту возможность мы не будем использовать в приложении, однако она может пригодиться при создании другой программы.

    // Public: isEnabled
    FSimpleButton.prototype.isEnabled = function() { 
      return this.enabled;
    };
    
    #endinitclip 
    
    stop();

    Мы закончили определение компонента, и он готов к использованию. Переименуйте компонент в библиотеке, если вы еще этого не сделали. Назовите его FSimpleButton и установите его связи следующим образом.