changeset 2159:17605c266145

Modena, added more controls
author "Jasper Potts"
date Mon, 07 Jan 2013 17:39:40 -0800
parents b467b737f91b
children 2c97996481b0
files apps/experiments/Modena/src/modena/Modena.css apps/experiments/Modena/src/modena/SamplePage.java apps/experiments/Modena/src/modena/SamplePageHelpers.java apps/experiments/Modena/src/modena/recorder-icon-48.png
diffstat 4 files changed, 295 insertions(+), 34 deletions(-) [+]
line wrap: on
line diff
--- a/apps/experiments/Modena/src/modena/Modena.css	Mon Jan 07 16:37:23 2013 -0800
+++ b/apps/experiments/Modena/src/modena/Modena.css	Mon Jan 07 17:39:40 2013 -0800
@@ -610,6 +610,140 @@
     -fx-stroke: -fx-text-fill;
 } 
 
+/*******************************************************************************
+ *                                                                             *
+ * MenuButton                                                                  *
+ *                                                                             *
+ ******************************************************************************/
+
+/*.button {
+    -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;
+    -fx-text-fill: -fx-text-base-color;
+}
+.button:hover {
+    -fx-color: -fx-hover-base;
+}
+.button:armed {
+    -fx-color: -fx-pressed-base;
+}
+.button:default {
+    -fx-base: -fx-accent;
+}
+.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;
+}*/
+.menu-button {
+    -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;
+    -fx-text-fill: -fx-text-base-color;
+}
+.menu-button > .label {
+    /* The MenuButton skin uses an inner Label part */
+    -fx-padding: 0.166667em 1.5em 0.25em 0.833333em; /* 2 18 3 10 */
+}
+.menu-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;
+    /*-fx-color: -fx-focused-base;*/
+}
+.menu-button:hover {
+    -fx-color: -fx-hover-base;
+}
+.menu-button:armed {
+    -fx-color: -fx-pressed-base;
+}
+.menu-button > .arrow-button {
+    -fx-background-insets: 0;
+    -fx-background-radius: 0;
+    -fx-padding: 0.5em 0.416667em 0.5em 0.0em; /* 6 5 6 0 */
+}
+.menu-button > .arrow-button > .arrow {
+    -fx-background-insets: 1 0 -1 0, 0;
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -fx-padding: 0.25em; /* 3 */
+    -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
+}
+.menu-button:openvertically > .arrow-button > .arrow {
+    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
+    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
+}
+.menu-button:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+.menu-button:show-mnemonics > .mnemonic-underline {
+    -fx-stroke: -fx-text-fill;
+} 
+
+/*******************************************************************************
+ *                                                                             *
+ * SplitMenuButton                                                             *
+ *                                                                             *
+ ******************************************************************************/
+.split-menu-button {
+    -fx-padding: 0.0em; /* 0 */
+    -fx-text-fill: -fx-text-base-color;
+}
+.split-menu-button:focused {
+    -fx-background-color: -fx-focus-color;
+    -fx-background-insets: -2;
+    -fx-background-radius: 7;
+}
+.split-menu-button > .label:hover {
+    -fx-color: -fx-hover-base;
+}
+.split-menu-button:armed > .label {
+    -fx-color: -fx-pressed-base;
+}
+/* The SplitMenuButton skin uses an inner Label part */
+.split-menu-button > .label {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; 
+    -fx-background-insets: 0, 1 0 1 1, 2 1 2 2;
+    -fx-background-radius: 5 0 0 5, 4 0 0 4, 3 0 0 3;
+    -fx-padding: 0.166667em 1.5em 0.25em 0.833333em; /* 2 18 3 10 */
+}
+
+.split-menu-button > .arrow-button {
+    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
+    -fx-background-insets: 0, 1, 2;
+    -fx-background-radius: 0 5 5 0, 0 4 4 0, 0 3 3 0;
+    -fx-padding: 0.5em 0.416667em 0.5em 0.416667em; /* 6 5 6 5 */
+}
+
+.split-menu-button > .arrow-button:hover {
+    -fx-color: -fx-hover-base;
+}
+
+.split-menu-button > .arrow-button:pressed {
+    -fx-color: -fx-pressed-base;
+}
+
+.split-menu-button > .arrow-button > .arrow {
+    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
+    -fx-background-insets: 1 0 -1 0, 0;
+    -fx-padding: 0.25em; /* 3 */
+    -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
+}
+
+.split-menu-button:openvertically > .arrow-button > .arrow {
+    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
+    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
+}
+
+.split-menu-button:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+
+.split-menu-button:show-mnemonics > .mnemonic-underline {
+    -fx-stroke: -fx-text-fill;
+} 
 
 /* ====   TOOLBAR   ========================================================= */
 
