ssunsband

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..

Step 설명app의 컨테이너로써 shell 컨트롤을 사용하고 새로운 root 요소로 이것을 사용합니다 . shell은 데스크탑 화면에 letterbox를 도입하여 기기의 화면 사이즈에 맞춰 application의 시각적으로 조정합니다. webapp/index.html shell 컨트롤은 app에서 가장 가장자리에 있는 컨트롤이고 만약 화면 사이즈가 정의한 넓이보다 크다면 자동적으로 letterbox가 표시됩니다. 우리가 해야 하는 일은 shell의 aggregation app에 구성요소를 할당하기만 하면 욉니다.NoteSAP Fiori 런치패드 같은 외부 shell에서 돌아가는 app들은 이미 구성 UI 주변에 shell이 있으므로 XMLView에 선언적 UI 정의에 Shell 컨트롤을 추가하지 않습니..

Step 설명app 구조에 대한 모든 작업을 끝내고 app의 화면을 개선할 차례입니다. sap.m 라이브러리에서 두개의 컨트롤을 사용하여 UI에 좀 더 풍부한 "bling"을 추가 하려고 합니다. 이 스텝에서는 컨트롤의 aggregations에 대해 배우게 됩니다. webapp/view/App.view.xml sam.m.Page 컨트롤 안에 input 필드와 버튼을 넣습니다. page는 content라고 하는 다른 컨트롤들과 0..N으로 aggregation을 제공합니다. content 상단 header 섹션에 제목 속성을 표시합니다. page 자체는 또 다른 컨트롤 sap.m.App의 aggregation 'pages'안에 위치합니다. 이 컨트롤은 다음과 같은 중요한 작업을 수행합니다.모바일 기기에 적..

Step 설명모든 application별 구성 설정은 manifest.json이라는 별도의 설명 파일에 추가됩니다. 구성 설정으로부터 application 코딩이 완전히 분리되고 app을 좀더 유연하게 만들어 줍니다. 예를 들어 모든 SAP Fiori application은 component들로 구현되고 SAP Fiori 런치패드에서 호스팅 되기 위해 설명 파일은 제공합니다. ** SAP Fiori 런치패드는 application 컨테이너 역할을 하며 bootstrap으로 로컬 HTML 파일없이 app을 인스턴스화합니다. 대신에 설명 파일이 파싱되고 component는 현재 HTML 페이지에 로딩됩니다. 동일 컨텍스트에서 몇개의 app이 표시되도록 합니다. 각각의 app은 언어 properties, 지원..