본문으로 바로가기

SAPUI5 개발자 가이드 번역 - 제3편 Writing a simple Application



개발자 가이드 번역 중이다... 원본 페이지 링크는 아래 주소이다.

https://openui5.hana.ondemand.com/#docs/guide/HelloWorld.html



Writing a simple Application


SAPUI5 Hello World


이번 장에서는 간단한 SAPUI5 어플리케이션을 20초만에 만드는 방법에 대해 설명해보겠다(몇몇 메뉴얼에서는 16초만에 만들수 있다고 이야기 하기도 한다).

이 페이지의 내용을 다 읽고 싶지 않으면, 다음페이지로 넘어가도 된다.


설명

SAPUI5는 클라이언트 사이드 웹 UI라이브러리이다(예를 들어 웹브라우저에서 실행되는 것). SAPUI5 어플리케이션은 HTML페이지라고 할 수 있다(거기에 여러가지 많은 파일들이 포함되어 있긴 하다).


UI5는 자바스크립트로 구현되어있다, 그래서 UI5를 로딩하려면, 초기화시에 <script>태그와 함께 넣어주어야 한다. 뒤에 두개의 요소는 초기화 할 때 어떤 디자인을 선택할 것인지를 결정한다( 다른 디자인은 sap_hcb와 sap_platinum 등이 있다) 그리고 해당 UI는 라이브러리를 제어한다('sap.ui.dev'는 또 다른 하나이다).


당신이 아래의 내용을 구현 할 때는 해당 로컬 드라이브에 설치된 SAPUI5의 URL포인트를 설정해주면 된다.


<script ~~~~

></script>


SAPUI5 UI 요소들은 프로그램 내부에서 생성되고 수정된다.


// create ~~


fadeOut()});


여러가지 프로퍼티를 설정하기 위한 JSON기반의 축약 표기법이 있다. 아래와 같이 쓴다.


ver~~ });


마지막으로 당신은 UI5의 컨트롤러가 어디에 위치할지 지정해주어야 한다. 원하는 위치의 ID를 주면 된다.


//~~

);


해당 요소는 HTML페이지에 존재하는 것이어야 한다, 그렇기 때문에 아래의 코드를 <body>코드 안에 넣어주어야 한다.


(현재 이러한 상황으로 인해 하나의 UI5 컨트롤러만이 parent에 들어갈 수 있다. 또 다른 UI5 컨트롤러를 추가하려면 또 다른 div를 추가해주거나 UI5 레이아웃 컨트롤러를 사용해 많은 자식들 컨트롤을 정렬해주어야 한다.)


또 다른 방법으로는 컨트롤러를 jQuery스타일로 관리하는 방법도 가능하다.


$(function() ~~ });


이러한 방법을 사용할경우 <body>태그에 특정 CSS클래스를 설정해주어야 한다, 그래야 페이지 배경이라던지 다른 스타일 요소들을 설정할 수 있다.


<body ~~~~ >


<head>태그 시작부분에 들어가는 두가지 메타태그가 있다. 첫번째 요소는 인터넷익스플로러 8이상에서의 렌더링 모드를 사용하다는 뜻이다. 두번째 요소는 모든 파일을 모든 브라우저에서 UTF-8로 인코딩 한다는 뜻이다.


<meta ~~


/>



20초만에 만들어보자


이 메뉴얼에서 설명한 대로 작동하게 하려면 아래의 요건이 필요하다. 첫번째 윈도우가 설치된 PC가 필요하다(다른 OS도 물론 비슷하게 작동할 것이긴 하다), 인터넷 익스플로러 9 이상(보안 옵션은 크로스 도메인 액세스에 대한 옵션을 제한 영역에서도 가능하도록 설정해야 한다), 파이어폭스는 13이상 사파리는 5이상 크롬은 20이상을 권장한다.


또한 SAPUI5라이브러리의 위치가 어느 서버에 있는지 당신이 알고 있어야 한다.


중요:아래 적혀있는 URL "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"는 해당 문서를 작성할 수 있도록 해준다. 해당 URL이 제대로 작동 하는지 먼저 확인해보자. 작동을 하지 않으면 당신이 알고 있는 서버에 SAPUI5가 설치된 주소를 이용하기 바란다.


또하나 주의할점은 "https://sapui5.hana.ondemand.com/"에 배포된 SAPUI5의 버젼은 최신버젼이 나온 후 1-2주 후에 업데이트된다. 우리는 최신 버젼을 유지하도록 꾸준히 노력할 것이다. 어쨌든 아래의 코드는 작동할것이다.


(인터넷 익스플로러를 사용하는 경우에는 보안 옵션을 크로스 도메인이 제한 영역에서는 가능하도록 설정해주어야 할 것이다)


1.바탕화면에서 우측 클릭을 눌러서 txt파일을 새로 만든다.

2.파일 이름을 ui5.html등으로 저장한다.

3.새로 만든 파일을 편집 모드로 연다.(노트패드나 ms워드로 열릴 것이다)

4.아래의 HTML소스코드를 복사 붙혀넣기 하고 저장한다.

5.작성한 파일을 웹브라우저로 연다

6.끝.








댓글을 달아 주세요