Reworked list cell framework to be more extensible

client/src/main/java/envoy/client/ui/controller/ChatScene.java

@@ -35,9 +35,7 @@ import envoy.client.event.MessageCreationEvent;
 import envoy.client.net.Client;
 import envoy.client.net.WriteProxy;
 import envoy.client.ui.*;
-import envoy.client.ui.listcell.ChatControl;
+import envoy.client.ui.listcell.*;
-import envoy.client.ui.listcell.ListCellFactory;
-import envoy.client.ui.listcell.MessageControl;
 import envoy.data.*;
 import envoy.data.Attachment.AttachmentType;
 import envoy.event.*;
@@ -139,7 +137,7 @@ public final class ChatScene implements Restorable {
 	@FXML
 	private void initialize() {
 		// Initialize message and user rendering
-		messageList.setCellFactory(new ListCellFactory<>(MessageControl::new));
+		messageList.setCellFactory(MessageListCell::new);
 		chatList.setCellFactory(new ListCellFactory<>(ChatControl::new));
 
 		settingsButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("settings", DEFAULT_ICON_SIZE)));

client/src/main/java/envoy/client/ui/listcell/AbstractListCell.java

@@ -0,0 +1,48 @@
+package envoy.client.ui.listcell;
+
+import javafx.scene.Node;
+import javafx.scene.control.ContentDisplay;
+import javafx.scene.control.ListCell;
+import javafx.scene.control.ListView;
+
+/**
+ * Provides a convenience frame for list cell creation.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>AbstractListCell.java</strong><br>
+ * Created: <strong>18.07.2020</strong><br>
+ *
+ * @author Kai S. K. Engelbart
+ * @param <T> the type of element displayed by the list cell
+ * @param <U> the type of node as which the list element will be displayed
+ * @since Envoy Client v0.1-beta
+ */
+public abstract class AbstractListCell<T, U extends Node> extends ListCell<T> {
+
+	protected ListView<? extends T> listView;
+
+	/**
+	 * @param listView the list view inside of which the cell will be displayed
+	 * @since Envoy Client v0.1-beta
+	 */
+	public AbstractListCell(ListView<? extends T> listView) {
+		this.listView = listView;
+		setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
+		getStyleClass().add("listElement");
+	}
+
+	@Override
+	protected final void updateItem(T item, boolean empty) {
+		super.updateItem(item, empty);
+		setGraphic(empty || item == null ? null : renderItem(item));
+	}
+
+	/**
+	 * Converts a list item to a node. This can have side effects on the list cell.
+	 *
+	 * @param item the item to render
+	 * @return a node representing the item
+	 * @since Envoy Client v0.1-beta
+	 */
+	protected abstract U renderItem(T item);
+}

client/src/main/java/envoy/client/ui/listcell/GenericListCell.java

@@ -0,0 +1,36 @@
+package envoy.client.ui.listcell;
+
+import java.util.function.Function;
+
+import javafx.scene.Node;
+import javafx.scene.control.ListView;
+
+/**
+ * A generic list cell rendering an item using a provided render function.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>GenericListCell.java</strong><br>
+ * Created: <strong>18.07.2020</strong><br>
+ *
+ * @author Kai S. K. Engelbart
+ * @param <T> the type of element displayed by the list cell
+ * @param <U> the type of node as which the list element will be displayed
+ * @since Envoy Client v0.2-beta
+ */
+public final class GenericListCell<T, U extends Node> extends AbstractListCell<T, U> {
+
+	private Function<? super T, U> renderer;
+
+	/**
+	 * @param listView the list view inside of which the cell will be displayed
+	 * @param renderer a function converting a list item to a node
+	 * @since Envoy Client v0.1-beta
+	 */
+	public GenericListCell(ListView<? extends T> listView, Function<? super T, U> renderer) {
+		super(listView);
+		this.renderer = renderer;
+	}
+
+	@Override
+	protected U renderItem(T item) { return renderer.apply(item); }
+}

client/src/main/java/envoy/client/ui/listcell/ListCellFactory.java

@@ -17,41 +17,19 @@ import javafx.util.Callback;
  *
  * @author Kai S. K. Engelbart
  * @param <T> the type of object to display
+ * @param <U> the type of node displayed
  * @since Envoy Client v0.1-beta
  */
