넷빈(NetBeans)6.9에서 Vaadin 웹 프레임워크 사용하기-01-설치 및 기본

Written on 오전 3:41 by 강여사(J.Y.Kang)

이번엔 Vaadin 에 대해 소개해 보고자 합니다.

Vaadin...ㅋㅋ 이건 원래 영어가 아닙니다. 핀란드말로 female reindeer(암순록)를 뜻하죠.. 그래서인지 Vaadin의 기본 스타일시트 이름이 바로 reindeer 입니다.
역시 이 동네(IT)네이밍 센스는 언제봐도 놀랍습니다. 쿄쿄

아무튼~
Vaadin은 한마디로 RIA(Rich Internet Application)을 위한 오픈 소스 웹 어플리케이션 프레임워크입니다.

자바스크립트 라이브러리와 브라우저 플러그인 기반 솔루션과 대조적으로, Vaadin은 서버-사이드 아키텍처로, 따라서 로직의 대다수는 서버에서 실행된다는 걸 의미합니다. AJAX 테크롤로지는 사용자의 경험을 풍부하고 인터랙티브하게 만들어주는 브라우저-사이드에서의 사용입니다. Vaadin의 클라이언트-사이드는 GWT위에 빌트인되며 확장 가능합니다.

Vaadin의 코어는 자바 라이브러리로, 웹-기반 사용자 인터페이스의 하이 퀄리티를 쉽게 생성하고 유지보수할 수 있도록 설계되었습니다. Vaadin의 서버-주도 프로그래밍 모델의 주요 아이디어는 웹이 아닌, 마치 AWT,Swing 또는 SWT과 같은 보편적인 툴킷을 가진 자바 데스크탑 어플리케이션을 프로그래밍 하듯 사용자 인터페이스를 쉽게 만들어줍니다. 이 서버-주도 프로그램 모델로, Vaadin은 브라우저와 서버사이에 브라우저 및 AJAX 커뮤니테이션에 있어 UI 관리를 케어합니다. Vaadin 방식을 사용하게 되면 더이상 HTML 이나 자바스크립트와 같은 브라우저 기술을 배우거나 디버그 할 필요가 없습니다. ^^;

Vaadin 라이브러리는 사용자 인터페이스 프리젠테이션과 로직을 명확히 분리하여 각각 독립적으로 개발할 수 있도록 해줍니다. 어플리케이션의 비주얼 외양은 themes 를 사용하여 접근하고 있습니다. Themes는 CSS 와 HTML 페이지 템플릿을 사용하여 사용자 인터페이스 외양을 관리합니다. Vaadin은 기본 테마(reindeer) 뿐 아니라, 사용자 지정 테마를 만들수도 있습니다. 백엔드에서는, GWT(Google Web Toolkt)를 사용하여, 브라우저에서 사용자 인터페이스를 렌더링하고 있습니다. GWT 프로그램은 자바로 만들어, 자바스크립트로 컴파일됩니다. Vaadin이 실제 어플리케이션 로직을 서버에서 핸들링하는 동안, GWT는 향상된 사용자 인터페이스 컴포넌트(GWT 용어로 위젯)와 브라우저에서의 인터랙션 로직을 구현에 이상적입니다. Vaadin은 확장 가능하도록 설계되어있는제, 실제 써드파티 GWT 컴포넌트들과 쉽게 사용되며, Vaadin 에서 제공된 컴포넌트 레파토리에 추가할 수도 있습니다. GWT의 사용은 필요로 하는 모든 코드를 순수 자바로 쓸 수 있다는 걸 의미합니다.

좀더 자세한 Vaadin의 기능들은 다음을 참고 Vaadin features page 하시기 바랍니다.

이제 Vaadin 플러그인을 넷빈에 설치하고 간단한 어플리케이션을 만들어 보도록 하겠습니다.

작업환경은 다음과 같습니다.

넷빈(NetBeans 6.9)
JDK 6
Vaadin Plugin for NetBeans IDE 현재 최신 버전 (0.1.1): 아래 다운로드 참조
글래스 피시 v 3.0.1 (또는 톰캣 서버 6.x 이상)

우선 Vaadin 플러그인을 다운로드 받습니다.
다운로드 링크는 다음입니다.
http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=21965
넷빈즈 IDE를 위한 Vaadin 플러그인은 Kenai 에서 액세스가능한 오픈소스, 플러그인 프로젝트 입니다.
위 해당 사이트로 이동하여 Download 버튼 클릭후 저장

