ssunsband

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, 지원..

Step 설명Model-View-Controller(MVC) 개념의 세 부분 모두를 소개 한 후에 SAPUI5의 다른 중요한 구조적 측면을 보겠습니다. ** 이 단계에서는 모든 UI assets(자산)을 index.html 파일과 독립적인 컴포넌트에 캡슐화 합니다. 컴포넌트들은 SAPUI5 application에서 사용되는 독립적이고 재사용이 가능한 'parts'입니다. resources에 접근할 때마다 index.html 대신에 컴포넌트와 수행할 것입니다. 이러한 구조적 변화는 SAP Fiori 런치패드와 같은 전방위적 컨테이너와 같이 정적인 index.html보다 좀 더 유영한 환경에서 app을 사용할 수 있도록 합니다. webapp/Component.js (New)sap.ui.define([ "sa..

Step 설명UI의 텍스트를 별도의 resource 파일로 옮겨봅니다.이 방법은 모든 텍스트를 한곳에 모아둡니다. 다른 언어로 쉽게 번역할 수 있습니다. 국제화(internationalization) 프로세스는 특별한 resource 모델과 스탠다드 데이터 바인딩 구문에 의해 선행 "/" 없이 SAPUI5에서 완성됩니다.PreviewStep 7과 보이는 부분은 동일 webapp/i18n/i18n.properties (New)showHelloButtonText=Say Hello helloMsg=Hello {0}webapp/i18n 폴더를 만들고 폴더 안에 i18n.properties 파일을 생성합니다. bundle 이름은 sap.ui.demo.walkthrough.i18n입니다. 텍스트를 위한 proper..

Step 설명view와 controller를 설정했으니 이제는 MVC 중에서 M에 대해 생각해 보자. Previewinput 필드와 입력값 보여주기 webapp/controller/App.controller.jssap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/ui/model/json/JSONModel" ], function (Controller, MessageToast, JSONModel) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { onInit : function () { // set data model on vie..

Step 설명이 step에서는 텍스트를 버튼으로 대체하고 버튼을 누르면 "Hello World"메시지가 표시됩니다. 버튼의 press event 처리는 뷰의 컨트롤러에서 구현됩니다.PreviewSay Hello 버튼이 추가됩니다. webapp/view/App.view.xml 12345678910 // text controller를 "Say Hello"라는 text를 가신 Button으로 Colored by Color Scriptercs버튼이 눌리면 onShowHello event 핸들러 함수가 실행됩니다. view에 연결된 controller의 이름을 특정하고 view의 controllerName 속성을 설정한 다음 onShowHello를 가지고 있어야 합니다.view에 반드시 명시적으로 할당 된 con..