�ݺ�ߣ

VAADIN
JAVA로 SCRIPTLESS한 WEB 구현

▸ https://www.facebook.com/groups/vaadinkorea/

VAADIN으로 스크립트 없는 자바 웹 애플리케이션 만들기

소개
VAADIN이란
▸ 우리는 Java로 구현합니다.
▸ GWT구현과 같지 않습니다. 하지만 GWT처럼도 할수 있죠.
▸ Java to Javascript compiler로 개발하지 않아요.

소개
돈내고 쓰나요?
▸ GPL버전과 상용버전의 차이
▸ charts, spreadsheet, Vaadin Touch…

소개
SERVER-SIDE VAADIN APPLICATION ARCHITECTURE

소개
▸ server-side framework을 이용해서 으로 구현하고
▸ client-side engine으로 실행
▸ 별도의 plugin이 없이 GWT의 도움으로 대부분의 브라우저에 작동함

좀더 자세히 소개
COMPONENTS AND WIDGETSETS
▸ Button, Label, Text, TextField, RichTextField
▸ Charts, SpreadSheet
▸ Tree,Grid
▸ Layout(HorizontalLayout,VerticalLayout,FormLayout)
▸ http://demo.vaadin.com/sampler/

좀더 자세히 소개
MOBILE
▸ Mobile, Pad, Desktop에서의 반응형 웹 구현

사용툴
오늘 사용툴
▸ InteliJ IDEA 14
▸ Maven
▸ Java 1.8

일단 실행해 봅시다.
POM.XML
<dependencies> 
<dependency> 
<groupId>javax.servlet</groupId> 
<artifactId>javax.servlet-api</artifactId> 
<version>3.0.1</version> 
<scope>provided</scope> 
</dependency> 
 
<dependency> 
<groupId>com.vaadin</groupId> 
<artifactId>vaadin-server</artifactId> 
<version>${vaadin.version}</version> 
</dependency> 
<dependency> 
<artifactId>vaadin-client-compiled</artifactId> 
</dependency> 
<dependency> 
<artifactId>vaadin-themes</artifactId> 
</dependency> 
</dependencies>

@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) 
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false) 
public class MyUIServlet extends VaadinServlet { 
 
}
SERVLET JAVA CODE

@Theme("valo") 
public class MyUI extends UI { 
 
@Override 
protected void init(VaadinRequest vaadinRequest) { 
final VerticalLayout layout = new VerticalLayout(); 
layout.setMargin(true); 
setContent(layout); 
 
Button button = new Button("Click Me"); 
button.addClickListener(event -> layout.addComponent(new Label("Thank you for
clicking"))); 
layout.addComponent(button); 
} 
} 
VAADIN JAVA CODE

ARCHITECTURE
DEVELOPMENT TOOLCHAIN AND PROCESS

ARCHITECTURE
▸ 일반 웹개발과 유사한 형태로 개발할수 있음
▸ Eclipse + Maven + Tomcat plugin
▸ InteliJ IDEA + Gradle + spring boot `Run AS`
▸ Pre Build된 theme와 compiled js로 별도의 maven,gradle
plugin없이 개발가능

ARCHITECTURE
VAADIN RUNTIME ARCHITECTURE

ARCHITECTURE
USER SESSION
▸ 모든 화면 구성요서는 USER SESSION에 연결된다. 서블릿이 종료되
도, 구성요소는 was 서버에 존재하게 된다. vaadin의 heartbeat체
크가 살아 있는한……
▸ 그래서 l4,l7 round robin X X X
▸ tomcat session clustering이 방법이라하지만, 구현이 복잡해짐,
▸ sticky session이 가장 쉬운 해결책

UI-VIEW-NAVIGATOR
UI
▸ Single Page Application

UI-VIEW-NAVIGATOR
VIEW,NAVIGATOR
▸ UI -> VIEW1, VIEW2, VIEW3
▸ Navigator로 view를 이동

UI-VIEW-NAVIGATOR
@Theme("valo") 
public class MyUI extends UI { 
private Navigator navigator; 
 
@Override 
protected void init(VaadinRequest vaadinRequest) { 
final VerticalLayout layout = new VerticalLayout(); 
final VerticalLayout main = new VerticalLayout(); 
final HorizontalLayout menu = new HorizontalLayout(); 
 
main.setMargin(true); 
layout.addComponents(menu, main); 
 
setContent(layout); 
 
navigator = new Navigator(this, main); 
navigator.addView("", new DefaultView()); 
navigator.addView("view1", new View1()); 
navigator.addView("view2", new View2()); 
 
Button view1Button = new Button("Goto View1"); 
view1Button.addClickListener(event -> navigator.navigateTo("view1")); 
 
menu.addComponents(view1Button, view2Button); 
} 
}

UI-VIEW-NAVIGATOR
LISTENERS AND EVENTS
view2Button.addClickListener(event -> navigator.navigateTo("view2"));

SPRING
@BEAN @AUTOWIRED
▸ crud-with-vaadin

텍스트
참조 링크
▸ https://vaadin.com/book/-/page/preface.html
▸ http://spring.io/guides/gs/crud-with-vaadin/
▸ http://demo.vaadin.com/sampler/

VAADIN
FACEBOOK
HTTPS://
WWW.FACEBOOK.COM/
GROUPS/VAADINKOREA/

�ݺ�ߣ

VAADIN으로 스크립트 없는 자바 웹 애플리케이션 만들기

Recommended

More Related Content

What's hot (9)

Viewers also liked (20)

Similar to VAADIN으로 스크립트 없는 자바 웹 애플리케이션 만들기 (20)

VAADIN으로 스크립트 없는 자바 웹 애플리케이션 만들기