본문으로 바로가기

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


UI5 is implemented in JavaScript, so for loading UI5, its bootstrap just needs to be included with a <script> tag. The last two attributes select the visual design to apply initially (other choices would be "sap_hcb" or "sap_platinum") and the UI control library/libraries to use ("sap.ui.dev" would be another one). In your scenario you need to make sure the URL points to a SAPUI5 installation.


SAPUI5는 클라이언트 사이드 웹 UI 라이브러리 입니다(웹 브라우저에서 작동합니다). SAPUI5 어플리케이션은 HTML페이지라고 할 수 있습니다.(물론 여러가지 파일이 포함되어 있습니다)

UI5는 자바스크립트로 작성되었기 때문에 UI5를 불러오려면 html page를 초기화 하는 부분에 <script>태그를 넣어주어야 합니다. 뒤에 오는 두개의 요소 중 첫번째(data-sap-ui-theme="sap_goldreflection") 디자인에 관한 요소입니다(다른 선택 옵션으로 "sap_hcb"또는 "sap_platinum"이 있습니다). 그리고 두번째(data-sap-ui-libs="sap.ui.commons")는 UI컨트롤 라이브러리 입니다("sap.ui.commons"대신 "sap.ui.dev"를 사용할 수 있습니다).
또한 SAPUI5를 어느 경로에 설치 했는지 해당 URL을 정확히 알고 있어야 합니다.



SAPUI5 UI elements are created and modified programmatically:

SAPUI5의 UI 속성은 프로그램 내에서 생성되고 수정됩니다:
// 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();}
      });
   });


As a minor detail, the should have a certain CSS class, so the page background and some other styles are properly set:
세부 설정사항으로 배경 화면과 스타일 요소를 적용하기 위해 는 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.










댓글을 달아 주세요