프로그래밍/Node.js2018.02.14 14:17
 
 

예전에 node.js에서 Oracle DB를 연결해서 사용하는 프로젝트를 해봤었는데, Oracle 이 node.js 를 제대로 지원하지 못한다는 느낌을 강하게 받았었습니다.


그때는 node.js oracledb 모듈을 설치할 때, 컴파일 과정이 들어가면서 의존성이 있었기 때문에 은근히 번거로웠었는데, oracledb 2.0 부터는 그러한 과정들이 필요 없게되어서 상당히 편리해졌습니다.


다만 새로운 모듈의 특성상 Oracle 혹은 instant client 을 설치하고, 라이브러리 경로를 설정해 줘야지만 제대로 동작합니다. node.js oracledb 와 Oracle 혹은 instant client 의 설치순서는 상관이 없습니다. 런타임 시점에 라이브러리 경로만 인식되면 됩니다.


또 다른 장점으로는 상당히 많은 수정을 통해서 메모리 관리 등에서 훨씬 안정적인 모듈이 되었다는 것입니다.


--


이쯤에서 node.js oracledb 모듈을 설치해 보겠습니다.


테스트 환경은 CentOS 7.4.1708 , node.js 6.12.3 입니다.


1. 적당한 폴더를 생성합니다.

# mkdir test 


2. 폴더에서 node 프로젝트를 생성합니다. 프로젝트 정보는 적당히 입력합니다.

# npm init 


3. 다음 명령어로 oracledb 모듈을 설치합니다.

# npm install --save oracledb 

현재 2.0.15 버전으로 설치가 됩니다.


4. instant client 를 설치합니다. Oracle 다운로드 페이지에서 적당히 다운로드 받습니다.

http://www.oracle.com/technetwork/database/database-technologies/instant-client/downloads/index.html

아래 명령어로 설치를 합니다.

# rpm -ivh  oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpm

혹은 yum install 명령어를 이용해도 설치가 됩니다.


5. 환경변수를 설정합니다.

# vi /etc/environment


다음의 두줄을 추가합니다 원래 instant client 만 설치할 경우 "/usr/lib/oracle/12.2/client64/network/admin" 경로는 존재하지 않는데, XE 등을 설치시의 tns 설정경로와 비슷하게 하기 위해서 "network/admin" 폴더를 생성해 주었습니다.

TNS_ADMIN=/usr/lib/oracle/12.2/client64/network/admin

LD_LIBRARY_PATH=/usr/lib/oracle/12.2/client64/lib


6. tnsnames.ora 파일을 생성합니다.

# touch /usr/lib/oracle/12.2/client64/network/admin/tnsnames.ora 

생성한 파일을 편집해서 tns 정보를 입력합니다.


7. oracledb에 연결해서 테스트하는 예제들 입니다.

https://github.com/oracle/node-oracledb/tree/master/examples


webapp.js 나 webapppromises.js 파일을 참조하시면 pool 설정 등에 대한 예시를 볼 수 있습니다.



 
 
Posted by ShineUm
프로그래밍/Java2017.09.30 22:14
 
 

테스트 환경 : MacOSX (High Sierra) + Oracle JDK9 + Eclipse (Oxygen)


Eclipse 설치 후 실행하면, "An error has occurred, see the log file null" 이라는 메세지가 나오면서 eclipse 가 강제로 종료되는 현상이  발생


해결 방법


아래 경로에 가서


/Applications/Eclipse.app/Contents/Eclipse 


eclipse.ini 파일을 편집


-vmargs 항목에 파라미터를 하나 추가해 준다.

-vmargs

--add-modules=java.se.ee 


이렇게 해서 해결이 되는 경우가 대부분인데 해결이 되지 않는 경우도 있다고 함..





 
 
Posted by ShineUm
프로그래밍2017.09.10 22:04
 
 

CSS 플렉서블 박스에 대한 간단 사용법 입니다.


기본 속성

