changeset 2134:42eb515e4bfb

Modena theme and test app updates
author "Jasper Potts"
date Thu, 03 Jan 2013 18:59:10 -0800
parents b0a03ab44363
children 8d529aa163ac
files apps/experiments/Modena/nbproject/configs/Run_as_WebStart.properties apps/experiments/Modena/nbproject/configs/Run_in_Browser.properties apps/experiments/Modena/src/modena/Modena.css apps/experiments/Modena/src/modena/Modena.java apps/experiments/Modena/src/modena/SamplePage.java apps/experiments/Modena/src/modena/TestApp.css
diffstat 6 files changed, 448 insertions(+), 146 deletions(-) [+]
line wrap: on
line diff
--- a/apps/experiments/Modena/nbproject/configs/Run_as_WebStart.properties	Fri Jan 04 15:21:29 2013 +1300
+++ b/apps/experiments/Modena/nbproject/configs/Run_as_WebStart.properties	Thu Jan 03 18:59:10 2013 -0800
@@ -0,0 +1,2 @@
+# Do not modify this property in this configuration. It can be re-generated.
+$label=Run as WebStart
--- a/apps/experiments/Modena/nbproject/configs/Run_in_Browser.properties	Fri Jan 04 15:21:29 2013 +1300
+++ b/apps/experiments/Modena/nbproject/configs/Run_in_Browser.properties	Thu Jan 03 18:59:10 2013 -0800
@@ -0,0 +1,2 @@
+# Do not modify this property in this configuration. It can be re-generated.
+$label=Run in Browser
--- a/apps/experiments/Modena/src/modena/Modena.css	Fri Jan 04 15:21:29 2013 +1300
+++ b/apps/experiments/Modena/src/modena/Modena.css	Thu Jan 03 18:59:10 2013 -0800
@@ -61,7 +61,7 @@
      * -fx-text-fill value for text painted on top of backgrounds colored
      * with -fx-control-inner-background.
      */
-    -fx-control-inner-background: white;
+    -fx-control-inner-background: derive(-fx-base,80%);
 
     /* One of these colors will be chosen based upon a ladder calculation
      * that uses the brightness of a background color.  Instead of using these
@@ -597,6 +597,40 @@
     -fx-stroke: -fx-text-fill;
 } 
 
+/*******************************************************************************
+ *                                                                             *
+ * Hyperlink                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.hyperlink {
+    -fx-padding: 0.166667em; /* 2 */
+    -fx-cursor: hand;
+    -fx-content-display: LEFT;
+    -fx-text-fill: -fx-text-background-color;
+    -fx-border-color: transparent;
+    -fx-border-width: 1px;
+}
+.hyperlink:visited {
+    -fx-text-fill: -fx-accent;
+}
+.hyperlink:focused {
+    -fx-color: -fx-focused-base;
+    -fx-border-color: -fx-focus-color;
+    -fx-border-style: dotted;
+    -fx-border-width: 1px;
+}
+.hyperlink:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.hyperlink:hover {
+    -fx-underline: true;
+}
+.hyperlink:show-mnemonics > .mnemonic-underline {
+    -fx-stroke: -fx-text-fill;
+} 
+
+
 /* ====   TOOLBAR   ========================================================= */
 
 .tool-bar:vertical {
@@ -706,147 +740,73 @@
  * ScrollBar                                                                   *
  *                                                                             *
  ******************************************************************************/
-
+/* homepage scroll bars */
 .scroll-bar:horizontal {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
-    -fx-background-insets: 0, 1;
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-base,-5%), derive(-fx-base,5%) 50%, derive(-fx-base,-5%));
+    -fx-padding: 3px;
 }
