Flash, ColdFusion и Remoting

<cfset request.dsn = "pma">

Можно изменить имя папки, если это понадобится, однако, в этом случае, не забудьте обновить шаблон Application.cfm для отражения изменения имени папки. Этот шаблон устанавливает ориентированную на запрос переменную с именем request.dsn, доступ к которой осуществляется через CFC. Эта переменная устанавливается в Application.cfm как глобальная, ее можно изменить за один раз, не обновляя остального кода в приложении. Все запросы в приложении ссылаются на эту переменную, которая указывает на наш файл базы данных pma.mdb.

Если вы хотите просто запустить имеющиеся на компакт-диске файлы, а не создавать их с "чистого листа", не забудьте разархивировать файлы, содержащиеся в pma.zip в подкаталог вашего корневого каталога. Чтобы PMA запустилось с первого раза, файлы должны быть расположены в директории с именем pma прямо под вашим корневым расположением веб. Структуру директории можно изменять, однако ActionScript придется редактировать для указания нового местоположения. Обсудим вкратце этот процесс.

Небольшое белое поле содержит окно данных (компонент MessageBox) со списком контактов. В левом нижнем углу большого белого поля располагается календарь, а в правой части элементы управления вводом и кнопки.

#include "NetServices.as"
#include "NetDebug.as"
#include "DataGlue.as"

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

Файл NetDebug.as не обязателен для корректной работы этого приложения. Он в основном используется совместно с NetConnect Debugger (Window > NetConnection Debugger) как вспомогательный файл в процессе отладки. Как только приложение готово к публикации, эта строка может быть удалена или закомментирована для уменьшения размера файла (хотя ее размер не так уж велик).

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

if (inited == null)  {
  inited = true;

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

// disable the save clip since it won't be accessible 
// until the user decides to add a new contact 
save_mc.setEnabled(false);

// set the size of the contacts ListBox 
contacts_mc.setSize(200, 120);

// set the height of the scroller 
notes_scroller_mc.setSize(79);

NetServices.setDefaultGatewayUrl
  ("http://localhost/flashservices/gateway");

Как только PMA попадет в среду разработки, этот адрес понадобится для изменения доменного имени или IP-адреса хост-сервера. Такая мера предосторожности предотвращает возможность осуществлять вызовы служб, имеющихся на локальном сервере, внешними приложениями. Метод createGatewayConnection непосредственно создает подключение к серверу и ожидает вызова каких-либо служб. При вызове службы контактов подключение сохраняется в объекте, на который в дальнейшем будут осуществляться ссылки при вызове методов службы.

var gw = NetServices.createGatewayConnection();
var contacts_service - gw.getService("pma.contacts", this);

Имя службы является ссылкой на вызываемый CFC. Следовательно, pma.contacts соответствует компоненту contacts.cfc, сохраненному в директории pma (мы сейчас создадим этот компонент). Директория pma находится на уровне, расположенном сразу под корневым каталогом веб. Если структура директорий меняется, то соответствующим образом необходимо изменить и вызовы службы. Например, если директория pma находится по адресу \wwwroot\flashremoting\pma\contacts.cfc, эту службу можно вызвать так: flashremoting.pma.contacts. Это аналогично импортированию и обращению к пакетам Java в языке программирования Java. Мы просто заменяем слеш "\" точкой ".".

contacts_service.getAllContacts();
}

<cfcomponent name="contacts">

<!--- retrieve all contacts to send to flash and populate listbox --->
<cffunction name="getAHContacts" access="remote">
<cfquery datasource="#request.dsn#" name="get_all_contacts">
select id, first_name, last_name from contacts
order by last_name asc;
</cfquery>
<cfreturn get_all_contacts />
</cffunction>

<!--- you'll stick the other component methods here --->

</cfcomponent>

Структура CFC отличается от обычного шаблона CF с тегом <cfcomponent>, в котором указывается имя компонента. Функции, которые мы будем добавлять в дальнейшем, будут располагаться внутри этого тега.