-public final class ListCellFactory<T> implements Callback<ListView<T>, ListCell<T>> {
+public final class ListCellFactory<T, U extends Node> implements Callback<ListView<T>, ListCell<T>> {
 
-	private final class GenericListCell extends ListCell<T> {
+	private final Function<? super T, U> renderer;
-
-		private ListView<? extends T> listView;
-
-		private GenericListCell(ListView<? extends T> listView) {
-			this.listView = listView;
-			getStyleClass().add("listElement");
-		}
-
-		@Override
-		protected void updateItem(T item, boolean empty) {
-			super.updateItem(item, empty);
-			if (empty || item == null) {
-				setText(null);
-				setGraphic(null);
-			} else {
-				final var control = converter.apply(item);
-				prefWidthProperty().bind(listView.widthProperty().subtract(40));
-				setGraphic(control);
-			}
-		}
-	}
-
-	private final Function<? super T, ? extends Node> converter;
 
 	/**
-	 * @param converter a function converting the type to display into a node
+	 * @param renderer a function converting the type to display into a node
 	 * @since Envoy Client v0.1-beta
 	 */
-	public ListCellFactory(Function<? super T, ? extends Node> converter) { this.converter = converter; }
+	public ListCellFactory(Function<? super T, U> renderer) { this.renderer = renderer; }
 
 	@Override
-	public ListCell<T> call(ListView<T> listView) { return new GenericListCell(listView); }
+	public ListCell<T> call(ListView<T> listView) { return new GenericListCell<>(listView, renderer); }
 }

client/src/main/java/envoy/client/ui/listcell/MessageListCell.java

@@ -0,0 +1,31 @@
+package envoy.client.ui.listcell;
+
+import javafx.scene.control.ListView;
+
+import envoy.data.Message;
+
+/**
+ * A list cell containing messages represented as message controls.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>MessageListCell.java</strong><br>
+ * Created: <strong>18.07.2020</strong><br>
+ *
+ * @author Kai S. K. Engelbart
+ * @since Envoy Client v0.1-beta
+ */
+public final class MessageListCell extends AbstractListCell<Message, MessageControl> {
+
+	/**
+	 * @param listView the list view inside of which the cell will be displayed
+	 * @since Envoy Client v0.1-beta
+	 */
+	public MessageListCell(ListView<? extends Message> listView) { super(listView); }
+
+	@Override
+	protected MessageControl renderItem(Message message) {
+		final var control = new MessageControl(message);
+		prefWidthProperty().bind(listView.widthProperty().multiply(0.6));
+		return control;
+	}
+}

client/src/main/resources/css/base.css

@@ -9,11 +9,11 @@
 }
 
 #messageEnterContainer {
-	-fx-background-radius: 5em;
+	-fx-background-radius: 5.0em;
 }
 
 #roundButton {
-	-fx-background-radius: 5em;
+	-fx-background-radius: 5.0em;
 }
 
 .text-area {
@@ -88,7 +88,7 @@
 }
 
 #loginButton {
-	-fx-background-radius: 1em;
+	-fx-background-radius: 1.0em;
 }
 
 #registerSwitch {
@@ -99,7 +99,7 @@
 #loginInputField {
 	-fx-background-color: transparent;
 	-fx-border: solid;
-	-fx-border-width: 0 0 1 0;
+	-fx-border-width: 0.0 0.0 1.0 0.0;
 	
 }
 
@@ -129,5 +129,13 @@
 }
 
 #profilePic {
-	-fx-radius: 1em;
+	-fx-radius: 1.0em;
+}
+
+.listElement {
+	-fx-background-color: transparent;
+}
+
+.listElement {
+	-fx-background-color: transparent;
 }

client/src/main/resources/css/dark.css

@@ -50,10 +50,6 @@
 	-fx-background-color: #303030;
 }
 
-.listElement {
-	-fx-background-color: transparent;
-}
-
 #messageEnterContainer {
 	-fx-background-color: #363636;
 }

client/src/main/resources/fxml/ChatScene.fxml

@@ -18,19 +18,33 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<GridPane fx:id="scene" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="400.0" minWidth="500.0" prefHeight="1152.0" prefWidth="2042.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.ChatScene">
+<GridPane fx:id="scene" maxHeight="-Infinity"
+	maxWidth="-Infinity" minHeight="400.0" minWidth="500.0"
+	prefHeight="1152.0" prefWidth="2042.0"
+	xmlns="http://javafx.com/javafx/11.0.1"
+	xmlns:fx="http://javafx.com/fxml/1"
+	fx:controller="envoy.client.ui.controller.ChatScene">
 	<columnConstraints>
