Меню

Разрабатывайте быстро приложения SAPUI5 с AppBuilder

Автор показывает, как использовать AppBuilder, который является инструментом, созданным SAP для помощи разработчикам адаптировать SAPUI5.

Ключевое понятие

SAP AppBuilder представляет собой инструмент, встроенный в браузер, для быстрого создания приложений SAPUI5. Он позволяет вам сосредоточиться на функционале приложения и не беспокоиться о дизайне интерфейса пользователя (UI) с помощью возможностей drag-and-drop. SAP AppBuilder интегрирован с SAP Mobile Platform, что расширяет возможности аутентификации и single-sign-on на приложения, созданные c помощью SAP AppBuilder.

Аннотация

Автор показывает, как использовать AppBuilder, который является инструментом, созданным SAP для помощи разработчикам адаптировать SAPUI5.

В течение нескольких лет разработчики SAP Enterprise Portal работали на парадигмой разработки, которая бы включала в себя Java Server Pages (JSP) и Web Dynpro Java. SAPUI5 спросил их: когда начинается SAPUI5? Web Dynpro Java довольно зрелый инструмент и учебных материалов о нем достаточно достаточно. SAPUI5, напротив, новый и его подход к разработке значительно отличается от того, что есть у Web Dynpro Java.

Как ответ на вопрос о начале изучения разработки пользовательского интерфейса (UI) с помощью SAPUI5, SAP предложил использовать AppBuilder. Прежде, чем продолжить, я бы хотел предупредить, что AppBuilder не есть волшебная палочка, с помощью которой Вы сможете разрабатывать быстро SAPUI5 приложения без усилий на изучение платформы SAPUI5. AppBuilder представляет собой инструмент для показа концепции, который SAP выпустил для помощи разработчикам адаптироваться к разработке приложений на SAPUI5. Думайте о AppBuilder как о начальной точке перед тем как перейти на разработке приложений SAPUI5 в среде Eclipse (смотрите статью Sarah о разработке в среде Eclipse).

Адаптация SAPUI5

