The Pursuit of Happyness

웹애플리케이션 +1

이번에는 OpenUI5 를 이용해서 간단한 웹 애플리케이션을 만들어 보겠습니다.


프로그래밍 언어를 처음 배울때 늘 보게되는 Hello World 를 화면상에 나타내는 코드 입니다.


HTML에서 간단하게 Hello World 라고만 써줘도 되지만, 추후에 기능이 많고 복잡한 웹 애플리케이션을 제작하기 위해서 기본 프레임을 만들어 보는 연습을 한다고 생각하시면 되겠습니다.


이 예제에서는 Javascript View를 이용하였으며, View와 Controller를 분리하여 작성하였습니다.


웹 애플리케이션을 실행할 때 진입점이 되는 경로는 index.html 입니다.


그리고 웹 애플리케이션의 기본이 되는 코드가 담겨져 있는 app.js 파일을 js 폴더에 두었고,


View 파일과 Controller 파일을 z_fiori 라는 폴더에 생성해 두었습니다.



먼저 index.html 파일을 살펴보면, 다음과 같습니다.


<!DOCTYPE html> <html> <head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>OpenUI5</title> <script id='sap-ui-bootstrap' src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m'> </script> <script type="text/javascript" src="js/app.js"></script> </head> <body class="sapUiBody"> <div id="content"></div> </body> </html>


UI5 라이브러리는 제공해주는 CDN URL을 링크해서 최신버전에 맞춰두었습니다.


그리고 애플리케이션 기본 코드인 app.js 를 포함시킵니다.



다음으로 app.js 파일을 살펴봅니다.


sap.ui.localResources("z_fiori"); var sapApp = new sap.m.App(); sapApp.placeAt("content"); sapApp.addPage( sap.ui.view("view.HelloWorld", { viewName: "z_fiori.HelloWorld" , type: sap.ui.core.mvc.ViewType.JS }) );


먼저 sap.ui.localResources 를 이용해서 z_fiori 폴더를 리소스 경로로 지정합니다.


리소스 경로로 지정하고 나면, require 기능을 이용해서 해당 폴더에 있는 파일들을 로딩할 수 있습니다.


다음으로 App 객체를 생성해서 index.html 에 있는 "content" 라는 영역에 위치시킵니다.


마지막으로 App 객체에 뷰에 해당하는 페이지를 추가하여 줍니다.


viewName으로 z_fiori.HelloWorld 를 지정해 주었으므로, 앞에서 지정한 z_fiori 리소스 폴더에 HelloWorld.view.js 파일과 HelloWorld.controller.js 파일을 생성해 줍니다.



HelloWorld.view.js 파일은 다음과 같습니다.


sap.ui.jsview("z_fiori.HelloWorld", {
    getControllerName: function() {
        return "z_fiori.HelloWorld";
    }
    , createContent: function(oController) {
        var oPage = new sap.m.Page();

        oPage.addContent(
                new sap.m.Text({text: "HelloWorld"})
        );
        
        return oPage;
    }
});


뷰에서는 컨트롤러 이름을 설정하고, 화면에 표시될 UI 컨트롤들을 배치합니다. 웹 애플리케이션의 특성상 대부분 CSS에서 보여주는 부분을 수정하겠지만, 간단한 배치는 속성값을 지정해서 처리할 수도 있습니다.



마지막으로 HelloWorld.controller.js 파일 입니다.


sap.ui.controller("z_fiori.HelloWorld", {
    onInit: function() {
    }
});


아직은 컨트롤러에서 하는 일이 없으므로 그냥 위와 같은 형태만 만들어 줍니다.


이렇게 구성하고 나서 웹브라우저로 열어보면 대략 다음과 같은 화면이 나옵니다.


처음 index.html 파일에서 SAP 의 Blue Crystal theme을 기본 theme으로 사용하겠다고 지정했기 때문에 위와 같은 바탕화면이 나오게 됩니다.


또한 sap.m.Page 는 기본 설정에서 위쪽에 흰색 바탕으로된 헤더 영역이 생기게 되며, 필요하지 않은 경우 제거할 수도 있습니다.


추후에 기본 UI 컨트롤들에 대해서 더 알아보도록 하겠습니다.




소스 코드는 아래 git 링크에서 받아 보실 수 있습니다.


https://github.com/shineum/openui5/tree/Ch01_Hello_World




Comment +0