-		<ColumnConstraints hgrow="NEVER" maxWidth="327.99997965494794" minWidth="-Infinity" prefWidth="317.0" />
+		<ColumnConstraints hgrow="NEVER"
-		<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" />
+			maxWidth="327.99997965494794" minWidth="-Infinity" prefWidth="317.0" />
+		<ColumnConstraints hgrow="ALWAYS"
+			maxWidth="1.7976931348623157E308" />
 	</columnConstraints>
 	<rowConstraints>
-		<RowConstraints maxHeight="122.00000508626302" minHeight="-Infinity" prefHeight="96.66666158040364" vgrow="NEVER" />
+		<RowConstraints maxHeight="122.00000508626302"
-		<RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="949.3333384195963" vgrow="ALWAYS" />
+			minHeight="-Infinity" prefHeight="96.66666158040364" vgrow="NEVER" />
-		<RowConstraints maxHeight="59.3333740234375" minHeight="-Infinity" prefHeight="22.666748046875" vgrow="NEVER" />
+		<RowConstraints maxHeight="1.7976931348623157E308"
-		<RowConstraints maxHeight="120.0" minHeight="-Infinity" prefHeight="83.333251953125" vgrow="NEVER" />
+			minHeight="50.0" prefHeight="949.3333384195963" vgrow="ALWAYS" />
+		<RowConstraints maxHeight="59.3333740234375"
+			minHeight="-Infinity" prefHeight="22.666748046875" vgrow="NEVER" />
+		<RowConstraints maxHeight="120.0" minHeight="-Infinity"
+			prefHeight="83.333251953125" vgrow="NEVER" />
 	</rowConstraints>
 	<children>
-		<ListView id="chatList" fx:id="chatList" focusTraversable="false" onMouseClicked="#chatListClicked" prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1" GridPane.rowSpan="2147483647">
+		<ListView id="chatList" fx:id="chatList"
+			focusTraversable="false" onMouseClicked="#chatListClicked"
+			prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1"
+			GridPane.rowSpan="2147483647">
 			<GridPane.margin>
 				<Insets right="1.0" />
 			</GridPane.margin>
@@ -40,19 +54,23 @@
 			<contextMenu>
 				<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
 					<items>
-						<MenuItem fx:id="deleteContactMenuItem" mnemonicParsing="false" onAction="#deleteContact" text="Delete" />
+						<MenuItem fx:id="deleteContactMenuItem"
+							mnemonicParsing="false" onAction="#deleteContact" text="Delete" />
 					</items>
 				</ContextMenu>
 			</contextMenu>
 		</ListView>
 		<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0">
 			<children>
-            <ImageView id="profilePic" fx:id="clientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
+				<ImageView id="profilePic" fx:id="clientProfilePic"
+					fitHeight="43.0" fitWidth="43.0" pickOnBounds="true"
+					preserveRatio="true">
 					<HBox.margin>
 						<Insets left="15.0" top="5.0" />
 					</HBox.margin>
 				</ImageView>
-      		<Label id="transparentBackground" fx:id="contactLabel" prefHeight="27.0" prefWidth="134.0">
+				<Label id="transparentBackground" fx:id="contactLabel"
+					prefHeight="27.0" prefWidth="134.0">
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
@@ -63,10 +81,13 @@
 						<Insets left="10.0" top="5.0" />
 					</HBox.margin>
 				</Label>
-            <Region id="transparentBackground" prefHeight="77.0" prefWidth="115.0" />
+				<Region id="transparentBackground" prefHeight="77.0"
-            <VBox id="transparentBackground" alignment="CENTER_RIGHT" prefHeight="200.0" prefWidth="100.0" spacing="5.0">
+					prefWidth="115.0" />
+				<VBox id="transparentBackground" alignment="CENTER_RIGHT"
+					prefHeight="200.0" prefWidth="100.0" spacing="5.0">
 					<children>
-            		<Button fx:id="settingsButton" mnemonicParsing="true" onAction="#settingsButtonClicked" text="">
+						<Button fx:id="settingsButton" mnemonicParsing="true"
+							onAction="#settingsButtonClicked" text="">
 							<padding>
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</padding>
@@ -74,7 +95,8 @@
 								<Insets />
 							</VBox.margin>
 						</Button>
-            		<Button mnemonicParsing="true" onAction="#addContactButtonClicked" text=" + ">
+						<Button mnemonicParsing="true"
+							onAction="#addContactButtonClicked" text=" + ">
 							<padding>
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</padding>
@@ -92,19 +114,28 @@
 				<Insets bottom="1.0" right="1.0" />
 			</GridPane.margin>
 		</HBox>
