vaadin layout 실습

VerticalLayout, HorizontalLayout의 동작(?)을 실습해 봤다.

scss파일에 css클래스를 등록하고, 

setStyleName에서 사용하는 방법정도 더 익히는 정도 일려나..

 

Designer License를 구매하면 이런 건...

 

 

1. vseminar.scss
   

   @import "../valo/valo.scss";
   
   @mixin vseminar {
     @include valo;
   
     // Insert your own theme rules here
     .layout-with-border {
     	border: 1px solid #c0c0c0;
     }
   }

2. LayoutTest.java
   

   /**
    *
    */
   package com.dbility.vseminar.vaadin_seminar.layout;
   
   import com.vaadin.ui.Alignment;
   import com.vaadin.ui.HorizontalLayout;
   import com.vaadin.ui.Label;
   import com.vaadin.ui.VerticalLayout;
   import com.vaadin.ui.themes.ValoTheme;
   
   /**
   *
   * Description
   *
   *
   * @author hyperrookie@gmail.com
   *
   * @version 1.0.0
   * @date 2018. 6. 16.
   *=======================================================================
   * Date            Name                     Revision History
   *=======================================================================
   * 2018. 6. 16.    hyperrookie@gmail.com    Creation
   *=======================================================================
   */
   @SuppressWarnings("serial")
   public class LayoutTest extends VerticalLayout {
   
   	public LayoutTest() {
   
   		setSizeFull(); // 최상위 전체크기로
   		setMargin(false);
   		setSpacing(false);
   
   		final VerticalLayout layout = new VerticalLayout();
   		layout.setStyleName("layout-with-border");
   		layout.setCaption("layout");
   		/*layout.setMargin(true);
   		layout.setSpacing(true);*/
   
   		final VerticalLayout box = new VerticalLayout();
   		box.setStyleName("layout-with-border");
   		box.setWidth(50, Unit.PERCENTAGE);
   		box.setHeightUndefined();
   		box.setCaption("box");
   		final Label title = new Label("Title");
   		title.setStyleName(ValoTheme.LABEL_H1);
   		title.setStyleName(ValoTheme.LABEL_COLORED);
   		title.setCaption("title");
   
   		box.addComponent(title);
   
   		final HorizontalLayout inner = new HorizontalLayout();
   		inner.setStyleName("layout-with-border");
   		inner.setSizeUndefined();
   		inner.setCaption("inner");
   
   		Label first = new Label("first");
   		first.setStyleName(ValoTheme.LABEL_H1);
   		first.setStyleName(ValoTheme.LABEL_COLORED);
   		Label second = new Label("second");
   		second.setStyleName(ValoTheme.LABEL_H1);
   		second.setStyleName(ValoTheme.LABEL_COLORED);
   		Label third = new Label("third");
   		third.setStyleName(ValoTheme.LABEL_H1);
   		third.setStyleName(ValoTheme.LABEL_COLORED);
   
   		final VerticalLayout fourth = new VerticalLayout();
   		fourth.setStyleName("layout-with-border");
   		fourth.setSizeFull();
   		fourth.setCaption("fourth");
   		Label fifth = new Label("fifth");
   		fifth.setStyleName(ValoTheme.LABEL_H1);
   		fifth.setStyleName(ValoTheme.LABEL_COLORED);
   		fourth.addComponent(fifth);
   
   		inner.addComponents(first,second,third,fourth);
   		//inner.setComponentAlignment(fourth, Alignment.TOP_RIGHT);
   
   		box.addComponent(inner);
   		box.setComponentAlignment(title, Alignment.MIDDLE_CENTER);
   
   		layout.addComponent(box);
   		layout.setComponentAlignment(box, Alignment.MIDDLE_CENTER);
   
   		addComponent(layout);
   
   	}
   
   }