Vaadin Appication 만들기
1. 준비물
- Eclipse ( www.eclipse.org )
- Vaadin Plugin for Eclipse ( Eclipse Market Place )
2. 프로젝트 생성
- New -> Vaadin -> Vaddin 7 Project with Maven
- Select a Maven archetype
: Single-module Application Project(vaadin-archetype-application)
- Artiface Id : 필요에 따라 수정
- 생성된 소스 확인
@Theme("mytheme")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
final TextField name = new TextField();
name.setCaption("Type your name here:");
Button button = new Button("Click Me");
button.addClickListener( e -> {
layout.addComponent(new Label("Thanks " + name.getValue()
+ ", it works!"));
});
layout.addComponents(name, button);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
3. Add to Tomcat 8.0
4. Run / Open
* 참조 -자료 동영상
- https://youtu.be/o93ofXBIkf8 , Creating a Project from an Archetype
Hello World 만들기
- init() 함수를 수정
1) Label 추가 하기
@Override protected void init(VaadinRequest vaadinRequest) { Label label = new Label("Hello World!"); setContent(label); }
2) Button 추가 하기
(1) button 생성
@Override protected void init(VaadinRequest vaadinRequest) { Button button = new Button("Greet"); setContent(button); }
(2) button addClickListener() 추가
@Override protected void init(VaadinRequest vaadinRequest) { Button button = new Button("Greet"); button.addClickListener( e->Notification.show("Hello World!") ); setContent(button);
}
(3) text field 입력 받기 , VerticalLayout추가 하기
@Override protected void init(VaadinRequest vaadinRequest) { TextField textField = new TextField("Name"); Button button = new Button("Greet"); button.addClickListener( e->Notification.show("Hi! " + textField.getValue()) ); VerticalLayout verticalLayout = new VerticalLayout(); verticalLayout.addComponents(textField,button); setContent(button); }
(4) verticalLayout.setMargin(true)
(5) verticalLayout.setSpacing(true)
(6) verticalLayout.setMargin(true), verticalLayout.setSpacing(true)
* 참조 -자료 동영상
Bandend 추가하기와 Grid안에 항목 나열하기
1. 사용될 소스 복사 하기
2. 소스 수정 하기
1) grid 추가 하기 ( 전체 Data 불러오기 )
private CustomerService service = CustomerService.getInstance(); private Grid grid = new Grid(); @Override protected void init(VaadinRequest vaadinRequest) { VerticalLayout verticalLayout = new VerticalLayout(); verticalLayout.addComponent( grid ); Listcustomers = service.findAll(); grid.setContainerDataSource( new BeanItemContainer<>(Customer.class, customers) ); // kind of updating updateList(); verticalLayout.setMargin(true); // around space verticalLayout.setSpacing(true); // inside layout space setContent(verticalLayout); }
2) 특정 column만 grid에 표현 오기
private CustomerService service = CustomerService.getInstance(); private Grid grid = new Grid(); @Override protected void init(VaadinRequest vaadinRequest) { VerticalLayout verticalLayout = new VerticalLayout(); grid.setColumns("firstName","lastName","email"); // here you go verticalLayout.addComponent( grid ); Listcustomers = service.findAll(); grid.setContainerDataSource( new BeanItemContainer<>(Customer.class, customers) ); // kind of updating updateList(); verticalLayout.setMargin(true); // around space verticalLayout.setSpacing(true); // inside layout space setContent(verticalLayout); } private void updateList() { List<Customer> customers = service.findAll(); grid.setContainerDataSource(new BeanItemContainer<>(Customer.class, customers)); }
* 참조 -자료 동영상
'Web Tech. > Spring Framework' 카테고리의 다른 글
Spring Boot , Thymeleaf 설정 (0) | 2017.03.20 |
---|---|
2016년 Java 개발 Tool 및 기술 사용 분석/동향 (0) | 2017.03.20 |
XSS ( Cross Site Scripting ) 제거 하기 ( 필터링 ) (0) | 2017.03.07 |
Spring Boot와 Vaadin의 full stack 어플리케이션 ( JPA, PostgreSQL ) (0) | 2017.02.24 |
Maven을 윈도우10에 설치하기 (0) | 2017.02.24 |