티스토리 뷰
Step 설명
index.html 파일에 모든 UI를 넣으면 설정이 엉망이 되고 앞으로 많은 일들이 발생할 것입니다. (파일에 코드량이 늘어나 엄청나게 지저분해 지겠죠?) 전용 view에 sap.m.Text 컨트롤을 사용해서 첫번째 모듈화를 해 봅시다.
** SAPUI5는 다양한 view 타입(XML, JHTML, JavaScript등)을 제공합니다. 가장 가독성이 높은 코드를 생성하고 controller 로직과 view 선언을 분리하기 위해 XML을 선택하고 있습니다. 그리나 (어떤 view 타입을 사용하더라도) UI의 모습은 바뀌지 않을 것입니다.
Preview
"Hello World"를 SAPUI5 컨트롤로 표시합니다.(지난 스텝과 화면 변화는 없습니다)
webapp/view/App.view.xml (New)
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> </mvc:View>
app에 새로운 view 폴더를 생성하고 app 폴더 안에 새로운 XML view 파일을 생성합니다. XML 구조의 root 노드는 view입니다. 대부분의 UI assets(자산)이 있는 기본 네임스페이스 sap.m을 참조합니다. alias mvc를 사용하여 SAPUI5 view와 Model-View-Controller (MVC) assets(자산)을 가지고 있는 네임스페이스 sap.ui.core.mvc를 추가적으로 정의합니다.
webapp/view/App.view.xml
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/> </mvc:View>
webapp/index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Walkthrough</title> <script id="sap-ui-bootstrap" src="/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "sap.ui.demo.walkthrough": "./" }' > </script> <script> sap.ui.getCore().attachInit(function () { sap.ui.xmlview({ viewName : "sap.ui.demo.walkthrough.view.App" }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Walkthrough</title> <script id="sap-ui-bootstrap" src="/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" // index.html과 동일한 폴더에 sap.ui.demo.walkthrough 네임스페이스의 // resources가 위치한다고 SAPUI5 코어에 알려줍니다. // 예를 들어, SAP Fiori 런치 패드에서 실행되는 앱에 필요합니다. data-sap-ui-resourceroots='{ "sap.ui.demo.walkthrough": "./" }' > </script> <script> sap.ui.getCore().attachInit(function () { sap.ui.xmlview({ viewName : "sap.ui.demo.walkthrough.view.App" }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html> | cs |
새로운 App XML view로 sap.m.Text 컨트롤의 인스턴스를 대체합니다. 이 view는 SAPUI5의 팩토리 함수(sap.ui.xmlview)가 생성되며 정확하게 구성되고 customers가 확장할 수 있습니다. 이 resource를 고유하게 식별하기 위해 네임스페이스 sap.ui.demo.walkthrough.view를 이름 앞에 붙여줍니다.
Conventions
- view 이름은 대문자로 합니다.
- 모든 view는 view 폴더에 위치합니다.
- XML view의 이름은 항상 *.view.xml로 끝납니다.
- 기본 XML 네임스페이스는 sap.m입니다.
- 다른 XML 네임스페이스는 alias와 같은 SAP 네임스페이스의 마지막 부분을 사용합니다.(예: sap.ui.core.mvc의 mvc 같이)
'네임스페이스'는 간단하게 말해서 객체(컨트롤)가 있는 경로라고 생각하시면 될 거 같습니다. 동일한 이름의 객체가 있더라도 네임스페이스가 다르고 객체 이름앞에 네임스페이스를 붙여서 구분해 주면 사용 가능합니다.
화면에 관한 컨트롤들을 view.xml로 빼서 구분시켰습니다. SAPUI5에서 제시하는 'MVC' 중 'V'에 해당되는 파일이죠. 앞으로 추가될 화면 부분은 view.xml에 모두 넣는다고 생각하면 될 거 같습니다. 이 개념은 매우 중요한 개념이므로 꼭 이해하고 넘어가시길 바랍니다.
'SAPUI5' 카테고리의 다른 글
Step 5: Controllers (0) | 2018.12.05 |
---|---|
Step 6: Modules (0) | 2018.12.05 |
Step 3: Controls (0) | 2018.12.05 |
Step 2: Bootstrap (0) | 2018.12.05 |
Step 1: Hello World! (0) | 2018.12.05 |
- Total
- Today
- Yesterday
- 개발자 세금계산서
- 오알티
- 개발자
- FormData
- Reds and Blues
- 소프트웨어 공급자
- 홈택스 리뉴얼
- 세금계산서
- 사장님 대박
- 소프트웨어
- 홈택스
- 3분 세차
- 이천세차장
- model.cds
- javascript
- sap
- 두번 세차
- array
- 소망손세차장
- ORT
- 토킹클래스
- 피오리
- hanadb
- sapui5
- 거래처품목 등록
- window.open
- 소망세차장
- ie
- 자바스크립트
- fiori
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |