changeset 2202:c4abb26b334e

Modena, added more test app features. Fixed css bugs
author "Jasper Potts"
date Wed, 09 Jan 2013 14:07:07 -0800
parents db5a24110e22
children bb72c29f7932
files apps/experiments/Modena/src/modena/Modena.css apps/experiments/Modena/src/modena/Modena.java apps/experiments/Modena/src/modena/SameHeightTest.fxml apps/experiments/Modena/src/modena/ui-mosaic.fxml
diffstat 4 files changed, 362 insertions(+), 109 deletions(-) [+]
line wrap: on
line diff
--- a/apps/experiments/Modena/src/modena/Modena.css	Thu Jan 10 10:20:41 2013 +1300
+++ b/apps/experiments/Modena/src/modena/Modena.css	Wed Jan 09 14:07:07 2013 -0800
@@ -37,6 +37,15 @@
  *                                                                             *
  ******************************************************************************/
 
+/*
+TODO: Explain here how themeing works:
+
+     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
+     * -fx-text-background-color for text on top of -fx-background
+     * -fx-text-inner-color for text on top of -fx-control-inner-color
+     * -fx-selection-bar-text for text on top of -fx-selection-bar
+*/
+
 .root {
     /***************************************************************************
      *                                                                         *
@@ -79,11 +88,11 @@
     -fx-light-text-color: white;
 
     /* A bright blue for highlighting/accenting objects.  For example: selected
-     * text; selected items in menus, lists, trees, and tables; progress bars;
-     * default buttons.
-     */
-    /*-fx-accent: #4fb6d6;*/
+     * text; selected items in menus, lists, trees, and tables; progress bars */
     -fx-accent: #0096C9;
+    
+    /* Default buttons color, this is similar to accent but more subtle */
+    -fx-default-button: #4fb6d6;
 
     /* A bright blue for the focus indicator of objects. Typically used as the
      * first color in -fx-background-color for the "focused" pseudo-class. Also
@@ -142,17 +151,7 @@
         -fx-dark-text-color  46%,
         -fx-dark-text-color  59%,
         -fx-mid-text-color   60%
-     );
-
-    /* The default color for all text.  Sections should change the -fx-text-fill
-     * property if change the background color to something else.  See also:
-     *
-     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
-     * -fx-text-background-color for text on top of -fx-background
-     * -fx-text-inner-color for text on top of -fx-control-inner-color
-     * -fx-selection-bar-text for text on top of -fx-selection-bar
-     */
-    -fx-text-fill: -fx-text-background-color;
+    );
 
     /* A little darker than -fx-color and used to draw boxes around objects such
      * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
@@ -474,7 +473,7 @@
 /* ====   DEFAULT   ========================================================= */
 
 .button:default {
-    -fx-base: -fx-accent;
+    -fx-base: -fx-default-button;
 }
 
 /* ====   PILL BUTTONS   ==================================================== */
@@ -516,7 +515,7 @@
         linear-gradient(to bottom, derive(-fx-color,-65.1%) 0%, derive(-fx-color,-50.2%) 90%, derive(-fx-color,-45.1%) 100%), 
         linear-gradient(to bottom, derive(-fx-color,-52.8%) 0%, derive(-fx-color,-40.8%) 90%, derive(-fx-color,-35.7%) 100%),
         linear-gradient(to bottom, derive(-fx-color,-44.3%) 0%, derive(-fx-color,-41.7%) 2% ,derive(-fx-color,-33.6%) 98%, derive(-fx-color,-35.7%) 100%); 
-    /* TODO: -fx-text-fill should be derived */
+    /* TODO: -fx-text-fill should be derived on background color */
     -fx-text-fill: -fx-light-text-color;
 }
 
@@ -600,7 +599,7 @@
 }
 .hyperlink:focused {
     -fx-border-color: -fx-focus-color;
-    -fx-border-style: dotted;
+    -fx-border-style: segments(0.166667em, 0.166667em);
     -fx-border-width: 1px;
 }
 .hyperlink:hover {
@@ -1324,6 +1323,11 @@
     -fx-background-insets: 0, 1 1 0 1;
     -fx-background-radius: 5 5 0 0, 4 4 0 0;
 }
