처음 SAPUI5 를 시작하면서, 가장 먼저 SAPUI5 구조를 배울 수 있는 SAPUI5 강좌 quick start 입니다.
SAPUI5는 계속 발전하고 변경되기 때문에 항상 최신의 내용을 참고하시는 것이 좋습니다.
아직 로컬 환경에서 SAPUI5 개발 환경이 갖추어지지 않았다면, 기본적인 VSCode 셋팅은 SAPUI5 Visual Studio Code 개발 환경 셋팅(2022, 윈도우10) 글을 참고하시면 됩니다.
그리고 아래 내용은, 과거 SAPUI5 Quick start 의 내용(원글)을 현재 ui5 버전에 맞게 바꾸었습니다.
yeoman으로 프로젝트 생성하기
요먼(yeoman)을 실행하여 SAPUI5 앱 scaffolding을 진행합니다. 프로젝트를 생성할 디렉토리로 이동하여 yo를 실행합니다.
yo
SAPUI5 스캐폴딩을 마치면 다음과 같은 프로젝트가 생성되어 있으며 앱을 개발하기 위한 기본적인 뼈대가 만들어졌습니다. 여기서는 프로젝트명은 hello-quick-start 로 하였으며, View이름은 View1, SAPUI5 Version은 1.99.0 으로 지정하였습니다.
cd hello-quick-start
해당 wepapp 디렉토리에는 controller, model, view, Component.js, manifest.json 등 SAPUI5 앱에 필요한 기본적인 구조 및 파일이 생성되어 있습니다.
Visual Studio Code를 통해 해당 디렉토리를 열어 Preview Application 을 실행해 보도록 하겠습니다. start fiori run…을 선택하면 됩니다.
start fiori --open "...."
실행하면 로컬 서버를 통해 hello-quick-start 가 호출됨을 확인할 수 있습니다.
sapui5 강좌 Hello world 출력 – Text
가장 먼저 Hello world를 찍어보도록 하겠습니다.
View1.view.xml 파일을 열여
<mvc:View
controllerName="helloquickstart.controller.View1"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
>
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<Text text="Hello world!"></Text>
</content>
<!-- <content /> -->
</Page>
</pages>
</App>
</Shell>
</mvc:View>
start fiori 를 통해 다시 실행을 하면 Hello world 텍스트가 출력되는 것을 확인할 수 있습니다.
Hello world Message 출력 – MessageToast
그러면 이제 버튼을 누르면 MessageToast 박스가 출력될 수 있도록 변경하겠습니다.
먼저 hello world 텍스트는 지워주고, 화면에 해 버튼 하나를 xml 에 추가합니다.
View1.view.xml
<mvc:View
controllerName="helloquickstart.controller.View1"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
>
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<HBox>
<Button text="Hello world!"
press="onPress"></Button>
</HBox>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
해당 버튼 press 이벤트에는 onPress 함수를 정의해 줍니다.
<Button text="Hello world!" press="onPress"></Button>
view에서 이벤트가 발생하면 view.xml 파일 상단에 정의되어 있는 controller js 파일 내의 onPress 함수를 호출하게 됩니다.
컨트롤러 js 파일에 onPress 함수를 아래와 같이 추가합니다.
view.controller.js
return Controller.extend("helloquickstart.controller.View1", {
onInit: function () {
console.log("onInit");
},
onPress: () => {
console.log("onPress");
},
});
hello world 버튼을 클릭한 후 개발자 도구를 통해 console 창을 확인해 보면 “on press”가 콘솔 로그에 출력되는 것을 확인할 수 있습니다.
View에서 Controller를 찾는 규칙은
View에서는 [프로젝트명.controller디렉토리.controller 명칭 ] 이 규칙으로 controller를 찾게 됩니다.
...
controllerName="helloquickstart.controller.View1"
...
따라서, controller 디렉토리 밑에 파일명을 일부러 바꾸어 다르게 하거나,
View 파일에서 controllerName을 바꾸게 되면,
controllerName="helloquickstart.controller.View2"
View와 Controller의 연결고리가 끊겨 다음과 같은 에러를 만날 수 있습니다.
물론 controller 파일명 및 controllerName을 모두 동일하게 View2로 바꾸게 되면 오류없이 정상적으로 동작하게 됩니다.
sapui5 강좌 – MessageToast 메시지 사용하기
이제 MessageToast 를 연결해 보도록 하겠습니다.
먼저 MessageToast 모듈을 선언한 후 메소드 등을 호출해야 합니다.
Controller 파일에 다음과 같이 “sap/m/MessageToast” Dependency를 추가합니다.
view.controller.js
sap.ui.define( [
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast" //★ 추가
],
function (Controller, MessageToast) { //★ 추가
"use strict";
return Controller.extend("helloquickstart.controller.View1", {
onInit: function () {
console.log("onInit");
},
onPress: () => {},
});
}
);
의존성 관리 등을 위해 sapui5는 sap.ui.define 모듈 로딩 헬퍼 툴을 사용하며, define에 정의한 모듈의 순서와 function 매개변수의 순서는 동일해야 합니다.
그리고 onPress 이벤트에 다음과 같이 MessageToast.show 코드를 입력합니다.
view.controller.js
...
onPress: () => {
MessageToast.show("Hello World!!!");
},
});
...
프로그램을 실행한 후 Hello world! 버튼을 클릭하면 아래와 같이 메시지가 보이게 됩니다.
이상으로 quick start를 알아보았습니다.