ZeroSD 개발노트

대부분의 SPA(Single Page Application) FrameWork 에서는 생명주기(Life Cycle)을 

가지고 있습니다.

UI5도 SPA FrameWork 에 해당하며 

Controller 메서드 생명주기를 가지고 있습니다.

하나씩 알아 보도록 하겠습니다.

Step1. onInit 

View 로딩시 무조껀 1번 실행되는

function 입니다. 

여기에 시작 시 동작할 function 들을

등록 합니다.

Step2. onBeforeRendering

Xml View가 브라우저 랜더링(화면생성)전에 실행되는 function입니다.

Step3. onAfterRendering

Xml View가 브라우저 랜더링(화면생성)후에 실행되는 function입니다.

Step4. onExit

Xml View를 떠난 후 실행되는 function입니다.

View를 벗어난 Routing 으로 인한 이동 시

초기화 해야할 것이 있거나 실행되어야 할 

function을 등록합니다.

Controller에 위 function 들을 등록 할 경우

위의 상황에 따라 실행되게 됩니다.

상황에 맞게 활용하여 사용 하도록 합니다.

Note Page 7 - End 

UI5 모델바인딩에 대해 알아봅시다 ^^

모델 바인딩에는 단방향 / 양방향 바인딩이 있습니다. 

단방향(one-way)
처음모델의 값을 뷰에 보여주는 수직적인 구조입니다.

양방향(two-way)
뷰에 바인딩한 모델이 실시간으로 뷰의 값이 바뀔경우 모델에 즉시

반영되는 수평적인 구조입니다.

두 바인딩을 코드실습으로 알아봅시다 ^^

Step1.프로젝트 생성

먼저  ZBindingTEST 라는 프로젝트를 생성합니다.

(프로젝트 만들기 참조)

Project Name : ZBindingTEST

View Type : XML

View Name : BindingTest

Step2.Controller 작성

Controller 아래 경로의 BindingText.controller.js를 선택하여

_oBindingModel: new sap.ui.model.json.JSONModel(), //바인딩모델

을 입력합니다.

바인딩을 할 모델을 생성하는 작업입니다.

UI5 생명주기 중 화면실행시 최초실행되는 onInit function을 생성하고

oData 변수에 Json형태의 Name : “홍길동”을 추가 합니다.

( UI5 생명주기와 , JSON데이터구조는 다음에 자세히 다루도록 합니다.)

oBindingModel에 데이터를 셋팅

this._oBindingModel 을 불러와

.setData() : 모델에데이터삽입

에 oData를 넣어줍니다.

this._oBindingModel.setData(oData); 을 입력합니다.

 /**

   * 최초실행

   */

   onInit: function() {

       var oData = {

            Name : "홍길동"

        };

       this._oBindingModel.setData(oData);       

   }

oBindingModel을 View에 바인딩.

this.getView() 로 View 를 가져와 .setModel() 메서드로 바인딩 합니다.

바인딩 대상 모델은 this._oBindingModel 을 바인딩합니다.

this.getView().setModel(this._oBindingModel); 을 입력합니다.

       /**

         * 최초실행

         */

        onInit: function() {

            var oData = {

                Name : "홍길동"

            };

            this._oBindingModel.setData(oData);  

            this.getView().setModel(this._oBindingModel);     

       }

Step3.Xml뷰 작성

View 아래 경로의 BindingTest.view.xml 를 선택

<Content></Conternt> 사이에

 <Panel>

       <Text text="{/Name}" /> <!--단방향-->

       <Input type="Text" value="{/Name}" />

       <!--양방향-->

</Panel>

코드를 입력합니다.

각각 단방향  text 에  {/Name}을

양방향 input value 에  {/Name}을 입력하면

단방향/양방향 바인딩 구성이 완료됩니다. 

Step4.프로젝트 실행

자 이제 실행해 보겠습니다.

프로젝트 우클릭 > Run > Run as > Web Application 으로 실행합니다.

oBindingModel 의 Name 필드의 “홍길동“ 이 표시 되어집니다.

이제 아래의 input필드에  GOOD 라는 단어를 쓰고 엔터를 쳐봅시다.

위와같이 단방향 바인딩된 Text 도 함께 바뀌게 됩니다. 

양방향 바인딩으로  oBindingModel 의 Name 도 “홍길동 GOOD” 로 실시간으로 바뀌게 됩니다.

UI5는 대부분의 Json데이터를  바인딩 기반으로  View와  Controller간 데이터를 주고받습니다.  꼭 숙지하셔야 됩니다 ^^

감사합니다.

Note Page 6 - End 

UI5 에서 제공하는 샘플 및 컴포넌트 들은 최신화 되면서 버전이 올라가게 됩니다. 

클라우드 버전과는 다르게 On-premise 환경에서는 해당 버전을 다운받아 적용하여 기능을 사용합니다.

