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

Если вы не знаете, как загрузить и установить Web IDE и создать новый проект, просто проверьте мои предыдущие блоги.

После создания пустого проекта вы увидите, что автоматически создано несколько файлов. Эти;

1- index.html
2- MainView.controller.js
3- MainView.view.xml

Файл index.html — это наш исходный файл для нашего приложения. Он содержит оболочку для платформы SAPUI5 и различные пути к исходным файлам для нашего приложения.

В файле MainView.controller.js находится наша бизнес-логика и функции обработки событий.

И файл MainView.view.xml содержит элементы пользовательского интерфейса.

Давайте начнем с внедрения наших первых компонентов пользовательского интерфейса в наш проект. Вы всегда можете проверить документацию SAPUI5 sdk для справочных целей.

Мы собираемся добавить форму, метки и кнопку в наше приложение. Так что продолжайте и добавьте приведенный ниже код xml в файл MainView.view.xml.

Сохраните и нажмите кнопку «Выполнить».

Как видите, мы добавили в наше представление несколько полей, панель инструментов, метки, поля ввода и кнопку. Итак, в нашем случае мы ожидаем, что после того, как мы заполним поля и нажмем кнопку «Отправить», мы хотим, чтобы все детали были показаны во всплывающем сообщении.

<Button type="Default" press="onSend" text="Send" />

С помощью этой строки кода наше представление заглянет в наш класс контроллера и попытается выполнить функцию, называемую onSend. Сейчас он ничего не делает, потому что мы ничего не реализовали.

С объектом oView мы получаем экземпляр нашего текущего представления. Если мы рассмотрим его при отладке, вы увидите все соответствующие свойства этого объекта в окне отладки.

Теперь измените содержимое файла MainView.view.xml;

И файл контроллера;

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

Вы всегда можете найти документацию sdk для получения подробной информации о функциях и свойствах ваших объектов.

Pro Tip;
Use setProperty function to manipulate UI elements.

Окончательный вид нашего демо.

Удачного кодирования!