display : flex / inline-flex

  • flex: 박스를 블록 수준의 플렉서블 박스로 작동하게 함
  • inline-flex: 박스를 인라인 수준의 플렉서블 박스로 작동하게 함


아이템의 배치 방향 설정하기

flex-direction : row / row-reverse / column / column-reverse

  • row : 기본 설정 값. 박스를 왼쪽에서 오른쪽으로 배치. 주축은 가로 / 교차축은 세로
  • row-reverse : 박스를 오른쪽에서 왼쪽으로 배치
  • column : 박스를 위에서 아래로 배치
  • column-reverse : 박스를 아래에서 위쪽으로 배치


아이템을 여러 줄로 배치하기

flex-wrap : nowarp / wrap / wrap-reverse

  • nowrap : 기본 설정 값. 박스를 한줄로 배치
  • warp : 박스를 여러 줄로 배치
  • wrap-reverse : 박스를 여러 줄로 배치하는데 순서는 wrap 의 반대 (주축이 가로인 경우 아래에서 위로, 주축이 세로인 경우 오른쪽에서 왼쪽으로 배치)


배치 방향과 여러 줄 배치 설정을 같이 하기

flex-flow : [flex-direction] [flex-wrap]


주축 방향의 아이템 배치 / 정렬

justify-content : flex-start / flex-end / center / space-between / space-around

  • flex-start : 기본 설정 값. 박스틀을 주축의 시작점부터 쌓아서 배치
  • flex-end : 박스들을 쌓아서 주축의 끝점으로 배치
  • center : 박스들을 쌓아서 주축의 중앙에 배치
  • space-between : 박스들 사이에 공백을 넣어서 배치
  • space-around : 박스들 사이와 시작, 끝에 공백을 넣고 배치


교차축 방향의 아이템 배치 / 정렬

align-items : stretch / flex-start / flex-end / center / baseline

  • stretch : 기본 설정 값. 박스를 교차축 방향으로 늘려서 배치
  • flex-start : 박스를 교차축 시작점 기준으로 배치
  • flex-end : 박스를 교차축 끝점 기준으로 배치
  • center : 박스를 교차축의 중앙에 배치
  • baseline : 박스들을 교차축의 시작점에 배치되는 자식 박스의 글자 베이스라인에 맞춰서 배치

교차축 방향으로 아이템들을 개별적으로 배치하기
align-self : auto / stretch / flex-start / flex-end / center / baseline
  • auto : 부모의 align-items 속성을 상속
(나머지는 align-items 설명을 참조)


여러 줄의 아이템을 교차축 방향으로 배치 / 정렬 하기
align-content : stretch / flex-start / flex-end / center / space-between / space-around
(justify-content, align-items 의 설명을 참조)


플렉스 아이템의 배치 순서 지정하기
order : 정수 (기본값 0)

큰 숫자가 뒤쪽으로 배치되며, 숫자가 같은 경우 먼저 작성된 태그가 앞에 배치
음수는 0으로 간주됨


플렉스 아이템의 크기 비율 지정
flex : [flex-grow] [flex-shrink] [flex-basis]
  • flex-grow : 여백이 있는 경우 아이템의 크기를 비율대로 늘려주는 속성
  • flex-shrink : 아이템의 크기가 지정한 박스 크기 보다 큰 경우 줄여주는 속성
  • flex-basis : 아이템의 기본 크기를 설정하기 위한 속성






 
 
Posted by ShineUm
프로그래밍/Node.js2017.05.13 03:24
 
 

윈도우에서 npm으로 oracledb 모듈을 설치하던 중에 다음과 같은 에러가 발생했습니다.


MSBUILD : error MSB4132: The tools version "2.0" is unrecognized. Available tools versions are "4.0".


모듈 설치를 위해서 Python 2.7 과 Visual Studio 2017 CE 를 설치해 두었는데, 위와 같은 에러가 발생했습니다.


(참고로 node oracledb를 설치하기 위해서는 Oracle Instant Client 혹은 XE 등이 필요하고, 그 외에 Python 과 C++ 컴파일러가 필요합니다.)