SAP UI5 시작하기 1편. 개발환경 구축  부터 시작하시는 분이라면 꼭 필수적으로 적용해주셔야 합니다.

On-premise 환경 버전업이라고 생각하시면 됩니다 ^^

Step1. 현재 내 UI5 버전 확인하기 

현재 사용중인 버전을 확인하는 방법 입니다. 

확인 하고자 하는 프로젝트( ZHELLO_WORLD ) 우클릭 > Project Settings를 클릭합니다.

SAPUI5 항목을 클릭합니다 > SAPUI5 Version을 확인합니다 ( 현재 1.52.13 ).  

변경할 수 있는 버전을 확인해보니 1.52.13이 최신버전입니다.

( On-premise 환경 최신버전으로 버전업을 진행하도록 해보겠습니다. )

Step2. UI5 최신버전 다운로드  

https://sapui5.hana.ondemand.com 주소로 이동 후 Down load 버튼을 클릭 해줍니다.

다음 페이지 에서 1.71  버전을 다운로드 합니다.

사용가능한 버전 확인은 here을 눌러보시면 클라우드 버전&버전별 지원기간 등을 확인 할 수 있습니다.

Step3. 다운로드 파일 적용

다운로드 파일을 Plugins에 적용합니다.

1) 폴더경로  eclipse > plugins > com.sap.webide.orionplugin_1.53.9 > ui5 이동.

2) 현재 경로에 다운받은 sapui5-sdk-1.71.24 압축을 푼뒤 폴더명을 1.71.24 로 변경합니다.

Step4. neo-app.json 수정 

스크롤을 아래로 내려  1.52.13 아래에 1.71.24 내용을 추가합니다.

Step5. versionoverview.json 수정

폴더경로  eclipse > plugins > com.sap.webide.orionplugin_1.53.9 > ui5templates 이동합니다.

versionoverview.json을 수정합니다. 

versions 아래에 1.71.2.* 내용을 추가합니다.

수정은 여기까지!! 

Step6. 버전 변경 / 확인

프로젝트의 버전변경을 진행하고 확인 합니다 아래 순서로 진행하세요 ^^

1) 서버를 중지후 orion.exe 를 재실행 합니다.

2)  Web-IDE에 접속하여 > 1. 내 UI5 버전 확인 방법을 재진행 합니다.

3) SAPUI5 버전 항목에 1.71.24 버전 확인 후 SAVE 버튼을 눌러 저장합니다.

여기까지 온프렘 환경에서 UI5 버전업 하기 입니다. 감사합니다.

Note Page 5 - End 

UI5 프로젝트 생성시 폴더구조 및 기능 알아보기!! 

3편 Hello world 까지 완료 하였다면 프로젝트 구조가 자동으로 생성된 상태 입니다.

이제 프로젝트 하위에 있는 폴더들과 파일이 어떠한 역할을 하는지 알아봅니다.

1. controller

화면을  Control 하는 Controller.js 들이 위치하는 폴더 입니다.

대부분 View와 1:1 연동되는 js 형태로 쓰이게 됩니다.

2. css

css 파일이 모이는 경로입니다.

기본적으로 style.css 가 생성되며 추가로 css를 만들어 등록 하기만하면 사용이 가능합니다.

3. i18n

i18n 이란?(위키참조).

기본적으로 i18n.properties 가 생성되며 등록하여 사용합니다.

4. view

XML화면이 있는 경로입니다.

controller와 1:1을 이루며 UI5 View를 작성합니다.

5. component.js

화면 실행시 선행으로 읽는 js입니다.

공통적인 부분들을 이곳에 작성하면 유용합니다.

6. index.html

Run as WepApplication으로 실행시 최초 실행되는 html입니다.

7. manifest.json

프로젝트를 설정하는 부분입니다.

js, css 파일을 사용하기위한 등록, Routing/Navigation기능 구현을 위한 등록,  oData를 사용하기위한 Model 사용등록, XMlL화면옵션제어등 다양한 제어를 정의하는 json 입니다. 

UI5 프로젝트 구조정리끝!!! 감사합니다.

Note Page 4 - End 

Wed-IDE 설치가 완료 되었다면 프로그램의 시작!!

UI5 Hello Wold 띄우기를 진행 해보겠습니다. 

※  UI5 Web-IDE 실행 하기 시작 후 진행 합니다.

Step1. Workspace 에서 시작하기

모든 작업은 Workspace 위에서 시작합니다. Workspace 위에서 프로젝트 생성을 진행합니다.

화면 좌측 </> 클릭  >  workspace 우클릭 >  New   >  Project from Template 실행.

Template Selection 화면 : 생성 할 화면을 결정합니다 

카테고리(Category) 를 선택하여 All categories로 지정

전체 사용 가능한 Template들이 보여지며 이 중 SAPUI5 Application 을 선택 합니다.

Basic Information : Project Name 을 입력합니다.

Project Name에 ZHELLO_WORLD를 입력, Next 버튼을 누릅니다.