-		<ListView id="messageList" fx:id="messageList" focusTraversable="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" GridPane.rowSpan="2">
+		<ListView id="messageList" fx:id="messageList"
+			focusTraversable="false" GridPane.columnIndex="1"
+			GridPane.columnSpan="2147483647" GridPane.rowIndex="1"
+			GridPane.rowSpan="2">
 			<GridPane.margin>
 				<Insets />
 			</GridPane.margin>
 			<padding>
-				<Insets bottom="5.0" left="300.0" right="300.0" top="5.0" />
+				<Insets bottom="5.0" top="5.0" />
 			</padding>
 		</ListView>
-      <HBox alignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
+		<HBox alignment="CENTER" GridPane.columnIndex="1"
+			GridPane.rowIndex="3">
 			<children>
-            <Label id="messageEnterContainer" alignment="CENTER" minWidth="500.0" prefHeight="100.0" prefWidth="1300.0">
+				<Label id="messageEnterContainer" alignment="CENTER"
+					minWidth="500.0" prefHeight="100.0" prefWidth="1300.0">
 					<graphic>
-            		<TextArea id="messageEnter" fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="100.0" prefWidth="1250.0" promptText="Enter Message" wrapText="true">
+						<TextArea id="messageEnter" fx:id="messageTextArea"
+							disable="true" onInputMethodTextChanged="#messageTextUpdated"
+							onKeyPressed="#checkPostConditions"
+							onKeyTyped="#checkKeyCombination" prefHeight="100.0"
+							prefWidth="1250.0" promptText="Enter Message" wrapText="true">
 							<opaqueInsets>
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</opaqueInsets>
@@ -116,14 +147,21 @@
 				</Label>
 				<HBox prefHeight="38.0" prefWidth="100.0" spacing="5.0">
 					<children>
-      				<Button id="roundButton" fx:id="postButton" defaultButton="true" disable="true" minWidth="40.0" mnemonicParsing="true" onAction="#postMessage" prefHeight="40.0" prefWidth="40.0" text="Post">
+						<Button id="roundButton" fx:id="postButton"
+							defaultButton="true" disable="true" minWidth="40.0"
+							mnemonicParsing="true" onAction="#postMessage" prefHeight="40.0"
+							prefWidth="40.0" text="Post">
 							<tooltip>
-      						<Tooltip anchorLocation="WINDOW_TOP_LEFT" autoHide="true" maxWidth="350.0" text="Click this button to send the message. If it is disabled, you first have to select a contact to send it to. A message may automatically be sent when you press (Ctrl + ) Enter, according to your preferences. Additionally sends a message when pressing &quot;Alt&quot; + &quot;P&quot;." wrapText="true" />
+								<Tooltip anchorLocation="WINDOW_TOP_LEFT"
+									autoHide="true" maxWidth="350.0"
+									text="Click this button to send the message. If it is disabled, you first have to select a contact to send it to. A message may automatically be sent when you press (Ctrl + ) Enter, according to your preferences. Additionally sends a message when pressing &quot;Alt&quot; + &quot;P&quot;."
+									wrapText="true" />
 							</tooltip>
 							<contextMenu>
 								<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
 									<items>
-      								<MenuItem mnemonicParsing="false" onAction="#copyAndPostMessage" text="Copy and Send" />
+										<MenuItem mnemonicParsing="false"
+											onAction="#copyAndPostMessage" text="Copy and Send" />
 									</items>
 								</ContextMenu>
 							</contextMenu>
@@ -131,17 +169,24 @@
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</padding>
 						</Button>
-      				<Button id="roundButton" fx:id="voiceButton" disable="true" minWidth="40.0" onAction="#voiceButtonClicked" prefHeight="40.0" prefWidth="40.0">
+						<Button id="roundButton" fx:id="voiceButton" disable="true"
+							minWidth="40.0" onAction="#voiceButtonClicked" prefHeight="40.0"
+							prefWidth="40.0">
 							<padding>
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</padding>
 						</Button>
-      				<Button id="roundButton" fx:id="attachmentButton" disable="true" minWidth="40.0" mnemonicParsing="false" onAction="#attachmentButtonClicked" prefHeight="40.0" prefWidth="40.0">
+						<Button id="roundButton" fx:id="attachmentButton"
+							disable="true" minWidth="40.0" mnemonicParsing="false"
+							onAction="#attachmentButtonClicked" prefHeight="40.0"
+							prefWidth="40.0">
 							<padding>
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</padding>
 						</Button>
