Right order in properties window and layer selection feedback

Activated the css file for the layer buttons.
Wrote a function to change the border of the layer buttons to red as
long as a layer is active.
The first element in the properties window is always ID/ui.label

scopviz/src/main/java/de/tu_darmstadt/informatik/tk/scopviz/ui/ButtonManager.java

@@ -1,5 +1,7 @@
 package de.tu_darmstadt.informatik.tk.scopviz.ui;
 
+import java.util.ArrayList;
+
 import org.graphstream.graph.Edge;
 import org.graphstream.graph.Graph;
 import org.graphstream.graph.Node;
@@ -14,6 +16,9 @@ import de.tu_darmstadt.informatik.tk.scopviz.main.Main;
 import de.tu_darmstadt.informatik.tk.scopviz.main.SelectionMode;
 import javafx.event.ActionEvent;
 import javafx.event.EventHandler;
+import javafx.scene.control.Button;
+import javafx.scene.effect.DropShadow;
+import javafx.scene.effect.InnerShadow;
 import javafx.scene.input.MouseEvent;
 
 /**
@@ -30,6 +35,15 @@ public class ButtonManager {
 	 */
 	public static final Boolean CREATE_MORE_THEN_ONE = true;
 
+	// Test
+	private static GUIController guiController;
+	private static ArrayList<Button> list;
+
+	public static void setGuiController(GUIController guiController, ArrayList<Button> nList) {
+		ButtonManager.guiController = guiController;
+		list = nList;
+	}
+
 	/**
 	 * Handler for zoom in Button
 	 */
@@ -126,8 +140,9 @@ public class ButtonManager {
 		public void handle(ActionEvent arg0) {
 			GraphDisplayManager.setCurrentLayer(Layer.UNDERLAY);
 			GraphDisplayManager.switchActiveGraph();
-		}
 
+			setBorderStyle((Button) arg0.getSource());
+		}
 	};
 
 	public static final EventHandler<ActionEvent> operatorHandler = new EventHandler<ActionEvent>() {
@@ -136,6 +151,8 @@ public class ButtonManager {
 		public void handle(ActionEvent arg0) {
 			GraphDisplayManager.setCurrentLayer(Layer.OPERATOR);
 			GraphDisplayManager.switchActiveGraph();
+
+			setBorderStyle((Button) arg0.getSource());
 		}
 
 	};
@@ -146,6 +163,8 @@ public class ButtonManager {
 		public void handle(ActionEvent arg0) {
 			GraphDisplayManager.setCurrentLayer(Layer.MAPPING);
 			GraphDisplayManager.switchActiveGraph();
+			
+			setBorderStyle((Button) arg0.getSource());
 		}
 
 	};
@@ -156,8 +175,28 @@ public class ButtonManager {
 		public void handle(ActionEvent arg0) {
 			GraphDisplayManager.setCurrentLayer(Layer.SYMBOL);
 			GraphDisplayManager.switchActiveGraph();
+			
+			setBorderStyle((Button) arg0.getSource());
 		}
 
 	};
 
+		
+	/**
+	 * Changes the border of the button that was pressed to red
+	 * @param currentButton the button that was pressed
+	 */
+	private static void setBorderStyle(Button currentButton) {
+
+		for (Button j : list) {
+			if (j.equals(currentButton)) {
+				j.setStyle(
+						"-fx-background-color: red, red, red, -fx-faint-focus-color, -fx-body-color; -fx-background-insets: -0.2, 1, 2, -1.4, 2.6; -fx-background-radius: 3, 2, 1, 4, 1;");
+			} else {
+				j.setStyle("-fx-border-width: 0;");
+			}
+
+		}
+	}
+
 }

scopviz/src/main/java/de/tu_darmstadt/informatik/tk/scopviz/ui/GUIController.java

@@ -1,6 +1,7 @@
 package de.tu_darmstadt.informatik.tk.scopviz.ui;
 
 import java.net.URL;
+import java.util.ArrayList;
 import java.util.ResourceBundle;
 
 import javax.swing.JPanel;