Template Customization : View Name과 Type을 결정합니다.

View Type XML을 지정합니다  이전버전에서 JavaScript View Type을 주로 사용하였으나 현재 UI5버전업이  XML 베이스를 지향하고 

XML View 위에서 Javasciprt View 코딩 및 기타 View 적용이 가능하여  XML View 로 진행하도록 합니다.

View Name 에 HelloWorld를 입력, Finish를 눌러 View생성을 완료 합니다.

Step2. Hello World 작성

XML View에 Text Hello Word 를 작성합니다.

1) 경로 :  Workspace > ZHELLO_WORLD > webapp > view > HelloWorld.view.xml 로   이동합니다.

2) <content> 태그 사이에 <Text text=“Hello World” />를  입력합니다.     

Xml은 html과 같이 한쌍의 태그로 이루어저 있습니다

( 내부 태그가 필요 없을시 />처리가능)            

Step3. Project 실행

Web-IDE 로컬 서버로 실행됩니다.

1) 실행 할 Project 클릭( ZHELLO_WORLD ).

 2) 마우스 우클릭 후 Run > Run as  >  Web Application  

Hello World를 확인합니다.

Hello world 완성 !! 감사합니다.

Note Page 3 - End 

 Web-IDE 환경 구성 후 실행하는 법 입니다 .

 매번 개발 시작시 활용되는 부분이라

 따로 정리 합니다. ^^

Step1. Web-IDE Orion 서버 실행

항상 여기서 부터 시작을  합니다 폴더경로  

eclipse > orion.exe 를 실행

로컬 orion 서버를 통해서 Web-IDE 가 실행됩니다.

Step2. 브라우저 경로입력

Web 브라우저(Chrome을 추천드립니다) 실행 후 주소창에 ( URL ) : localhost:8080/webide/index.html 을 입력합니다. 

Step3. Web-IDE 로그인

주사위 3 모양을 눌러줍니다 ( 로그인 페이지 이동 ) .

  Web-IDE 설치 하기 에서 생성 한 ID와 PassWord를 입력.

접속을 확인 합니다.

Note Page 2 - End 

SAP UI5 On-premise 환경에서 개발환경 구축

UI5 Web-IDE 설치 하기

UI5 란 무엇일까요?  GitHub-SAP/UI5 설명 에 따르면 

JavaScript를 기반으로하며 jQuery를 기초로 사용하며 웹 표준을 따릅니다. 풍부한 컨트롤 세트를 포함하는 클라이언트 측 HTML5 렌더링 라이브러리로 개발을 용이하게하고 다양한 데이터 모델 (JSON, XML 및 OData)에 대한 데이터 바인딩을 지원합니다.  라는 문구가 있네요.

한마디로 UI5개발 UI5 혹은 Fiori 라고 불리는 SAP-Web UX/UI 프레임워크 입니다 .

UI5의 특징으로는

첫째, SAP-UI5에서 제공하는 다양한 UI Sample 과 기능들을 사용하여 반응형 기반의 WEB을 손쉽게 구성이 가능합니다. 

둘째, AngularJS 나 Vue js 에서 사용 되는 Controller 와 화면 간의 양방향 바인딩이 지원되며 화면의 실시간변화에 대응이 용이합니다.

셋째, RestAPI 인 OData를 통한 유연한 클라이언트 구성이 가능합니다.  

이 밖에 여러 특징들이 있으니 하나씩 알아가도록 합시다.

Web-IDE란?  UI5 프레임워크 환경을 쉽게 구현 및 실행 할수 있는 Tool 입니다. 

UI5개발은 SAP UI5에서 권장/제공하는 Web-IDE 라는 Tool로 진행하도록 하겠습니다.

Step1. UI5 다운로드 ( https://sapui5.hana.ondemand.com )

다운로드를 진행합니다  다운완료 후 압축을 푼다음 다음 단계를 시작합니다.

Step2. Web-IDE 실행

Web-IDE 실행을 위해 orion.exe 파일을 실행합니다.

언제나 Tool 을 실행하기 위해 선행 되어야 합니다.

폴더경로  eclipse > orion.exe 를 실행.

Step3. 브라우저 경로입력

Web 브라우저(Chrome을 추천드립니다) 실행 후 주소창에 ( URL ) : localhost:8080/webide/index.html 을 입력합니다. 

Step4. IDE 접속 ID 생성

아래 화면이 뜬다면 서버 구동이 성공적으로 완료

프로젝트를 진행 할 ID를 생성하도록 하겠습니다 (ID와 PassWord는 로컬 서버에 저장됩니다)

Step5. Web-IDE 로그인 

Sign up 후 로그인이 완료되어 Tool 사용이 가능합니다.

이제 Web-IDE 에서 로그인한 아이디 위에

UI5 실습을 진행하도록 해보겠습니다

감사합니다.

Note Page 1 - End