[Fiori] Label, Button 생성

1. 프로젝트 및 View 생성

Fiori 실습을 진행하기 위한 환경이자 하나의 작업 단위인 프로젝트와 그 안에 View를 우선 생성해준다. 이전 글을 참조하도록 하자. 

[Fiori] View 생성

2. Label 생성

생성된 View를 가지고 간단한 기능만 구현해보자. 우선 편집하려는 View 파일을 우클릭하여 Open Layout Editor로 열어준다. 그러면 코드가 아닌 툴바로 작업 가능한 화면이 나온다.

 

생성한 Project의 View 부분을 확인

 

View > 우클릭 > Open Layout Editor

 

Layout Editor로 열어본 View

 

Layout Editor로 View를 열어서 Controls에 있는 항목을 확인해보자. Label을 비롯하여 버튼, 리스트 등 drag and drop 형태로 쉽게 기능 구현이 가능하다.  그 중 Label을 추가하여 'Hellow World!'를 입력하고, 제대로 실행되는지 확인해본다. 

 

 

아래와 같이 실행 화면이 나타나면 잘 생성된 것이다. Label이라고 하지만 하나의 text box로 생각하면 될 것 같다. 

 

3. Button 생성

Step 1. 버튼 생성
Step 2. Properties 
Step 3. Icon action 추가
Step 4. Event > Press > Navigate to 설정

 

Label과 동일한 방법으로 버튼을 하나 넣어주자. 해당 버튼을 누른 상태에서 우측에 뜨는 설정 값 중 Icon을 클릭한다. 버튼을 누르면 다른 창으로 이동하는 action이 실행되도록 할 것이니 action icon을 추가해준다.

 

View1 > Button > Icon

 

원래 Button은 화살표 방향이 없었는데, action을 추가함으로써 이동을 의미하는 화살표 icon이 추가되었다.

 

View1 > Button > Icon action

 

이동 버튼 클릭 시, 어디로 이동 하는지 설정해줘야 한다. 해당 버튼 위에서 생성한 View2로 이동하게 설정해보자. 해당 버튼을 누르고 우측 설정 창 중 Event > Press > Navigate to 항목을 설정해주면 된다. 

 

View1 > Button > Event > Navigate to

 

Navigate to 설정은 다음과 같이 View2로 설정해준다.

 

 

실행하면 다음과 같이 버튼이 생성되었음을 확인할 수 있고, 클릭하면 View2 창으로 이동한다.