В этом блоге мы собираемся реализовать различные элементы пользовательского интерфейса с помощью платформы 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.
Окончательный вид нашего демо.
Удачного кодирования!