ssunsband

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

Step 설명SAPUI5애서 resources는 종종 모듈을 가리키기도 합니다. 지난 step의 alert를 sap.m 라이브러리에 있는 Message Toast로 대체합니다. 필요한 모듈을 비동기식으로 로드할 수 있습니다. PreviewMessage Toast는 "Hello World" 메세지를 표시합니다. webapp/controller/App.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.App", ..

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

Step 설명HTML body의 "Hello World" 텍스트 대체에 SAPUI5 컨트롤 cap.m.Text를 사용하여 첫번째 UI를 빌드 할 차례입니다. 처음에 UI 설정을 위해서 JavaScript 컨트롤 인터페이스를 사용합니다. 컨트롤 인스턴스는 HTML body에 위치합니다. Preview"Hello World" 텍스트는 SAPUI5 컨트롤에 의해서 표시됩니다. webapp/index.html dialog를 띄우기 위해 순수 JavaScript를 사용하는 대신에 간단한 SAPUI5 컨트롤을 사용하려고 합니다. 컨트롤은 화면의 일부 동작과 모양을 정의하는데 사용합니다. 위의 예제에서 init 이벤트의 콜백은 SAPUI5 텍스트 컨트롤을 인스턴스화 하는 곳입니다. 컨트롤 이름에 텍스트 컨트롤 라이브..

Step 설명SAPUI5로 무언가 하기 전에 로딩하고 초기화 작업이 필요합니다. SAPUI5를 로딩하고 초기화하는 프로세스를 "bootstrapping"이라고 부릅니다. bootstrapping이 한번 끝나면 간단하게 alert을 띄웁니다. Preview "UI5 is ready"라고 쓰여진 alert창을 보여줍니다.webapp/index.htmlNoteSAPUI5는 app이 있는 동일 웹서버 또는 다른 서버에서 로드할 수 있는 JavaScript 라이브러리 입니다. 이 튜토리얼에 있는 코드 예제들은 항상 상대 경로로 표시하며 웹서버의 root context의 resources 폴더에 SAPUI5가 로컬로 베포되어 있다고 가정합니다.SAPUI5가 서버 어딘가에 배포되어 있거나 다른 서버를 사용하려는 경우..

Step 설명당신이 알고 있는 SAPUI5는 HTML5 그 자체입니다. 순수 HTML로 된 첫번째 "Hello World"를 만들어 봅시다. Preview브라우저는 "Hello World" 텍스트를 보여줍니다. webapp/index.html (New) Hello World 이 튜토리얼을 통해 만들 모든 app 소스들을 포함할 새로운 'webapp' 폴더를 생성합니다. 따라서 이 폴더를 "app folder"라고 부릅니다.app 폴더에 새로운 시작 HTML 파일인 index.html 을 생성합니다. HTML 문서는 기본적으로 두 부분으로 구성됩니다(head와 body) head 부분은 해당 document를 처리하기 위해 브라우저가 사용합니다. 메타 태그를 사용해 브라우저의 동작에 영향을 줄 수 있습니다..