Vaadin - Layout
Layout
Vaadin의 화면을 구성하기 위해서는 기본적으로 Layout을 알아야 한다.
Layout 위에 컴포넌트가 구성되어 컴포넌트는 그 레이아웃의 특성에 맞게 배치된다.
또한 레이아웃 자체도 컴포넌트이기 때문에 레이아웃 안에 레이아웃을 추가할 수 있다.
그렇기 때문에 Vaadin에서 제공하는 여러 레이아웃의 조합을 통해 다양한 화면 구성이 가능하다.
기본 Layout
DIV : HTML DIV 태그를 그대로 표현
Vertical : 내부 Component를 수직적으로 나열
@Route("basic-layouts/vertical-layout")
public class BasicLayoutsVerticalLayout extends Div {
public BasicLayoutsVerticalLayout() {
VerticalLayout layout = new VerticalLayout();
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));
layout.add(new Button("Button 4"));
this.setClassName("basic-layouts-example");
this.add(layout);
}
}Vertical Alignment
List<JustifyContentModeOption> options = Arrays .asList(new JustifyContentModeOption("Start (default)", FlexComponent.JustifyContentMode.START), new JustifyContentModeOption("Center", FlexComponent.JustifyContentMode.CENTER), new JustifyContentModeOption("End", FlexComponent.JustifyContentMode.END), new JustifyContentModeOption("Between", FlexComponent.JustifyContentMode.BETWEEN), new JustifyContentModeOption("Around", FlexComponent.JustifyContentMode.AROUND), new JustifyContentModeOption("Evenly", FlexComponent.JustifyContentMode.EVENLY)); ... VerticalLayout layout = new VerticalLayout(); layout.add(new Button("Button 1")); layout.add(new Button("Button 2")); layout.add(new Button("Button 3")); ... radioGroup.addValueChangeListener(e -> { FlexComponent.JustifyContentMode mode = e.getValue().getMode(); layout.setJustifyContentMode(mode); });
Horizontal Alignment
@Route("basic-layouts/vertical-layout-horizontal-alignment") public class BasicLayoutsVerticalLayoutHorizontalAlignment extends Div { private static class AlignmentOption { private final String label; private final FlexComponent.Alignment alignment; public AlignmentOption(String label, FlexComponent.Alignment alignment) { this.label = label; this.alignment = alignment; } public FlexComponent.Alignment getAlignment() { return alignment; } @Override public String toString() { return label; } } public BasicLayoutsVerticalLayoutHorizontalAlignment() { VerticalLayout layout = new VerticalLayout(); layout.add(new Button("Button 1")); layout.add(new Button("Button 2")); layout.add(new Button("Button 3")); List<AlignmentOption> options = Arrays .asList(new AlignmentOption("Start (default)", FlexComponent.Alignment.START), new AlignmentOption("Center", FlexComponent.Alignment.CENTER), new AlignmentOption("End", FlexComponent.Alignment.END), new AlignmentOption("Stretch", FlexComponent.Alignment.STRETCH)); RadioButtonGroup<AlignmentOption> radioGroup = new RadioButtonGroup<>(); radioGroup.setLabel("Horizontal alignment"); radioGroup.setItems(options); radioGroup.setValue(options.get(0)); radioGroup.addValueChangeListener(e -> { FlexComponent.Alignment alignment = e.getValue().getAlignment(); layout.setAlignItems(alignment); }); this.setClassName("basic-layouts-example"); this.add(layout, radioGroup); }
}
Horizontal : 내부 Component를 수평적으로 나열
@Route("basic-layouts/horizontal-layout")
public class BasicLayoutsHorizontalLayout extends Div {
public BasicLayoutsHorizontalLayout() {
HorizontalLayout layout = new HorizontalLayout();
layout.setPadding(true);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));
layout.add(new Button("Button 4"));
this.setClassName("basic-layouts-example");
this.add(layout);
}
}- Vertical Alignment
- Horizontal Alignment
그 외 Layout
Form Layout
폼 레이아웃을 사용하면 여러 열이 있는 반응형 양식을 작성하고 입력 레이블을 입력 위나 옆에 배치할 수 있다
@Route("form-layout-basic")
public class FormLayoutBasic extends Div {
public FormLayoutBasic() {
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
TextField username = new TextField("Username");
PasswordField password = new PasswordField("Password");
PasswordField confirmPassword = new PasswordField("Confirm password");
FormLayout formLayout = new FormLayout();
formLayout.add(firstName, lastName, username, password,
confirmPassword);
formLayout.setResponsiveSteps(
// Use one column by default
new ResponsiveStep("0", 1),
// Use two columns, if layout's width exceeds 500px
new ResponsiveStep("500px", 2));
// Stretch the username field over 2 columns
formLayout.setColspan(username, 2);
add(formLayout);
}
}가로 사이즈가 500px 이하일때
해상도 별로 컬럼 수를 다르게 넣울 수도 있다
formLayout.setResponsiveSteps(
// Use one column by default
new ResponsiveStep("0", 1),
// Use two columns, if the layout's width exceeds 320px
new ResponsiveStep("320px", 2),
// Use three columns, if the layout's width exceeds 500px
new ResponsiveStep("500px", 3));App Layout
App의 전체 구성을 가지고 있는 레이아웃. 메뉴 위치/숨김 처리 등을 할 수 있다.
@Route("app-layout-basic")
public class AppLayoutBasic extends AppLayout {
public AppLayoutBasic() {
DrawerToggle toggle = new DrawerToggle();
H1 title = new H1("MyApp");
title.getStyle()
.set("font-size", "var(--lumo-font-size-l)")
.set("margin", "0");
Tabs tabs = getTabs();
addToDrawer(tabs);
addToNavbar(toggle, title);
}
private Tabs getTabs() {
Tabs tabs = new Tabs();
tabs.add(
createTab(VaadinIcon.DASHBOARD, "Dashboard"),
createTab(VaadinIcon.CART, "Orders"),
createTab(VaadinIcon.USER_HEART, "Customers"),
createTab(VaadinIcon.PACKAGE, "Products"),
createTab(VaadinIcon.RECORDS, "Documents"),
createTab(VaadinIcon.LIST, "Tasks"),
createTab(VaadinIcon.CHART, "Analytics")
);
tabs.setOrientation(Tabs.Orientation.VERTICAL);
return tabs;
}
private Tab createTab(VaadinIcon viewIcon, String viewName) {
Icon icon = viewIcon.create();
icon.getStyle()
.set("box-sizing", "border-box")
.set("margin-inline-end", "var(--lumo-space-m)")
.set("margin-inline-start", "var(--lumo-space-xs)")
.set("padding", "var(--lumo-space-xs)");
RouterLink link = new RouterLink();
link.add(icon, new Span(viewName));
// Demo has no routes
// link.setRoute(viewClass.java);
link.setTabIndex(-1);
return new Tab(link);
}
}'Vaadin' 카테고리의 다른 글
| Vaadin - Component (0) | 2022.12.19 |
|---|---|
| Vaadin 소개 (0) | 2022.12.19 |