Refactoring UI Components - separated Elements.

pom.xml

@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 	<modelVersion>4.0.0</modelVersion>
 
 	<groupId>de.kreth.vaadin.clubhelper</groupId>
@@ -86,6 +88,11 @@
 			<groupId>com.vaadin</groupId>
 			<artifactId>vaadin-context-menu</artifactId>
 		</dependency>
+		<dependency>
+			<groupId>org.vaadin.addons</groupId>
+			<artifactId>border-layout-addon</artifactId>
+			<version>1.0</version>
+		</dependency>
 
 		<dependency>
 			<groupId>org.hibernate</groupId>

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/MainView.java

@@ -7,14 +7,15 @@ import java.util.concurrent.Executors;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.vaadin.addon.borderlayout.BorderLayout;
 import org.vaadin.addon.calendar.ui.CalendarComponentEvents;
 
 import com.vaadin.event.selection.SelectionEvent;
 import com.vaadin.navigator.Navigator;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
-import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.UI;
+import com.vaadin.ui.VerticalLayout;
 
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.business.EventBusiness;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.GroupDao;
@@ -22,10 +23,13 @@ import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.PersonDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.ClubEvent;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.Person;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent.ClubEventProvider;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.HeadComponent;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.PersonEditDialog;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.PersonGrid;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.SingleEventView;
 
