SAPUI5 XML View 가이드

SAPUI5 XML View 가이드

 

---

 

1. XML View란?

SAPUI5에서 View는 사용자에게 보여지는 화면(UI)을 정의하는 영역이다.

SAPUI5는 다양한 View 유형을 지원한다.

View 유형설명

XML View	가장 많이 사용
JS View	JavaScript 기반
HTML View	HTML 기반
JSON View	JSON 기반

현재 SAPUI5 및 SAP Fiori 프로젝트에서는 XML View가 사실상 표준으로 사용된다.

XML View는 UI 구조를 선언적으로 작성할 수 있어 유지보수성과 가독성이 뛰어나다.

 

---

 

2. XML View를 사용하는 이유

과거 JavaScript View 방식은 UI를 코드로 직접 생성해야 했다.

예시:

new sap.m.Button({
    text: "Save"
});

UI가 복잡해질수록 코드가 길어지고 가독성이 떨어진다.

반면 XML View는 HTML과 유사한 형태로 작성할 수 있다.

<Button text="Save" />

장점은 다음과 같다.

• 가독성이 좋음
• 유지보수가 쉬움
• UI와 로직 분리 가능
• MVC 패턴에 적합
• SAP Fiori 표준 구조 지원

실무 프로젝트에서는 XML View 사용이 기본이다.

 

---

 

3. XML View 기본 구조

가장 기본적인 XML View 예제이다.

<mvc:View
    controllerName="demo.controller.Main"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">

    <Page title="SAPUI5 Example">
        <content>
            <Text text="Hello SAPUI5" />
        </content>
    </Page>

</mvc:View>

구성 요소를 살펴보자.

• mvc:View: 뷰의 시작점
• controllerName: 연결할 Controller 지정
• Page: 화면 컨테이너
• content: 화면 내용 영역
• Text: 텍스트 출력 컨트롤

 

---

 

4. Namespace 이해하기

XML View를 처음 배울 때 가장 헷갈리는 부분이 Namespace이다.

예제:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">

Namespace는 UI5 컨트롤이 어느 라이브러리에 속하는지 알려준다.

 

기본 Namespace

xmlns="sap.m"

sap.m 라이브러리 사용

예시:

<Button />
<Text />
<Input />

 

 

MVC Namespace

xmlns:mvc="sap.ui.core.mvc"
<mvc:View>

 

 

Layout Namespace

xmlns:l="sap.ui.layout"
<l:VerticalLayout>

 

 

Form Namespace

xmlns:form="sap.ui.layout.form"
<form:SimpleForm>

실무에서는 여러 Namespace를 함께 사용하는 경우가 많다.

 

---

 

5. 주요 UI 컨트롤 사용법

• Text : 텍스트 표시

<Text text="Hello World" /> // 기본
<Text text="{i18n>MSG_03001}" /> // i18n 다국어처리
<Text text="{Znametx}" /> // 데이터에서 받아오기

 

• Button: 버튼 생성

<Button
    text="Save"
    press=".onSave" />

 

• Input: 입력 필드

<Input placeholder="이름 입력" />
<Input value="{/Pernr} {/Ename}" showValueHelp="true" valueHelpOnly="true" valueHelpRequest="onPernrInputValueHelpRequest" liveChange=".onEnameInputLiveChange" submit=".onPressSearch" />

 

• Label: 필드 제목

<Label text="이름" />

 

• CheckBox: 체크박스
  enabled - input의 disabled 처리
  editable - 사용자가 클릭 할수 있는지 없는지 유무
  selected - 체크값 유무

<CheckBox text="동의" />
<CheckBox select=".onSelectMedicalYn" selected="{= !!${데이터키값} ? true : false }"  enabled="{= ${데이터키값} !== '20'}"  editable="{/approvalRequestConfig/editable}" />

 

• Select: Select 사용 시에는 core Namespace가 필요하다.

<Select>
    <items>
        <core:Item
            key="A"
            text="Option A" />
    </items>
</Select>

xmlns:core="sap.ui.core"

 

---

 

6. 이벤트 연결하기

XML View에서 이벤트는 Controller와 연결된다.

View

<Button
    text="클릭"
    press=".onPress" />

Controller

onPress: function () {
    MessageToast.show("Clicked");
}

동작 순서

1. 버튼 클릭
2. press 이벤트 발생
3. Controller 함수 호출
4. 로직 실행

 

---

 

7. 데이터 바인딩 활용하기

SAPUI5의 가장 강력한 기능 중 하나는 데이터 바인딩이다.

 

Property Binding

Model

{
  "name": "Amy"
}

View

<Text text="{/name}" />

출력

Amy

 

 

Two-Way Binding

<Input value="{/name}" />

사용자가 입력한 값이 Model에 자동 반영된다.

 

Expression Binding

<ObjectStatus
    text="{= ${/score} > 80 ? 'PASS' : 'FAIL' }" />

조건부 표현 가능

 

Formatter 사용

View

<Text text="{
    path:'/price',
    formatter: '.formatPrice'
}" />

Controller

formatPrice: function(value){
    return value + " 원";
}

복잡한 로직은 Formatter 사용을 권장한다.

 

---

 

8. 레이아웃 구성하기

• VBox: 세로 배치

<VBox>
    <Text text="A"/>
    <Text text="B"/>
</VBox>

 

• HBox: 가로 배치

<HBox>
    <Button text="확인"/>
    <Button text="취소"/>
</HBox>

 

• FlexBox: display: flex 요소 배치

<FlexBox
    justifyContent="SpaceBetween">
</FlexBox>

 

• Grid: display: grid 요소 배치

<layout:Grid>
</layout:Grid>

실무에서는 VBox, HBox, FlexBox를 가장 많이 사용한다.

 

---

 

9. XML View 작성 시 주의사항

- View에서 비즈니스 로직 처리 금지

좋지 않은 예

<Text
 text="{= (${/price} * 0.1) + (${/price} * 0.2) }"/>

복잡한 계산은 Formatter 또는 Controller에서 처리한다.

 

- ID 중복 주의

<Button id="btnSave"/>
<Button id="btnSave"/>

동일한 View 내에서 ID는 고유해야 한다.

 

- 불필요한 중첩 제거

좋지 않은 예

<VBox>
    <VBox>
        <VBox>
            <Text text="Data"/>
        </VBox>
    </VBox>
</VBox>

레이아웃 중첩은 최소화하는 것이 좋다.

 

- 컨트롤 라이브러리 확인

Button을 사용할 때

xmlns="sap.m"

설정이 누락되면 렌더링 오류가 발생할 수 있다.

 

---

 

마무리

XML View는 SAPUI5에서 가장 많이 사용되는 View 기술이며 SAP Fiori 애플리케이션 개발의 핵심이다.
특히 MVC 패턴에서 View 영역을 담당하며, 데이터 바인딩과 이벤트 연결을 통해 화면과 로직을 자연스럽게 분리할 수 있다. XML View를 제대로 이해하면 대부분의 SAPUI5 화면 개발을 수행할 수 있다.

 

참고 자료

• SAPUI5 XML Views Documentation
• SAPUI5 Walkthrough Tutorial
• OpenUI5 Documentation
• SAPUI5 Controls Reference