관련해서 검색을 하다가 아래 링크에서 답을 찾았습니다.


https://github.com/chjj/pty.js/issues/60



요점만 적어보면, 


1. 관리자 권한으로 명령 프롬프트를 실행합니다.


2. 다음 명령으로 빌드 관련 툴을 설치합니다.


 npm install --global --production windows-build-tools 


3. 다음 명령으로 빌드 툴에서 사용할 visual studio 버전을 설정합니다.


 npm config set msvs_version 2015 --global


그리고 나서 창을 닫고 새 창을 열어서 다시 시도하니 설치가 잘 되었습니다.







 
 
Posted by ShineUm
 
 

테스트 환경

Ubuntu 16.04.2 LTS


Oracle DB를 이용할 일이 생겨서 Ubuntu에 Oracle XE를 설치해 보았습니다.


설치하는데 아래 링크를 참조했습니다.

http://www.gokhanatil.com/2016/04/how-to-install-oracle-11gr2-xe-on-ubuntu.html


먼저 설치 패키지를 아래 링크에서 다운로드 합니다. 

(2017년 3월 30일 현재 2014년에 배포한 11gR2 가 최신버전 입니다.)

http://www.oracle.com/technetwork/database/database-technologies/express-edition/downloads/index.html


Oracle 홈페이지에서는 리눅스 용으로는 rpm을 zip으로 압축해서 배포하고 있습니다.


다운로드 완료 후에는 다음 명령으로 압축을 풀어 줍니다.


$ unzip oracle-xe-11.2.0-1.0.x86_64.rpm.zip


압축이 풀리면 Disk1 폴더가 생성되고 그 안에 rpm 파일이 있습니다.


rpm 파일을 Ubuntu 에서 쓰는 deb 파일로 변환을 해 주어야 합니다.


rpm을 deb로 변경할 때는 alien 을 사용하게 됩니다. 


만약 alien 이 설치되어 있지 않다면 다음 명령으로 설치합니다.


$ sudo apt install alien 


그리고 오라클 사용에 필요한 라이브러리를 설치합니다. (사용자의 환경에 따라 이미 설치되어 있을 수도 있습니다.)


$ sudo apt install libaio1


Disk1 폴더에서 아래 명령으로 rpm을 deb로 변경합니다. (시간이 상당히 걸리는 작업입니다.)


$ sudo alien --scripts oracle-xe_11.2.0-1.0.x86_64.rpm


deb 파일을 다음 명령으로 설치를 합니다.


$ sudo dpkg -i oracle-xe_11.2.0-2_amd64.deb


설치 도중에 /sbin/chkconfig 가 없다는 메시지가 나오게 되는데, redhat 계열에서 사용하는 설정인데 무시하셔도 상관 없습니다. 그래도 설정을 하고 싶다면, 아래 링크를 참조하세요.

http://meandmyubuntulinux.blogspot.com/2012/05/installing-oracle-11g-r2-express.html


그리고 설치 후에는 설정을 위해서 스크립트를 실행해야 합니다. 실행시에 발생할 에러를 막기 위해서 아래와 같이 링크를 설정하고 폴더를 생성합니다. (폴더가 이미 존재하는 경우도 있습니다.)


$ sudo ln -s /usr/bin/awk /bin/awk

$ sudo mkdir /var/lock/subsys


그리고 스크립트를 돌려서 초기 설정을 합니다.


$ sudo /etc/init.d/oracle-xe configure


초기 설정을 위해 몇가지 질문을 하는데, 성실히 대답해 주면 됩니다.


아래 명령으로 시작합니다.


$ sudo /etc/init.d/oracle-xe start


아래 명령으로 서버를 종료합니다.


$ sudo /etc/init.d/oracle-xe stop




 
 
Posted by ShineUm
 
 

테스트 환경

Ubuntu (16.04.2 LTS)


Ubuntu 사용 도중 crash 가 발생하면 부팅시에 계속 메시지가 나타나게 됩니다.


문제가 해결되고 나서도 메시지가 계속 나타나는 경우 다음의 방법으로 해결 합니다.


