[OpenUI5] 개요 및 기본 사용법
오늘은 SAP 쪽에서 웹 클라이언트 개발에 많이 사용되는 OpenUI5 프레임워크에 대해서 설명해 보겠습니다.
OpenUI5 는 http://openui5.org/ 홈페이지에서 Apache 2.0 라이센스로 무료로 배포하고 있습니다.
기업용 소프트웨어를 오랜동안 서비스해서 인지, 프레임워크가 상당히 깔끔하고 안정된 느낌입니다.
웹사이트에서 소개된 Key Features의 제목은 다음과 같습니다.
1. 엔터프라이즈 웹 툴킷
2. 파워풀한 개발 컨셉
3. 풍부한 UI 컨트롤을 제공
4. 일관성 있는 사용자 경험
5. 무료로 배포되는 오픈소스
6. 웹 브라우저 및 휴대용 기기에서 같이 사용가능한 반응형
Get Started 섹션에서는 OpenUI5를 사용하는 기본적인 방법이 소개되어 있습니다. OpenUI5를 사용법은 다음과 같습니다.
1. 웹페이지가 로딩될 때 UI5 라이브러리가 로딩될 수 있게 스크립트를 추가합니다.
먼저 소스코드는 다음과 같은데, OpenUI5 라이브러리를 resources 폴더에 미리 준비해 두거나 (다운로드 받아서 압축 해재) sap cdn 링크로 걸어 주면 됩니다.
<!DOCTYPE html> <html> <head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>Hello World</title> <script id='sap-ui-bootstrap' src='resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-compatVersion='edge' data-sap-ui-preload='async'> </script> <script> sap.ui.getCore().attachInit(function () { jQuery("#content").html("Hello World - UI5 is ready"); }); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body> </html>
OpenUI5 에 jquery.sap 라이브러리가 포함되어 있어서 별도로 jQuery 라이브러리를 추가하지 않아도 jQuery 기능을 사용할 수 있습니다. (물론 포함되어 있는 라이브러리 버전에 따라 지원되는 내용이 다를 수 있습니다.)
AngularJS 등의 프레임워크를 사용해 보신 분들은 쉽게 이해하실 수 있는 코드라 생각됩니다. body에 div 엘리먼트를 준비해 두고, 자바스크립트를 이용하여 페이지가 로딩될 때, div 에 "Hello World - UI5 is ready" 라는 텍스트를 넣어주게 됩니다.
2. OpenUI5 컨트롤을 이용합니다.
<!DOCTYPE html> <html> <head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>Hello World</title> <script id='sap-ui-bootstrap' src='resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-compatVersion='edge' data-sap-ui-preload='async'> </script> <script> sap.ui.getCore().attachInit(function () { new sap.m.Text({ text: "Hello World" }).placeAt("content"); }); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body> </html>
위에서는 jQuery를 이용하여 div 엘리먼트에 값을 넣어 주었다면, 이번에는 OpenUI5에 있는 UI 컨트롤 객체(여기서는 sap.m.Text)를 생성해서 컨트롤 객체의 메쏘드 placeAt을 이용하여 해당 div 엘리먼트에 컨트롤 객체를 설정해 주었습니다.
3. XML 뷰 (코드는 http://openui5.org/getstarted.html#step3 에서 확인하세요)
웹 애플리케이션의 View를 XML 로 만들어서 별도의 파일로 생성합니다. 나중에 나오지만 OpenUI5는 XML 이외에도 Javascript 나 HTML 형태의 View도 지원하기 때문에 필요한 형태의 View를 사용하시면 됩니다. 뷰 파일명은 *.view.xml 형식의 컨벤션을 사용합니다. 웹페이지의 설명에서는 App.view.xml 이라는 이름을 사용했습니다.
4. 컨트롤러 (코드는 http://openui5.org/getstarted.html#step4 에서 확인하세요)
뷰와 마찬가지로 컨트롤러도 별도의 파일로 생성을 합니다.
컨트롤러에 대한 컨벤션입니다.
- 컨트롤러 이름의 첫글자는 대문자를 사용한다.
- 연관된 뷰와 1:1 로 매칭시키며, 같은 이름을 사용한다.
- 이벤트 핸들러는 "on"으로 시작한다.
- 컨트롤러 파일명은 *.controller.js 로 끝난다.
5. 데이터 바인딩 (코드는 http://openui5.org/getstarted.html#step5 에서 확인하세요)
UI 컨트롤 객체에 데이터 모델을 연결합니다.
예제에서는 컨트롤러에서 JSON 모델을 생성하고, 뷰를 가지고 와서 생성한 JSON 모델을 세팅합니다.
뷰에서는 Input (sap.m.Input) 객체를 생성하면서 value 를 모델의 /recipient/name 값에 연결시킵니다.
또한 description 도 모델의 /recipient/name 과 연결합니다.
이렇게 연결을 해 두면 사용자가 Input 의 값을 변경하면, 연결된 모델의 /recipient/name 값이 같이 변경되며, 반대로 컨트롤러에서 모델의 /recipient/name 값을 변경하면, Input 값도 같이 변경이 됩니다. (value 와 description)
XML 뷰에서의 데이터 바인딩 문법은 다음과 같습니다.
- 중괄호"{ ... }" 는 데이터 바인딩이 사용되었음을 나타냄
- "/recipient/name" 은 해당 모델에서의 경로를 선언함
[Linux][CentOS] Apache 소스 설치 하기
1. 먼저 소스 설치시 필요한 모듈을 설치합니다. (install modules)
이미 설치된 모듈은 건너 뛰어도 상관 없습니다.
> yum install wget pcre pcre-devel make
2. 최신 아파치 소스를 다운로드 받습니다. (download httpd source from this link)
http://httpd.apache.org/download.cgi
> wget http://URL/httpd-NN.tar.gz
3. 압축을 적당한 폴더에 압축을 풀어 둡니다. (extract source code)
> tar zxvf httpd-NN.tar.gz
> cd httpd-NN/srclib
4. 필요한 경우 apr, apr-util 소스를 다운로드 받아서 srclib 폴더에 풀어 둡니다. (download apr and apr-util source from this link)
http://apr.apache.org/
> wget http://URL/apr-NN.tar.gz
> wget http://URL/apr-util-NN.tar.gz
5. 압축을 풀고 폴더 이름을 다음과 같이 변경합니다. (extract source code on srclib folder and change folder name)
> tar zxvf apr-NN.tar.gz
> mv apr-NN apr
> tar zxvf apr-util-NN.tar.gz
> mv apr-util-NN apr-util
4. 이제 컴파일 해서 설치를 하게 되는데 경로는 "/usr/local/httpd" 에 설치하도록 하겠습니다. (install to "/usr/local/httpd")
> cd ..
> ./configure --prefix=/usr/local/httpd --with-included-apr
> make
> make install
5. 아파치 서버에 필요한 설정을 변경합니다. (configuration)
> vi /user/local/httpd/conf/httpd.conf
6. 다음과 같이 아파치를 실행합니다. (run)
> /user/local/httpd/bin/apachectl -k start
[Linux] Apache-Tomcat 80포트로 사용하기
웹서버로 많이 사용하는 Apache-Tomcat 에서 tomcat 은 기본적으로 8080 포트에서 동작하는데,
기본 웹서버 포트인 80번 포트로 동작시키기 위해서는 mod_proxy 나 mod_jk 를 이용해서 포트를 연결해 줘야 한다.
mod_proxy 와 mod_jk 의 장단점은 다음과 같다.
@ mod-proxy
- 장점
1. 추가 모듈이 따로 필요 없다. (Apache 2.2 이상에서는 mod_proxy, mod_proxy_http, mod_proxy_ajp, mod_proxy_balancer 가 모두 포함되어 있다.)
2. http, https 혹은 AJP 사용가능
- 단점
1. mod_proxy_ajp 는 8K+ 크기의 패킷을 지원하지 않는다.
2. 기본 load balancer 를 사용한다.
3. Domain model clusterig 을 지원하지 않는다.
@ mod_jk
- 장점
1. 향상된 load balancer
2. 향상된 node failure detection
3. 큰 패킷 사이즈의 AJP 를 지원
- 단점
1. 별도의 모듈을 설치해야 한다.
위의 내용은 아래 링크에서 가져온 내용임.
https://community.jboss.org/people/mladen.turk/blog/2007/07/16/comparing-modproxy-and-modjk
@ mod_proxy 설정
1. Apache 가 설치되어 있으면 별다른 설치는 필요없다.
2. 설정
httpd.conf
ProxyPass /app http://127.0.0.1:8080/app
ProxyPassReverse /app http://127.0.0.1:8080/app
@ mod_jk 설정
1. Httpd Developer 버전을 준비한다. (yum install httpd-devel)
2. Connector 모듈을 다운로드 한다. (http://tomcat.apache.org/connectors-doc/)
3. 설치
cd native/
./configure --with-apxs=/usr/sbin/apxs
make
sure make install
4. 설정
httpd.conf
LoadModule jk_module modules/mod_jk.so
<IfModule jk_module>
JkWorkersFile conf.d/workers.properties
JkMountFile conf.d/uriworkermap.properties
JkShmFile logs/mod_jk.shm
JkLogFile logs/mod_jk.log
JkLogLevel info
JkLogStampFormat "[%a %b %d %H:%M:%S %Y] "
</IfModule>
workers.properties
worker.list=ajp
worker.ajp.port=8009
worker.ajp.host=localhost
worker.ajp.type=ajp13
worker.ajp.lbfactor=1
worker.ajp.socket_timeout=60
uriworkermap.properties
/*.do=ajp
/*.jsp=ajp
/*.js=ajp
/*.gif=ajp
/*.jpg=ajp
/*.css=ajp