+.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
+    -fx-border-style: segments(0.166667em, 0.166667em);
+    -fx-border-width: 1;
+    -fx-border-color: -fx-focus-color;
+}
 .tab-pane > .tab-header-area > .headers-region > .tab:disabled {
     -fx-opacity: -fx-disabled-opacity;
 }
@@ -1771,7 +1775,6 @@
         linear-gradient( to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100% ),    
         linear-gradient( to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100% );
     -fx-background-insets: 0, 1, 1;
-    /* TODO: -fx-text-fill should be derived */
     -fx-text-fill: -fx-light-text-color;
 }
 .custom-color-dialog .controls-pane #toggle-button-left {
@@ -2595,6 +2598,7 @@
     -fx-background-insets: 0;
     -fx-padding: 0.666667em; /* 8 */
     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 0 );
+    -fx-font-size: 0.85em;
 }
 
 /*******************************************************************************
--- a/apps/experiments/Modena/src/modena/Modena.java	Thu Jan 10 10:20:41 2013 +1300
+++ b/apps/experiments/Modena/src/modena/Modena.java	Wed Jan 09 14:07:07 2013 -0800
@@ -36,7 +36,6 @@
 import java.io.FileNotFoundException;
 import java.io.IOException;
 import java.io.InputStream;
-import java.io.StringBufferInputStream;
 import java.net.URL;
 import java.net.URLConnection;
 import java.net.URLStreamHandler;
@@ -58,6 +57,9 @@
 import javafx.scene.control.ButtonBuilder;
 import javafx.scene.control.ColorPicker;
 import javafx.scene.control.Label;
+import javafx.scene.control.MenuButton;
+import javafx.scene.control.MenuItemBuilder;
+import javafx.scene.control.RadioMenuItemBuilder;
 import javafx.scene.control.ScrollPaneBuilder;
 import javafx.scene.control.Separator;
 import javafx.scene.control.TabBuilder;
@@ -85,7 +87,13 @@
     private BorderPane root;
     private SamplePage samplePage;
     private Node mosaic;
+    private Node heightTest;
     private Stage mainStage;
+    private Color baseColor;
+    private Color accentColor;
+    private String fontName = null;
+    private int fontSize = 13;
+    private String cssOverride = "";
     
     @Override public void start(Stage stage) throws Exception {
         mainStage = stage;
@@ -126,6 +134,9 @@
                     ScrollPaneBuilder.create().content(
                         mosaic = (Node)FXMLLoader.load(Modena.class.getResource("ui-mosaic.fxml"))
                     ).build()
+                ).build(),
+                TabBuilder.create().text("Height Test").content(
+                        heightTest = (Node)FXMLLoader.load(Modena.class.getResource("SameHeightTest.fxml"))
                 ).build()
             );
             contentTabs.getSelectionModel().select(selectedTab);
@@ -133,6 +144,7 @@
             if (!modena) {
                 samplePage.setStyle("-fx-background-color: white;");
                 mosaic.setStyle("-fx-background-color: white;");
+                heightTest.setStyle("-fx-background-color: white;");
             }
             // Create Toolbar
             final ToggleButton modenaButton;;
@@ -183,6 +195,8 @@
                 new Separator(),
                 retinaButton,
                 new Separator(),
+                createFontMenu(),
+                new Separator(),
                 new Label("Base:"),
                 createBaseColorPicker(),
                 new Separator(),
@@ -217,6 +231,48 @@
         }
     }
     
+    private MenuButton createFontMenu() {
+        MenuButton mb = new MenuButton("Font Sizes");
+        ToggleGroup tg = new ToggleGroup();
+        mb.getItems().addAll(
+            RadioMenuItemBuilder.create().text("System Default").onAction(new EventHandler<ActionEvent>(){
+                @Override public void handle(ActionEvent event) {
+                    fontName = null;
+                    updateCSSOverrides();
+                }
+            }).style("-fx-font: 13px System;").toggleGroup(tg).selected(true).build(),
+            RadioMenuItemBuilder.create().text("Mac (13px)").onAction(new EventHandler<ActionEvent>(){
+                @Override public void handle(ActionEvent event) {
+                    fontName = "Lucida Grande";
+                    fontSize = 13;
+                    updateCSSOverrides();
+                }
+            }).style("-fx-font: 13px \"Lucida Grande\";").toggleGroup(tg).build(),
+            RadioMenuItemBuilder.create().text("Windows 100% (12px)").onAction(new EventHandler<ActionEvent>(){
+                @Override public void handle(ActionEvent event) {
+                    fontName = "Segoe UI";
+                    fontSize = 12;
+                    updateCSSOverrides();
+                }
+            }).style("-fx-font: 12px \"Segoe UI\";").toggleGroup(tg).build(),
+            RadioMenuItemBuilder.create().text("Windows 125% (15px)").onAction(new EventHandler<ActionEvent>(){
+                @Override public void handle(ActionEvent event) {
+                    fontName = "Segoe UI";
+                    fontSize = 15;
+                    updateCSSOverrides();
+                }
+            }).style("-fx-font: 15px \"Segoe UI\";").toggleGroup(tg).build(),
+            RadioMenuItemBuilder.create().text("Windows 150% (18px)").onAction(new EventHandler<ActionEvent>(){
+                @Override public void handle(ActionEvent event) {
+                    fontName = "Segoe UI";
+                    fontSize = 18;
+                    updateCSSOverrides();
+                }
+            }).style("-fx-font: 18px \"Segoe UI\";").toggleGroup(tg).build()
+        );
+        return mb;
+    }
+    
     private ColorPicker createBaseColorPicker() {
         ColorPicker colorPicker = new ColorPicker(Color.TRANSPARENT);
         colorPicker.getCustomColors().addAll(
@@ -283,10 +339,6 @@
         return colorPicker;
     }
     
-    private Color baseColor;
-    private Color accentColor;
-    private String cssOverride = "";
-    
     private void updateCSSOverrides() {
         cssOverride = ".root {\n";
         System.out.println("baseColor = "+baseColor);
@@ -305,6 +357,9 @@
                     Math.round(accentColor.getBlue() * 255));
             cssOverride += "    -fx-accent:"+color+";\n";
         }
+        if (fontName != null) {
+            cssOverride += "    -fx-font:"+fontSize+"px \""+fontName+"\";\n";
+        }
         cssOverride += "}\n";
         System.out.println("cssOverride = " + cssOverride);
         mainStage.getScene().getStylesheets().setAll(testAppCssUrl,"internal:stylesheet.css");
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/apps/experiments/Modena/src/modena/SameHeightTest.fxml	Wed Jan 09 14:07:07 2013 -0800
@@ -0,0 +1,187 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.*?>
+<?import java.util.*?>
+<?import javafx.collections.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.paint.*?>
+<?import javafx.scene.text.*?>
+
+<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml">
+  <children>
+    <ScrollPane fitToHeight="true" prefHeight="631.0" prefWidth="899.0" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="46.0">
+      <content>
+        <VBox alignment="CENTER_LEFT" prefHeight="-1.0" prefWidth="-1.0" spacing="50.0">
+          <children>
+            <HBox maxHeight="-Infinity" prefHeight="-1.0" prefWidth="-1.0" style="-fx-border-color: black transparent black transparent;&#10;-fx-border-width: 10 0 10 0;">
+              <children>
+                <Button mnemonicParsing="false" text="Button" />
+                <ToggleButton mnemonicParsing="false" prefWidth="90.0" selected="true" text="Toggle">
+                  <toggleGroup>
+                    <ToggleGroup fx:id="toggle1" />
+                  </toggleGroup>
+                </ToggleButton>
+                <MenuButton mnemonicParsing="false" prefWidth="100.0" text="MenuButton">
+                  <items>
+                    <MenuItem mnemonicParsing="false" text="Action 1" />
+                    <MenuItem mnemonicParsing="false" text="Action 2" />
+                  </items>
+                </MenuButton>
+                <SplitMenuButton mnemonicParsing="false" prefWidth="100.0" text="SplitMenuButton">
+                  <items>
+                    <MenuItem mnemonicParsing="false" text="Action 1" />
+                    <MenuItem mnemonicParsing="false" text="Action 2" />
+                  </items>
+                </SplitMenuButton>
+                <ChoiceBox prefWidth="60.0">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ChoiceBox>
+                <ComboBox prefWidth="60.0">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ComboBox>
+                <ComboBox editable="true" prefWidth="60.0" promptText="Choose">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ComboBox>
+                <ColorPicker />
+                <TextField prefWidth="100.0" promptText="Textfield" text="TextField" />
+                <PasswordField prefWidth="100.0" promptText="Password" text="password" />
+              </children>
+            </HBox>
+            <HBox maxHeight="-Infinity" prefHeight="-1.0" prefWidth="-1.0" style="-fx-border-color: red transparent red transparent;">
+              <children>
+                <Button mnemonicParsing="false" text="Button" />
+                <ToggleButton mnemonicParsing="false" prefWidth="90.0" selected="true" text="Toggle">
+                  <toggleGroup>
+                    <ToggleGroup />
+                  </toggleGroup>
+                </ToggleButton>
+                <MenuButton mnemonicParsing="false" prefWidth="100.0" text="MenuButton">
+                  <items>
+                    <MenuItem mnemonicParsing="false" text="Action 1" />
+                    <MenuItem mnemonicParsing="false" text="Action 2" />
+                  </items>
+                </MenuButton>
+                <SplitMenuButton mnemonicParsing="false" prefWidth="100.0" text="SplitMenuButton">
+                  <items>
+                    <MenuItem mnemonicParsing="false" text="Action 1" />
+                    <MenuItem mnemonicParsing="false" text="Action 2" />
+                  </items>
+                </SplitMenuButton>
+                <ChoiceBox prefWidth="60.0">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ChoiceBox>
+                <ComboBox prefWidth="60.0">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ComboBox>
+                <ComboBox editable="true" prefWidth="60.0" promptText="Choose">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ComboBox>
+                <ColorPicker />
+                <TextField prefWidth="100.0" promptText="Textfield" text="TextField" />
+                <PasswordField prefWidth="100.0" promptText="Password" text="password" />
+              </children>
+            </HBox>
+            <HBox maxHeight="-Infinity" prefHeight="-1.0" prefWidth="-1.0" style="">
+              <children>
+                <Button mnemonicParsing="false" text="Button" />
+                <ToggleButton mnemonicParsing="false" prefWidth="90.0" selected="true" text="Toggle">
+                  <toggleGroup>
+                    <ToggleGroup />
+                  </toggleGroup>
+                </ToggleButton>
+                <MenuButton mnemonicParsing="false" prefWidth="100.0" text="MenuButton">
+                  <items>
+                    <MenuItem mnemonicParsing="false" text="Action 1" />
+                    <MenuItem mnemonicParsing="false" text="Action 2" />
+                  </items>
+                </MenuButton>
+                <SplitMenuButton mnemonicParsing="false" prefWidth="100.0" text="SplitMenuButton">
+                  <items>
+                    <MenuItem mnemonicParsing="false" text="Action 1" />
+                    <MenuItem mnemonicParsing="false" text="Action 2" />
+                  </items>
+                </SplitMenuButton>
+                <ChoiceBox prefWidth="60.0">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ChoiceBox>
+                <ComboBox prefWidth="60.0">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ComboBox>
+                <ComboBox editable="true" prefWidth="60.0" promptText="Choose">
+                  <items>
+                    <FXCollections fx:factory="observableArrayList">
+                      <String fx:value="Item 1" />
+                      <String fx:value="Item 2" />
+                      <String fx:value="Item 3" />
+                    </FXCollections>
+                  </items>
+                </ComboBox>
+                <ColorPicker />
+                <TextField prefWidth="100.0" promptText="Textfield" text="TextField" />
+                <PasswordField prefWidth="100.0" promptText="Password" text="password" />
+              </children>
+            </HBox>
+          </children>
+          <padding>
+            <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
+          </padding>
+        </VBox>
+      </content>
+    </ScrollPane>
+    <Label layoutX="15.0" layoutY="18.0" text="All of these controls should be the same height.">
+      <font>
+        <Font name="System Bold" size="13.0" />
+      </font>
+    </Label>
+  </children>
+</AnchorPane>
--- a/apps/experiments/Modena/src/modena/ui-mosaic.fxml	Thu Jan 10 10:20:41 2013 +1300
+++ b/apps/experiments/Modena/src/modena/ui-mosaic.fxml	Wed Jan 09 14:07:07 2013 -0800
@@ -3,15 +3,14 @@
 <?import java.lang.*?>
 <?import java.util.*?>
 <?import javafx.collections.*?>
+<?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.paint.*?>
 
-<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="800.0" xmlns:fx="http://javafx.com/fxml">
+<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="691.0" prefWidth="927.0" xmlns:fx="http://javafx.com/fxml">
   <children>
     <Button layoutX="40.0" layoutY="41.0" mnemonicParsing="false" text="Button" />
-    <CheckBox layoutX="561.0" layoutY="400.0" mnemonicParsing="false" text="CheckBox" />
-    <CheckBox layoutX="561.0" layoutY="367.0" mnemonicParsing="false" selected="true" text="CheckBox" />
     <ComboBox layoutX="234.0" layoutY="41.0" prefWidth="160.0">
       <items>
         <FXCollections fx:factory="observableArrayList">
@@ -23,35 +22,10 @@
     </ComboBox>
     <Hyperlink layoutX="134.0" layoutY="40.0" text="Hyperlink" />
     <Label layoutX="242.0" layoutY="153.0" text="A label" />
-    <ListView layoutX="560.0" layoutY="94.0" prefHeight="216.0" prefWidth="200.0" />
-    <MenuBar layoutX="560.0" layoutY="40.0" prefWidth="200.0">
-      <menus>
-        <Menu mnemonicParsing="false" text="File">
-          <items>
-            <MenuItem mnemonicParsing="false" text="Close" />
-          </items>
-        </Menu>
-        <Menu mnemonicParsing="false" text="Edit">
-          <items>
-            <MenuItem mnemonicParsing="false" text="Delete" />
-          </items>
-        </Menu>
-        <Menu mnemonicParsing="false" text="Help">
-          <items>
-            <MenuItem mnemonicParsing="false" text="About" />
-          </items>
-        </Menu>
-      </menus>
-    </MenuBar>
     <PasswordField layoutX="240.0" layoutY="243.0" prefWidth="138.0" promptText="Password" />
     <ProgressBar layoutX="291.0" layoutY="291.0" prefWidth="200.0" progress="0.3" />
-    <ProgressIndicator layoutX="445.0" layoutY="48.0" prefHeight="59.0" prefWidth="56.0" progress="0.58" />
-    <RadioButton layoutX="587.0" layoutY="121.0" mnemonicParsing="false" text="RadioButton 1">
-      <toggleGroup>
-        <ToggleGroup fx:id="toggle2" />
-      </toggleGroup>
-    </RadioButton>
-    <ScrollBar layoutX="41.0" layoutY="329.0" prefWidth="719.0" />
+    <ProgressIndicator layoutX="435.0" layoutY="45.0" prefHeight="59.0" prefWidth="56.0" progress="0.58" />
+    <ScrollBar layoutX="41.0" layoutY="329.0" prefWidth="493.0" />
     <Separator layoutX="41.0" layoutY="129.0" prefWidth="490.0" />
     <Separator layoutX="217.0" layoutY="151.0" orientation="VERTICAL" prefHeight="158.0" />
     <SplitMenuButton layoutX="40.0" layoutY="83.0" mnemonicParsing="false" prefWidth="153.0" text="SplitMenuButton">
@@ -68,31 +42,11 @@
       </toggleGroup>
     </ToggleButton>
     <ToggleButton layoutX="341.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="false" text="Toggle" toggleGroup="$toggle1" />
-    <RadioButton layoutX="587.0" layoutY="146.0" mnemonicParsing="false" text="RadioButton 2" toggleGroup="$toggle2" />
-    <ScrollPane layoutX="560.0" layoutY="439.0" prefHeight="330.0" prefWidth="200.0">
+    <ScrollPane layoutX="560.0" layoutY="439.0" prefHeight="194.0" prefWidth="336.9999000000025">
       <content>
         <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="400.0" prefWidth="400.0" />
       </content>
     </ScrollPane>
-    <TabPane layoutX="39.0" layoutY="561.0" prefHeight="158.0" prefWidth="454.0" tabClosingPolicy="UNAVAILABLE">
-      <tabs>
-        <Tab text="Tab 1">
-          <content>
-            <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
-          </content>
-        </Tab>
-        <Tab text="Tab 2">
-          <content>
-            <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
-          </content>
-        </Tab>
-        <Tab text="Tab 3">
-          <content>
-            <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
-          </content>
-        </Tab>
-      </tabs>
-    </TabPane>
     <ChoiceBox layoutX="234.0" layoutY="85.0" prefWidth="160.0">
       <items>
         <FXCollections fx:factory="observableArrayList">
@@ -102,21 +56,28 @@
         </FXCollections>
       </items>
     </ChoiceBox>
-    <ToolBar layoutX="39.0" layoutY="738.0" prefWidth="200.0">
+    <Slider layoutX="304.0" layoutY="154.0" prefWidth="230.0" />
+    <Slider layoutX="502.0" layoutY="361.0" orientation="VERTICAL" prefHeight="291.0" showTickMarks="true" />
+    <ToggleButton layoutX="441.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="false" text="Toggle">
+      <toggleGroup>
+        <ToggleGroup />
+      </toggleGroup>
+    </ToggleButton>
+    <ComboBox editable="true" layoutX="395.0" layoutY="244.0" prefWidth="136.0001220703125" promptText="Choose">
       <items>
-        <Button mnemonicParsing="false" text="New" />
-        <Button mnemonicParsing="false" text="Delete" />
-        <Button mnemonicParsing="false" text="Save" />
-        <Button mnemonicParsing="false" text="Exit" />
+        <FXCollections fx:factory="observableArrayList">
+          <String fx:value="Item 1" />
+          <String fx:value="Item 2" />
+          <String fx:value="Item 3" />
+        </FXCollections>
       </items>
-    </ToolBar>
-    <Slider layoutX="304.0" layoutY="154.0" prefWidth="230.0" />
-    <Slider layoutX="518.0" layoutY="556.0" orientation="VERTICAL" prefHeight="216.0" showTickMarks="true" />
-    <SplitPane dividerPositions="0.4180327868852459" focusTraversable="true" layoutX="39.0" layoutY="364.0" prefHeight="172.0" prefWidth="490.0">
+    </ComboBox>
+    <ProgressIndicator layoutX="571.0" layoutY="367.0" prefHeight="59.0" prefWidth="56.0" progress="-1.0" />
+    <SplitPane dividerPositions="0.5086505190311419" focusTraversable="true" layoutX="39.0" layoutY="361.0" orientation="VERTICAL" prefHeight="291.0" prefWidth="447.0">
       <items>
-        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
-          <children>
-            <TreeView prefHeight="158.0" prefWidth="56.0" showRoot="false" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0">
+        <SplitPane dividerPositions="0.49435665914221216" focusTraversable="true" prefHeight="172.0" prefWidth="490.0">
+          <items>
+            <TreeView prefHeight="130.0" prefWidth="179.0" showRoot="false">
               <root>
                 <TreeItem value="Family">
                   <children>
@@ -151,34 +112,80 @@
                 </TreeItem>
               </root>
             </TreeView>
-          </children>
-        </AnchorPane>
-        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
-          <children>
-            <TableView prefHeight="158.0" prefWidth="136.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0">
+            <TableView prefHeight="130.0" prefWidth="241.0">
               <columns>
                 <TableColumn prefWidth="75.0" text="Column X" />
                 <TableColumn prefWidth="75.0" text="Column X" />
               </columns>
             </TableView>
-          </children>
-        </AnchorPane>
+          </items>
+        </SplitPane>
+        <ListView prefHeight="130.0" prefWidth="200.0" />
       </items>
     </SplitPane>
-    <ToggleButton layoutX="441.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="false" text="Toggle">
-      <toggleGroup>
-        <ToggleGroup />
-      </toggleGroup>
-    </ToggleButton>
-    <ComboBox editable="true" layoutX="395.0" layoutY="244.0" prefWidth="136.0001220703125" promptText="Choose">
-      <items>
-        <FXCollections fx:factory="observableArrayList">
-          <String fx:value="Item 1" />
-          <String fx:value="Item 2" />
-          <String fx:value="Item 3" />
-        </FXCollections>
-      </items>
-    </ComboBox>
-    <ProgressIndicator layoutX="680.0" layoutY="361.0" prefHeight="59.0" prefWidth="56.0" progress="-1.0" />
+    <VBox layoutX="560.0" layoutY="39.0" prefHeight="235.0" prefWidth="337.0" style="-fx-border-color: black; -fx-border-width: 3; -fx-border-insets: -3;&#10;">
+      <children>
+        <MenuBar prefWidth="200.0">
+          <menus>
+            <Menu mnemonicParsing="false" text="File">
+              <items>
+                <MenuItem mnemonicParsing="false" text="Close" />
+              </items>
+            </Menu>
+            <Menu mnemonicParsing="false" text="Edit">
+              <items>
+                <MenuItem mnemonicParsing="false" text="Delete" />
+              </items>
+            </Menu>
+            <Menu mnemonicParsing="false" text="Help">
+              <items>
+                <MenuItem mnemonicParsing="false" text="About" />
+              </items>
+            </Menu>
+          </menus>
+        </MenuBar>
+        <ToolBar prefWidth="200.0">
+          <items>
+            <Button mnemonicParsing="false" text="New" />
+            <Button mnemonicParsing="false" text="Delete" />
+            <Button mnemonicParsing="false" text="Save" />
+            <Button mnemonicParsing="false" text="Exit" />
+          </items>
+        </ToolBar>
+        <TabPane prefHeight="130.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" VBox.vgrow="ALWAYS">
+          <tabs>
+            <Tab text="Tab 1">
+              <content>
+                <VBox prefHeight="200.0" prefWidth="100.0" spacing="6.0">
+                  <children>
+                    <RadioButton mnemonicParsing="false" text="RadioButton 1">
+                      <toggleGroup>
+                        <ToggleGroup fx:id="toggle2" />
+                      </toggleGroup>
+                    </RadioButton>
+                    <RadioButton mnemonicParsing="false" text="RadioButton 2" toggleGroup="$toggle2" />
+                    <CheckBox mnemonicParsing="false" selected="true" text="CheckBox" />
+                    <CheckBox mnemonicParsing="false" text="CheckBox" />
+                  </children>
+                  <padding>
+                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+                  </padding>
+                </VBox>
+              </content>
+            </Tab>
+            <Tab text="Tab 2">
+              <content>
+                <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
+              </content>
+            </Tab>
+            <Tab text="Tab 3">
+              <content>
+                <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
+              </content>
+            </Tab>
+          </tabs>
+        </TabPane>
+      </children>
+    </VBox>
   </children>
 </AnchorPane>