노출되는 이미지가 불편하시겠지만 양해를 구합니다. 노출, 클릭등에 관한 자료로 활용 중입니다.


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




블로그 이미지

StartGuide

I want to share the basic to programming of each category and how to solve the error. This basic instruction can be extended further. And I have been worked in southeast Asia more than 3 years. And I want to have the chance to work another country.

,