changeset 2214:c014fe9ac135

Modena: Fixed text hoz alignment so text inside controls aligns. Fixed scalling of Checkbox and RadioButton with font size. Tweeked shadows on text fields
author "Jasper Potts"
date Fri, 11 Jan 2013 18:42:21 -0800
parents ea63f231fad9
children 244420325878
files apps/experiments/Modena/nbproject/project.properties apps/experiments/Modena/src/modena/Modena.css apps/experiments/Modena/src/modena/SameHeightTest.fxml apps/experiments/Modena/src/modena/SamplePage.java apps/experiments/Modena/src/modena/ui-mosaic.fxml
diffstat 5 files changed, 107 insertions(+), 69 deletions(-) [+]
line wrap: on
line diff
--- a/apps/experiments/Modena/nbproject/project.properties	Fri Jan 11 17:38:34 2013 -0800
+++ b/apps/experiments/Modena/nbproject/project.properties	Fri Jan 11 18:42:21 2013 -0800
@@ -112,6 +112,7 @@
     ${dist.jar}:\
     ${javac.classpath}:\
     ${build.classes.dir}
+run.jvmargs=\ -Djava.util.logging.config.file=/Users/jpotts/Projects/jfx-controls-8.0/logging.properties
 run.test.classpath=\
     ${javac.test.classpath}:\
     ${build.test.classes.dir}
--- a/apps/experiments/Modena/src/modena/Modena.css	Fri Jan 11 17:38:34 2013 -0800
+++ b/apps/experiments/Modena/src/modena/Modena.css	Fri Jan 11 18:42:21 2013 -0800
@@ -55,8 +55,10 @@
 (1em = font size). The default sizes are based on Windows default of 12px, as
 a quick reference here are common px sizes in em units on windows.
 
-     1px  = 0.083333em
-     2px  = 0.166667em
+Windows 12px -> em units    -> Mac 13px      | 
+----------------------------------------
+     1px     -> 0.083333em  -> 1.08px ~ 2px
+     2px     -> 0.166667em  -> 2.16px ~ 3px
      3px  = 0.25em
      4px  = 0.333333em
      5px  = 0.416667em
@@ -364,7 +366,7 @@
     -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
     -fx-background-insets: 0, 1, 2;
     -fx-background-radius: 5, 4, 3;
-    -fx-padding: 0.333333em 1em 0.416667em 1em; /* 4 12 5 12 */
+    -fx-padding: 0.333333em 0.666667em 0.416667em 0.666667em; /* 4 8 5 8 */
     -fx-text-fill: -fx-text-base-color;
 }
 .button:hover,
@@ -452,7 +454,8 @@
 /* ====   MARKS   =========================================================== */
 
 .radio-button:selected > .radio > .dot,