Методы компонента также устанавливаются с помощью тега <cffunction>, а при возвращении результатов используется тег <cfreturn>. В данном случае, создается запрос для получения всех имен, фамилий и идентификаторов из таблицы контактов. Этот набор записей возвращается во Flash посредством тега <cfreturn>. Атрибут доступа тега <cffunction> должен быть установлен на "remote", чтобы разрешить доступ из шлюза Flash. Если этот атрибут не установлен, метод не сможет осуществить доступ к приложению. Для получения более подробной информации об атрибутах доступа воспользуйтесь документацией по ColdFusion MX.

Flash запрашивает службу, а CF - базу данных и возвращает результаты. Что дальше? У каждого вызова службы есть метод result, предназначенный для поддержки данных или выполнения действия при получении ответа от CF. Так как из Flash изначально вызвана служба getAllContacts, результаты передаются в getAllContacts_Result. Все методы ответов помечены с использованием имени службы со словом _Result на конце.

function getAHContacts_Result (records) {
  // place the recordset in the ListBox and format the display
  DataGlue.bindFormatStrings (contacts_mc, records,
  К"#last_name#, #first_name#", "#id#");
  // handle which record is selected in the ListBox
  if (contact_index == undefined) {
    contacts_mc.setSelectedlndex(0); 
  } else {
    contacts_mc.setSelectedlndex(contact_index);
  }
}

Набор записей передается из CF через шлюз Flash и обрабатывается методом result. Теперь нужно найти способ добавления этой информации в компонент ListBox. Здесь мы используем класс DataGlue (изначально включенный в код программы). Он определенно упрощает процесс, так как позволяет указывать, какие поля будут использоваться для отображения в ListBox во время установки значения для каждого поля. Метод DataGlue.bindFormatStrings требует следующие четыре параметра.

function getSelectedContact() {
  // if the save button is enabled go ahead and disable it 
  if(save_mc.getEnabled()) {
    save_mc.setEnabled(false); 
  }

Проверяем, включена ли кнопка save, и выключаем ее, если это так. Это просто мера предосторожности, предназначенная для предотвращения всплывания окна подтверждения save, что может произойти при нажатии кнопки.

// get the id of the selected contact 
  var id = contacts_mc.getValue();
  // create an object and store the id to pass to CF 
  var o = new Object(); 
  o.id = id;
  // set the contact index variable so we know where
  // to position the ListBox when it's refreshed after 
  //updating
  contact_index = contacts_mc.getSelectedIndex(); 
  contacts_service.getSelectedContact(o); 
}

<!--- retrieve the selected contact and return it to flash --->
<cffunction name="getSelectedContact" access="remote">
<cfargument name="id" default"0" required="true" />
<cfquery datasource="#request.dsn#" name="get_selected_contact">
Кselect first_name, last_name, address, city, state, zip, email,
Кphone, notes, birth_date from contacts where id=#flash.id#;
</cfquery>
<cfreturn get_selected_contact />
</cffunction>

Id установлен как обязательное поле с помощью тега <cfargument> в CFC. Этому полю также присвоено значение 0 по умолчанию, в целях предотвращения ошибки, в случае, если не будет передан номер id. Как только информация о контакте запрашивается из базы данных, она возвращается во Flash через шлюз с помощью тега <cfreturn>.

Как упоминалось ранее, мы используем метод _Result для обеспечения обработки ответа сервера. Здесь устанавливается метод getSelectedContact_Result, чтобы взять данные, переданные с сервера, и разместить соответствующие значения в текстовые поля ввода для отображения.

function getSelectedContact__Result(records) {
  // since only record is being returned we access it at the 0
  //index
  var curr_record = records.getItemAt (0);

// set the values of the dynamic text fields on the stage 
  first_name = curr_record.first_name; 
  last_name = curr_record.last_name; 
  address = curr_record.address; 
  city = curr_record.city; 
  state = curr_record.state; 
  zip = curr_record.zip; 
  email = curr_record.email; 
  phone = curr_record.phone; 
  notes.text = curr_record.notes; 
  // set the birth date on the calendar 
  calendar_mc.setSelectedltem(curr_record.birth_date); 
  // we also have to tell the calendar what month to advance to
  calendar_mc.setDisplayedMonth(curr_record.birth_date); 
}

