'2017/01'에 해당되는 글 3건

  1. 2017.01.23 [VM] 초간단 Vagrant 사용법
  2. 2017.01.20 [OpenUI5] Data Binding
  3. 2017.01.15 [OpenUI5] Basic UI
분류없음2017.01.23 14:14
 
 

테스트 환경


Ubuntu (16.04.1 LTS)


Virtual Box (V5.1.14)


Vagrant (1.9.1)



먼저 Vagrant 에 대해서 간략히 소개하자면.. 개발환경을 쉽고 빠르게 설정하기 위한 Virtual Machine 관리 툴 입니다. 


Vagrant는 Virtual Box 같은 Virtual Machine 프로그램을 명령어로 제어합니다.



@ Virtual Box 와 Vagrant 설치 


설치는 OS 환경에 따라 약간씩 다르지만 Ubuntu 기준으로 설명합니다. (Windows 나 Mac OS의 경우 GUI 로 쉽게 설치가 가능합니다.)


1) 먼저 Virtual Box 를 설치합니다. 


1. Virtual Box 설치에 앞서서 필요한 의존성 라이브러리들을 설치합니다. 


$ sudo apt install libqt5x11extras5 libsdl1.2debian libsdl-ttf2.0-0


각자 환경에 따라서 위의 라이브러리 이외에도 추가로 필요한 것들이 있을 수도 있습니다.


2. 홈페이지에서 deb 패키지를 다운로드 합니다. (https://www.virtualbox.org/wiki/Linux_Downloads)


3. dpkg 명령어로 다운로드 받은 패키지를 설치합니다. (아래는 5.1.14 버전 예시)


$ sudo dpkg -i  virtualbox-5.1.5.1.14-112924-Ubuntu-xenial_amd64.deb



2) 이번에는 vagrant 를 설치합니다.


1. 홈페이지에서 deb 패키지를 다운로드 합니다. (https://www.vagrantup.com/downloads.html)


2. dpkg 명령어로 다운로드 받은 패키지를 설치합니다. (아래는 1.9.1 버전 예시)


$ sudo dpkg -i vagrant_1.9.1_x86_64.deb 



@ Vagrant Box


Vagrant는 Virtual Machine을 쉽고 빠르게 생성하기 위해서 Box를 이용합니다.


Box 는 Virtual Machine 을 생성하기 위한 이미지 정도로 이해하시면 됩니다.



1) 먼저 Box 관리에 대한 명령어를 알아보겠습니다.


1. 현재 로컬 컴퓨터에서 사용가능한 Box들을 확인하는 방법


$ vagrant box list 



2. 로컬 컴퓨터에 필요한 Box 를 추가하는 방법


먼저 필요한 Box 의 URI를 확인합니다. Vagrant 홈페이지에 있는 Box 링크에서 찾을 수도 있고, (https://atlas.hashicorp.com/boxes/search) 아니면 필요한 Box 이미지를 다운로드 받아서 파일 경로를 지정할 수도 있습니다.


아래 명령어를 사용하면 vagrant 가 Box를 리스트에 추가합니다.


$ vagrant box add [box name or URI] --clean



3. 로컬 컴퓨터에 있는 Box를 제거 하는 방법


필요에 따라 같은 Box의 다른 버전들을 같이 가지고 있는 경우 버전을 명시해 주어야 합니다.


$ vagrant box remove [box name] --box-version [box version] 



4. 로컬 컴퓨터의 Box가 최신 버전인지 확인하는 방법


$ vagrant box outdated --global



@ Virtual Machine 관리 명령어


1. Virtual Machine 생성


$ vagrant init [box name or URI] --box-version [box version]


위의 명령어는 명령어를 실행한 경로에 "Vagrantfile" 을 생성하는데, 이 파일은 실제 Virtual Machine 을 생성할 때 필요한 설정 정보입니다.


실제로 존재하지 않는 위치를 입력해도 "Vagrantfile" 은 생성이 되지만, 다음 과정에 에러가 발생하게 됩니다.


2. Virtual Machine 시작 


$ vagrant up


위의 명령어는 "Vagrantfile" 이 있는 위치에서 실행되어야 하며, 설정파일에 맞게 새 Virtual Machine 을 Virtual Box에 실제로 생성하고 Virtual Machine 을 시작합니다. 만약 로컬 컴퓨터에 존재하지 않는 Box의 경우라도 위의 Box 링크 사이트에서 검색이 가능한 Box의 경우 다운로드하고 로컬 컴퓨터에 Box를 추가하고 나서 Virtual Machine을 생성하게 됩니다.


3. Virtual Machine 에 접속하기


$ vagrant ssh


위의 명령어를 이용해서 해당 Virtual Machine의 ssh 서비스에 접속할 수 있습니다. "Vagrantfile" 이 위치한 곳에서 실행해야 하며, ssh 를 직접 이용하고자 한다면 인증 키를 확인해서 접속할 수 있으나 상당히 번거롭기 때문에 위의 명령어를 이용하는 것이 가장 편합니다. 윈도우 서버를 위한 rdp 나 powershell 명령어도 있는데 제대로 동작하는지 확인은 해보지 못했습니다.


4. Virtual Machine 종료시키기


$ vagrant halt



5. Virtual Machine 삭제하기


$ vagrant destroy



~

신고
 
 
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

티스토리 툴바