-public class MainView extends HorizontalLayout implements View {
+public class MainView extends BorderLayout implements View {
 
 	public static final String VIEW_NAME = "";
 
@@ -42,12 +46,14 @@ public class MainView extends HorizontalLayout implements View {
 	private EventBusiness eventBusiness;
 	private Navigator navigator;
 
-	public MainView(PersonDao personDao, GroupDao groupDao, EventBusiness eventBusiness) {
+	private HeadComponent head;
+
+	private SingleEventView eventView;
 
+	public MainView(PersonDao personDao, GroupDao groupDao, EventBusiness eventBusiness) {
 		this.personDao = personDao;
 		this.groupDao = groupDao;
 		this.eventBusiness = eventBusiness;
-
 	}
 
 	@Override
@@ -55,37 +61,7 @@ public class MainView extends HorizontalLayout implements View {
 		View.super.enter(event);
 		if (this.navigator == null) {
 
-			navigator = event.getNavigator();
+			initUI(event);
-
-			personGrid = new PersonGrid(groupDao, personDao);
-			personGrid.setId("main.person");
-			personGrid.setCaption("Personen");
-			personGrid.onClosedFunction(() -> detailClosed());
-			personGrid.onPersonSelect(ev -> personSelectionChange(ev));
-			personGrid.onPersonEdit(p -> onPersonEdit(p));
-
-			calendar = new CalendarComponent();
-			calendar.setId("main.calendar");
-			calendar.setHandler(this::onItemClick);
-
-			setSizeFull();
-			addComponents(calendar);
-
-			setSizeFull();
-
-			ExecutorService exec = Executors.newSingleThreadExecutor();
-			exec.execute(() -> {
-
-				final List<ClubEvent> events = eventBusiness.loadEvents();
-				LOGGER.info("Loaded events: {}", events);
-				final UI ui = calendar.getUI();
-				ui.access(() -> {
-					calendar.setItems(events);
-					ui.push();
-				});
-
-			});
-			exec.shutdown();
 			LOGGER.info("Loaded UI and started fetch of Events");
 		} else {
 
@@ -100,6 +76,52 @@ public class MainView extends HorizontalLayout implements View {
 		}
 	}
 
+	public void initUI(ViewChangeEvent event) {
+		navigator = event.getNavigator();
+
+		eventView = new SingleEventView();
+		eventView.setVisible(false);
+
+		personGrid = new PersonGrid(groupDao, personDao);
+		personGrid.setId("main.person");
+		personGrid.setCaption("Personen");
+		personGrid.onClosedFunction(() -> detailClosed());
+		personGrid.onPersonSelect(ev -> personSelectionChange(ev));
+		personGrid.onPersonEdit(p -> onPersonEdit(p));
+		personGrid.setVisible(false);
+
+		VerticalLayout eastLayout = new VerticalLayout();
+		eastLayout.addComponents(eventView, personGrid);
+
+		ClubEventProvider dataProvider = new ClubEventProvider();
+		calendar = new CalendarComponent(dataProvider);
+		calendar.setId("main.calendar");
+		calendar.setHandler(this::onItemClick);
+
+		head = new HeadComponent(() -> calendar.getStartDate(), () -> calendar.getEndDate(), dataProvider);
+		head.updateMonthText(calendar.getStartDate());
+		calendar.add(dateTime -> head.updateMonthText(dateTime));
+
+		setSizeFull();
+		addComponent(head, BorderLayout.PAGE_START);
+		addComponent(calendar, BorderLayout.CENTER);
+		addComponent(eastLayout, BorderLayout.LINE_END);
+
+		ExecutorService exec = Executors.newSingleThreadExecutor();
+		exec.execute(() -> {
+
+			final List<ClubEvent> events = eventBusiness.loadEvents();
+			LOGGER.info("Loaded events: {}", events);
+			final UI ui = calendar.getUI();
+			ui.access(() -> {
+				calendar.setItems(events);
+				ui.push();
+			});
+
+		});
+		exec.shutdown();
+	}
+
 	private void onPersonEdit(Person p) {
 		PersonEditDialog dlg = new PersonEditDialog(groupDao.listAll(), p, personDao);
 		getUI().addWindow(dlg);
@@ -113,7 +135,8 @@ public class MainView extends HorizontalLayout implements View {
 
 	private void detailClosed() {
 		LOGGER.debug("Closing detail view.");
-		removeComponent(personGrid);
+		personGrid.setVisible(false);
+		eventView.setVisible(false);
 	}
 
 	private void onItemClick(CalendarComponentEvents.ItemClickEvent event) {
@@ -131,14 +154,17 @@ public class MainView extends HorizontalLayout implements View {
 	public void openPersonViewForEvent(ClubEvent ev) {
 		LOGGER.debug("Opening detail view for {}", ev);
 
-		removeComponent(personGrid);
-		addComponent(personGrid);
-
 		eventBusiness.setSelected(null);
+
+		eventView.setEvent(ev);
+
 		personGrid.setEnabled(false);
 		personGrid.setEvent(ev);
 		personGrid.setEnabled(true);
+
 		personGrid.setVisible(true);
+		eventView.setVisible(true);
+
 		eventBusiness.setSelected(ev);
 	}
 

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/components/CalendarComponent.java

@@ -3,7 +3,10 @@ package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components;
 import java.time.LocalDateTime;
 import java.time.Month;
 import java.time.ZonedDateTime;
+import java.util.ArrayList;
 import java.util.Collection;
+import java.util.List;
+import java.util.function.Consumer;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -15,7 +18,6 @@ import org.vaadin.addon.calendar.ui.CalendarComponentEvents.ItemClickHandler;
 
 import com.vaadin.shared.Registration;
 import com.vaadin.ui.CustomComponent;
-import com.vaadin.ui.VerticalLayout;
 
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.ClubEvent;
 
@@ -24,13 +26,15 @@ public class CalendarComponent extends CustomComponent {
 	private static final long serialVersionUID = -9152173211931554059L;
 	private transient final Logger log = LoggerFactory.getLogger(getClass());
 
-	private ClubEventProvider dataProvider;
+	private final ClubEventProvider dataProvider;
 	private Calendar<ClubEvent> calendar;
-	private HeadComponent head;
+	private List<Consumer<ZonedDateTime>> dateUpdateEvents;
 
-	public CalendarComponent() {
+	public CalendarComponent(ClubEventProvider dataProvider) {
+
+		this.dataProvider = dataProvider;
+		dateUpdateEvents = new ArrayList<>();
 
-		dataProvider = new ClubEventProvider();
 		calendar = new Calendar<>(dataProvider).withMonth(Month.from(LocalDateTime.now()));
 		calendar.setId("calendar.calendar");
 
@@ -38,18 +42,24 @@ public class CalendarComponent extends CustomComponent {
 		calendar.setSizeFull();
 		calendar.addListener(ev -> calendarEvent(ev));
 
-		head = new HeadComponent(() -> calendar.getStartDate(), () -> calendar.getEndDate(), dataProvider);
+		setSizeFull();
-		head.updateMonthText(calendar.getStartDate());
+		setCompositionRoot(calendar);
+	}
+
+	public boolean add(Consumer<ZonedDateTime> e) {
+		return dateUpdateEvents.add(e);
+	}
 
-		VerticalLayout layout = new VerticalLayout(head, calendar);
+	public boolean remove(Consumer<ZonedDateTime> o) {
-		layout.setSizeFull();
+		return dateUpdateEvents.remove(o);
-		setCompositionRoot(layout);
 	}
 
 	private void calendarEvent(Event ev) {
 		log.debug("Event on calendar: {}", ev);
 		if (ev instanceof BackwardEvent || ev instanceof ForwardEvent) {
-			head.updateMonthText(calendar.getStartDate());
+			for (Consumer<ZonedDateTime> l : dateUpdateEvents) {
+				l.accept(calendar.getStartDate());
+			}
 		}
 	}
 
@@ -78,4 +88,12 @@ public class CalendarComponent extends CustomComponent {
 
 	}
 
+	public ZonedDateTime getStartDate() {
+		return calendar.getStartDate();
+	}
+
+	public ZonedDateTime getEndDate() {
+		return calendar.getEndDate();
+	}
+
 }

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/components/EventGrid.java

@@ -10,8 +10,7 @@ import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.ClubEvent;
 public class EventGrid extends Grid<ClubEvent> {
 
 	private static final long serialVersionUID = -5435770187868470290L;
-	private transient final DateTimeFormatter df = DateTimeFormatter
+	private transient final DateTimeFormatter df = DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM);
-			.ofLocalizedDate(FormatStyle.MEDIUM);
 
 	public EventGrid() {
 

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/components/PersonGrid.java

@@ -24,7 +24,6 @@ import com.vaadin.ui.Grid;
 import com.vaadin.ui.Grid.SelectionMode;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.MultiSelect;
-import com.vaadin.ui.TextField;
 import com.vaadin.ui.VerticalLayout;
 import com.vaadin.ui.themes.ValoTheme;
 
@@ -45,7 +44,6 @@ public class PersonGrid extends CustomComponent {
 	private final Grid<Person> grid;
 	private final CheckBox checkIncluded;
 	private final ComboBox<GroupDef> comboGroups;
-	private final TextField textTitle;
 
 	private transient ClosedFunction closedFunction = null;
 	private transient Consumer<Person> onPersonEdit;
@@ -55,24 +53,11 @@ public class PersonGrid extends CustomComponent {
 	private List<GroupDef> allGroups;
 	private PersonFilter filter;
 	private ClubEvent currentEvent;
-	private TextField textLocation;
 
 	public PersonGrid(GroupDao groupDao, PersonDao personDao) {
 
-		textTitle = new TextField();
+		setCaption("Teilnehmer");
-		textTitle.setId("event.title");
+		addStyleName("bold-caption");
-		textTitle.setStyleName("title_label");
-		textTitle.setCaption("Veranstaltung");
-		textTitle.setEnabled(false);
-		textTitle.setSizeFull();
-
-		textLocation = new TextField();
-		textLocation.setId("event.location");
-		textLocation.setStyleName("title_label");
-		textLocation.setCaption("Ort");
-		textLocation.setEnabled(false);
-		textLocation.setSizeFull();
-
 		checkIncluded = new CheckBox("Nur gemeldete");
 		checkIncluded.setId("person.filter.checked");
 		checkIncluded.addValueChangeListener(ev -> onSelectedOnly(ev));
@@ -114,7 +99,7 @@ public class PersonGrid extends CustomComponent {
 		close.setId("person.close");
 
 		VerticalLayout panel = new VerticalLayout();
-		panel.addComponents(textTitle, textLocation, filters, grid, close);
+		panel.addComponents(filters, grid, close);
 		setCompositionRoot(panel);
 	}
 
@@ -192,20 +177,6 @@ public class PersonGrid extends CustomComponent {
 		updateFilter();
 	}
 
-	private void setTitle(String value) {
-		if (value == null) {
-			value = "";
-		}
-		textTitle.setValue(value);
-	}
-
-	private void setLocation(String value) {
-		if (value == null) {
-			value = "";
-		}
-		textLocation.setValue(value);
-	}
-
 	public interface ClosedFunction {
 		void closed();
 	}
@@ -217,15 +188,8 @@ public class PersonGrid extends CustomComponent {
 	public void setEvent(ClubEvent ev) {
 
 		if (ev != null) {
-
-			setCaption(ev.getCaption());
-			setTitle(ev.getCaption());
-			setLocation(ev.getLocation());
-
 			updateSelection(ev);
 		} else {
-			setCaption("");
-			setTitle("");
 			selectItems(new Person[0]);
 		}
 		this.currentEvent = ev;

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/components/SingleEventView.java

@@ -0,0 +1,66 @@
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components;
+
+import com.vaadin.ui.CustomComponent;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.VerticalLayout;
+
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.ClubEvent;
+
+public class SingleEventView extends CustomComponent {
+
+	private static final long serialVersionUID = 4701035948083549772L;
+
+	private final TextField textTitle;
+	private final TextField textLocation;
+
+	public SingleEventView() {
+		setCaption("Gewählte Veranstaltung");
+		addStyleName("bold-caption");
+
+		textTitle = new TextField();
+		textTitle.setId("event.title");
+		textTitle.setStyleName("title_label");
+		textTitle.setCaption("Veranstaltung");
+		textTitle.setEnabled(false);
+		textTitle.setSizeFull();
+
+		textLocation = new TextField();
+		textLocation.setId("event.location");
+		textLocation.setStyleName("title_label");
+		textLocation.setCaption("Ort");
+		textLocation.setEnabled(false);
+		textLocation.setSizeFull();
+
+		VerticalLayout panel = new VerticalLayout();
+		panel.addComponents(textTitle, textLocation);
+		setCompositionRoot(panel);
+	}
+
+	public void setTitle(String value) {
+		if (value == null) {
+			value = "";
+		}
+		textTitle.setValue(value);
+	}
+
+	public void setLocation(String value) {
+		if (value == null) {
+			value = "";
+		}
+		textLocation.setValue(value);
+	}
+
+	public void setEvent(ClubEvent ev) {
+
+		if (ev != null) {
+
+			setTitle(ev.getCaption());
+			setLocation(ev.getLocation());
+
+		} else {
+			setTitle("");
+			setLocation("");
+		}
+	}
+
+}

src/main/webapp/VAADIN/themes/vaadin-clubhelpertheme/styles.css

@@ -15613,6 +15613,11 @@ div.v-layout.v-horizontal.v-widget {
 	font-size: large;
 }
 
+.vaadin-clubhelpertheme .v-caption-bold-caption {
+	font-weight: bolder !important;
+	font-size: large !important;
+}
+
 .vaadin-clubhelpertheme .v-calendar-next {
 	height: 50px;
 	width: 50px;

src/main/webapp/VAADIN/themes/vaadin-clubhelpertheme/vaadin-clubhelpertheme.scss

@@ -41,6 +41,10 @@
       font-weight: bold;
       font-size: large;
   }
+  .v-caption-bold-caption {
+    font-weight: bolder !important;
+    font-size: large !important;
+  }
   .v-calendar-next {
     height: 50px;
     width: 50px;