Upload
jae-il-lee
View
2.786
Download
10
Embed Size (px)
Citation preview
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/