1. 터미널을 연다. (Ctrl + Alt + t)


2. 다음 경로로 이동


$ cd /var/crash 



3. crash 파일 확인 후 삭제 



 
 
Posted by ShineUm
 
 

테스트 환경 

Ubuntu (16.04.2 LTS)


예전에 한번 Ubuntu 에서 JDK 설치하기를 포스팅한 적이 있었는데, 다시 설치하다보니 예전 방법에서는 스크립트 오류가 나서 새로 포스팅을 합니다. (예전 포스트 바로가기)


참고로 예전 방식대로 oracle java 홈페이지에서 rpm파일을 다운로드 받아서 alien 을 이용해서 설치 하게 되면 /usr/sbin/alternatives 를 찾을 수 없다는 에러가 나오면서 스크립트가 중단되는 에러가 발생하며 종료가 됩니다. 


그래서 쉽게 설치할 수 있는 다른 방법을 이용해서 설치해 보겠습니다.


1. 먼저 터미널 창을 엽니다. (Ctrl + Alt + t)


2. 다음과 같이 입력하여 repository 를 추가합니다. 


$ sudo add-apt-repository ppa:webupd8team/java 



3. 설치 스크립트를 업데이트하고 설치합니다.


$ sudo apt update; sudo apt install oracle-java8-installer



(2017년 3월 19일 현재 jdk9 는 정식 릴리즈 되지 않은 상태지만 추후에는 설치 패키지 명을 oracle-java9-installer 로 바꿔주기만 하면 jdk9 도 설치가 가능할거에요..)


4. 추후에 나오는 팝업은 긍정적으로 답변하면 설치가 시작됩니다. (라이센스 동의 등..)


5. 환경변수 등록을 추가하고 싶다면 아래 명령어도 실행해 봅니다.


$ sudo apt install oracle-java8-set-default




ps. 혹시 예전 방법으로 설치하다가 오류가 나서 중간에 막혀있는 경우 아래 방법을 이용해서 해결합니다. 


1. 터미널을 엽니다. (Ctrl + Alt + t)


2. 다음 경로로 이동합니다.


$ cd /var/lib/dpkg/info



3. JDK 설치 관련 파일들을 체크합니다.


$ ls -ltr | grep jdk


jdk 설치 관련 파일들이 화면에 출력됩니다.


4. 설치하던 버전에 맞는 파일들을 삭제합니다. (잘못 삭제하면 다른 문제가 생길 수 있으니 주의!)


5. 다음 명령어로 패키지 삭제를 완료합니다.


$ sudo apt autoremove





 
 
Posted by ShineUm
프로그래밍2017.01.20 13:47
 
 

OpenUI5 관련해서 마지막으로 Data Binding 에 대해서 알아보도록 하겠습니다.


최근 웹 개발 트렌드는 클라이언트에서 기본 페이지 레이아웃을 로딩하고, 웹브라우져에서 렌더링해서 보여줄 데이터를 비동기 방식으로 받아와서 화면에 보여주는 형태를 선호합니다. 데이터 바인딩은 특정 컨트롤에 표시되는 정보를 데이터 모델과 연결하여 컨트롤 상에서 데이터를 변경해도 그 결과가 모델에 반영이 되고, 반대로 모델의 데이터를 변경해도 컨트롤에 바로 표시되게 하는 것 입니다.


쉽게 이야기해서 Textfield 와 특정 모델을 연결시켜 놓으면, 사용자가 Textfield 에 입력한 값이 모델에 바로 연동되며, 반대로 javascript 상에서 모델의 값을 변경하면 연결된 Textfield 값이 변경됩니다.


이번 예제에서는 지난번에 만든 페이지를 데이터 바인딩을 사용해서 변경해 보겠습니다.


따라서 실제로 화면에서 보여지는 부분은 차이가 없습니다.


지난번에 작성한 Main.view.js 파일에서 List에 나타나는 데이터와 화면 오른쪽에 보여지는 사이트 정보를 데이터 모델로 옮기고 해당 부분을 바인딩해 보도록 하겠습니다.