@@ -2703,4 +2837,21 @@
     -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
     -fx-text-fill: -fx-text-inner-color;
 }
-/** End of hover styles */
\ No newline at end of file
+/** End of hover styles */
+
+
+/*******************************************************************************
+ *                                                                             *
+ * Tooltip                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.tooltip {
+    -fx-background: rgba(30,30,30);
+    -fx-text-fill: white;
+    -fx-background-color: rgba(30,30,30,0.8);
+    -fx-background-radius: 6px;
+    -fx-background-insets: 0;
+    -fx-padding: 0.666667em; /* 8 */
+    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
+}
\ No newline at end of file
--- a/apps/experiments/Modena/src/modena/SamplePage.java	Mon Jan 07 16:37:23 2013 -0800
+++ b/apps/experiments/Modena/src/modena/SamplePage.java	Mon Jan 07 17:39:40 2013 -0800
@@ -44,6 +44,8 @@
 import javafx.scene.control.ComboBoxBuilder;
 import javafx.scene.control.Hyperlink;
 import javafx.scene.control.Label;
+import javafx.scene.control.LabelBuilder;
+import javafx.scene.control.MenuButtonBuilder;
 import javafx.scene.control.PasswordFieldBuilder;
 import javafx.scene.control.ProgressBar;
 import javafx.scene.control.ProgressIndicator;
@@ -55,6 +57,7 @@
 import javafx.scene.control.SeparatorBuilder;
 import javafx.scene.control.Slider;
 import javafx.scene.control.SliderBuilder;
+import javafx.scene.control.SplitMenuButtonBuilder;
 import javafx.scene.control.Tab;
 import javafx.scene.control.TabPaneBuilder;
 import javafx.scene.control.TextAreaBuilder;
@@ -64,10 +67,13 @@
 import javafx.scene.control.ToggleButton;
 import javafx.scene.control.ToggleButtonBuilder;
 import javafx.scene.control.ToggleGroup;
+import javafx.scene.control.Tooltip;
+import javafx.scene.control.TooltipBuilder;
 import javafx.scene.layout.GridPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.HBoxBuilder;
 import javafx.scene.layout.VBox;
+import javafx.scene.layout.VBoxBuilder;
 import javafx.scene.paint.Color;
 import static modena.SamplePageHelpers.*;
 
@@ -248,6 +254,54 @@
                 withState(new Hyperlink("F & Hover"), "focused, hover"),
                 withState(new Hyperlink("F & Armed"), "focused, armed"),
                 withState(new Hyperlink("Disabled"), "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")