-
-.scroll-bar:horizontal:focused {
-    -fx-background-color:
-        -fx-focus-color,
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
-    -fx-background-insets: -1.4, 0, 1;
+.scroll-bar:vertical {
+    -fx-background-color: linear-gradient(to right, derive(-fx-base,-5%), derive(-fx-base,5%) 50%, derive(-fx-base,-5%));
+    -fx-padding: 3px;
 }
-
-.scroll-bar:vertical {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
-    -fx-background-insets: 0, 1;
+.scroll-bar > .thumb {
+    -fx-background-color: derive(-fx-base,-30%);
+    -fx-background-insets: 0;
+    -fx-background-radius: 6px;
 }
-
-.scroll-bar:vertical:focused {
-    -fx-background-color:
-        -fx-focus-color,
-        -fx-box-border,
-        linear-gradient(to top, derive(-fx-color,30%) 5%, derive(-fx-color,-17%) 100%);
-    -fx-background-insets: -1.4, 0, 1;
+.scroll-bar > .thumb:hover {
+    -fx-background-color: derive(-fx-base,-50%);
 }
-
-.scroll-bar:horizontal > .thumb {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to bottom, derive(-fx-color,95%), derive(-fx-color,10%)),
-        linear-gradient(to bottom, derive(-fx-color,38%), derive(-fx-color,-16%));
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 0.5em; /* makes sure this remains circular */
+.scroll-bar:horizontal > .increment-button, 
+.scroll-bar:horizontal > .decrement-button {
+    -fx-padding: 4px 0 4px 0;
 }
-
-.scroll-bar:vertical > .thumb {
-    -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to right, derive(-fx-color,95%), derive(-fx-color,10%)),
-        linear-gradient(to right, derive(-fx-color,38%), derive(-fx-color,-16%));
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 0.5em; /* makes sure this remains circular */
+.scroll-bar:vertical > .increment-button, 
+.scroll-bar:vertical > .decrement-button {
+    -fx-padding: 0 4px 0 4px;
 }
-
-.scroll-bar:focused > .thumb {
-    -fx-color: -fx-focused-base;
-}
-
-.scroll-bar > .thumb:hover {
-    -fx-color: -fx-hover-base;
-}
-
-.scroll-bar .thumb:pressed {
-    -fx-color: -fx-pressed-base;
-}
-
-
-.scroll-bar:horizontal > .track {
-     -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.5em; /* makes sure this remains circular */
-}
-.scroll-bar:horizontal > .track-background {
-     -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to top, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-    -fx-background-insets:  0, 1;
-}
-
-.scroll-bar:vertical > .track {
-     -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-    -fx-background-insets:  0, 1;
-    -fx-background-radius: 0.5em; /* makes sure this remains circular */
-}
-
-.scroll-bar:vertical > .track-background {
-     -fx-background-color:
-        -fx-box-border,
-        linear-gradient(to left, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-    -fx-background-insets:  0, 1;
-}
-
-.scroll-bar > .increment-button {
-    -fx-background-color: transparent;
-    -fx-background-insets:  0;
-    -fx-padding: 0.25em; /* 3 */
-}
-
-.scroll-bar > .decrement-button {
-    -fx-background-color: transparent;
-    -fx-background-insets:  0;
-    -fx-padding: 0.25em; /* 3 */
-}
-
-.scroll-bar:horizontal > .increment-button > .increment-arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-    -fx-shape: "M 4 0 L 0 -3 L 0 3 z";
-}
-
-.scroll-bar:vertical > .increment-button > .increment-arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-    -fx-shape: "M -3 0 L 0 4 L 3 0 z";
-}
-
-.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-    -fx-shape: "M 0 0 L 4 -3 L 4 3 z";
-}
-
-.scroll-bar:vertical > .decrement-button > .decrement-arrow {
-    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-    -fx-background-insets: 1 0 -1 0, 0;
-    -fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-    -fx-shape: "M -3 0 L 0 -4 L 3 0 z";
-}
-
 .scroll-bar:disabled {
     -fx-opacity: -fx-disabled-opacity;
 }
 
-/* The opacity of the parent is applied to the children.  So we make the
- * opacity 1.0 here to avoid double translucency.
- */
-/*:disabled > * > .scroll-bar {
-    -fx-opacity: 1.0;
-}*/
+/*******************************************************************************
+ *                                                                             *
+ * ScrollPane                                                                  *
+ *                                                                             *
+ ******************************************************************************/
+.scroll-pane {
+    -fx-background-color: -fx-box-border,-fx-background;
+    -fx-background-insets: 0, 1;
+    -fx-padding: 1;
+}
+.scroll-pane:focused {
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-background; 
+    -fx-background-insets: -2, -0.3, 1;
+}
+.scroll-pane > .scroll-bar:horizontal {
+    -fx-background-insets: 0 1 1 1;
+    -fx-padding: 3 4 4 4;
+}
+.scroll-pane > .scroll-bar:vertical {
+    -fx-background-insets: 1 1 1 0;
+    -fx-padding: 4 4 4 3;
+}
+.scroll-pane > .corner {
+    -fx-background-color: -fx-base;
+    -fx-background-insets: 0 1 1 0;
+}
+.scroll-pane:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+/* new styleclass for edge to edge scrollpanes that don't want to draw a border */
+.scroll-pane.edge-to-edge {
+    -fx-background-color: -fx-background;
+    -fx-background-insets: 0;
+}
+.scroll-pane.edge-to-edge > .scroll-bar {
+    -fx-background-insets: 0;
+    -fx-padding: 3;
+}
 
 /*******************************************************************************
  *                                                                             *
@@ -910,4 +870,185 @@
 
 .progress-bar:disabled {
     -fx-opacity: -fx-disabled-opacity;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ProgressIndicator                                                           *
+ *                                                                             *
+ ******************************************************************************/
+
+.progress-indicator {
+    -fx-progress-color: -fx-accent;
+}
+
+.progress-indicator > .determinate-indicator > .indicator {
+    -fx-background-color:
+        -fx-box-border,
+        -fx-outer-border,
+        -fx-inner-border,
+        -fx-body-color;
+    -fx-background-insets: 1 0 -1 0, 0, 1, 2;
+    -fx-padding: 0.083333em; /* 1 */
+}
+
+.progress-indicator > .determinate-indicator > .progress {
+    -fx-background-color:
+        linear-gradient(to bottom, derive(-fx-box-border,38%), derive(-fx-box-border,-60%)),
+        linear-gradient(to bottom, derive(-fx-box-border,38%), -fx-box-border);
+    -fx-background-insets: 0, 1;
+    -fx-padding: 0.75em; /* 9 */
+}
+
+/* TODO: scaling the shape seems to make it disappear */
+.progress-indicator > .determinate-indicator > .tick {
+    -fx-background-color: -fx-mark-color, white;
+    -fx-background-insets: 1 0 -1 0, 0;
+    -fx-padding: 0.416667em; /* 5 */
+    -fx-shape: "M 0,5 L 2.5,5 L 3.7,7.5 L 7.5,0 L 10,0 L 5,10 L 2.5,10 Z";
+    -fx-scale-shape: false;
+}
+
+.progress-indicator:indeterminate > .spinner {
+    -fx-padding: 0.833333em; /* 10 */
+}
+
+.progress-indicator > .percentage {
+    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
+    -fx-fill: -fx-text-background-color;
+}
+
+.progress-indicator:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Text COMMON                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+.text-input {
+    -fx-text-fill: -fx-text-inner-color;
+    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
+    -fx-highlight-text-fill: -fx-text-inner-color;
+    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
+    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 2, 2;
+    -fx-cursor: text;
+}
+.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-insets: -2, -0.3, 1;
+    -fx-background-radius: 6, 3.4, 2, 2;
+    -fx-prompt-text-fill: transparent;
+}
+.text-input:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * TextField                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+.text-field {
+    -fx-padding: 3 5 3 5;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * TextArea                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+.text-area {
+    -fx-padding: 1;
+}
+.text-area > .scroll-pane {
+    -fx-background-color: transparent;
+}
+.text-area .content {
+    -fx-padding: 3 5 3 5; 
+    -fx-cursor: text;
+}
+
+
+/*******************************************************************************
+ *                                                                             *
+ * ChoiceBox                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.button:focused {
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: -2, -0.3, 1, 2;
+    -fx-background-radius: 7, 6, 4, 3;
+}
+
+.choice-box {
+    -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.0em 0.5em 0.0em 0.0em; /* 0 6 0 0 */
+    -fx-alignment: CENTER;
+    -fx-content-display: LEFT;
+}
+
+.choice-box:focused {
+    -fx-color: -fx-focused-base;
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: -2, -0.3, 1, 2;
+    -fx-background-radius: 7, 6, 4, 3;
+}
+
+.choice-box:hover {
+    -fx-color: -fx-hover-base;
+}
+
+.choice-box:showing {
+    -fx-color: -fx-pressed-base;
+}
+
+.choice-box > .label {
+    -fx-padding: 0.166667em 0.333333em 0.25em 0.5em; /* 2 4 3 6 */
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.choice-box > .open-button {
+    -fx-background-color: null;
+    -fx-padding: 0.083333em 0.0em 0.0em 0.666667em; /* 1 0 0 8 */
+}
+
+.choice-box > .open-button > .arrow {
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -fx-background-insets: 1 0 -1 0, 0;
+    /* padding determines the size of the arrow;
+       this should match the design size in the SVG */
+    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 3.5 2 3.5 */
+    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
+}
+
+.choice-box > .context-menu {
+    -fx-background-radius: 6, 5, 4;
+}
+
+/*.choice-box > .context-menu > .menu-item {
+    -fx-accelerator-gutter: 0;
+}*/
+
+/* TODO: need to use the ID here.  For some reason, the other form does not
+ * work.  This might be related to popup issues.
+ */
+/*.choice-box > * > .menu-item-radio {*/
+#choice-box-menu-item > * > .menu-item-radio {
+    /* When we show RadioMenuItems in ChoiceBox, we replace the radio shape with
+       a check mark, which looks much better */
+    -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
+    -fx-scale-shape: false;
+}
+
+.choice-box:disabled {
+    -fx-opacity: -fx-disabled-opacity;
 }