Текстовые поля устанавливаются в виде текстовых полей ввода, поэтому динамические данные можно при необходимости отображать и изменять. Так как они являются текстовыми полями ввода, в противопоставление динамическому тексту, пользователь сможет изменять контактную информацию и обновлять запись. Текстовому полю notes было присвоено имя инстанса, поэтому к нему может обращаться компонент ScrollBar. Это несколько отличается от предыдущих версий Flash, где единственным способом доступа к текстовому полю было имя переменной. Присваивание имен инстансов текстовым полям является нововведением во Flash MX и позволяет разработчику управлять динамическим доступом к методам и свойствам поля. Компоненту ScrollBar нужно просто приписать имя конечного текстового поля для правильной работы. Как только конечное поле будет указано, ScrollBar будет динамически изменяться, в зависимости от того, какое количество выходящего за пределы видимой области содержимого находится в поле по вертикали. Конечное текстовое поле можно указать в Property inspector для компонента ScrollBar.

Этот метод getSelectedContact вызывается каждый раз при выделении в списке ListBox, после чего весь процесс повторяется заново. Все это излишне, и, кроме того, нет особой пользы от "захвата" контактной информации каждый раз при выборе имени контакта в списке. Это имеет место только в демонстрационных целях, и я советую вам развить дальше эту функциональность. Попробуйте сохранять все записи в локальном объекте общего доступа на компьютере пользователя и вставлять информацию оттуда. Это уменьшит нагрузку на сервер, а также увеличит в несколько раз скорость доступа, так как данные будут считываться локально. Здесь необходима синхронизация локальных данных с данными на сервере.