+                );
+        newSection(      
+                "ComboBox:", 
+                ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item A").build(),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "hover"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "showing"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "focused"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item C").build(), "disabled")
+                );
+        newSection(      
+                "ComboBox\nEditable:", 
+                ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item A").editable(true).build(),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "hover"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "showing"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "focused"),
+                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item C").editable(true).build(), "disabled")
+                );
+        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")
+                );
+        newSection(      
+                "MenuButton:", 
+                MenuButtonBuilder.create().items(createMenuItems(20)).text("normal").build(),
+                withState(MenuButtonBuilder.create().items(createMenuItems(20)).text("hover").build(), "hover"),
+                withState(MenuButtonBuilder.create().items(createMenuItems(20)).text("armed").build(), "armed"),
+                withState(MenuButtonBuilder.create().items(createMenuItems(20)).text("focused").build(), "focused"),
+                withState(MenuButtonBuilder.create().items(createMenuItems(20)).text("disabled").build(), "disabled")
+                );
+        newSection(      
+                "SplitMenuButton:", 
+                SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("normal").build(),
+                withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("hover").build(), "hover"),
+                withState(SplitMenuButtonBuilder.create().items(createMenuItems(20)).text("armed").build(), "armed"),
+                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"},
                 withState(SliderBuilder.create().maxWidth(90).min(0).max(100).value(50).build(), null),
@@ -335,38 +389,6 @@
                 withState(TextAreaBuilder.create().text("Focused").prefColumnCount(7).prefRowCount(2).build(), "focused"),
                 withState(TextAreaBuilder.create().text("Disabled").prefColumnCount(8).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")
-                );
-        newSection(      
-                "ComboBox:", 
-                ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item A").build(),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "hover"),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "showing"),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").build(), "focused"),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item C").build(), "disabled")
-                );
-        newSection(      
-                "ComboBox\nEditable:", 
-                ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item A").editable(true).build(),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "hover"),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "showing"),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item B").editable(true).build(), "focused"),
-                withState(ComboBoxBuilder.create(String.class).items(sampleItems()).value("Item C").editable(true).build(), "disabled")
-                );
-        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")
-                );
         newDetailedSection(
                 new String[] {"ToolBar (H):", "normal", "overflow", "disabled"}, 
                 createToolBar(false,false),
@@ -431,10 +453,20 @@
                 createListView(3, false, true)
                 );
         newDetailedSection(
-                new String[] {"ListView\n:10,000 items\nmultiple selection:","normal", "focused", "disabled"}, 
+                new String[] {"ListView\n10,000 items\nmultiple selection:","normal", "focused", "disabled"}, 
                 createListView(10000, true, false),
                 withState(createListView(10000, true, false), "focused"),
                 createListView(10000, true, true)
                 );
+        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(),
+                VBoxBuilder.create().fillWidth(true).spacing(4).children(
+                    ButtonBuilder.create().text("Hover over me").tooltip(new Tooltip("This is a simple Tooltip.")).build(),
+                    ButtonBuilder.create().text("me too").tooltip(new Tooltip("This is a simple Tooltip\nwith more than one line.")).build(),
+                    ButtonBuilder.create().text("or me").tooltip(TooltipBuilder.create().text("This is a simple Tooltip\nwith graphic.").graphic(createGraphic()).build()).build()
+                ).build()
+                );
     }
 }
--- a/apps/experiments/Modena/src/modena/SamplePageHelpers.java	Mon Jan 07 16:37:23 2013 -0800
+++ b/apps/experiments/Modena/src/modena/SamplePageHelpers.java	Mon Jan 07 17:39:40 2013 -0800
@@ -5,25 +5,39 @@
 package modena;
 
 import java.util.ArrayList;
+import java.util.List;
+import javafx.beans.InvalidationListener;
+import javafx.beans.Observable;
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
+import javafx.event.ActionEvent;
+import javafx.event.EventHandler;
 import javafx.geometry.Orientation;
 import javafx.scene.GroupBuilder;
 import javafx.scene.Node;
 import javafx.scene.control.Accordion;
 import javafx.scene.control.Button;
+import javafx.scene.control.CheckMenuItem;
 import javafx.scene.control.Label;
 import javafx.scene.control.ListView;
+import javafx.scene.control.Menu;
+import javafx.scene.control.MenuItem;
 import javafx.scene.control.MultipleSelectionModel;
 import javafx.scene.control.Pagination;
 import javafx.scene.control.SelectionMode;
 import javafx.scene.control.Separator;