넷빈-도구-플러그인 선택
다운로드 받은 플러그인 설치시에는 탭의 다운로드를 클릭한 후,
아래 플러그인추가 버튼을 눌러 해당 다운로드 받은 nbm 파일을 열어 줍니다 - 열기
Vaadin 플러그인에 대한 내용이 올라옵니다. 왼쪽 아래 설치를 눌러 진행합니다
설치 프로그램의 지시사항에 따라 진행- 다음
약관에 동의(체크)- 설치
서명에 대한 경고가 뜨는데 무시하고 계속
마침
이제 Vaadin 자바 웹 어플리케이션 프로젝트를 만들도록 하겠습니다
프로젝트창에서 마우스 오른쪽 클릭 - 새 프로젝트
카테고리에서 Java 웹 - Web Application - 선택 후 다음
프로젝트 이름은 적당히...HelloVaadin 으로 줬습니다
경로도 적당히..
다음
서버설정인데 사실 지금 프로젝트는 글래스피시, 톰캣 상관없고 버전 역시 EE6, EE5 상관없습니다.
해서 그냥 기본으로 잡히는 글래스피스 v3.0.1 에, EE6 Web 그대로 잡아줬습니다 - 다음
프레임워크 설정 페이지에서 Vaadin 6.1.3 을 선택합니다
선택체크후 아래 구성 내용이 제시됩니다. (기본내용확인)
Vaadin Servlet Name: VaadinApplication
Vaadin URL 패턴: /Vaadin/*
Vaadin Applicatoin Class: MyApplication
Main Package : com.example.vaadin
마침
이제 심플한 Vaadin Web Application 이 만들어집니다. 프로젝트 창에서 프로젝트의 구조를 보면 일반 웹 어플리케이션 프로젝트와 Vaadin Web Application 과 차이점을 발견할 수 있습니다.
* Vaadin 프로젝트에는 기본 JSP 파일이 없습니다.
* 그대신, Vaadin 프로젝트는 기본 자바 파일이 있습니다.
* Vaadin 프로젝트는 당연 Vaadin 라이브러리가 잡혀 있습니다.
* 어떤 자바스크립트나 기타 XML 파일들이 추가되어 있지 않습니다.
그럼 src 에 있는 MyApplication.java 파일을 열어 내용을 확인합니다.
맨 위 import 를 보면 Vaadin에 대한 application 과 ui 패키지가 임포트 되어 있는 걸 볼 수 있습니다. 이 내용이 전형적인 JSP 등의 페이지 사용을 대신하게 됩니다.
이 내용을 확인하기 위해 프로젝트를 바로 실행시킵니다. 프로젝트 창에서 마우스 오른쪽 클릭 - 실행.
글래스피시 서버가 구동되고 프로젝트가 컴파일, 배포 과정을 거친후 브라우저에 내용이 표시됩니다.
브라우저에 표시된 내용은 다음과 같습니다. (주소표시줄의 의미나 텍스트, 아이콘 등에 대해 좀더 자세히 살펴 보시기 바랍니다 ^^)
우선 여기에 스타일시트를 작업하기 위해 간단히 버튼을 하나 추가 하겠습니다.
MyApplication.java 에 init()메소드에서 다음 내용(굵은 글씨)를 추가합니다.
======================================================
...
public class MyApplication extends Application {
@Override
public void init() {
Window mainWindow = new Window("MyApplication");
Label label = new Label("Hello Vaadin user");
mainWindow.addComponent(label);
Button button = new Button("My Button");
mainWindow .addComponent(button );
setMainWindow(mainWindow);
}
======================================================
저장후 프로젝트를 다시 빌드하고 실행합니다. 프로젝트에서 마우스 오른쪽 클릭 - 지우고 빌드
프로젝트를 실행합니다. 프로젝트에서 마우스 오른쪽 클릭 - 실행
브라우저에 텍스트 아래 버튼이 나타납니다.
바로 아래에서 스타일시트를 변경해보면 알지만 버튼에 대한 기본적인 스타일시트가 이미 설정되어 있고, 이 스타일시트가 바로 reindeer 입니다.
그럼 이제 스타일시트를 바꿔보도록 하겠습니다.
MyApplication.java 의 init() 메소드에서 Ctrl+Space 키를 누른후 철자(sett...)를 치면 그림처럼 API 가 올라옵니다.
선택할 메소드는 setTheme(String theme)입니다.
Vaadin에서는 themes 를 이용하여 로직과 UI 외형을 분리하는데, Themes 는 CSS 스타일시트, 커스텀 HTML 레이아웃 뿐만 아니라 필요로 하는 각종 그래픽 등을 포함할 수 있습니다.
Vaadin 프레임워크 6.1.3 에는 기본적으로 2개의 빌트인 테마가 들어있는데, 하나는 reindeer 와 runo 가 그것이고, 넷빈즈 IDE Vaadin 플러그인이 vaadin jar 파일로부터 이러한 테마를 동적으로 로드합니다.
어찌됐던 코드부분은 다음과 같습니다.
====================================
setTheme("runo");
====================================
팁: 나중에 reindeer 로 바꿔보면 원래 적용됐던 기본 테마와 같은 모양인 걸 알 수 있습니다.
프로젝트에서 마우스 오른쪽 클릭 - 지우고 빌드(clean and build)
프로젝트에서 마우스 오른쪽 클릭 - 실행
그럼 아까와 다른 모양의 버튼 및 배경 등이 나타나는 걸 확인할 수 있습니다. (runo 적용)
이제 커스텀, 사용자 정의 Vaadin Theme를 만들어 보도록 하겠습니다.
사용자 정의 테마는 반드시 웹폴더(Web Pages)아래 VAADIN/themes 구조아래 폴더를 만들어야 합니다.
따라서 이 규칙으로 만약 angel 이라는 사용자 정의 테마를 만든다면 web/VAADIN/themes/angel 로 경로가 만들어져야 합니다.
그리고 모든 테마는 반드시 styles.css(철자 주의) 라는 이름의 스타일시트 파일을 포함해야 합니다.
이 두 가지(path와 stylesheer)를 제외하고 기타 다른 내용은 적절히 알아서 작업하면 됩니다.
참고로 보통 이미지에 관한 사항은 imgs, 레이아웃 관련해서는 layouts , 그리고 추가 스타일시트는 css로 보통 서브폴더 작업을 하는게 네이밍 컨벤션이라고 할 수 있겠습니다.
우선 하나씩 폴더를 만듭니다. 일단 프로젝트의 Web Pages에서 마우스 오른쪽 클릭, 새로만들기 - other
카테고리에서 기타, file types 에 보면 맨아래 폴더가 있습니다. 다음
폴더 이름은 VAADIN 으로, 그리고 경로는 web 으로 지정합니다. 마침
그리고 다시 VAADIN 폴더 아래 themes 폴더를 또 만들어야 하므로 같은 절차로 진행합니다.
프로젝트 창의 좀전에 만든 VAADIN 폴더에서 마우스 오른쪽 클릭, 새로만들기-폴더
폴더 이름은 themes , 경로는 web/VAADIN 으로 맞춥니다. 마침
이제 마지막으로 본인 테마 폴더를 만듭니다. 역시 좀전에 만든 themes 에서 마우스 오른쪽 클릭, 새로만들기 - 폴더
폴더 이름을 mytheme 라고 줬습니다. 경로는 web/VAADIN/themes 로 설정되어 있습니다.
마침
그럼 이제 이 mytheme에서 이번엔 스타일시트 파일을 만듭니다.
마우스 오른쪽을 클릭하여 새로 만들기 - 종속형 파일(CSS)
파일이름은 반드시 styles 라고 줍니다.
해당 파일의 경로를 확인하면 다음과 같습니다.
web/VAADIN/themes/mytheme
마침
그럼 안에 내용을 작성합니다.
==============================================================
@import "../runo/styles.css";
/* Import the runo theme for components not described in your CSS files*/
.v-button {
display: inline-block;
zoom: 1;
text-align: center;
text-decoration: none;
border: 2px outset #fff;
background: #f00;
cursor: pointer;
white-space: nowrap;
margin: 0;
padding: .2em 1em;
color: inherit;
font: inherit;
line-height: normal;
-khtml-user-select: none;
-moz-user-select: none;
-ie-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* this is the Vaadin CSS class for a button client */
==============================================================
그럼 작성된 테마를 설정하기 위해 MyApplication.java 파일을 열어 runo 대신 mytheme 라고 바꿔줍니다. (그림 참고)
그리고 다시 프로젝트를 빌드 합니다. 프로젝트에서 마우스 오른쪽 지우고 빌드
해당 프로젝트를 실행합니다
스타일시트에 제공된 대로 버튼의 배경(background)가 빨강색으로 바꿔져 있는걸 확인할 수 있습니다.
그럼 이제 여기서 좀더 Vaadin UI 컴포넌트와 리스터를 결부시켜 복잡한 어플리케이션을 만들어 보도록 하겠습니다.
우선 새창에 관한 클래스 설계를 위해 자바클래스를 추가합니다.
프로젝트의 src 아래 com.example.vaadin 패키지에서 오른쪽 마우스 클릭 (이렇게 하면 해당 위치가 경로로 자동으로 들어가기 때문에 이렇게 하는 거고, 그냥 하면 나중에 드래그 메뉴등으로 경로를 선택해주면 됩니다), 새로 만들기-자바 클래스
클래스 이름은 MyFirstWindow,
패키지 이름은 com.example.vaadin 으로 선택합니다. - 마침
아래 내용을 작성합니다. 굵은 글씨
==============================================================
package com.example.vaadin;
public class MyFirstWindow extends Window{
public MyFirstWindow(String windowName){
this.setCaption(windowName);
this.setPositionX(100);
this.setPositionY(100);
this.setWidth(500, Window.UNITS_PIXELS);
this.setHeight(500, Window.UNITS_PIXELS);
this.addComponent(new Button("Button 1"));
this.addComponent(new Button("Button 2"));
}
}
==============================================================
그리고 임포트 오류문제는 fix import(가져오기 고정, 단축키 Ctrl+Shift+I)로 해결합니다.
버튼과 라벨에 대해 임포트 클래스를 묻는데 모두 vaadin 것으로 선택합니다. OK
코드 확인
다시 MyApplication.java 파일로 돌아가서(Ctrl+tab키를 이용하면 편합니다). 아래 내용으로 바꿉니다.
=======================================================================

...
public class MyApplication extends com.vaadin.Application implements Button.ClickListener{
private Button b;
public void init() {
setTheme("mytheme");
Window main = new Window("Hello NetBeans ");
setMainWindow(main);
main.addComponent(new Label("Hello World!"));
b=new Button("My Button");
main.addComponent(b);
b.addListener(this);
}

//When the client clicks button b, the browser shows a window in the client zone
public void buttonClick(ClickEvent event) {
if(event.getButton()==this.b){
this.getMainWindow().addWindow(new MyFirstWindow("This is my first window!"));
}
}
}
========================================================================

ClickEvent 의 임포트 문제를 해결하려면 앞의 전구모양의 아이콘을 마우스로 클릭하면 해결에 대한 팝업창이 나타납니다. 첫번째에 있는 com.vaadin.ui.Button.ClickEvent 에 대해 가져오기 추가를 클릭하면 임포트가 자동 작성됩니다.
저장하고, 프로젝트를 다시 빌드(지우고 다시 빌드) 한 후, 실행합니다
왼쪽 상단의 버튼을 클릭하면 가운데 새로운 창이 나타납니다. (버튼 클릭시 마다 창이 계속 겹쳐지고, 이 창들은 마우스로 옮기거나 크기를 변경할 수도 있습니다. 각자 해보십시오 ^^;)
************************************************************
그럼 마지막으로 디버깅 작업을 해보도록 하겠습니다. 뭐 방법은 다른 디버깅과 별 차이가 없습니다.
MyApplication 클래스에서 Window main = new Window("Hello Netbeans");
에서 Ctrl+F8를 누르거나 왼쪽 라인표시 있는 곳에 마우스를 클릭하면 디버깅 브레이크포인트(중단점)이 핑크색 줄로 표시됩니다.
역시 마찬가지 방법으로 아래 if(event.getButton() == this.b) { 이곳에도 중단점을 표시합니다.
그런 다음 프로젝트 디버깅을 하는데 만약 이 프로젝트가 메인 프로젝트면 Ctrl+F5 키, 위의 메뉴에 디버그 아이콘 등을 사용하시거나, 메인 프로젝트가 아니라면 프로젝트에서 마우스 오른쪽 클릭해서 디버그 메뉴를 서낵합니다.
디버그 창이 열리고 디버그 콘솔등이 출력됩니다. 중단점에서 정지되며 녹색으로 표시됩니다.
아래 Debugger Console 을 보면 해당 내용이 제시되고, 계속 진행하려면 F5키나 continue 아이콘을 누르면 다음으로 진행됩니다.
그런 다음 브라우저에서 버튼을 누르면 다시 2차 중단점으로 이동하고 buttonClick 메소드의 중단점이 녹색으로 나타납니다.
기타 step over, into, out 등은 아이콘을 적절히 사용하시면 됩니다.
디버그 세션 종료 단축키는 Shift+F5 입니다.

이상 간단하게 Vaadin 프레임워크 설치 및 기본 사용법을 알아봤습니다.
추후 시간되는 대로 여러 편리한 컴포넌트 사용이나 JSON 메시지 사용 등에 대해서도 올려드리겠습니다. ^^;
수고하셨습니다.

Posted in netbeans |

If you enjoyed this post Subscribe to our feed