function addConfirm(  {

  message_mc._visible = 1;
  message_mc.setSize(200, 150);
  message_mc.setMessage("Please fill out the form and click
  К\"save\" tc add the new contact");

var buttons = ["Okay", "Cancel"];
message_mc.setButtons(buttons); 
message_mc.setButtonWidth(60);

message_mc.setCloseHandler ("addContact");
}

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

function addContact(component, buttonlndex) { 
  if (buttonlndex == 0) {
    first_name = "";
    last_name = "";
    address = "";
    city = "";
    state = "";
    zip = "";
    email = "";
    phone = "";
    notes.text = "";
    save_mc.setEnabled(true); 
  } 
}

Так как кнопка OK имеет в массиве индекс 0, определяем, была ли она нажата, и очищаем поля формы перед тем, как сделать доступной кнопку save. Если она не была нажата, ничего не происходит, и пользователь возвращается в PMA.

function validateFields() {
  if (first_name != ''  last_name != ''  address != '' 
  Кcity != ''  state != ''  zip != ''  email != '' 
  Кphone ! =''  notes. text != 
    ''  calendar_mc.getSelectedItem()) {
    return true;
  } 
}

Этот метод проверяет существование данных в полях, а также выбор даты создания контакта. Разумеется, проверка может быть изощреннее, однако для наших целей и такая вполне годится. Если вы хотите сделать приложение функциональнее, смело расширяйте возможности этого метода и создайте схему проверки, удовлетворяющую вашим нуждам. Метод validateFields возвращает значение true, если форма успешно проходит проверку.

function saveContact() { 
  if(validateFields()) {

var o = new Object();
o.first_name = first_name;
o.last_name = last_name;
o.address = address;
o.city = city;
o.state = state;
o.zip = zip;
o.email = email
o.phone = phone;
o.notes = notes.text;
o.birth_date = birth_date;

contacts_service.saveContact(o); 
}   else   {

message_mc._visible = 1;
// set the size and message of the clip
message_mc.setSize(200, 150);
message_mc.setMessage ("Please be sure to fill out all fields.");
// set the buttons and their width in the MessageBox
var buttons = ["Okay"];
message_mc.setButtons(buttons); 
message_mc.setButtonWidth(60);

message_mc.setCloseHandler(null); 
  } 
}

<!--- save contact info --->
<cffunction name="saveContact" access="remote">
<cfquery datasource="#request.dsn#" name="add_contact">
insert into contacts(first_name, last_name, address, city, state,
Кzip, email, phone, notes, birth_date) 
 values('#flash.first_name#', '#flash.last_name#',
  К'#flash.address#', '#flash.city#', '#flash.stateft', 
   '#flash.zip#', '#flash.email#', 
   К#flash.phone#', '#flash.notes#', #createodbcdate
    (flash.birth_date)#);
</cfquery>
<cfreturn 1 />
</cffunction>

Если вы уже хорошо знакомы с CF и областями применения переменных, то обрадуетесь, узнав, что области применения переменных Flash существуют и в ColdFusion MX. Доступ к данным, переданным из Flash, можно осуществлять так: flash.имя_переменной. Это способ доступа к данным, переданным из Flash, а также их включения в выражение insert. После успешного выполнения insert, возвращаем флажок успешного завершения во Flash. Этот флажок имеет значение 1 и будет передан обратно методу saveContact_Result.

function saveContact_Result(success) { 
  if(success) {
    message_mc._visible = 1;
    message_mc.setSize(200, 150);
    message_mc.setMessage("The new contact 
     was added successfully.");
    // set the buttons and their width in the MessageBox
    var buttons = ["Okay"];
    message_mc.setButtons(buttons);
    message_mc.setButtonWidth(60);
    // reset the close handler method in case it was already
    // set
    message_mc.setCloseHandler(null);

contacts_service.getAllContacts(); 
  } 
}

function updateContact() {
  // make sure that a contact is selected 
  if (contacts_mc.getValue()) {
    // create an object that will be passed to CF for the
    //update
    var o = newObject();
    o.id = contacts_mc.getValue();
    o.first_name = first_name; 
    o.last_name = last_name; 
    o.address = address; 
    o.city = city; 
    o.state = state; 
    o.zip = zip; 
    o.email = email; 
    o.phone = phone; 
    o.notes = notes.text; 
    // handle the birth date
    // the birth_date variable is set with the getBirthDate 
    //method
    o.birth_date = birth_date; 
    // call the updateContact service 
    contacts_service.updateContact(o); 
  } 
}

Как видите, этот метод аналогичен методу saveContact за исключением того, что здесь осуществляется проверка выделения в списке ListBox, так как нам нужно запретить выполнение метода при отсутствии выделения контакта. Идентификатор записи контакта также передается CF для указания того, какую запись в базе данных необходимо обновить. Номер id сохраняется в объекте данных наряду с другой информацией о контакте. Этот объект затем передается методу updateContact нашего CFC.

<!--- save existing contact info --->
<cffunction name="updateContact" access="remote">
<cfquery datasource="#request.dsn#" name="save_contact">
update contactsset first_name="#flash.first_name#", 
last_name="#flash.last_name#", 
  Кaddress="#flash.addressft", city="#flash.citytt", 
    state="#flash.state#", Кzip="#flash.zip#", 
      email="#flash.email#", phone="#flash.phoneft",
Кnotes="#flash.notestt",
birth_date=#createodbcdate(flash.birth_date)#
where id=#flash.id#;
</cfquery>
<cfreturn 1 />
</cffunction>

function updateContact_Result(success) {
  // if the update is sucessful do the following
  if (success) {
  // refresh the contact ListBox after update
    contacts_service.getAllContacts();
    // display message to user that the update was successful
    message_mc._visible = 1;
    message_mc.setSize(200, 150);
    message_mc.setMessage("The contact was updated successfully.");
    // set the buttons and their width in the messagebox
    var buttons = ["Okay"];
    message_mc.setButtons(buttons);
    message_mc.setButtonWidth(60);
    // reset the close handler method in case it was already set
    message_mc.setCloseHandler(null); 
  } 
}

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

function deleteConfirm() {
  if (contacts_mc.getValue()) { 
    message_mc._visible = 1; 
    message_mc.setSize(200, 150);
    message_mc.setMessage ("Are you sure you want to delete
    Кthe selected entry?");
    var buttons = ["Okay", "Cancel"];
    message_mc.setButtons(buttons); 
    message_mc.setButtonWidth(60);
    message_mc.setCloseHandler("deleteContact");
  } 
}

function deleteContact(component, buttonlndex) { 
  if (buttonlndex == 0) {
    // set the object to pass to CF 
    var o = new Object(); 
    o.id = contacts_mc.getValue(); 
    contacts_service.deleteContact(o); 
  } 
}

<!--- delete contact from the database --->
<cffunction name="deleteContact" access="remote">
<cfquery datasource="#request.dsn#" name= "delete_contact">
delete from contacts
where id=#flash.id#;
</cfquery>
<cfreturn 1 />
</cffunction>