\ No newline at end of file
--- a/apps/experiments/Modena/src/modena/Modena.java	Fri Jan 04 15:21:29 2013 +1300
+++ b/apps/experiments/Modena/src/modena/Modena.java	Thu Jan 03 18:59:10 2013 -0800
@@ -1,3 +1,34 @@
+/*
+ * Copyright (c) 2008, 2012 Oracle and/or its affiliates.
+ * All rights reserved. Use is subject to license terms.
+ *
+ * This file is available and licensed under the following license:
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ *  - Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ *  - Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in
+ *    the documentation and/or other materials provided with the distribution.
+ *  - Neither the name of Oracle Corporation nor the names of its
+ *    contributors may be used to endorse or promote products derived
+ *    from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
 package modena;
 
 import javafx.application.Application;
@@ -54,6 +85,7 @@
         // Create Toolbar
         final Group contentGroup = new Group();
         final ScrollPane contentScrollPane = new ScrollPane();
+        contentScrollPane.getStyleClass().add("edge-to-edge");
         final ToggleButton modenaButton;;
         final ToggleButton retinaButton = ToggleButtonBuilder.create()
             .text("Retina @2x")
--- a/apps/experiments/Modena/src/modena/SamplePage.java	Fri Jan 04 15:21:29 2013 +1300
+++ b/apps/experiments/Modena/src/modena/SamplePage.java	Thu Jan 03 18:59:10 2013 -0800
@@ -1,25 +1,67 @@
 /*
- * To change this template, choose Tools | Templates
- * and open the template in the editor.
+ * Copyright (c) 2008, 2012 Oracle and/or its affiliates.
+ * All rights reserved. Use is subject to license terms.
+ *
+ * This file is available and licensed under the following license:
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ *  - Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ *  - Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in
+ *    the documentation and/or other materials provided with the distribution.
+ *  - Neither the name of Oracle Corporation nor the names of its
+ *    contributors may be used to endorse or promote products derived
+ *    from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 package modena;
 
 import javafx.application.Platform;
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
 import javafx.geometry.Insets;
 import javafx.geometry.Orientation;
 import javafx.geometry.Pos;
+import javafx.scene.Group;
+import javafx.scene.GroupBuilder;
 import javafx.scene.Node;
 import javafx.scene.control.Button;
 import javafx.scene.control.ButtonBuilder;
 import javafx.scene.control.CheckBox;
+import javafx.scene.control.ChoiceBoxBuilder;
+import javafx.scene.control.Hyperlink;
 import javafx.scene.control.Label;
+import javafx.scene.control.PasswordField;
+import javafx.scene.control.PasswordFieldBuilder;
 import javafx.scene.control.ProgressBar;
+import javafx.scene.control.ProgressIndicator;
 import javafx.scene.control.RadioButton;
 import javafx.scene.control.ScrollBar;
 import javafx.scene.control.ScrollBarBuilder;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.control.ScrollPaneBuilder;
 import javafx.scene.control.Separator;
 import javafx.scene.control.SeparatorBuilder;
 import javafx.scene.control.Slider;
+import javafx.scene.control.TextArea;
+import javafx.scene.control.TextAreaBuilder;
+import javafx.scene.control.TextField;
+import javafx.scene.control.TextFieldBuilder;
 import javafx.scene.control.ToggleButton;
 import javafx.scene.control.ToggleButtonBuilder;
 import javafx.scene.control.ToggleGroup;
@@ -27,6 +69,11 @@
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.HBoxBuilder;
 import javafx.scene.layout.VBox;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Line;
+import javafx.scene.shape.LineBuilder;
+import javafx.scene.shape.Rectangle;
+import javafx.scene.shape.RectangleBuilder;
 
 /**
  * Page showing every control in every state
@@ -79,6 +126,19 @@
         getChildren().addAll(sectionLabel,hbox);
     }
     
+    private static ObservableList<String> sampleItems() {
+        return FXCollections.observableArrayList("Item A","Item B","Item C",
+                "Item D","Item E","Item F","Item G");
+    }
+    
+    private static Node scrollPaneContent() {
+        return GroupBuilder.create().children(
+                RectangleBuilder.create().width(200).height(200).fill(Color.PALETURQUOISE).build(),
+                LineBuilder.create().endX(200).endY(200).stroke(Color.DODGERBLUE).build(),
+                LineBuilder.create().startX(200).endX(0).endY(200).stroke(Color.DODGERBLUE).build()
+            ).build();
+    }
+    
     public SamplePage() {
         setVgap(25);
         setHgap(25);
@@ -195,6 +255,16 @@
                 withState(new RadioButton("Focused & Hover"), "selected, focused, hover"),
                 withState(new RadioButton("Focused & Armed"), "selected, focused, armed"),
                 withState(new RadioButton("Disabled"), "selected, disabled"));
+        newSection("HyperLink:", 
+                new Hyperlink("Hyperlink"),
+                withState(new Hyperlink("Visited"), "visited"),
+                withState(new Hyperlink("Hover"), "hover"),
+                withState(new Hyperlink("Armed"), "armed"),
+                withState(new Hyperlink("Focused"), "focused"),
+                withState(new Hyperlink("F & Visited"), "focused, visited"),
+                withState(new Hyperlink("F & Hover"), "focused, hover"),
+                withState(new Hyperlink("F & Armed"), "focused, armed"),
+                withState(new Hyperlink("Disabled"), "disabled"));
         newSection("Slider:", 
                 new Slider(0,100,50),
                 withState(new Slider(0,100,50), null, ".thumb", "hover"),
@@ -205,32 +275,83 @@
                 withState(new Slider(0,100,50), "focused", ".thumb", "hover"),
                 withState(new Slider(0,100,50), "focused", ".thumb", "hover, pressed"));
         newDetailedSection(
-                new String[] {"Scrollbar - V: ", "normal", "focused", ".thumb hover", ".thumb pressed"}, 
+                new String[] {"Scrollbar - V: ", "normal", "small", "focused", ".thumb hover", ".thumb pressed"}, 
                 new ScrollBar(),
+                ScrollBarBuilder.create().minWidth(30).prefWidth(30).build(),
                 withState(new ScrollBar(), "horizontal, focused"),
                 withState(new ScrollBar(), "horizontal", ".thumb", "hover"),
                 withState(new ScrollBar(), "horizontal", ".thumb", "pressed")
                 );
         newDetailedSection(
-                new String[] {"Scrollbar - V: ", "normal", "focused", ".thumb hover", ".thumb pressed"}, 
+                new String[] {"Scrollbar - V: ", "normal", "small", "focused", ".thumb hover", ".thumb pressed"}, 
                 withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical"),
+                withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).minHeight(30).prefHeight(30).build(), "vertical"),
                 withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical, focused"),
                 withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical", ".thumb", "hover"),
                 withState(ScrollBarBuilder.create().orientation(Orientation.VERTICAL).build(), "vertical", ".thumb", "pressed")
                 );
-        newSection(      
-                "Separator - H:", 
-                new Separator()
-                );
-        newSection(      
-                "Separator - V:", 
-                SeparatorBuilder.create().orientation(Orientation.VERTICAL).build()
+        newDetailedSection(
+                new String[] {"ScrollPane: ", "normal", "small", "focused"}, 
+                ScrollPaneBuilder.create().content(scrollPaneContent()).build(),
+                ScrollPaneBuilder.create().content(scrollPaneContent()).minWidth(40).prefWidth(40).minHeight(40).prefHeight(40).build(),
+                withState(ScrollPaneBuilder.create().content(scrollPaneContent()).build(), "focused")
+                ); 
+        newDetailedSection(
+                new String[] {"Separator: ", "horizontal", "vertical"}, 
+                SeparatorBuilder.create().prefWidth(100).build(),
+                SeparatorBuilder.create().orientation(Orientation.VERTICAL).prefHeight(50).build()
                 );
         newDetailedSection(
                 new String[] {"ProgressBar: ", "normal", "disabled", "indeterminate"}, 
-                new ProgressBar(0.6F),
+                new ProgressBar(0.6),
                 withState(new ProgressBar(), "disabled"),
-                withState(new ProgressBar(), "indeterminate")
+                new ProgressBar(-1)
+                );
+        newDetailedSection(
+                new String[] {"ProgressIndicator: ", "normal 0%", "normal 60%", "normal 100%", "disabled", "indeterminate"}, 
+                new ProgressIndicator(0),
+                new ProgressIndicator(0.6),
+                new ProgressIndicator(1),
+                withState(new ProgressIndicator(0.5), "disabled"),
+                new ProgressIndicator(-1)
+                );
+        newSection(      
+                "TextField:", 
+                new TextField("TextField"),
+                TextFieldBuilder.create().promptText("Prompt Text").build(),
+                withState(new TextField("Focused"), "focused"),
+                withState(new TextField("Disabled"), "disabled")
+                );
+        newSection(      
+                "PasswordField:", 
+                PasswordFieldBuilder.create().text("Password").build(),
+                PasswordFieldBuilder.create().promptText("Prompt Text").build(),
+                withState(PasswordFieldBuilder.create().text("Password").build(), "focused"),
+                withState(PasswordFieldBuilder.create().text("Password").build(), "disabled")
+                );
+        newSection(      
+                "TextArea:", 
+                TextAreaBuilder.create().text("TextArea").prefColumnCount(10).prefRowCount(2).build(),
+                TextAreaBuilder.create().text("Many Lines of\nText.\n#3\n#4\n#5\n#6\n#7\n#8\n#9\n#10").prefColumnCount(10).prefRowCount(3).build(),
+                TextAreaBuilder.create().promptText("Prompt Text").prefColumnCount(10).prefRowCount(2).build(),
+                withState(TextAreaBuilder.create().text("Focused").prefColumnCount(10).prefRowCount(2).build(), "focused"),
+                withState(TextAreaBuilder.create().text("Disabled").prefColumnCount(10).prefRowCount(2).build(), "disabled")
+                );
+        newSection(      
+                "TextArea:", 
+                TextAreaBuilder.create().text("TextArea").prefColumnCount(10).prefRowCount(2).build(),
+                TextAreaBuilder.create().text("Many Lines of\nText.\n#3\n#4\n#5\n#6\n#7\n#8\n#9\n#10").prefColumnCount(10).prefRowCount(3).build(),
+                TextAreaBuilder.create().promptText("Prompt Text").prefColumnCount(10).prefRowCount(2).build(),
+                withState(TextAreaBuilder.create().text("Focused").prefColumnCount(10).prefRowCount(2).build(), "focused"),
+                withState(TextAreaBuilder.create().text("Disabled").prefColumnCount(10).prefRowCount(2).build(), "disabled")
+                );
+        newSection(      
+                "ChoiceBox:", 
+                ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item A").build(),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "hover"),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "showing"),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "focused"),
+                withState(ChoiceBoxBuilder.create(String.class).items(sampleItems()).value("Item C").build(), "disabled")
                 );
     }
 }
--- a/apps/experiments/Modena/src/modena/TestApp.css	Fri Jan 04 15:21:29 2013 +1300
+++ b/apps/experiments/Modena/src/modena/TestApp.css	Thu Jan 03 18:59:10 2013 -0800
@@ -44,10 +44,14 @@
 }
 .section-label {
     -fx-font-weight: normal;
-    -fx-text-fill: rgba(0,0,0,0.5);
+    -fx-text-fill: derive(-fx-text-background-color,30%);
 }
 
 .section-border {
-    -fx-border-color: rgba(0,0,0,0.1);
+    -fx-border-color: ladder(
+        -fx-background,
+        derive(-fx-background,10%) 20%,
+        derive(-fx-background,-10%)  21%
+     );;
     -fx-padding: 20;
 }
\ No newline at end of file