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"이라고 설정해주시면 됩니다..
SelectBox나 ComboBox를 사용하다가 당황스러운 경우를 만날 수 있습니다.데이터가 분명 엄청 많은데 내가 원하는 데이터가 안보이는 경우입니다.아래의 사진을 보면 분명 데이터는 200개인데 숫자가 100까지 밖에 안나입니다. 이런경우 SelectBox나 ComboBox가 잘못 설정된 줄 알고 해당 API를 찾는 경우가 많습니다. 물론 저도 그랬고요.이러다가 개발 시간을 엄청 빼았겼던 경험이 있네요.해당 내용은 SelectBox나 ComboBox로 접근하면 찾을수가 없습니다.https://sapui5.hana.ondemand.com/#/api/sap.ui.model.Model%23methods/setSizeLimit 이 URL에 가서 보면 이렇게 설명되어 있습니다.Set the maximum nu..
SAPUI5에 EventBus를 찾아보면 이렇게 나옵니다.It is recommended to use the EventBus only when there is no other option to communicate between different instances, e.g. native UI5 events.(어쩔 수 없을 경우에만 사용)여러분이 EventBus까지 알아본거면 이 방법을 사용할 수 밖에 없는 경우라고 생각합니다. 간단하게 설명하면 EventBus는 주로 다른 View 사이에서 Event를 캐치해야 할 때 사용됩니다. 사용하는 방법은 간단합니다. Event를 발생시키는 View 1234 Colored by Color ScriptercsEvent를 발생시키는 Controller 12345678..
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 컨텐츠와..
- Total
- Today
- Yesterday
- sapui5
- window.open
- 토킹클래스
- javascript
- 이천세차장
- 홈택스 리뉴얼
- Reds and Blues
- model.cds
- 자바스크립트
- 두번 세차
- 3분 세차
- 소망세차장
- 개발자 세금계산서
- 사장님 대박
- fiori
- 홈택스
- 오알티
- ORT
- 세금계산서
- hanadb
- 거래처품목 등록
- sap
- 소프트웨어 공급자
- ie
- array
- 소망손세차장
- 소프트웨어
- FormData
- 개발자
- 피오리
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |