ssunsband

SAPUI5를 어느정도 익히고 사용하다보면 내부 구조나 어떤 순서로 동작하는지 알아야 할 때가 있습니다.여기서는 Fiori launchpad나 HTML 페이지를 사용해서 app이 호출될 때 내부적으로 어떤순서로 동작하는지에 대한 설명을 하려고 합니다. 1. app을 시작합니다.2. Component container는 app의 component(component.js)를 읽어드립니다.(여기에서 Component container는 ComponentContainer Control을 가리킵니다. iHTML페이지를 사용해서 호출할때는 ComponentContainer가 먼저가 아니라 ComponentSupport라는 control이 index.html의 세팅값을 읽어서 ComponentContainer를 호출..

controller.js의 onInit 함수에서 manifest.json이나 component에 선언한 model을 가져와야 하는 경우가 있습니다.이럴 때 우리는 controller에서 model 객체를 가져오는 this.getView().getModel("모델이름") 또는 this.getModel("모델이름") 함수를 사용하셨을 겁니다.하지만 onInit에서 해당 함수를 사용했을 경우 undefined가 return 됩니다.보통 controller에서 위의 문법처럼하면 model 객체를 잘 가져오는데 유독 onInit에서만 못 가져와서 이상하다고 생각하셨던 경험이 있으실 겁니다.이것은 SAPUI5가 실행되는 구조적인 시점 문제 때문입니다.(SAPUI5 실행 순서는 여길보시면 됩니다.)onInit 함수에..

DatePicker의 기본값은 년-월-일입니다. 아무것도 설정하지 않으면 아래와 같이 나옵니다.제가 처음 프로젝트할 때(2015년) 버전이 1.24.X 버전 이었는데 이때는 이게 끝이었습니다.화면 정의에 따라서 년-월 또는 년만 선택해야 하는 경우도 있는데 Standard Component(Control)에서는 이런 부분들이지원이 안 돼서 Custom을 만들어 사용했던 기억이 있습니다.하지만 지금은 그럴 필요가 없습니다. 정말 간단한 세팅만으로도 가능합니다.해당 property는 displayFormat입니다. 아래와 같이 displayFormat="yyyy-MM"이라고 설정해주면 년-월만 선택할 수 있습니다. 마찬가지로 년만 선택하고 싶다면 displayFormat="yyyy"이라고 설정해주시면 됩니다..

step 설명이번 스텝에서는 재사용 컨셉을 확장하고 component 레벨에서 dialog를 호출합니다.스텝 16에서 fragment를 통해 dialog를 생성했고 전체 app 또는 view에서 재사용할 수 있도록 만들었습니다. 그러나 HelloPanel view의 controller에 dialog 인스턴스 검색하고 각각 이것을 열고 닫기 위한 로직을 배치했습니다. 이 접근방식을 고수한다면 dialog가 필요한 각각의 view의 controller에 코드를 복사하고 붙여넣기를 해야 합니다. 이는 우리가 피하고 싶은 원하지 않는 코드 반복을 야기할 수 있습니다.이번 스텝에서 이 문제에 대해 해결책을 구현합니다.재사용 컨셉을 확장하고 component 레벨에서 dialog를 호출합니다.Previewdialo..

step 설명dialog 여전히 횡하게 비어있습니다. SAPUI5는 500 이상의 아이콘이 포함된 아이콘 클꼴을 제공되므로 dialog를 열 때 사용자들이 마주치는 아이콘을 추가합니다. webapp/view/HelloPanel.view.xml dialog를 열기 위한 버튼에 아이콘을 추가합니다. sap-icon:// 프로토콜은 아이콘 폰트의 아이콘을 로드해야 함을 나타냅니다. 실별자 world 는 아이콘 폰에 읽을 수 있는 이름입니다. TipDemo Kit에 Icon Explorer 툴을 사용하여 다른 아이콘을 찾을 수 있습니다.아이콘을 호출하기 위해 sap-icon://.의 Icon Explorer에 나열된 이름을 사용하십시오.webapp/view/HelloDialog.fragment.xml dialo..

step 설명dialog를 통합했으므로 사용자 상호작용을 추가할 차례입니다. 사용자는 반드시 어는 순간에 dialog를 닫길 원할 것 입니다. 그래서 dialog를 닫는 버튼을 추가하고 event handler에 할당합니다.webapp/controller/HelloPanel.controller.jssap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function (Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", { onShowHello : function () { // re..

step 설명이번 스텝에서는 view를 구성하는데 사용할 수 있는 또 다른 요소를 자세하게살펴볼 것 입니다. Fragments는 재사용 할 수 있지만 controller를 가지지 않는 경량(light-weight) UI parts(UI subtrees)입니다. 즉, 여러 view들에서 재사용 할 수 있는 UI의 특정 부분을 정의하기 윈할 때 또는 특정 상황(다른 User Role, 편집모드 vs 읽기 전용 모드)에서 view의 일정 부분을 교환하기 원할 때를 의미합니다. fragment는 특히 추가 controller 로직이 필요하지 않은 경우에 좋은 후보입니다.fragment는 '1 to n' 컨트롤로 구성할 수 있습니다.런타임 시 view에 위치한 fragment들은 "normal" view 컨텐츠와..

Step 설명panel 컨텐츠는 점점 더 복잡해져서 분리된 view에 옮겨야 합니다. 이 방법을 사용하면 application 구조가 이해하기 훨씬 쉬워지고 app의 각 부분을 재사용할 수 있습니다. webapp/view/App.view.xml App view에 panel과 컨텐츠를 직접 넣는 대신에 새로 분리하는 HelloPanel로 옮깁니다. panel 컨텐츠 aggregation에서 XMLView 태그를 사용해 이것(HelloPanel)을 참조합니다.webapp/view/HelloPanel.view.xml (New) panel의 전체 컨텐츠를 새로운 파일 HelloPanel.view.xml에 추가합니다. XML view의 controllerName 속성을 설정해서 view의 컨트롤러를 지정합니다.w..

Step 설명때로는 좀 더 fine-granular(세분화된, 정교한) 레이아웃을 정의해야 필요가 있습니다. 컨트롤에 커스텀 스타일 클래스들을 추가하고 원하는대로 스타일을 지정함으로써 유연한 CSS를 사용할 수 있습니다.webapp/css/style.css (New)html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn { margin-right: 0.125rem } html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn { margin-left: 0.125rem } .myAppDemoWT .myCustomText { display: inline-block; font-weight: bold; }CSS 파일을 담기 위한 CSS ..

Step 설명app 컨텐츠는 여전히 letterbox의 코너에 붙어 있습니다. app의 레이아웃을 미세조정하기 위해 이전 스텝에서 추가한 컨트롤에 margin과 padding을 추가할 수 있습니다.webapp/view/App.view.xml panel을 배치하기 위해 panel 주위에 약간은 공간을 추가하는 CSS 클래스 'sapUiResponsiveMargin' 추가합니다. 그렇지 않으면 margin이 기본 넓이 100%에 추가되고 page 사이즈를 초과하므로 auto로 panel의 width를 설정해야 합니다.만약 화면 사이즈를 줄이면 실제로 margin 또한 줄어드는 것을 볼 수 있습니다. 이름에서 유추할 수 있듯이 margin은 반응형이며 기기의 화면 사이즈에 맞게 변합니다.태블릿들은 margin..