Я работал с веб-технологиями с конца 90-х, и моей первой серверной технологией был PHP. Позже я занимался разработкой ColdFusion и Java, но всегда считал себя разработчиком PHP. Когда появился AJAX, я начал работать с такими фреймворками, как Prototype и script.aculo.us, и начал создавать свои собственные фреймворки.
В конце 2006 года я впервые попробовал разработку Flex. Это был своего рода ускоренный курс, потому что у меня было около 4-6 недель, чтобы создать демонстрационное приложение для будущей версии FDS (Flex Data Services, теперь называемой LiveCycle Data Services). Хотя я был новичком в Flex и FDS, проект прошел хорошо, и мне действительно понравился процесс разработки и обучения.
Однако, как это ни было приятно, все было иначе. Я имею в виду, что когда я занимался ColdFusion или веб-разработкой на Java, он не чувствовал себя иначе по сравнению с PHP; это был скорее вопрос поиска правильных API и адаптации к специфике языка. Позже, когда я начал делать AJAX поверх DHTML, это тоже не сильно отличалось. Вы по-прежнему создаете большую часть веб-сайта, используя те же приемы с помощью серверного языка, и просто добавляете некоторые специи здесь и там (в данном случае, некоторые виджеты AJAX).
Когда я делал свой первый веб-проект, используя Flex, о, о, боже, это был настоящий поворот! Четкое разделение между клиентом и сервером (бизнес-логика на стороне клиента в дополнение к бизнес-логике на стороне сервера), технология на стороне клиента, которая компилируется вместо интерпретации, два языка на клиенте, все это требует отличное мышление от традиционной веб-разработки.
И это моя причина написания этой статьи. Я хочу поделиться с вами некоторыми вещами, которые специфичны для Flex по отношению к PHP. И я хочу показать вам, как общие задачи по созданию приложений HTML / PHP выполняются с помощью Flex и PHP.
Клиент-серверная архитектура
Если вы хотите классифицировать приложения Flex, вы можете сказать, что приложения Flex следуют модели архитектуры SOA, где Flex используется для создания клиента, а вы подключаете клиент к данным с помощью сервисов.
Давайте вернемся к браузерам и тому, как доставляются веб-приложения. Когда браузер делает запрос, сервер использует комбинацию статического содержимого (код HTML / CSS / JS) и сценариев (эти сценарии могут запрашивать базу данных или вызывать другие сценарии, но в конце они выводят HTML / CSS / JS) для подготовить страницу. Эта страница загружается и отображается браузером. Ключевым элементом здесь является то, что обычно эта страница (или ответ) имеет разметку презентации, а данные запекаются в одно и то же сообщение.
Когда должно быть представлено новое состояние приложения, браузер делает новый запрос, и сервер готовит страницу. Клиент «просто» отображает данные.
Flex приложения работают по-другому. Сервер отправляет скомпилированное приложение Flex (файл SWF), которое запускается внутри браузера с помощью подключаемого модуля Flash Player. Обычно этот SWF-файл содержит только бизнес-логику на стороне клиента. Если нужны данные (например, из базы данных), приложение Flex запрашивает эти данные. Сервер отправляет только данные (это может быть в формате XML, JSON, AMF3), и клиент знает, как визуально представить эти данные. Здесь мы имеем сервис-ориентированную архитектуру: приложение Flex — это клиент, клиент, который может использовать службы данных с сервера. Приложение может изменять состояние без обновления страницы или перезагрузки SWF-файла в браузере. Приложение представляет собой клиент, который может делать больше, чем просто отображать данные.Таким образом, используя Flex и Flash Player, можно создавать практически все, что имеет смысл для развертывания в Интернете, от игр до приложений, виджетов, интегрированных в «классические» веб-приложения, и т. Д. (См. Рисунок 1).
Рисунок 1. Архитектура Flex и PHP
Подключение клиентов Flex к PHP-серверам
Как разработчик PHP, у вас есть очень прямой способ чтения данных, их анализа и отображения на экране. Подключение к базе данных MySQL — это одна из первых вещей, которую изучает любой PHP-разработчик.
Как насчет Flex? Я должен разочаровать вас, потому что у вас нет прямого доступа к данным, хранящимся в базе данных. Почему нет прямого способа чтения данных из базы данных? Из-за старой поговорки «Никогда не доверяй клиенту!» Предположим, клиент является компонентом Flex, который знает, как подключиться к серверу MySQL. Как хранить учетные данные, чтобы их было нелегко украсть и взломать базу данных? Установить разные пользователя / пароль для каждого пользователя и дать им эту информацию? Это только одна из причин, по которой не очень хорошая идея иметь клиентскую технологию, которая может подключаться напрямую к серверу базы данных, без использования сервера приложений в середине.
В основном, в приложениях Flex вы используете серверные сценарии для управления базами данных. Flex предлагает вам вызвать страницы сервера и получить ответ в Flex. По сути, вы можете подключить клиента Flex к фону PHP двумя способами: через HTTP или с помощью сокетов.
Через HTTP существует четыре различных способа подключения к источнику данных сервера: службы в стиле REST, веб-службы (WSDL / SOAP), удаленное взаимодействие (или RPC) и XML-RPC (см. Рисунок 2).
Рисунок 2. Flex — связь на основе PHP HTTP
Вы можете использовать класс HTTPService для использования сервисов в стиле REST. Вы можете отправлять переменные POST при выполнении запроса, и ответом может быть XML, JSON (есть сторонняя библиотека для анализа JSON) или пользовательское форматирование.
Если у вас есть веб-сервисы на сервере (SOAP / WSDL), вы можете использовать класс WebService .
Но самый интересный метод это удаленное взаимодействие (используя RemoteObjectучебный класс). Есть три причины, почему я считаю, что это самый крутой метод. Во-первых, используя удаленное взаимодействие, вы можете использовать любой класс PHP на своем сервере, вызывая любой открытый метод. По сути, со стороны Flex вы используете экземпляр RemoteObject, как если бы это был удаленный класс PHP. Во-вторых, вы можете отобразить модель данных со стороны PHP на модель данных ActionScript и выполнить преобразование автоматически. Это чрезвычайно важно, потому что, когда вы используете типизированные объекты, вы получаете преимущества проверки ошибок во время компиляции и завершения кода. Это означает, что код легче читать и меньше подвержен ошибкам. И в-третьих, формат обмена сообщениями для этого метода, AMF3 (Action Message Format), является двоичным форматом, который может быть намного быстрее и меньше по сравнению с SOAP / XML / JSON, особенно для больших наборов данных. Сам формат открыт,и любой может прочитать официальные документы и реализовать программы, которые его используют.
AMF3 быстрее, потому что он кодирует данные. Например, если одна и та же строка повторяется в наборе данных, она кодируется один раз, а все остальные вхождения строки являются ссылками. Если число меньше четырех битов, используется только минимальное количество требуемых байтов (см. Рисунок 3).
Рисунок 3. Remoting или RPC
Удаленное взаимодействие изначально поддерживается Flex, однако на стороне сервера история не та. PHP не поддерживает удаленное взаимодействие и AMF3 изначально. Вот почему вам нужна библиотека на стороне сервера, чтобы включить удаленное взаимодействие для веб-сервера PHP. Доступно четыре библиотеки, все они бесплатные, и я написал учебные пособия о том, как использовать каждую из них: Zend AMF , AMFPHP , WebORB для PHP и SabreAMF . И здесь вы можете прочитать пост, который сравнивает их.
Последний метод, используемый людьми для интеграции Flex с PHP, — это облегченный веб-сервис XML-RPC. Это, например, то, что Drupal предлагает из коробки, если вы хотите создавать модули, использующие Flex или AJAX. Чтобы использовать XML-RPC, вам нужна библиотека как для клиента (xmlrpcflash), так и для сервера (phpxmlrpc).
Если вы хотите подключиться, используя свой собственный протокол, построенный поверх сокетов, вы можете использовать сокеты. Вы можете создать сервер сокетов на стороне PHP, а с клиента вы можете подключиться к этому серверу и обмениваться данными. Просто напоминание: при создании приложений Flex, предназначенных для рабочего стола (работающих в Adobe AIR, а не в браузере), вы также можете создавать сокет-серверы на стороне клиента. Вот хорошая статья о работе с сокетами с Flex и PHP.
Асинхронная природа Flex
Асинхронная природа Flex отличается от всего, что есть в PHP. Важно понять это, прекратить бороться с этим и плыть по течению.
Что это значит, что Flex асинхронный? Предположим, вы создали приложение Flex, и после загрузки приложения в браузере пользователь может выбрать загрузку изображений с другого сайта. Вы можете использовать класс URLLoader для этой задачи. Когда вы выполняете метод load (), на следующей строке кода у вас не будет данных. Сценарий не останавливается после вызова load (), ожидая загрузки данных. Вместо этого выполнение сценария возобновляется. Как программист, вы имеете дело с этой асинхронной природой, используя встроенную систему событий AS3. Если вы знакомы с программированием AJAX, это похоже на то, что вы делаете, когда делаете вызов AJAX: вы предоставляете функцию обратного вызова, а когда данные поступают, вызывается функция обратного вызова, и вы можете получить доступ к загруженным данным.
Предположим, у вас есть приложение Flex, которое загружает изображение с веб-сервера. Чтобы справиться с асинхронностью, вы должны добавить прослушиватель событий для результирующего события. Это функция, которая будет вызываться после загрузки данных. Вот пример того, как может выглядеть код:
function loadPic():void {
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
//adding the event handlers or listeners
loader.addEventListener(EventComplete, picLoaded);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, picError);
//starting the loading
loader.load(new URLRequest("http://some_url"));
}
//event handler for the result event
function picLoaded(event:Event):void {
//get the data from the loader object
//use the target property to get the loader object
(event.target as URLLoader).data;
}
//event handler for the error event
function picError(event:IOErrorEvent):void {
//displays the error id in a pop-up windonw
Alert.show(event.errorID);
}
Я могу подвести итог так: не звоните нам, мы вам позвоним!
As I said, AS3 has a built-in event system. The top class of all events is Event. All objects that work asynchronously have an addEventListner() method, and the first two arguments are the event type and the name of the function to be called when the event occurs. You might think that only objects that deal with retrieving remote data are subject to this event model. Actually that is not the case; all components or objects that are visual also have events. For example, every Flex application has a creationComplete event. This event is triggered once all the required components from the application are processed and drawn on the screen.
Хотя вам может показаться, что такой код не так прост, как PHP, есть веская причина разбросать асинхронные вызовы во Flex (и Flash Player): Flex — это технология на стороне клиента. Если бы все вызовы были синхронными, пользовательский интерфейс приложения перестал бы отвечать на любые вызовы, например, связанные с загрузкой данных. И пользователи ненавидят неотзывчивые пользовательские интерфейсы.
Вы можете отменить некоторые события и даже изменить поведение по умолчанию. Я позволю вам изучить эти детали самостоятельно, если вам нужно; сейчас у вас должно быть достаточно хорошее представление о том, что такое события и слушатели событий.
Безопасность
Прежде всего позвольте мне сказать вам, что вы можете общаться с Flex через HTPP или HTTPS. Это зависит от ваших потребностей.
Во-вторых, когда дело доходит до аутентификации пользователя, вы можете использовать в основном тот же рабочий процесс, который вы используете в приложениях HTML / PHP. Например, предположим, что вы аутентифицируете пользователя на клиенте (это может быть форма HTML или форма самого приложения Flex). Вернувшись на сервер, вы проверяете учетные данные, и, если они верны, вы устанавливаете некоторые флаги в сеансе. Все вызовы, которые вы делаете из клиента Flex в сценарии PHP (с использованием служб REST, веб-служб, удаленного взаимодействия или XML-RPC), будут добавлять идентификатор запроса к запросу, и в результате PHP будет выполняться с той же информацией сеанса. И на основе информации сеанса вы можете проверить, есть ли у пользователя права делать то, что пытается сделать операция.
Когда дело доходит до выполнения кода, загруженного после инициализации приложения (например, ваше приложение Flex загружает некоторые виджеты с других серверов), Flash Player предлагает «песочницы» как способ гарантировать, что внешний код (и потенциально опасен с точки зрения безопасности). ) не обращается к переменным из основного приложения Flex. Это сделано по умолчанию. Например, если у вас есть приложение Flex, которое загружает виджет погоды из другого домена, вы не хотите, чтобы код виджета погоды определял имя пользователя или его банковский счет (предположим, что информация является частью приложения Flex) ,
Если вы доверяете загруженному коду (хотя это представляет угрозу безопасности), вы можете «импортировать» вместо загрузки, и код виджета из приведенного выше примера может выполняться в том же домене приложения, что и код приложения Flex.
Если вы храните загруженный код в отдельном домене (вы не «импортируете» код), вы можете общаться из одного домена в другой, используя Local Connection. Вы можете прочитать больше об этом здесь . HP создала бесплатное приложение SWFScan, которое сканирует Flash-приложения на наличие ряда уязвимостей. Это хороший способ убедиться, что вы не делаете ошибок.
Отладка приложений Flex и PHP
Ключевой элемент, который нужно иметь в виду: теперь у вас есть клиент, отделенный от сервера, и проблемы могут быть на клиенте, на сервере или на сетевом уровне.
Вы можете отлаживать код Flex с помощью отладчика из Flex SDK или отладчика из Flash Builder 4. Если вы выбираете комбинированную настройку Flash Builder 4 и Zend Studio, вы можете очень легко отлаживать код PHP и Flex из одного проекта. Вот руководство по отладке Zend Studio и Flex Builder.
Мы добавили два новых представления в Flash Builder 4, которые помогут вам отладить код: представления «Сетевой монитор» и «Тестовая операция». Если эти виды не отображаются, вы можете добавить их в меню «Окно»> «Другие виды»… и посмотреть на представления узла Flash Builder (сетевой монитор доступен только в Flash Builder Premium).
В представлении «Сетевой монитор» вы можете видеть все коммуникации между клиентом Flex и сервером. Вы можете увидеть как необработанные данные, так и объекты. Если вы хотите его использовать, первое, что вам нужно сделать, это включить эту функцию: щелкните значок Enable Monitor (см. Рис. 4).
Рисунок 4. Включение сетевого монитора
После этого просто запустите приложение (вам не нужно делать это в режиме отладки). При использовании приложения и обмене данными с сервером вы должны увидеть запросы, сколько времени это заняло и данные были отправлены / получены (см. Рисунок 5).
Рисунок 5. Использование сетевого монитора
Представление «Тестирование операций», как следует из названия, позволяет протестировать доступные операции. Выберите представление Test Operation, выберите операцию getData () и нажмите Test. Вы должны увидеть четыре объекта VOAuthor (см. Рисунок 6). Если операция ожидает аргументы, то это представление позволяет вам определить значения аргументов.
Рисунок 6. Использование представления «Тестовая операция»
Куда идти дальше
Если вы хотите узнать больше о Flex и о том, как вы можете интегрировать приложения Flex с серверной частью PHP, вы можете взглянуть на мой блог (помимо множества учебных пособий есть введение в Flex для разработчиков PHP ). Еще один замечательный ресурс — Adobe Developer Connection, где вы можете найти раздел, посвященный Flex и PHP. Если вы учитесь лучше, слушая, Adobe TV имеет много видео или скринкастов.