-.check-box:selected > .box > .mark {
+.check-box:selected > .box > .mark,
+.check-box:indeterminate  > .box > .mark {
     -fx-background-color: -fx-mark-highlight-color, -fx-mark-color !important;
     -fx-background-insets: 0 0 -1 0, 0;
 }
@@ -499,7 +502,7 @@
 .choice-box > .label,
 .menu-button > .label,
 .color-picker > .label {
-    -fx-padding: 0.333333em 0.833333em 0.416667em 0.833333em; /* 4 10 5 10 */
+    -fx-padding: 0.333333em 0.666667em 0.416667em 0.666667em; /* 4 8 5 8 */
     -fx-text-fill: -fx-text-base-color;
 }
 .choice-box > .open-button,
@@ -636,7 +639,7 @@
 .radio-button > .radio > .dot {
    -fx-background-color: transparent;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
-   -fx-padding: 0.25em; /* 3 -- radius of the inner black dot when selected */
+   -fx-padding: 0.333333em; /* 4 -- radius of the inner black dot when selected */
 }
 
 /*******************************************************************************
@@ -651,23 +654,27 @@
 }
 .check-box > .box {
     -fx-background-radius: 3, 2, 1;
-    -fx-padding: -2 0 3 3;
+    -fx-padding: 0.666667em; /* 16x16 = 8+8 */
 }
 .check-box:focused > .box {
-    -fx-background-radius: 3.4, 3, 2, 1;
-}
-.check-box > .box > .mark {
+    -fx-background-radius: 5, 3, 2, 1;
+}
+.check-box:selected > .box {
+    /* Carefully picked numbers to remain square as scalling */
+    -fx-padding: -0.208333em 0 0.208333em 0.23em; /* -2.5 0 2.5 2.76 */
+}
+.check-box:selected > .box > .mark {
     -fx-background-color: transparent;
-    -fx-padding: 8 7 8 7; /* 4 -- this is half the size of the mark */
+    -fx-padding: 0.666667em 0.583333em 0.666667em 0.5em; /* 7 7 6 5 */
     -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
 }
 .check-box:indeterminate > .box {
-    -fx-padding: 7 3 7 3;
+    -fx-padding: 0; 
 }
 .check-box:indeterminate  > .box > .mark {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-shape: "M0,0H8V2H0Z";
-    -fx-padding: 2 6 1 5;
+    -fx-shape: "M0,0H10V2H0Z";
+    -fx-scale-shape: false;
+    -fx-padding: 0.666667em; /* 16x16 = 8+8 */
 }
 
 /*******************************************************************************
@@ -962,7 +969,7 @@
 .progress-bar > .bar {
     -fx-background-color: -fx-box-border,-fx-accent;
     -fx-background-insets: 2, 3;
-    -fx-background-radius: 0.416667em, 0.416667em;
+    -fx-background-radius: 0.25em, 0.166667em; /* 3 , 2 */
     -fx-padding: 0.416667em; /* 5 */
 }
 .progress-bar:indeterminate > .bar {
@@ -971,16 +978,9 @@
 .progress-bar > .track {
     -fx-background-color: 
         linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
-        derive(-fx-control-inner-background, -9%),
-        derive(-fx-control-inner-background, -7%),
-        -fx-control-inner-background;
-    -fx-background-insets: 0, 1 1 1 1, 2 1 1 1, 3 1 1 1;
-    -fx-background-radius: 0.416667em, 0.416667em, 0.416667em, 0.416667em;
-/*     -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-    -fx-background-insets:  0, 1;
-    -fx-background-radius: 0.416667em, 0.416667em;*/
+        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 0.416667em, 0.416667em; /* 5 */
 }
 
 /*******************************************************************************
@@ -993,8 +993,10 @@
     -fx-spin-enabled: true;
 }
 .progress-indicator > .determinate-indicator > .indicator {
-    -fx-background-color: -fx-box-border, derive( -fx-background, -10%);
-    -fx-background-insets: 0, 1;
+    -fx-background-color: -fx-box-border,
+        radial-gradient(center 50% 50%, radius 50%, -fx-control-inner-background 70%, derive(-fx-control-inner-background, -9%) 100%), 
+        -fx-control-inner-background;
+    -fx-background-insets: 0, 1, 5 2 1 2;
     -fx-padding: 1;
 }
 .progress-indicator > .determinate-indicator > .progress {
@@ -1069,18 +1071,17 @@
     -fx-highlight-text-fill: -fx-text-inner-color;
     -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
     -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
-        derive(-fx-control-inner-background, -9%),
-        derive(-fx-control-inner-background, -7%),
-        -fx-control-inner-background;
-    -fx-background-insets: 0, 1 1 1 1, 2 1 1 1, 3 1 1 1;
-    -fx-background-radius: 4, 4, 4, 4;
+        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 4, 3;
     -fx-cursor: text;
-    -fx-padding: 0.416667em; /*  5 */
+    -fx-padding: 0.416667em 0.666667em 0.416667em 0.666667em; /* 5 8 5 8 */
 }
 .text-input:focused {
     -fx-highlight-fill: -fx-accent;
     -fx-highlight-text-fill: white;
-    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; 
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, 
+        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); 
     -fx-background-insets: -2, -0.3, 1;
     -fx-background-radius: 6, 3.4, 2, 2;
     -fx-prompt-text-fill: transparent;
@@ -1095,14 +1096,27 @@
 .text-area {
     -fx-padding: 0;
     -fx-cursor: default;
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
+        derive(-fx-base,-1%);
 }
 .text-area > .scroll-pane {
-    -fx-background-color: transparent;
+    -fx-background-color: null;
+}
+.text-area > .scroll-pane > .scroll-bar:horizontal {
+    -fx-background-radius: 0 0 3 3;
+}
+.text-area > .scroll-pane > .scroll-bar:vertical {
+    -fx-background-radius: 0 3 3 0;
+}
+.text-area > .scroll-pane > .corner {
+    -fx-background-radius: 0 0 3 0;
 }
 .text-area .content {
-    -fx-padding: 0.416667em; /* 5 */
-    /* TODO USE OLD ? -fx-padding: 3 5 3 5;*/
+    -fx-padding: 0.416667em 0.666667em 0.416667em 0.666667em; /* 5 8 5 8 */
     -fx-cursor: text;
+    -fx-background-color: 
+        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
+    -fx-background-radius: 3;
 }
 
 /*******************************************************************************
@@ -1188,10 +1202,6 @@
  *                                                                             *
  ******************************************************************************/
 
