[OpenUI5] Basic UI

이번에는 UI5 콤포넌트들을 이용해서 화면 구성을 해 보겠습니다.

결과물은 대략 다음 화면처럼 나오게 됩니다.

먼저 새로운 화면 구성을 위해서 Main.view 를 준비하였습니다.

지난번 app.js 파일에서 view 를 추가해주는 부분도 새로운 view에 맞게 코드를 변경해 줍니다.

Main.view 에서 보여지는 내용을 간단하게 리뷰해 보면, 화면 상단에 헤더 영역과 Section Title 이라고 표시되는 페이지 타이틀, 그리고 메인 컨텐츠로 리스트 아이템과 텍스트가 나오게 됩니다.

화면에서 색상, 폰트 등은 CSS 를 이용해서 처리한 부분이기 때문에 UI5 컴포넌트들 만으로는 위의 화면과 같이 출력되지는 않습니다.

참고로 CSS 가 적용되지 않았을 때의 화면 모습은 다음과 같습니다.

여기서 사용된 컴포넌트들을 헤더 영역부터 살펴보겠습니다.

헤더 영역에서는 영역을 좌측, 가운데, 우측으로 나눠서 다른 컴포넌트를 넣을 수 있도록 sap..m.Bar를 커스텀 헤더로 지정하였습니다. 그리고 왼쪽 영역에는 Label을 그리고 오른쪽 영역에는 Link를 넣어 주었습니다. 마지막으로 CSS에서 해당 element 를 쉽게 지정할 수 있게 addStyleClass를 이용해서 클래스 이름을 지정해 주었습니다.

        var oPage = new sap.m.Page({
            customHeader: new sap.m.Bar({
                contentLeft:[new sap.m.Label({text:"OpenUI5 Logo"})]
                , contentRight: [new sap.m.Link({text:"Login"})]
            }).addStyleClass("headerBar")
        });

Section Title 부분은 Label 을 추가해 주었는데, HBox를 이용해서 Label만 한 줄에 나오게 처리하였습니다. 역시 CSS를 위해서 클래스 이름을 지정해 주었습니다.

        oPage.addContent(
            new sap.m.HBox({items:[
                new sap.m.Label({text:"Section Title"})
            ]}).addStyleClass("sectionTitle")
        );

메인 컨텐츠 부분은 좌측에는 리스트를 스크롤 컨테이너에 담아서 보여주고, 우측에는 TextArea를 사용해서 페이지에 대한 설명을 보여줍니다.

        oPage.addContent(
            new sap.m.FlexBox({
                items:[
                    new sap.m.ScrollContainer({content: [
                        new sap.m.List({
                            showNoData: true
                            , columns: [
                                new sap.m.Column()
                            ]
                        })

                        // ITEM 추가해주는 부분은 생락

                    ]}).addStyleClass("scrollContainer")
                    , new sap.m.TextArea({
                            cols:50
                            , rows:10
                            , value: "텍스트 내용 생략"
                    }).addStyleClass("textArea")
                ]
            }).addStyleClass("mainContent")
        );

이 페이지에서 사용하기 위해서 몇가지 구글 폰트들을 index.html 파일에 추가하였습니다.

<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'>

마지막으로 CSS 파일에서 각 컴포넌트들의 모양을 잡아주면 됩니다. (CSS 파일에 대한 설명은 생략합니다..)

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

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