티스토리 뷰
SAPUI5 강좌 - 제1편 SAPUI5로 Hello World 출력하기
https://openui5.hana.ondemand.com/#docs/guide/HelloWorld.html
위 링크에 있는 Developer Guide를 참고했습니다.
SAPUI5는 SAP에서 HANA DB출시와 함께 지원하고 있는 UI툴 입니다. OpenUI5와 같은 겁니다.
Hello World를 출력해 보면 감을 잡을 수 있기 때문에 Hello World 출력부터 해보겠습니다.
먼저 아래 소스코드를 카피해서 메모장에 붙여넣고 "helloWorld.html"로 저장하고 실행해보세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 in 20 Seconds</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
<!-- 2.) Create a UI5 button and place it onto the page -->
<script>
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text (there is also a shorter way of setting several properties)
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function(){$("#btn").fadeOut()});
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:
/*
$(function(){
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press:function(){$("#btn").fadeOut();}
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 button -->
<div id="uiArea"></div>
</body>
</html>메모장에 붙여넣고
'helloWorld.html'로 저장을 합니다.
바탕화면에 파일이 생성 되었습니다. 실행 해봅니다.
실행 하면 'Hello World!'라는 버튼이 생겼습니다. 클릭 해봅시다.
버튼이 사라졌으면 제대로 작동하는겁니다.
그러면 이제 소스코드를 하나씩 살펴보도록 하겠습니다.
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
As SAPUI5 is a client-side web UI library (i.e.: runs in the browser), a SAPUI5 application is typically an HTML page (plus potentially many more files).
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text (there is also a shorter way of setting several properties)
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function(){$("#btn").fadeOut()});
There is also a shorthand notation based on JSON for setting multiple properties; you could also write:
여러가지 속성을 설정하기 위해 JSON 축약 표기법을 사용합니다.
var myButton = new sap.ui.commons.Button({text:"Hello World!",tooltip:"Hello Tooltip!"});
Finally you need to tell UI5 where the UI control should be placed. You can just give the ID of an element in the page to do so:
마지막으로 UI5의 컨트롤러가 어디에 위치할지 지정해주어야 합니다. 원하는 위치의 ID를 지정해주면 됩니다.
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
This element must exist somewhere in the HTML page, so you need to put the following code to the desired place within the <body>:
위에서 만든 버튼 오브젝트는 HTML페이지 어딘가에 있어야 합니다, 그렇기 때문에 아래의 코드를 넣어줌으로써 <body>에 버튼을 삽입할 수 있습니다.
<div id="uiArea"></div>
(As of now you can only put one UI5 control into a parent; for adding more UI5 controls you need to either define more parents or to use a UI5 layout control which can arrange many children.)
(현재로서는 UI5 컨트롤을 '부모'영역에 삽입할 수 밖에 없습니다. 또 다른 UI5 컨트롤러를 추가 하려면 또 다른 <div>를 추가 해주거나 UI5 레이아웃 컨트롤러(form, layout, grid 등)를 사용해 여러개의 자식 컨트롤러를 배치할 수 있습니다.
An alternative way to create and initialize the control in a more jQuery-style manner is also available:
컨트롤러를 생성하고 초기화 하는 또 다른 방법으로는 jQuery 스타일 방식도 가능합니다:
$(function(){
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press:function(){$("#btn").fadeOut();}
});
});
세부 설정사항으로 배경 화면과 스타일 요소를 적용하기 위해 는 CSS클래스 id를 가지고 있어야 합니다.
<body class="sapUiBody">
And two meta-Tags at the beginning of the : the first to ensure that Internet Explorer 8+ uses its most-standards-compliant rendering mode. And the second to let all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file):
태그 시작부분에 들어가는 두가지 메타태그가 있습니다. 첫번째 요소는 인터넷익스플로러 8이상에서의 렌더링 모드를 사용하다는 뜻입니다. 두번째 요소는 모든 파일을 모든 브라우저에서 UTF-8로 인코딩 한다는 뜻입니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
end.
'SAP' 카테고리의 다른 글
| SAPUI5 강좌 - 제2편 SAPUI5 Eclipse 개발 툴 설치하기 (0) | 2014.02.28 |
|---|---|
| SAPUI5 개발자 가이드 번역 - 제4편 Advanced SAPUI5 Application (0) | 2014.02.28 |
| SAPUI5 개발자 가이드 번역 - 제3편 Writing a simple Application (0) | 2014.02.27 |
| SAPUI5 개발자 가이드 문서 번역 - 제2편 Get Started - Introduce (0) | 2014.02.27 |
| SAP UI5 개발자 가이드 문서 번역 - 제1편 Developer Guide (2) | 2014.02.25 |
- Total
- Today
- Yesterday
- Sh
- 도커컨테이너
- shellscript
- 도커각티슈박스
- 도커각티슈케이스
- docker container tissue box
- 도커티슈박스
- 개발자
- docker container
- 이직
- vim
- 싱가폴
- Linux
- docker container tissue
- 2017 티스토리 결산
- docker container case
- docker container whale
- 도커티슈케이스
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |