ZeroSD 개발노트

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