+import javafx.scene.control.SeparatorMenuItem;
 import javafx.scene.control.SplitPane;
 import javafx.scene.control.TabBuilder;
 import javafx.scene.control.TabPane;
 import javafx.scene.control.TextField;
 import javafx.scene.control.TitledPaneBuilder;
 import javafx.scene.control.ToolBar;
+import javafx.scene.control.Tooltip;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.input.KeyCharacterCombination;
+import javafx.scene.input.KeyCombination;
 import javafx.scene.paint.Color;
 import javafx.scene.shape.LineBuilder;
 import javafx.scene.shape.RectangleBuilder;
@@ -154,4 +168,68 @@
         }
         return listView;
     }
+    
+    static MenuItem[] createMenuItems(int numberOfItems) {
+        ArrayList<MenuItem> items = new ArrayList<MenuItem>();
+        if (numberOfItems < 26) {
+            for(int i=0; i<numberOfItems; i++) {
+                items.add(new MenuItem("Item "+LETTERS[i]));
+            }
+        } else {
+            for(int i=0; i<numberOfItems; i++) {
+                items.add(new MenuItem("Item "+i));
+            }
+        }
+        return items.toArray(new MenuItem[items.size()]);
+    }
+    
+    static Object[] createMenuContents() {
+        List menuItems = new ArrayList();
+//        Menu menu11 = makeMenu("_New", new ImageView(new Image(getClass().getResourceAsStream("about_16.png"))));
+        final Menu menu11 = new Menu("_New", new ImageView(new Image("helloworld/about_16.png")));
+        MenuItem menu12 = new MenuItem("_Open", new ImageView(new Image("helloworld/folder_16.png")));
+        menu12.setAccelerator(new KeyCharacterCombination("]", 
+                KeyCombination.SHIFT_DOWN, KeyCombination.META_DOWN));
+        Menu menu13 = new Menu("_Submenu");
+        CheckMenuItem showMessagesItem = new CheckMenuItem("Enable onShowing/onHiding _messages", 
+                                             new ImageView(new Image("helloworld/about_16.png")));
+        MenuItem menu15 = new MenuItem("E_xit");
+        final String change[] = {"Change Text", "Change Back"};
+        final MenuItem menu16 = new MenuItem(change[0]);
+        final boolean toggle = false;
+        menu16.setAccelerator(KeyCombination.keyCombination("Shortcut+C"));
+        menuItems.add(menu11);
+        menuItems.add(menu12);
+        menuItems.add(menu13);
+        menuItems.add(showMessagesItem);
+        menuItems.add(new SeparatorMenuItem());
+        menuItems.add(menu15);
+        menuItems.add(menu16);
+
+        // --- Menu 11 submenu
+        final MenuItem menu111 = new MenuItem("blah");
+        final MenuItem menu112 = new MenuItem("foo");
+        final CheckMenuItem menu113 = new CheckMenuItem("Show \"foo\" item");
+        menu113.setSelected(true);
+        menu113.selectedProperty().addListener(new InvalidationListener() {
+            @Override public void invalidated(Observable valueModel) {
+                menu112.setVisible(menu113.isSelected());
+                System.err.println("MenuItem \"foo\" is now " + (menu112.isVisible() ? "" : "not") + " visible.");
+            }
+        });
+        menu11.getItems().addAll(menu111, menu112, menu113);
+
+        // --- Menu 13 submenu
+        MenuItem menu131 = new MenuItem("Item _1");
+        MenuItem menu132 = new MenuItem("Item _2");
+        menu13.getItems().addAll(menu131, menu132);
+        
+        return menuItems.toArray();
+    }
+    
+    static final Image recorder48 = new Image(SamplePageHelpers.class.getResource("recorder-icon-48.png").toExternalForm());
+    
+    static ImageView createGraphic() {
+        return new ImageView(recorder48);
+    }
 }
Binary file apps/experiments/Modena/src/modena/recorder-icon-48.png has changed