Vaadin Appication 만들기

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)

* 참조  -자료 동영상

https://youtu.be/9-qwPfpSHWc

Bandend 추가하기와 Grid안에 항목 나열하기

1. 사용될 소스 복사 하기

- CustomerStatus.java

- Customer.java

- CustomerService.java 

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 );
    	
    	List customers = 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 );
    	
    	List customers = 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));
    }

 

* 참조  -자료 동영상

https://youtu.be/0W0frepDKWI