-/* Corresponding hex values for the color derivations used below are: *
- * derive(-fx-base,-30%); #929292                                     *
- * derive(-fx-base,-50%); #686868                                     *
- * derive(-fx-base,-70%); #3e3e3e                                     */
 .menu-bar {
     -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
     -fx-spacing: 0.166667em; /* 2 */
@@ -1204,11 +1214,11 @@
 .menu-bar > .container > .menu-button {
     -fx-background-radius: 0;
     -fx-background-color: transparent;
-    -fx-background-insets: 0; 
+    -fx-background-insets: 0;
 }
 /* Change padding of menu buttons when in menu bar */
 .menu-bar > .container > .menu-button > .label {
-    -fx-padding: 0.333em 0.5em 0.333em 0.5em; /* 4 6 4 6*/
+    -fx-padding: 0;
 }
 .menu-bar > .container > .menu-button:hover, .menu-bar > .container > .menu-button:focused, .menu-bar > .container > .menu-button:showing {
     -fx-background: -fx-accent;
@@ -1478,7 +1488,7 @@
     -fx-background: transparent;
     -fx-background-color: transparent;
     -fx-text-fill: -fx-text-base-color;
-    -fx-padding: 0.333333em 1em 0.416667em 1em; /* 4 12 5 12 */
+    -fx-padding: 0.333333em 0.666667em 0.416667em 0.666667em; /* 4 8 5 8 */
 }
 .combo-box-base > .arrow-button  {
     -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
@@ -2348,10 +2358,14 @@
 /* This is the area behind the column headers. An ideal place to specify background
    and border colors for the whole area (not individual column-header's). */
 .table-view .column-header-background,
-.tree-table-view .column-header-background {
+.tree-table-view > .column-header-background {
     -fx-background-color: -fx-body-color;
     -fx-padding: 0;
 }
+/*.tree-table-view > .column-header-background {
+    -fx-background-color: -fx-body-color;
+    -fx-padding: 0;
+}*/
 /* The column header row is made up of a number of column-header, one for each
    TableColumn, and a 'filler' area that extends from the right-most column
    to the edge of the tableview, or up to the 'column control' button. */
@@ -2471,7 +2485,14 @@
     -fx-border-color: -fx-outer-border;
     -fx-border-radius: 3;
 }
-
+.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box,
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box > .box {
+    -fx-border-color: derive(-fx-accent,20%);
+}
+.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected > .check-box-table-cell > .check-box:selected > .box > .mark,
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .check-box-table-cell > .check-box:selected > .box > .mark {
+    -fx-background-color: -fx-selection-bar-text;
+}
 /*******************************************************************************
  *                                                                             *
  * TreeTableView                                                               *
--- a/apps/experiments/Modena/src/modena/SameHeightTest.fxml	Fri Jan 11 17:38:34 2013 -0800
+++ b/apps/experiments/Modena/src/modena/SameHeightTest.fxml	Fri Jan 11 18:42:21 2013 -0800
@@ -234,6 +234,7 @@
                         <PasswordField prefWidth="100.0" promptText="Password" text="password" />
                       </children>
                     </HBox>
+                    <Button mnemonicParsing="false" prefWidth="100.0" text="Button" />
                     <PasswordField maxWidth="100.0" prefWidth="100.0" text="Password" />
                     <TextArea maxWidth="100.0" prefHeight="50.0" prefRowCount="10" prefWidth="100.0" text="Sample" wrapText="true" />
                     <MenuButton maxWidth="100.0" mnemonicParsing="false" prefWidth="100.0" text="Sample">
@@ -294,7 +295,7 @@
                 </Region>
                 <Region maxHeight="-1.0" maxWidth="1.0" prefHeight="-1.0" prefWidth="-1.0" style="-fx-background-color: red;" visible="true">
                   <StackPane.margin>
-                    <Insets left="5.0" />
+                    <Insets left="9.0" />
                   </StackPane.margin>
                 </Region>
               </children>
--- a/apps/experiments/Modena/src/modena/SamplePage.java	Fri Jan 11 17:38:34 2013 -0800
+++ b/apps/experiments/Modena/src/modena/SamplePage.java	Fri Jan 11 18:42:21 2013 -0800
@@ -40,6 +40,7 @@
 import javafx.scene.control.Button;
 import javafx.scene.control.ButtonBuilder;
 import javafx.scene.control.CheckBox;
+import javafx.scene.control.CheckBoxBuilder;
 import javafx.scene.control.ChoiceBoxBuilder;
 import javafx.scene.control.ColorPicker;
 import javafx.scene.control.ColorPickerBuilder;
@@ -47,6 +48,7 @@
 import javafx.scene.control.Hyperlink;
 import javafx.scene.control.Label;
 import javafx.scene.control.LabelBuilder;
+import javafx.scene.control.ListViewBuilder;
 import javafx.scene.control.MenuButtonBuilder;
 import javafx.scene.control.PasswordFieldBuilder;
 import javafx.scene.control.ProgressBar;
@@ -60,6 +62,7 @@
 import javafx.scene.control.Slider;
 import javafx.scene.control.SliderBuilder;
 import javafx.scene.control.SplitMenuButtonBuilder;
+import javafx.scene.control.TableViewBuilder;
 import javafx.scene.control.TextAreaBuilder;
 import javafx.scene.control.TextField;
 import javafx.scene.control.TextFieldBuilder;
@@ -69,6 +72,8 @@
 import javafx.scene.control.ToggleGroup;
 import javafx.scene.control.Tooltip;
 import javafx.scene.control.TooltipBuilder;
+import javafx.scene.control.TreeTableViewBuilder;
+import javafx.scene.control.TreeViewBuilder;
 import javafx.scene.layout.GridPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.HBoxBuilder;
@@ -133,8 +138,8 @@
     
     public SamplePage() {
         setVgap(25);
-        setHgap(25);
-        setPadding(new Insets(20));
+        setHgap(15);
+        setPadding(new Insets(15));
         newSection("Button:", 
                 new Button("Button"),
                 withState(new Button("Hover"), "hover"),
@@ -223,8 +228,8 @@
                 withState(new CheckBox("Focused & Hover"), "selected, focused, hover"),
                 withState(new CheckBox("Focused & Armed"), "selected, focused, armed"),
                 withState(new CheckBox("Disabled"), "selected, disabled"));
-        newSection("CheckBox Indeterminate:", 
-                withState(new CheckBox("CheckBox"), "indeterminate, selected"),
+        newSection("CheckBox\nIndeterminate:", 
+                CheckBoxBuilder.create().text("CheckBox").selected(true).indeterminate(true).allowIndeterminate(true).build(),
                 withState(new CheckBox("Hover"), "indeterminate, selected, hover"),
                 withState(new CheckBox("Armed"), "indeterminate, selected, armed"),
                 withState(new CheckBox("Focused"), "indeterminate, selected, focused"),
@@ -239,7 +244,7 @@
                 withState(new RadioButton("Focused & Hover"), "focused, hover"),
                 withState(new RadioButton("Focused & Armed"), "focused, armed"),
                 withState(new RadioButton("Disabled"), "disabled"));
-        newSection("RadioButton Selected:", 
+        newSection("RadioButton\nSelected:", 
                 withState(new RadioButton("RadioButton"), "selected"),
                 withState(new RadioButton("Hover"), "selected, hover"),
                 withState(new RadioButton("Armed"), "selected, armed"),
@@ -284,19 +289,19 @@
                 );
         newSection(      
                 "Color Picker:", 
-                ColorPickerBuilder.create().value(Color.DODGERBLUE).build(),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).build(), "hover"),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).build(), "showing"),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).build(), "focused"),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).build(), "disabled")
+                ColorPickerBuilder.create().value(Color.RED).build(),
+                withState(ColorPickerBuilder.create().value(Color.RED).build(), "hover"),
+                withState(ColorPickerBuilder.create().value(Color.RED).build(), "showing"),
+                withState(ColorPickerBuilder.create().value(Color.RED).build(), "focused"),
+                withState(ColorPickerBuilder.create().value(Color.RED).build(), "disabled")
                 );
         newSection(      
                 "Color Picker\n Split Button:", 
-                ColorPickerBuilder.create().value(Color.DODGERBLUE).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "hover"),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "showing"),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "focused"),
-                withState(ColorPickerBuilder.create().value(Color.DODGERBLUE).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "disabled")
+                ColorPickerBuilder.create().value(Color.RED).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(),
+                withState(ColorPickerBuilder.create().value(Color.RED).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "hover"),
+                withState(ColorPickerBuilder.create().value(Color.RED).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "showing"),
+                withState(ColorPickerBuilder.create().value(Color.RED).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "focused"),
+                withState(ColorPickerBuilder.create().value(Color.RED).styleClass(ColorPicker.STYLE_CLASS_SPLIT_BUTTON).build(), "disabled")
                 );
         newSection(      
                 "MenuButton:", 
@@ -312,21 +317,24 @@
                 SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("right").popupSide(Side.RIGHT).build(),
                 SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("normal").build(),
                 withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("hover").build(),null,".label", "hover"),
-                withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("armed").build(),null,".label", "armed"),
-                withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("h").build(),null,".arrow-button", "hover"),
+                withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("armed").build(),null,".label", "armed")
+                );
+        newSection(      
+                "SplitMenuButton\nMore:", 
+                withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("arrow hover").build(),null,".arrow-button", "hover"),
                 withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("showing").build(), "showing"),
                 withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("focused").build(), "focused"),
                 withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("disabled").build(), "disabled")
                 );
         newDetailedSection(
-                new String[]{"Slider - H: ", "normal", "hover", "pressed", "disabled", "tickmarks"},
+                new String[]{"Slider (H):", "normal", "hover", "pressed", "disabled", "tickmarks"},
                 withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), null),
                 withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), null, ".thumb", "hover"),
                 withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), null, ".thumb", "hover, pressed"),
                 withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), "disabled"),
                 SliderBuilder.create().min(0).max(100).value(50).showTickMarks(true).showTickLabels(true).build());
         newDetailedSection(
-                new String[]{"Slider - H - Focused: ", "normal", "hover", "pressed"},
+                new String[]{"Slider (H) Focused:", "normal", "hover", "pressed"},
                 withState(new Slider(0, 100, 50), "focused"),
                 withState(new Slider(0, 100, 50), "focused", ".thumb", "hover"),
                 withState(new Slider(0, 100, 50), "focused", ".thumb", "hover, pressed"));
@@ -497,6 +505,13 @@
                 withState(createTreeTableView(200), "focused")
                 );
         newDetailedSection(
+                new String[] {"Empty:", "ListView", "TableView", "TreeView", "TreeTableView"},
+                ListViewBuilder.create(String.class).prefWidth(150).prefHeight(100).build(),
+                TableViewBuilder.create().prefWidth(150).prefHeight(100).build(),
+                TreeViewBuilder.create().prefWidth(150).prefHeight(100).build(),
+                TreeTableViewBuilder.create().prefWidth(150).prefHeight(100).build()
+                );
+        newDetailedSection(
                 new String[] {"ToolTip:","inline","inline + graphic", "popup"}, 
                 LabelBuilder.create().text("This is a simple Tooltip.").styleClass("tooltip").build(),
                 LabelBuilder.create().text("This is a simple Tooltip\nwith graphic.").graphic(createGraphic()).styleClass("tooltip").build(),
--- a/apps/experiments/Modena/src/modena/ui-mosaic.fxml	Fri Jan 11 17:38:34 2013 -0800
+++ b/apps/experiments/Modena/src/modena/ui-mosaic.fxml	Fri Jan 11 18:42:21 2013 -0800
@@ -34,8 +34,8 @@
         <MenuItem mnemonicParsing="false" text="Action 2" />
       </items>
     </SplitMenuButton>
-    <TextField layoutX="39.0" layoutY="149.0" prefWidth="160.0" promptText="Textfield" text="Textfield" />
-    <TextArea layoutX="39.0" layoutY="180.0" prefHeight="130.0" prefWidth="160.0" promptText="Text Area" text="Text Area with some text spanning over a few lines." wrapText="true" />
+    <TextField layoutX="40.0" layoutY="149.0" prefWidth="160.0" promptText="Textfield" text="Textfield" />
+    <TextArea layoutX="40.0" layoutY="180.0" prefHeight="130.0" prefWidth="160.0" promptText="Text Area" text="Text Area with some text spanning over a few lines." wrapText="true" />
     <ToggleButton layoutX="241.0" layoutY="196.0" mnemonicParsing="false" prefWidth="90.0" selected="true" text="Toggle">
       <toggleGroup>
         <ToggleGroup fx:id="toggle1" />