Статьи

Использование веб-сервисов с ориентированной на данные разработкой в ​​Flash Builder 4 beta

Январь 3, 2019

Разработка, ориентированная на данные, — это потрясающая новая функция быстрой разработки приложений (RAD) в Flash Builder 4 beta 2, которая помогает традиционным веб-разработчикам и начинающим разработчикам Flex быстро создавать многофункциональные приложения Flex, ориентированные на данные, которые извлекают данные из различных внутренних процессов, включая ColdFusion. PHP, BlazeDS, LiveCycle Data Services ES, веб-службы и службы HTTP.

Поскольку веб-службы являются таким популярным механизмом обмена данными между различными приложениями и платформами в Интернете, Flash Builder 4 предоставляет простые и эффективные способы импорта, исследования и использования веб-служб. Благодаря своим мастерам унифицированных рабочих процессов Flash Builder 4 помогает разработчикам быстро создавать многофункциональные интернет-приложения, которые используют существующие инфраструктуры корпоративных или общественных служб, включая веб-службы.

В этой статье я продемонстрирую эти возможности, показывая вам, как создать приложение (см. Рисунок 1), которое использует веб-сервис Zenfolio для отображения фотографий.

Пример приложения

Рисунок 1. Пример приложения

Требования

Чтобы максимально использовать эту статью, вам понадобится следующее программное обеспечение и файлы:

Flash Builder 4 бета 2

Примеры файлов:

Необходимые знания

Предыдущий опыт работы с Flex Builder, Flash Builder или веб-службами будет полезен, но в этом нет необходимости.

Импорт веб-сервиса

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

Выполните следующие действия, чтобы создать новый проект Flex и импортировать веб-сервис Zenfolio.

  1. Выберите «Файл»> «Создать»> «Проект Flex».
  2. Введите имя для проекта, например ZenfolioApp .
  3. Для Типа приложения выберите Веб, а для Типа сервера приложений выберите Нет / Другой.
  4. Нажмите Готово.
  5. Выберите «Данные»> «Подключиться к веб-службе».
  6. В открывшемся диалоговом окне введите http://www.zenfolio.com/api/1.0/zfapi.asmx?WSDL в качестве URI WSDL. Это URI файла WSDL для веб-службы Zenfolio.
  7. В качестве имени службы введите ZenfolioService . Это имя, которое вы можете использовать для ссылки на этот сервис в текущем проекте.
  8. Для Пакета услуг введите services.zenfolioservice . Это имя пакета (папки), в котором Flash Builder будет генерировать необходимые классы ActionScript.
  9. Для пакета типа данных введите valueObjects . Это имя пакета, в котором Flash Builder сгенерирует необходимые файлы ActionScript для пользовательских типов данных, используемых этой службой.

  10. Нажмите «Далее.

    Flash Builder проанализирует файл WSDL и представит список служб, портов и операций, поддерживаемых службой.

    Примечание. Один файл WSDL может содержать несколько портов для разных конечных точек, доступных для разных протоколов. Мастер веб-служб в Flash Builder 4 поддерживает протокол SOAP 1.1. Для этого конкретного файла WSDL выбранный порт будет ZfApiHttpGet, и в результате в диалоговом окне вы увидите следующее уведомление: «Выбранный порт WSDL не совместим с протоколом SOAP 1.1. Операции и объекты не могут быть прочитаны с этого порта. Пожалуйста, выберите другой порт ».

  11. Выберите ZfApiSoap в качестве порта.

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

  12. Нажмите «Выбрать все» и нажмите «Готово».

Это все, что нужно сделать. Вы только что закончили импортировать веб-сервис Zenfolio в свой проект Flex.

Изучение веб-службы

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

  1. Выберите «Окно»> «Данные / службы», чтобы отобразить представление «Данные / службы».
  2. На панели «Данные / службы» разверните службу ZenfolioService, чтобы увидеть узел «Типы данных» и список операций. Операции перечислены с именами входных аргументов, типами аргументов и типами возвращаемых данных. Вы также можете развернуть Типы данных, чтобы увидеть пользовательские типы данных, используемые службой, и соответствующую структуру данных.
  3. Найдите GetPopularPhotos (), метод, который вы будете использовать в этом руководстве (см. Рисунок 2).