В недавней презентационной карте SAP UI (http://scn.sap.com/docs/DOC-41321) показано, что SAPUI5 станет основным UI не только в SAP Enterprise Portal, но и в SAP разработке в целом. SAP Fiori использует SAP UI5 за основу и, рано или поздно, все должны будут работать над разработкой приложений в SAPUI5.

SAPUI5 не имеет функционала, в котором Вы могли «взять и использовать» (drag and drop) UI-элемент для разработки дизайна Вашего приложения. В SAPUI5, Вам нужно в первую очередь думать о UI (пользовательском интерфейсе) и это делает SAPUI5 подходящим для всех современных устройств. Однако, если Вы игнорируете SAPUI5 потому что нет никакого функционала по перетаскиванию элементом управления, то AppBuilder приходит на помощь. С AppBuilder Вы можете работать с UI (пользовательским интерфейсом) и строить приложения без генерации UI. AppBuilder контролирует код UI и Вы можете видеть целостный вид SAPUI5, соединение с бэк-ендом и развертывание.

Отсутствие информации по всем используемым UI-элементам

Официальная документация по SAPUI5 поможет Вам понять, как конкретный UI-элемент работает, но документация не содержит пример кода для Вашего проекта, если Вы используете несколько ракурсов JavaScript (JavaScript views). В большинстве примеров кода, Вы найдете UI-элементы, определенные в файле index.html. Так что, если Вы хотите использовать множество ракурсов, то Вам нужно найти свой собственный способ, как это сделать.

Если Вы не понимаете методологию разработки приложений в SAPUI5 и использования UI-элементов, то Вам будет сложно работать с SAPUI5 — например, Shell. Shell представляет собой UI-элемент в SAPUI5, который позволяет Вам динамически сгенерировать содержимое внутри одного внедрения Shell. Shell можно рассматривать как окно, показывающее несколько различных ракурсов. Однако, если Вы не знаете, что Вам нужно инициировать Ракурс 1 внутри внедрения Ракурса 2 при возврате назад, то Ваше приложение сгенерирует пустой экран. В WebDynpro Java это достигается использованием FirePlugs. Аналогично, все элементы SAPUI5 внедряются по-разному. Вам нужно понимать стандарт внедрения UI изначально, а затем расширять для адаптации под клиента (customer application) — например, изучением как генерируется интерфейс и затем добавить новый элемент управления в Ваше приложение клиента.

Шаги разработки при создании приложения на UI5

Примечание

Хотя SAPUI5 является относительно новым и, следовательно, нет большого количества инструкций-указаний для сценариев SAPUI5, имеется обильная документация, которую Вы можете использовать. Кроме того, имеется множество опубликованных видео на официальном канале SAP на YouTube. Смотрите статью в SAP Professional Journal «Development Steps in Creating a UI5 Application» написанную Sarah Lottman.

Введение в AppBuilder

Согласно официальной SAP Note, SAP работает над общей гармонизированной стратегией по UI-инструментам (инструментам по работе с пользовательским интерфейсом). Инструменты AppBuilder, AppDesigner, Gateway Productivity Accelerator являются частью этих рассуждений по поводу web-совместимого инструмента для разработки UI (пользовательского интерфейса). Тем не менее, AppBuilder предоставляется в использование под ограниченной лицензией для конечного пользователя до тех пор, пока все возможности не будут доступны в рамках гармонизированного решения. AppBuilder не требует каких-либо дополнительных лицензий от SAP.

Требования

Ниже указаны основные требования для начала работы с AppBuilder:

  • AppBuilder работает с Windows or Mac OS (как с 32 так и с 64 bit)
  • Node JS платформа Chrome or Safari

Node JS представляет собой скрипты, выполняемые на сервере. Node JS использует асинхронный ввод/вывод (input/output (I/O)) и, следовательно, работает быстро.

Начало работы с AppBuilder

AppBuilder является интегрированной в браузер средой разработки (IDE), который выполняется поверх node framework. Вы можете загрузить пакет AppBuilder из инструментов для SAP HANA, перейдя по ссылке https://tools.hana.ondemand.com/#sapui5. Документация по поводу того, как установить AppBuilder доступна по ссылке http://help.sap.com/appbuilder. я полагаю, что Вы уже установили Node JS и загрузили пакет AppBuilder с упомянутых ссылок выше. Сейчас я запущу AppBuidler для показа его основных функций, а также покажу как установить соединение с SMP.

Запуск AppBuilder

Перейдите к директории, куда Вы извлекли AppBuilder и запустите приложение с помощью файла run.bat. Дважды щелкните на файле run.bat для запуска приложения.

Вам нужно только лишь запустить run.bat, чтобы использовать приложение. Серверные и другие batch-файлы не требуются для запуска AppBuilder, хотя они требуются для корректной работы AppBuilder. Вам не нужно запускать или исполнять другие требуемые файлы. Например, операционная система включает множество исполняемых файлов, но Вы не должны запускать каждый. Запустив компьютер, все файлы загружаются автоматически. Рис. 1 показывает извлеченную директорию, которая Вам нужна для запуска AppBuilder. Загрузив ZIP-файл для AppBuilder с ссылки, которую я указал, Вам нужно извлечь его в локальную систему. На Рис. 1 показаны извлеченные файлы.

Рис. 1. Корневая папка AppBuilder

Некоторые операционные системы не показывают расширение файлов и поэтому, вместо файла run.bat будет отображен Run, как показано на Рис. 1. Пользователю нужно щелкнуть на файле Run, который является bat-файлом. Вы можете увидеть сообщение об ошибке, говорящее, что страница не может быть отображена, просто обновите окно браузера и AppBuilder запустится корректно. На Рис. 2 представлен начальный экран AppBuilder. В нем показаны demo приложения, такие как TabAppSample и SuperListSample. Когда пользователь запустит файл Run, AppBuilder запустится и загрузится в окне браузера (Рис. 2).

Рис. 2. Начальный экран AppBuilder

Функции OPEN, NEW, DELETE являются само поясняющими. IMPORT предназначен для импорта существующего проекта AppBuilder. EXPORT можно использовать для экспорта проекта AppBuilder, который в дальнейшем может быть инкапсулирован с Kepsel Plugin или Cordova для создания мобильного приложения. Эти возможности за рамками текущей статьи. Если Вам интересен Kapsel Plugin, посетите http://scn.sap.com/docs/DOC-49592 и http://scn.sap.com/blogs/johnwargo/2013/10/21/an-introduction-to-smp-kapsel. Для того, чтобы больше узнать о Cordova перейдите по ссылке http://docs.telerik.com/platform/appbuilder/introduction/supported-frameworks/apache-cordova/apache-cordova.

Когда Вы нажмете кнопку NEW, показанную на Рис. 2 для создания нового приложения SAPUI5 или AppBuilder-приложения, Вам будет представлена возможность указать целевое устройство (Рис. 3).

Рис. 3. Создание нового проекта

Касаемо типа устройства, есть две опции создания приложений либо для телефона (Phone), либо для Планшета (Tablet). Опции для создания версии для DeskTop нет, как например в разработке приложений SAPUI5 в Eclipse. Вы можете создать Generic Application или Tab Based Application. Generic Application используется для создания простых приложений, содержащих таблицу или список. Tab Based Application используется для создания приложения, которое работает на нескольких вкладках в приложении. Нажмите на кнопку CONFIRM для сохранения, после чего откроется экран, показанный на Рис. 4.

Если хотите прочитать статью полностью и оставить свои комментарии присоединяйтесь к sapland

У вас уже есть учетная запись?

Войти