-      				<Button id="roundButton" fx:id="rotateButton" minWidth="40.0" mnemonicParsing="false" onAction="#doABarrelRoll" prefHeight="40.0" prefWidth="40.0">
+						<Button id="roundButton" fx:id="rotateButton"
+							minWidth="40.0" mnemonicParsing="false" onAction="#doABarrelRoll"
+							prefHeight="40.0" prefWidth="40.0">
 							<padding>
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</padding>
@@ -156,9 +201,13 @@
 				<Insets bottom="40.0" left="300.0" right="300.0" top="15.0" />
 			</GridPane.margin>
 		</HBox>
-      <HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
+		<HBox prefHeight="100.0" prefWidth="200.0"
+			GridPane.columnIndex="1" GridPane.rowIndex="2">
 			<children>
-      		<Label id="remainingCharsLabel" fx:id="remainingChars" ellipsisString="" maxHeight="30.0" maxWidth="180.0" prefHeight="30.0" prefWidth="180.0" text="remaining chars: 0/x" textFill="LIME" textOverrun="LEADING_WORD_ELLIPSIS" visible="false">
+				<Label id="remainingCharsLabel" fx:id="remainingChars"
+					ellipsisString="" maxHeight="30.0" maxWidth="180.0"
+					prefHeight="30.0" prefWidth="180.0" text="remaining chars: 0/x"
+					textFill="LIME" textOverrun="LEADING_WORD_ELLIPSIS" visible="false">
 					<padding>
 						<Insets bottom="5.0" top="5.0" />
 					</padding>
@@ -166,17 +215,23 @@
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</opaqueInsets>
 					<tooltip>
-      				<Tooltip text="Shows how many chars you can still enter in this message" wrapText="true" />
+						<Tooltip
+							text="Shows how many chars you can still enter in this message"
+							wrapText="true" />
 					</tooltip>
 				</Label>
-      		<Label fx:id="infoLabel" text="Something happened" textFill="#faa007" visible="false" wrapText="true">
+				<Label fx:id="infoLabel" text="Something happened"
+					textFill="#faa007" visible="false" wrapText="true">
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
 				</Label>
 			</children>
 		</HBox>
-		<ImageView fx:id="attachmentView" pickOnBounds="true" preserveRatio="true" visible="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.halignment="RIGHT" GridPane.rowIndex="2">
+		<ImageView fx:id="attachmentView" pickOnBounds="true"
+			preserveRatio="true" visible="false" GridPane.columnIndex="1"
+			GridPane.columnSpan="2147483647" GridPane.halignment="RIGHT"
+			GridPane.rowIndex="2">
 			<viewport>
 				<Rectangle2D height="20.0" width="20.0" />
 			</viewport>
@@ -184,14 +239,18 @@
 				<Insets bottom="5.0" right="10.0" top="5.0" />
 			</GridPane.margin>
 		</ImageView>
-      <HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1">
+		<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0"
+			prefWidth="200.0" GridPane.columnIndex="1">
 			<children>
-            <ImageView id="profilePic" fx:id="recipientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
+				<ImageView id="profilePic" fx:id="recipientProfilePic"
+					fitHeight="43.0" fitWidth="43.0" pickOnBounds="true"
+					preserveRatio="true">
 					<HBox.margin>
 						<Insets left="20.0" top="5.0" />
 					</HBox.margin>
 				</ImageView>
-            <VBox alignment="CENTER_LEFT" prefHeight="97.0" prefWidth="316.0">
+				<VBox alignment="CENTER_LEFT" prefHeight="97.0"
+					prefWidth="316.0">
 					<children>
 						<Label fx:id="topBarContactLabel" text="">
 							<font>
@@ -204,8 +263,11 @@
 						<Insets left="15.0" />
 					</HBox.margin>
 				</VBox>
-            <Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
+				<Region prefHeight="200.0" prefWidth="200.0"
-            <Button id="roundButton" fx:id="messageSearchButton" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" visible="false">
+					HBox.hgrow="ALWAYS" />
+				<Button id="roundButton" fx:id="messageSearchButton"
+					contentDisplay="CENTER" mnemonicParsing="false" prefHeight="40.0"
+					prefWidth="40.0" visible="false">
 					<HBox.margin>
 						<Insets right="20.0" />
 					</HBox.margin>