@@ -209,6 +210,13 @@ public class GUIController implements Initializable {
 		operatorButton.setOnAction(ButtonManager.operatorHandler);
 		mappingButton.setOnAction(ButtonManager.mappingHandler);
 		symbolRepButton.setOnAction(ButtonManager.symbolRepHandler);
+		
+		ArrayList<Button> layerButtons = new ArrayList<Button> ();
+		layerButtons.add(underlayButton);
+		layerButtons.add(operatorButton);
+		layerButtons.add(mappingButton);
+		layerButtons.add(symbolRepButton);
+		ButtonManager.setGuiController(this,layerButtons);
 	}
 
 	/**

scopviz/src/main/java/de/tu_darmstadt/informatik/tk/scopviz/ui/PropertiesManager.java

@@ -74,7 +74,15 @@ public class PropertiesManager {
 			KeyValuePair editedPair = t.getTableView().getItems().get(t.getTablePosition().getRow());
 
 			Object classType = editedPair.getClassType();
+			
 			String key = editedPair.getKey();
+			
+			//handling the problem when using his own names for properties needed by graphstream
+			//e.g. "ui.label" as "ID", might need an extra function/structure if more of these
+			if(key.equals("ID")){
+				key = "ui.label";
+			}
+			
 			String oldValue = t.getOldValue();
 			String newValue = t.getNewValue();
 
@@ -185,9 +193,9 @@ public class PropertiesManager {
 			case "ui.label":
 				if (selected instanceof Node) {
 					Object actualAttribute = selected.getAttribute(key);
-					// remove the "ui."
-					key = key.substring(3, key.length());
-					newData.add(new KeyValuePair(key, String.valueOf(actualAttribute), actualAttribute.getClass()));
+					// replace UI Label with ID"
+					key = "ID";
+					newData.add(0, new KeyValuePair(key, String.valueOf(actualAttribute), actualAttribute.getClass()));
 				}
 				// TODO figure out if Edges have to have real labels
 				break;

scopviz/src/main/resources/Example.graphml

@@ -3,42 +3,42 @@
 	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	 xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns
 	   http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
-	<key id="attr0000" for="node" attr.name="Eigenschaft" attr.type="string"/>
-	<key id="attr0001" for="node" attr.name="ui.label" attr.type="string"/>
+   	<key id="attr0000" for="node" attr.name="ui.label" attr.type="string"/>
+	<key id="attr0001" for="node" attr.name="Eigenschaft" attr.type="string"/>
 	<key id="attr0002" for="node" attr.name="y" attr.type="double"/>
 	<key id="attr0003" for="node" attr.name="x" attr.type="double"/>
 	<graph id="Example" edgedefault="undirected">
 		<node id="A">
-			<data key="attr0000">test</data>
-			<data key="attr0001">A</data>
+			<data key="attr0000">A</data>
+			<data key="attr0001">test</data>
 			<data key="attr0002">100</data>
 			<data key="attr0003">100</data>
 		</node>
 		<node id="B">
-			<data key="attr0001">B</data>
+			<data key="attr0000">B</data>
 			<data key="attr0002">200</data>
 			<data key="attr0003">100</data>
 		</node>
 		<node id="C">
-			<data key="attr0001">C</data>
+			<data key="attr0000">C</data>
 			<data key="attr0002">100</data>
 			<data key="attr0003">200</data>
 		</node>
 		<node id="D">
-			<data key="attr0001">D</data>
+			<data key="attr0000">D</data>
 			<data key="attr0002">200</data>
 			<data key="attr0003">200</data>
 		</node>
 		<node id="E">
-			<data key="attr0001">E</data>
+			<data key="attr0000">E</data>
 			<data key="attr0002">185</data>
 			<data key="attr0003">135</data>
 		</node>
 		<edge id="AB" source="A" target="B" directed="false">
-			<data key="attr0000">test</data>
+			<data key="attr0001">test</data>
 		</edge>
 		<edge id="BC" source="B" target="C" directed="false">
-			<data key="attr0000">test</data>
+			<data key="attr0001">test</data>
 		</edge>
 		<edge id="CD" source="C" target="D" directed="false">
 		</edge>

scopviz/src/main/resources/Example2.graphml

@@ -3,34 +3,34 @@
 	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	 xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns
 	   http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
-	<key id="attr0000" for="node" attr.name="Eigenschaft" attr.type="string"/>
-	<key id="attr0001" for="node" attr.name="ui.label" attr.type="string"/>
+   	<key id="attr0000" for="node" attr.name="ui.label" attr.type="string"/>
+	<key id="attr0001" for="node" attr.name="Eigenschaft" attr.type="string"/>
 	<key id="attr0002" for="node" attr.name="y" attr.type="double"/>
 	<key id="attr0003" for="node" attr.name="x" attr.type="double"/>
 	<graph id="Example" edgedefault="undirected">
 		<node id="A">
-			<data key="attr0000">test</data>
-			<data key="attr0001">A</data>
+			<data key="attr0000">A</data>
+			<data key="attr0001">test</data>
 			<data key="attr0002">100</data>
 			<data key="attr0003">100</data>
 		</node>
 		<node id="B">
-			<data key="attr0001">B</data>
+			<data key="attr0000">B</data>
 			<data key="attr0002">200</data>
 			<data key="attr0003">100</data>
 		</node>
 		<node id="C">
-			<data key="attr0001">C</data>
+			<data key="attr0000">C</data>
 			<data key="attr0002">100</data>
 			<data key="attr0003">200</data>
 		</node>
 		<node id="D">
-			<data key="attr0001">D</data>
+			<data key="attr0000">D</data>
 			<data key="attr0002">200</data>
 			<data key="attr0003">200</data>
 		</node>
 		<node id="E">
-			<data key="attr0001">E</data>
+			<data key="attr0000">E</data>
 			<data key="attr0002">185</data>
 			<data key="attr0003">135</data>
 		</node>

scopviz/src/main/resources/GUITheme.css

@@ -93,51 +93,22 @@
     -fx-font-family: "Segoe UI Semibold";
 }
 
-/* 
- * Metro style Push Button
- * Author: Pedro Duque Vieira
- * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
- */
 .button {
-    -fx-padding: 5 22 5 22;   
-    -fx-border-color: #e2e2e2;
-    -fx-border-width: 2;
-    -fx-background-radius: 0;
-    -fx-background-color: #708090;
-    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-    -fx-font-size: 11pt;
-    -fx-text-fill: #d8d8d8;
-    -fx-background-insets: 0 0 0 0, 0, 1, 2;
-}
-
-.button:hover {
-    -fx-background-color: #3a3a3a;
-}
-
-.button:pressed, .button:default:hover:pressed {
-  -fx-background-color: white;
-  -fx-text-fill: #708090;
-}
-
-.button:focused {
-    -fx-border-color: white, white;
-    -fx-border-width: 1, 1;
-    -fx-border-style: solid, segments(1, 1);
-    -fx-border-radius: 0, 0;
-    -fx-border-insets: 1 1 1 1, 0;
-}
-
-.button:disabled, .button:default:disabled {
-    -fx-opacity: 0.4;
-    -fx-background-color: #708090;
-    -fx-text-fill: white;
-}
-
-.button:default {
-    -fx-background-color: -fx-focus-color;
-    -fx-text-fill: #ffffff;
+ 	-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
+    -fx-background-radius: 3px, 3px, 2px, 1px;
+    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
+    -fx-text-fill: -fx-text-base-color;
+    -fx-alignment: CENTER;
+    -fx-content-display: LEFT;
+}
+.button:armed{
+	-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
+    -fx-background-radius: 3px, 3px, 2px, 1px;
+    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
+    -fx-text-fill: -fx-text-base-color;
+    -fx-alignment: CENTER;
+    -fx-content-display: LEFT;
 }
 
-.button:default:hover {
-    -fx-background-color: derive(-fx-focus-color,30%);
-}

scopviz/src/main/resources/NewBetterCoolerWindowTest.fxml

@@ -117,7 +117,7 @@
                                  <children>
                                     <SplitPane dividerPositions="0.5" orientation="VERTICAL" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                                       <items>
-                                        <AnchorPane>
+                                        <AnchorPane stylesheets="@GUITheme.css">
                                              <children>
                                                 <ListView fx:id="layerListView" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                                                 <Button fx:id="underlayButton" mnemonicParsing="false" text="Underlay" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="5.0" />