기존에 List 컨트롤에 addItem으로 추가했던 ListItem 데이터 대신 바인딩할 Template을 준비합니다.


new sap.m.List({ showNoData: true , columns: [ new sap.m.Column() ] , items: { path: "/d/listItems" , template: new sap.m.StandardListItem({ title: "{title}" , icon: "{icon}" , info: { parts: ["rating"] , formatter: oController.infoFormatter } , description: "{description}" }) } })


List의 경우 여러 개의 아이템이 들어갈 수 있으므로 모델은 배열 형태로 표시됩니다. 따라서 해당 배열의 경로를 path로 지정하고 각각 표시될 정보를 배열 데이터의 키로 지정합니다.  예제에서 title: "{title}" 로 표시된 부분에서 {title} 이 바인딩 될 모델 데이터 상대 경로 입니다. 실제 경로는 [path] + /[배열 index]/ + title 이 됩니다.


그리고 info 항목을 보면 formatter를 사용했습니다. parts에 해당 모델에서 읽을 키들이 정의 됩니다. 여기서는 rating 값을 읽어서 controller에 있는 infoFormatter 함수가 화면에 출력될 값을 생성해서 return 해 줍니다.


비슷한 방법으로 TextArea에 들어가는 값도 바인딩을 해 보았습니다.


, new sap.m.TextArea({ cols:50 , rows:10 , value: "{/d/siteDescription}" }).addStyleClass("textArea")


TextArea에 들어가는 값은 경로를 {} 로 묶어 주면 됩니다. (value: "{/d/siteDescription}" 부분)



그리고 각 컨트롤에 모델을 지정해 주어야 하는데, List 나 TextArea는 View 안에 들어가는 컨트롤이기 때문에 View 에 모델을 설정해 주면 됩니다. 지금까지 사용하지 않았던 Main.Controller.js 파일에서 해당 부분을 다루어 보겠습니다.


먼저 컨트롤러에서 사용할 모델을 준비합니다.


oModel: new sap.ui.model.json.JSONModel()



컨트롤러 객체가 생성될 때 제일 먼저 실행되는 onInit 함수에 모델을 View에 바인딩하는 코드 (빨간색 표시 부분) 과 모델에 데이터를 설정하는 코드 (파란색 표시 부분) 을 추가합니다.


, onInit: function() { this.getView().setModel(this.oModel); this.oModel.setData({ d: { listItems: [ { title: "MoonBucks", icon: "sap-icon://e-care", rating: 2, description: "Description" } , { title: "StartBucks", icon: "sap-icon://e-care", rating: 4, description: "Description" } , { title: "CoffeeVince", icon: "sap-icon://e-care", rating: 3, description: "Description" } , { title: "StarBugs", icon: "sap-icon://e-care", rating: 1, description: "Description" } ] , siteDescription: "In the long history of the world, only a few generations have been granted the role of defending freedom in its hour of maximum danger. I do not shrink from this responsibility - I welcome it." } }); }



View에 모델이 바인딩되어 있기 때문에 데이터를 먼저 세팅하고 모델을 지정하든, 모델을 먼저 지정하고 모델에 데이터를 넣어 주던 순서는 상관이 없습니다.


마지막으로 rating 부분을 숫자에서 별표시로 바꿔주는 formatter 코드 입니다.


특별한 것이 없어서 설명은 생략합니다.


, infoFormatter: function(pInfo) { var stars = "★★★★★☆☆☆☆☆"; return stars.substr(5-pInfo, 5); }



이상으로 UI5에 대한 간단한 설명을 마치도록 하겠습니다.


바인딩이 적용된 소스 코드는 아래 git 링크에서 받아 보실 수 있습니다.


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





 
 
Posted by ShineUm
프로그래밍2017.01.15 13:44
 
 

이번에는 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




 
 
Posted by ShineUm
프로그래밍2016.12.15 12:12
 
 

이번에는 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




 
 
Posted by ShineUm

티스토리 툴바