VAADINJAVA로 SCRIPTLESS한 WEB 구현

2

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

소개

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> <groupId>com.vaadin</groupId> <artifactId>vaadin-client-compiled</artifactId> <version>${vaadin.version}</version> </dependency> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-themes</artifactId> <version>${vaadin.version}</version> </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")); Button view2Button = new Button("Goto View2"); view2Button.addClickListener(event -> navigator.navigateTo("view2")); menu.addComponents(view1Button, view2Button); } }

UI-VIEW-NAVIGATOR

LISTENERS AND EVENTS

Button view1Button = new Button("Goto View1"); view1Button.addClickListener(event -> navigator.navigateTo("view1")); Button view2Button = new Button("Goto View2"); view2Button.addClickListener(event -> navigator.navigateTo("view2"));

SPRING

@BEAN @AUTOWIRED

▸ crud-with-vaadin

CODE REVIEW

텍스트

참조 링크

▸ 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/