LiveCycle Data Services ES2 является важным компонентом для многих компаний, переходящих на трехуровневую архитектуру для разработки корпоративной RIA. Расширенные шаблоны обмена сообщениями (MEP), которые он обеспечивает, не имеют аналогов и очень надежны. Эта статья предназначена для разработчиков и описывает основные шаги, необходимые для настройки разработки на основе моделей с помощью LiveCycle Data Services ES2.5 и Flash Builder 4.
В этом руководстве мы расскажем об
этих шагах, чтобы помочь вам быстро начать работу и пройтись по создание простого приложения с использованием новой технологии, которая обеспечивает разработку на основе моделей разработчикам Flex.
Примечание. Возможно, вы слышали, что эта технология называется «Волокно» (иногда также пишется «Волокно»). Это было внутреннее название проекта, и технология теперь доступна для публичного скачивания.
Требования
Чтобы максимально использовать эту статью, вам понадобится следующее программное обеспечение и файлы:
- Плагин Flash Builder 4 для Ecipse 3.5
- Eclipse 3.5 для разработчиков Java
- LiveCycle Data Services 3.1
- Плагин Adobe Application Modeling
Вот шаги, необходимые для начала разработки в Flash Builder 4 с помощью подключаемого модуля modeler.
1. Загрузите LiveCycle Data Services и установите его с помощью автономной опции LiveCycle Data Services с Tomcat.
2. Следуйте инструкциям по установке Eclipse 3.5, а затем установите плагин Flash Player 4, как описано в обоих этих пакетах программного обеспечения.
3. После распаковки ZIP-файла скопируйте все файлы из его папки плагинов в каталог <Eclipse_Home> / plugins. ,
4. Перейдите в каталог <LCDS_INSTALL ROOT> / tomcat / webapps / lcds / WEB-INF / и откройте web.xml в текстовом редакторе; например, textEdit.app (Mac OS X) или Notepad (Windows).
5. Найдите раздел кода ниже (он начинается в строке 26):
<!-- begin rds
<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id="RDS_DISPATCH_MAPPING">
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>
end rds -->
6. Чтобы раскомментировать этот код, измените первую строку с <! — begin rds на <! — begin rds -> и измените последнюю строку с end rds -> на <! — end rds ->.
7. Измените значение useAppserverSecurity с true на false. Код должен теперь выглядеть так:
<!-- begin rds -->
<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id="RDS_DISPATCH_MAPPING">
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>
<!-- end rds -->
Это изменение удаляет безопасность сервера приложений из RDSDispatchServlet, поэтому вы можете сосредоточиться на написании кода во время разработки, а не на проблемах безопасности. Если вы не внесете это изменение, вы увидите сообщение об ошибке в Flash Builder 4, уведомляющее вас об успешном подключении к серверу RDS, но ваши учетные данные безопасности были недействительными.
Примечание . По завершении этого учебного пособия установите для этого параметра значение true или отключите RDSDispatchServlet, чтобы предотвратить нежелательный доступ к сервлету, который может раскрыть сведения о назначении на вашем сервере.
8. Сохраните изменения и закройте текстовый редактор.
Теперь вы готовы запустить сервер. Вам нужно будет запустить два компонента: пример базы данных и сам сервер.
9. Чтобы запустить базу данных (экземпляр HSQLDB), откройте окно терминала / команды, перейдите к <LCDS_INSTALL ROOT> / sampledb и введите sh startdb.sh (Mac OS X и Linux) или startdb (Windows).
10. Откройте второе окно терминала / команды, перейдите к <LCDS_INSTALL ROOT> / tomcat / bin и введите sh Catalina.sh run (Mac OS X и Linux) или Catalina run (Windows).
Рисунок 1. Информация о запуске, показывающая порт, который использует база данных.
Когда сервер запускается, вы увидите строку, которая показывает порт, который использует hsqldb. По умолчанию это 9002 (см. Рисунок 1). Вы будете использовать эту информацию для настройки источника данных.
11. Перейдите в папку <LCDS_INSTALL ROOT> / tomcat / conf / Catalina / localhost и откройте файл lcds.xml в текстовом редакторе.
12. Отредактируйте файл и добавьте ссылку на источник данных следующим образом:
<Context privileged="true" antiResourceLocking="false" antiJARLocking="false" reloadable="true">
<!-- JOTM -->
<Transaction factory="org.objectweb.jotm.UserTransactionFactory" jotm.timeout="60"/>
<Resource name="jdbc/ordersDB" type="javax.sql.DataSource"
driverClassName="org.hsqldb.jdbcDriver"
maxIdle="2" maxWait="5000"
url="jdbc:hsqldb:hsql://localhost:9002/ordersdb"
username="sa" password="" maxActive="4"/>
</Context>
Здесь вы можете использовать две базы данных: ordersdb и flexdemodb. Код выше использует ordersdb.
13. Сохраните изменения и закройте текстовый редактор. Вам может потребоваться перезагрузить сервер, чтобы изменения вступили в силу.
Теперь ваша среда настроена, и вы готовы приступить к созданию первого приложения Flex на основе модели.
Создание модельно-ориентированного приложения Flex
Чтобы создать простое приложение Flex на основе модели, выполните следующие действия:
1. Запустите Flash Builder 4 и выберите «Файл»> «Создать»> «Проект Flex».
2. Введите FiberTest в качестве имени проекта, выберите J2EE и LiveCycle Data Services ES в качестве технологии сервера (см. Рис. 2) и нажмите Далее.
Рисунок 2. Создание нового проекта
3. Чтобы настроить сервер J2EE, убедитесь, что параметры для корневой папки, корневого URL-адреса и контекстного корневого каталога указаны правильно. По умолчанию в Mac OS X они выглядят следующим образом:
корневая
папка: <TOMCAT_ROOT_DIRECTORY> / tomcat / webapps / lcds /
корневой URL-адрес: http: // localhost: 8400 / lcds
контекстный корневой каталог: lcds
/ (Mac OS X) или / lcds ( Windows)
4. Нажмите Validate Configuration (см. Рисунок 3), чтобы убедиться, что корневая папка и корневой URL-адрес действительны, а затем нажмите Finish.
Рисунок 3. Настройка сервера
Далее необходимо настроить Remote Data Services (RDS), чтобы подключаемый модуль моделлера мог получить доступ к только что настроенному источнику данных.
5. Выберите «Окно»> «Настройки».
6. В списке слева выберите Adobe, а затем Конфигурация RDS.
7. Нажмите Новый.
8. Для описания типа LCDS (localhost); для имени хоста тип 127.0.0.1; для порта типа 8400; и для контекста Root типа lcds.
9. Оставьте имя пользователя и пароль пустыми и нажмите «Проверить подключение», чтобы проверить настройки (см. Рис. 4).
10. Нажмите ОК.
Рисунок 4. Настройка RDS
11. Выберите «Окно»> «Другие представления», разверните папку «Модель данных» и выберите «RDS Dataview» (см. Рис. 5).
Рисунок 5. Открытие представления RDS Dataview
12. Если вы хотите, вы можете перетащить панель RDS Dataview в нижнюю левую часть Flash Builder 4. Теперь
вы сможете развернуть LCDS (localhost) в RDS Dataview. панель и изучить любую из таблиц базы данных (см. рисунок 6). Если вы не можете подключиться к серверу, щелкните правой кнопкой мыши (или Control-Click) на LCDS (localhost), выберите RDS Configuration и проверьте параметры конфигурации. Распространенные причины включают учетные данные безопасности (см. Инструкции по изменению значения useAppserverSecurity в предыдущем разделе:
Настройка среды) и отсутствие сопоставления источника данных (см. инструкции по добавлению ссылки на источник данных в lcds.xml в разделе «
Настройка среды» ).
Рисунок 7. Кнопка «Изменить активную модель данных»
14. Когда откроется редактор моделей, обратите внимание, что он поддерживает представление «Дизайн» и представление «Код», как и другие редакторы Flash Builder 4.
Примечание. Плагин Modeler хранит данные для макета представления «Дизайн» в файле FML.
15. Перетащите таблицу PUBLIC.PRODUCT из панели «RDS Dataview» в область представления «Дизайн» файла FML (см. Рис. 8).
Рисунок 8. Таблица PUBLIC.PRODUCT в представлении «Дизайн»
16. Чтобы развернуть активную модель на сервере, нажмите кнопку «Развернуть модель на сервере LCDS» (см. Рисунок 9).
Замечания:Вы можете использовать эту же процедуру для повторного развертывания вашей модели на сервере, если позже вы внесете изменения в модель.
Рисунок 9. Кнопка «Развернуть модель на сервере LCDS»
17. В диалоговом окне «Развернуть модель данных» введите FiberTest (или используйте любое имя, которое вы дали своему проекту), выберите «Перезаписать существующую модель» и «Создать / восстановить» (см. Рисунок 10). Нажмите Готово.
Рисунок 10. Развертывание модели данных в LiveCycle Data Services ES2
18. Откройте
19. FiberTest.mxml в представлении «Дизайн» и перетащите компонент DataGrid в область «Дизайн».
20. Нажмите панель «Данные / Сервисы». Если его не видно, выберите «Окно»> «Данные / Сервисы».
21. На панели «Данные / службы» разверните ProductService и перетащите метод getAll () на компонент DataGrid в представлении «Дизайн» (см. Рис. 11).
Для каждой модели, развернутой на сервере, LiveCycle Data Services и Flash Builder 4 будут генерировать методы, которые можно использовать для выполнения основных операций с таблицей, представленной моделью. Основные операции позволяют получить все записи (getAll), создать запись (createProduct), обновить запись (updateProduct) и удалить запись (deleteProduct). Помимо этих методов, есть методы, которые можно использовать для фильтрации записей на основе значения в столбце таблицы; в этом случае это, например, getByProductname и getByPrice. Вы также можете добавить собственные методы для выполнения своих собственных запросов, но это выходит за рамки этой статьи.
Рисунок 11. Привязка метода getAll () к компоненту
DataGrid Заголовки столбца DataGrid изменятся, чтобы отразить данные, возвращаемые при вызове службы. Появится значок ссылки, указывающий, что данные связаны с компонентом.
22. Выберите Run> Run FiberTest, чтобы запустить ваш проект.
Он должен получать данные с сервера и отображать их в компоненте DataGrid (см. Рисунок 12).
Рисунок 12. Актуальные данные в компоненте DataGrid
Добавление операций создания, чтения, обновления и удаления
Разумеется, как разработчику вы хотите больше, чем просто приложение для отображения. Вы готовы добавить форму для включения возможностей CRUD.
1. Щелкните правой кнопкой мыши (Windows) или удерживая нажатой клавишу «Control» (Mac OS X) метод getAll () на вкладке «Данные / службы» и выберите «Создать форму».
2. В диалоговом окне «Выберите тип формы» выберите «Модель управляемой формы» и нажмите кнопку «ОК» (см. Рис. 13).
Рисунок 13. Выбор формы на основе модели
3. После создания формы переместите ее под компонент DataGrid в представлении «Дизайн».
4. Сохраните ваш проект и снова запустите приложение.
5. В приложении нажмите кнопку «Добавить» и введите образец ввода в поля «Описание», «Цена» и «Имя продукта» (см. Рис. 14).
6. Нажмите Сохранить, чтобы обновить базу данных.
Если вы хотите, вы можете выйти из приложения и повторно запустить его, чтобы убедиться, что продукт, который вы только что добавили, действительно был сохранен в базе данных.
Примечание. Если вы введете нецелую цену, вы заметите, что цена, считанная из базы данных, не совпадает с той, которую вы ввели. Например, я добавил продукт по цене 7,3, а цена, хранящаяся в базе данных, была 7,300000190734. Чтобы понять почему, изучите поле «Цена» на панели «RDS Dataview»; он определяется как FLOAT17, тогда как в фактической форме цена определяется как число. Когда вы указываете цену, сохраняете ее в базу данных и перезагружаете ее, вы загружаете версию данных FLOAT17. Эта проблема может быть исправлена довольно легко, но перечисление шагов выходит за рамки данной статьи.
Рисунок 14. Добавление нового продукта
Теперь, когда вы знаете, что можете создать новую запись, вы можете внести еще несколько изменений, чтобы включить функцию обновления и удаления.
7. Откройте FiberTest.xml в представлении «Источник» и найдите следующую строку (она должна быть рядом со строкой 33):
<forms: ProductForm id = «ProductForm1» valueObject = «{Product}» x = «159» y = «233»>
8. Измените строку так, чтобы она читалась следующим образом (ваши значения x и y могут отличаться от указанных):
<forms: ProductForm id = «ProductForm1» valueObject = «{dataGrid.selectedItem as Product}» x = «159» y = «233»>
Это изменение позволит вам удалять записи, вносить изменения в форму и отображать их в сетке данных. Изменение необходимо, потому что вы создали форму из модели данных, а не из самой сетки данных. В результате форма не была автоматически привязана к выбранному элементу сетки данных.
9.
Переключитесь в режим конструктора и выберите сетку данных.
10. На панели «Свойства» установите для редактируемого свойства компонента DataGrid значение true.
Это позволит вам редактировать данные непосредственно в сетке данных, не используя форму.
11. Сохраните ваш проект и снова запустите приложение.
Теперь, когда вы выбираете элемент из сетки данных, он появится для редактирования в форме. Кроме того, вы можете редактировать данные непосредственно в сетке данных. Любые сделанные вами изменения будут зафиксированы в базе данных при нажатии кнопки Сохранить. Также, когда элемент выбран, вы можете нажать Удалить, чтобы удалить его из базы данных.
Куда пойти отсюда
Вот и все. Вы создали свое первое приложение Flex на основе модели и добавили базовую функциональность CRUD с минимальным кодированием.
Для получения дополнительной информации см. Приложения на основе моделей в Использование LiveCycle Data Services. Чтобы получить доступ к тестовому драйверу LiveCycle Data Services ES, откройте
http: // localhost: 8400 / lcds-samples / testdrive.htm в браузере .
Получайте удовольствие, используя возможности LiveCycle Data Services ES2 и Flash Builder 4.
Об авторах
— старший технический евангелист Adobe Systems и регулярно пишет статьи для архитекторов и разработчиков. Его блог можно найти по адресу
http://technoracle.blogspot.com, он входит в топ-100 на момент написания этой статьи в категории «Информация и технологии» от Technorati и регулярно участвует в DZone.
Sujit Reddy G — технический евангелист для Flex в Adobe. Объединяя опыт в Flex, J2EE и PHP, он специализируется на создании корпоративных приложений на платформе Adobe Flash и ведет блог, посвященный интеграции Adobe Flex с Adobe LiveCycle Data Services ES и BlazeDS, по адресу
http://sujitreddyg.wordpress.com. ,