Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,595 views

Published on

html, css, javascript 없이 single page application 개발 소개

Published in: Engineering
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. VAADIN JAVA로 SCRIPTLESS한 WEB 구현
  2. 2. 2
  3. 3. ▸ https://www.facebook.com/groups/vaadinkorea/
  4. 4. 소개 VAADIN이란 ▸ 우리는 Java로 구현합니다. ▸ GWT구현과 같지 않습니다. 하지만 GWT처럼도 할수 있죠. ▸ Java to Javascript compiler로 개발하지 않아요.
  5. 5. 소개 돈내고 쓰나요? ▸ GPL버전과 상용버전의 차이 ▸ charts, spreadsheet, Vaadin Touch…
  6. 6. 소개 SERVER-SIDE VAADIN APPLICATION ARCHITECTURE
  7. 7. 소개 ▸ server-side framework을 이용해서 으로 구현하고 ▸ client-side engine으로 실행 ▸ 별도의 plugin이 없이 GWT의 도움으로 대부분의 브라우저에 작동함
  8. 8. 좀더 자세히 소개 COMPONENTS AND WIDGETSETS ▸ Button, Label, Text, TextField, RichTextField ▸ Charts, SpreadSheet ▸ Tree,Grid ▸ Layout(HorizontalLayout,VerticalLayout,FormLayout) ▸ http://demo.vaadin.com/sampler/
  9. 9. 좀더 자세히 소개 MOBILE ▸ Mobile, Pad, Desktop에서의 반응형 웹 구현
  10. 10. 사용툴 오늘 사용툴 ▸ InteliJ IDEA 14 ▸ Maven ▸ Java 1.8
  11. 11. 일단 실행해 봅시다. 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>
  12. 12. 일단 실행해 봅시다. @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
 @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
 public class MyUIServlet extends VaadinServlet {
 
 } SERVLET JAVA CODE
  13. 13. 일단 실행해 봅시다. @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
  14. 14. ARCHITECTURE DEVELOPMENT TOOLCHAIN AND PROCESS
  15. 15. ARCHITECTURE ▸ 일반 웹개발과 유사한 형태로 개발할수 있음 ▸ Eclipse + Maven + Tomcat plugin ▸ InteliJ IDEA + Gradle + spring boot `Run AS` ▸ Pre Build된 theme와 compiled js로 별도의 maven,gradle plugin없이 개발가능
  16. 16. ARCHITECTURE VAADIN RUNTIME ARCHITECTURE
  17. 17. ARCHITECTURE USER SESSION ▸ 모든 화면 구성요서는 USER SESSION에 연결된다. 서블릿이 종료되 도, 구성요소는 was 서버에 존재하게 된다. vaadin의 heartbeat체 크가 살아 있는한…… ▸ 그래서 l4,l7 round robin X X X ▸ tomcat session clustering이 방법이라하지만, 구현이 복잡해짐, ▸ sticky session이 가장 쉬운 해결책
  18. 18. UI-VIEW-NAVIGATOR UI ▸ Single Page Application
  19. 19. UI-VIEW-NAVIGATOR VIEW,NAVIGATOR ▸ UI -> VIEW1, VIEW2, VIEW3 ▸ Navigator로 view를 이동
  20. 20. 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);
 }
 }
  21. 21. 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"));
  22. 22. SPRING @BEAN @AUTOWIRED ▸ crud-with-vaadin
  23. 23. CODE REVIEW
  24. 24. 텍스트 참조 링크 ▸ https://vaadin.com/book/-/page/preface.html ▸ http://spring.io/guides/gs/crud-with-vaadin/ ▸ http://demo.vaadin.com/sampler/
  25. 25. VAADIN FACEBOOK HTTPS:// WWW.FACEBOOK.COM/ GROUPS/VAADINKOREA/

×