Метод GetPopularPhotos () принимает два параметра типа int, offset и limit, и возвращает массив объектов Photo.

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

Операции веб-службы на панели «Данные / службы»

Рисунок 2. Операции веб-службы на панели «Данные / службы»

Подключение компонентов к данным

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

Пользовательский интерфейс должен включать следующие компоненты:

  • Список для отображения списка популярных фотографий с идентификатором lstPhotos
  • Изображение для отображения версии выбранного изображения в высоком разрешении с идентификатором imgPhoto
  • NumericStepper, чтобы позволить пользователю установить количество фотографий для отображения на странице
  • Заголовок и соответствующий цвет фона (например, # 787878), чтобы сделать приложение привлекательным

Базовый интерфейс для примера приложения

Рисунок 3. Базовый интерфейс для примера приложения

  1. Вы можете создать пользовательский интерфейс, показанный на рисунке 3, скопировав следующий код в ZenfolioApp.mxml:

    <s:Rect radiusX="8" radiusY="8" height="67" width="194" x="11"
       y="17" fill="{new mx.graphics.SolidColor(0x000000,1)}"/>
    <s:Label x="21" y="34" text="Zenfolio" color="#FFFFFF" fontSize="42"/>
    <s:Rect radiusX="8" radiusY="8" height="36" width="153" x="181"
       y="48" fill="{new mx.graphics.SolidColor(0x000000,1)}"/>
    <s:Label x="189" y="58" text="Popular Photos" color="#00DEFF" fontSize="20"/>
    <s:Line y="100" x="0" width="100%" stroke="{new
       mx.graphics.Stroke(0xFFFFFF,1)}"/>
    <s:List id="lstPhotos" x="10" width="152"
       contentBackgroundColor="#787878"
       borderAlpha="0" bottom="10" top="120">
    </s:List>
    <s:Group bottom="10" right="10" left="170" top="120">
       <mx:Image id="imgPhoto" horizontalCenter="0" verticalCenter="0"/>
    </s:Group>
    <s:Group height="35" width="152" top="57" right="10">
       <s:Rect radiusX="8" radiusY="8" width="100%"
          height="100%" fill="{new mx.graphics.SolidColor(0x000000,1)}"/>
       <s:Label x="9" text="Per Page" fontSize="14" color="#FFFFFF" y="11"/>
       <s:NumericStepper id="nsResults" x="76" minimum="10"
          maximum="200" stepSize="5" value="50" y="6"/>
    </s:Group>
  2. Переключиться в режим конструктора.

  3. Чтобы отобразить массив Photo, возвращенный функцией GetPopularPhotos () в компоненте List, перетащите операцию GetPopularPhotos () с панели «Данные / службы» в компонент List.

    Примечание. Для этого шага можно использовать несколько альтернативных подходов. Вы можете щелкнуть правой кнопкой мыши компонент List и выбрать Bind To Data из контекстного меню. Или вы можете выбрать компонент «Список» и затем щелкнуть значок «Привязать к данным» рядом с поставщиком данных на панели «Свойства» или щелкнуть значок «Привязать к данным» на панели «Данные / службы».

  4. В открывшемся диалоговом окне «Привязать к данным» выберите «GetPopularPhotos» в качестве операции и выберите «Заголовок» в качестве параметра «Привязать к полю».
  5. Нажмите ОК.
  6. После того как Flash Builder 4 сгенерирует необходимый код и переключится в представление «Исходный код», введите 1, nsResults.value в качестве параметров для вызова GetPopularPhotos (), как показано ниже:
protected function lstPhotos_creationCompleteHandler(event:FlexEvent):void
{
    GetPopularPhotosResult.token =
       zefolioService.GetPopularPhotos(1,nsResults.value);
}

Сгенерированный код в ZenfolioApp.mxml вызывает операцию веб-службы для события creationComplete компонента List.

Операция GetPopularPhotos () ожидает два аргумента, и вы можете передавать статические значения или связывать их с другими компонентами пользовательского интерфейса. В этом случае вы передаете 1 в качестве смещения и nsResults.value (значение, установленное в элементе управления NumericStepper) в качестве предела.

Определение взаимодействий

Если вы запустите проект (выберите «Выполнить»> «Выполнить ZenfolioApp»), вы увидите, что заголовки фотографий отображаются в элементе управления «Список», но фотографии не отображаются, даже если вы их выбрали.

Примечание. Звонки на веб-службу могут занять несколько секунд; требуется немного терпения.

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

  1. В представлении «Дизайн» щелкните правой кнопкой мыши компонент «Список» и выберите «Создать обработчик изменений» в контекстном меню.

  2. Отредактируйте метод lstPhotos_changeHandler (), который был сгенерирован, как показано ниже, чтобы получить URL-адрес выбранного изображения и назначить его imgPhoto.source:

    protected function lstPhotos_changeHandler(event:IndexChangeEvent):void
    {
        imgPhoto.source = "http://www.zenfolio.com/"
           + lstPhotos.selectedItem.UrlCore + "-4.JPG";
    }
  3. Выберите «Выполнить»> «Выполнить ZenfolioApp», и вы увидите изображение высокого разрешения, отображаемое при выборе элемента из списка.
  4. Чтобы отобразить миниатюру вместе с заголовком фотографии, как показано на рисунке 1, добавьте itemRenderer для элемента управления List. В представлении «Исходный код» замените код существующего элемента управления List следующим MXML-кодом:
<s:List id="lstPhotos" x="10" width="152" contentBackgroundColor="#787878"
   borderAlpha="0" bottom="10" top="120"
   creationComplete="lstPhotos_creationCompleteHandler(event)"
   dataProvider="{GetPopularPhotosResult.lastResult}" labelField="Title"
   change="lstPhotos_changeHandler(event)">
   <s:itemRenderer>
      <fx:Component>
         <s:ItemRenderer height="100" width="90%" buttonMode="true">
           <s:Group height="90" width="90%">
              <s:Rect radiusX="8" radiusY="8"
                 width="100%" height="100%" 
                 fill="{new mx.graphics.SolidColor(0x000000,1)}"/>
              
              <mx:Image y="5" source="{'http://www.zenfolio.com'
              + data.UrlCore + '-1.jpg'}"
              horizontalCenter="0"/>
              
              <s:Label text="{data.Title}"
              y="74" color="0xFFFFFF" width="100%" height="12"
              textAlign="center"/>
           </s:Group>
         </s:ItemRenderer>
      </fx:Component>
   </s:itemRenderer>
</s:List>

Куда пойти отсюда

Ориентированная на данные разработка в Flash Builder 4 помогает разработчикам быстро создавать многофункциональные интернет-приложения с помощью унифицированных рабочих процессов с использованием различных внутренних технологий. Это позволяет начинающим разработчикам быстро начать работу и помогает опытным разработчикам работать более продуктивно. Разработка, ориентированная на данные, также облегчает работу всех разработчиков Flex с такими передовыми методами разработки, как управление данными на стороне клиента, разбиение на страницы, создание форм и создание диаграмм.

Для получения дополнительной информации о DCD см. Мое вступительное сообщение в блоге на эту тему и статью Тима Бунтела о разработке, ориентированной на данные, с помощью Flash Builder 4 beta . Sujit Reddy G также рассказывает о DCD в Flash Builder 4 в своем блоге .

В качестве следующих шагов для примера приложения вы можете добавить обработчик событий в элемент управления NumericStepper, чтобы реализовать функцию результатов на странице, или добавить кнопки «Далее» и «Назад», чтобы перейти ко всем фотографиям из Zenfolio.

39
Share: