changeset 2294:9999d0a6fd84

Modena test app improvments
author "Jasper Potts"
date Wed, 16 Jan 2013 18:16:48 -0800
parents 79a32fe5dd82
children 0fd6e3514e4d e86a42f510c2
files apps/experiments/Modena/src/modena/Modena.css apps/experiments/Modena/src/modena/Modena.java apps/experiments/Modena/src/modena/TestApp.css apps/experiments/Modena/src/modena/reload_12x14.png
diffstat 4 files changed, 146 insertions(+), 103 deletions(-) [+]
line wrap: on
line diff
--- a/apps/experiments/Modena/src/modena/Modena.css	Wed Jan 16 16:33:31 2013 -0800
+++ b/apps/experiments/Modena/src/modena/Modena.css	Wed Jan 16 18:16:48 2013 -0800
@@ -1664,64 +1664,56 @@
 }
 
 .color-palette {
-     -fx-background-color:
-        derive(-fx-color,-40%),
-        derive(-fx-color,100%),
+    -fx-spacing: 0.833333em; /* 10px */
+    -fx-background-color:
+        derive(-fx-background,-40%),
         linear-gradient(to bottom, 
-        derive(-fx-color,100%) 0%, 
-        derive(-fx-color,50%) 12%, 
-        derive(-fx-color,65%) 88%, 
-        derive(-fx-color,23%) 100%);
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
-    -fx-padding: 15 15 15 15;
+            derive(-fx-background,10%) 0%, 
+            derive(-fx-background,-5%) 12%, 
+            derive(-fx-background,15%) 88%, 
+            derive(-fx-background,-10%) 100%);
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 6, 5;
+    -fx-padding: 1em; /* 12 */
     -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
 }
-.color-palette > .color-picker-grid > .color-square > .color-rect {
+/*.color-palette > .color-picker-grid > .color-square > .color-rect {
     -fx-stroke: black;
     -fx-stroke-width: 0.4;
     -fx-border-color: black;
-}
+}*/
 .color-palette > .color-picker-grid {
-    -fx-border-color: black;
+    -fx-padding: 0.5px;
+    -fx-snap-to-pixel: false;
 }
 .color-palette > .color-picker-grid > .color-square {
     -fx-background-color: transparent;
-    -fx-background-insets: -1, 0;   
-    -fx-padding: 0.5;
-    -fx-border: black;
+    -fx-padding: 0.5px;
 }
 /* the color over which the user is hovering */
 .color-palette > .color-picker-grid > .color-square:focused, 
 .color-palette > .color-picker-grid > .color-square:selected:focused {
-    -fx-background-color: -fx-focus-color;
+    -fx-background-color: -fx-faint-focus-color, -fx-focus-color;
+    -fx-background-insets: -2,0;
+    -fx-background-radius: 5,0;
+    -fx-scale-x: 1.5;
+    -fx-scale-y: 1.5;
 }
 /* the currently selected color */
 .color-palette > .color-picker-grid > .color-square:selected {
-/*    -fx-background-color: derive(-fx-base, -27%)  #989898 , white, derive(-fx-base, -59%)  #555555 ;*/
     -fx-background-color: black;
 } 
-.color-palette > .separator > .line {
-    -fx-background-color: -fx-pressed-base;
-/*    -fx-background-color: white;*/
-    -fx-padding: 6 0 0 0;
-    -fx-background-insets: 4 -10 0 -10,5 -10 0 -10;
-    -fx-border-style: none;
-    -fx-border-color: null;
-}
 .custom-color-dialog > .color-rect-pane {
     -fx-padding: 15 8 15 15;
-/*    -fx-background-color: -fx-background;*/
 }
 .custom-color-dialog > .controls-pane {
     -fx-padding: 15 15 15 0;
-/*    -fx-background-color: -fx-background;*/
 }
 .custom-color-dialog  {
     -fx-background-color: -fx-background;
 }
 /* -------- Toggle Button ---------------- */
-.custom-color-dialog .controls-pane .toggle-button {
+/*.custom-color-dialog .controls-pane .toggle-button {
     -fx-background-radius: 4, 4, 3, 2;
     -fx-padding: 3 6 3 6;
 }
@@ -1787,17 +1779,18 @@
 }
 .custom-color-dialog .controls-pane #toggle-button-right:selected, .controls-pane #toggle-button-right:selected:focused {
 	-fx-background-insets: -1.4 -1.4 -1.4 -1, 0 0 0 -1, 1 1 1 0, 1 1 1 0;
-}
-.custom-color-dialog .controls-pane .current-new-color-grid #transparent-current, .controls-pane .current-new-color-grid #transparent-new {
+}*/
+.custom-color-dialog .controls-pane .current-new-color-grid #transparent-current, 
+.controls-pane .current-new-color-grid #transparent-new {
     -fx-background-image: url("pattern-transparent.png"); 
     -fx-background-repeat: repeat;
     -fx-background-size: auto;
     -fx-padding: 9 64 9 64;
 }
 .custom-color-dialog .controls-pane .customcolor-controls-background {
-    -fx-background-color: -fx-text-box-border, -fx-text-box-border, -fx-control-inner-background;
-    -fx-background-insets: 0, 1, 2;
-    -fx-background-radius: 3, 2, 2;
+    -fx-background-color: -fx-text-box-border, -fx-control-inner-background;
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 3, 2;
     -fx-padding: 3 5 3 5;
 }
 .custom-color-dialog .controls-pane .alpha-settings .text-field {
--- a/apps/experiments/Modena/src/modena/Modena.java	Wed Jan 16 16:33:31 2013 -0800
+++ b/apps/experiments/Modena/src/modena/Modena.java	Wed Jan 16 18:16:48 2013 -0800
@@ -31,11 +31,13 @@
  */
 package modena;
 
+import java.io.BufferedReader;
 import java.io.ByteArrayInputStream;
 import java.io.File;
 import java.io.FileNotFoundException;
 import java.io.IOException;
 import java.io.InputStream;
+import java.io.InputStreamReader;
 import java.net.URL;
 import java.net.URLConnection;
 import java.net.URLStreamHandler;
@@ -51,6 +53,7 @@
 import javafx.event.ActionEvent;
 import javafx.event.EventHandler;
 import javafx.fxml.FXMLLoader;
+import javafx.geometry.NodeOrientation;
 import javafx.scene.Node;
 import javafx.scene.Scene;
 import javafx.scene.SnapshotParameters;
@@ -69,6 +72,8 @@
 import javafx.scene.control.ToggleButtonBuilder;
 import javafx.scene.control.ToggleGroup;
 import javafx.scene.control.ToolBar;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
 import javafx.scene.image.WritableImage;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBoxBuilder;
@@ -84,6 +89,12 @@
         System.getProperties().put("javafx.pseudoClassOverrideEnabled", "true");
     }
     private static final String testAppCssUrl = Modena.class.getResource("TestApp.css").toExternalForm();
+    private static final String MODENA_STYLESHEET_CONTENT;
+    private static final String CASPIAN_STYLESHEET_CONTENT;
+    static {
+        MODENA_STYLESHEET_CONTENT = loadUrl(Modena.class.getResource("Modena.css"));
+        CASPIAN_STYLESHEET_CONTENT = loadUrl(com.sun.javafx.scene.control.skin.ButtonSkin.class.getResource("caspian/caspian.css"));
+    }
     
     private BorderPane root;
     private SamplePage samplePage;
@@ -95,14 +106,16 @@
     private Color accentColor;
     private String fontName = null;
     private int fontSize = 13;
-    private String cssOverride = "";
-    private ToggleButton modenaButton,retinaButton;
+    private String styleSheetContent = "";
+    private ToggleButton modenaButton,retinaButton,rtlButton;
     private TabPane contentTabs;
     
     @Override public void start(Stage stage) throws Exception {
         mainStage = stage;
+        // set user agent stylesheet
+        updateUserAgentStyleSheet(true);
         // build UI
-        rebuildUI(true, false,0);
+        rebuildUI(true,false,0);
         // show UI
         Scene scene = new Scene(root, 1024, 768);
         scene.getStylesheets().add(testAppCssUrl);
@@ -110,15 +123,55 @@
         stage.show();
     }
     
+    private void updateUserAgentStyleSheet() {
+        updateUserAgentStyleSheet(modenaButton.isSelected());
+    }
+    
+    private void updateUserAgentStyleSheet(boolean modena) {
+        styleSheetContent = modena ? MODENA_STYLESHEET_CONTENT : CASPIAN_STYLESHEET_CONTENT;
+        styleSheetContent += "\n.root {\n";
+        System.out.println("baseColor = "+baseColor);
+        System.out.println("accentColor = " + accentColor);
+        System.out.println("backgroundColor = " + backgroundColor);
+        if (baseColor != null && baseColor != Color.TRANSPARENT) {
+            final String color = String.format((Locale) null, "#%02x%02x%02x", 
+                    Math.round(baseColor.getRed() * 255), 
+                    Math.round(baseColor.getGreen() * 255), 
+                    Math.round(baseColor.getBlue() * 255));
+            styleSheetContent += "    -fx-base:"+color+";\n";
+        }
+        if (backgroundColor != null && backgroundColor != Color.TRANSPARENT) {
+            final String color = String.format((Locale) null, "#%02x%02x%02x", 
+                    Math.round(backgroundColor.getRed() * 255), 
+                    Math.round(backgroundColor.getGreen() * 255), 
+                    Math.round(backgroundColor.getBlue() * 255));
+            styleSheetContent += "    -fx-background:"+color+";\n";
+        }
+        if (accentColor != null && accentColor != Color.TRANSPARENT) {
+            final String color = String.format((Locale) null, "#%02x%02x%02x", 
+                    Math.round(accentColor.getRed() * 255), 
+                    Math.round(accentColor.getGreen() * 255), 
+                    Math.round(accentColor.getBlue() * 255));
+            styleSheetContent += "    -fx-accent:"+color+";\n";
+        }
+        if (fontName != null) {
+            styleSheetContent += "    -fx-font:"+fontSize+"px \""+fontName+"\";\n";
+        }
+        styleSheetContent += "}\n";
+        
+        // set white background for caspian
+        if (!modena) {
+            styleSheetContent += ".needs-background {\n-fx-background-color: white;\n}";
+        }
+            
+        // load theme
+        setUserAgentStylesheet("internal:stylesheet"+Math.random()+".css");
+        
+        if (root != null) root.requestLayout();
+    }
+    
     private void rebuildUI(boolean modena, boolean retina, int selectedTab) {
         try {
-            // load theme
-            if (modena) {
-                setUserAgentStylesheet(
-                        getClass().getResource("Modena.css").toExternalForm());
-            } else {
-                setUserAgentStylesheet(null);
-            }
             if (root == null) {
                 root = new BorderPane();
             } else {
@@ -157,15 +210,9 @@
                     }
                 }
             });
-            // set white background for caspian
-            if (!modena) {
-                samplePage.setStyle("-fx-background-color: white;");
-                mosaic.setStyle("-fx-background-color: white;");
-                heightTest.setStyle("-fx-background-color: white;");
-            }
             // Create Toolbar
             retinaButton = ToggleButtonBuilder.create()
-                .text("Retina @2x")
+                .text("@2x")
                 .selected(retina)
                 .onAction(new EventHandler<ActionEvent>(){
                     @Override public void handle(ActionEvent event) {
@@ -189,7 +236,7 @@
                             .selected(modena)
                             .onAction(new EventHandler<ActionEvent>(){
                                 @Override public void handle(ActionEvent event) { 
-                                    rebuildUI(true,retinaButton.isSelected(), contentTabs.getSelectionModel().getSelectedIndex());
+                                    updateUserAgentStyleSheet();
                                 }
                             })
                             .styleClass("left-pill")
@@ -200,29 +247,44 @@
                             .selected(!modena)
                             .onAction(new EventHandler<ActionEvent>(){
                                 @Override public void handle(ActionEvent event) { 
-                                    rebuildUI(false,retinaButton.isSelected(), contentTabs.getSelectionModel().getSelectedIndex());
+                                    updateUserAgentStyleSheet();
                                 }
                             })
                             .styleClass("right-pill")
                             .build()
                     )
                     .build(),
+                ButtonBuilder.create()
+                    .graphic(new ImageView(new Image(Modena.class.getResource("reload_12x14.png").toString())))
+                    .onAction(new EventHandler<ActionEvent>() {
+                            @Override public void handle(ActionEvent event) {
+                                rebuildUI(modenaButton.isSelected(), retinaButton.isSelected(), 
+                                        contentTabs.getSelectionModel().getSelectedIndex());
+                            }
+                        })
+                    .build(),
+                rtlButton = ToggleButtonBuilder.create()
+                    .text("RTL")
+                    .onAction(new EventHandler<ActionEvent>() {
+                            @Override public void handle(ActionEvent event) {
+                                root.setNodeOrientation(rtlButton.isSelected() ? 
+                                        NodeOrientation.RIGHT_TO_LEFT : NodeOrientation.LEFT_TO_RIGHT);
+                            }
+                        })
+                    .build(),
                 new Separator(),
                 retinaButton,
-                new Separator(),
                 createFontMenu(),
-                new Separator(),
                 new Label("Base:"),
                 createBaseColorPicker(),
-                new Separator(),
                 new Label("Background:"),
                 createBackgroundColorPicker(),
-                new Separator(),
                 new Label("Accent:"),
                 createAccentColorPicker(),
                 new Separator(),
                 ButtonBuilder.create().text("Save...").onAction(saveBtnHandler).build()
             );
+            toolBar.setId("TestAppToolbar");
             // Create content group used for scaleing @2x
             final Pane contentGroup = new Pane() {
                 @Override protected void layoutChildren() {
@@ -240,6 +302,10 @@
                     modenaButton.requestFocus();
                 }
             });
+            
+            samplePage.getStyleClass().add("needs-background");
+            mosaic.getStyleClass().add("needs-background");
+            heightTest.getStyleClass().add("needs-background");
             // apply retina scale
             if (retina) {
                 contentTabs.getTransforms().setAll(new Scale(2,2));
@@ -256,49 +322,49 @@
             RadioMenuItemBuilder.create().text("System Default").onAction(new EventHandler<ActionEvent>(){
                 @Override public void handle(ActionEvent event) {
                     fontName = null;
-                    updateCSSOverrides();
+                    updateUserAgentStyleSheet();
                 }
             }).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();
+                    updateUserAgentStyleSheet();
                 }
             }).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();
+                    updateUserAgentStyleSheet();
                 }
             }).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();
+                    updateUserAgentStyleSheet();
                 }
             }).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();
+                    updateUserAgentStyleSheet();
                 }
             }).style("-fx-font: 18px \"Segoe UI\";").toggleGroup(tg).build(),
             RadioMenuItemBuilder.create().text("Embedded Touch (22px)").onAction(new EventHandler<ActionEvent>(){
                 @Override public void handle(ActionEvent event) {
                     fontName = "Arial";
                     fontSize = 22;
-                    updateCSSOverrides();
+                    updateUserAgentStyleSheet();
                 }
             }).style("-fx-font: 22px \"Arial\";").toggleGroup(tg).build(),
             RadioMenuItemBuilder.create().text("Embedded Small (9px)").onAction(new EventHandler<ActionEvent>(){
                 @Override public void handle(ActionEvent event) {
                     fontName = "Arial";
                     fontSize = 9;
-                    updateCSSOverrides();
+                    updateUserAgentStyleSheet();
                 }
             }).style("-fx-font: 9px \"Arial\";").toggleGroup(tg).build()
         );
@@ -331,7 +397,7 @@
                 } else {
                     baseColor = c;
                 }
-                updateCSSOverrides();
+                updateUserAgentStyleSheet();
             }
         });
         return colorPicker;
@@ -363,7 +429,7 @@
                 } else {
                     backgroundColor = c;
                 }
-                updateCSSOverrides();
+                updateUserAgentStyleSheet();
             }
         });
         return colorPicker;
@@ -397,46 +463,12 @@
                 } else {
                     accentColor = c;
                 }
-                updateCSSOverrides();
+                updateUserAgentStyleSheet();
             }
         });
         return colorPicker;
     }
     
-    private void updateCSSOverrides() {
-        cssOverride = ".root {\n";
-        System.out.println("baseColor = "+baseColor);
-        System.out.println("accentColor = " + accentColor);
-        System.out.println("backgroundColor = " + backgroundColor);
-        if (baseColor != null && baseColor != Color.TRANSPARENT) {
-            final String color = String.format((Locale) null, "#%02x%02x%02x", 
-                    Math.round(baseColor.getRed() * 255), 
-                    Math.round(baseColor.getGreen() * 255), 
-                    Math.round(baseColor.getBlue() * 255));
-            cssOverride += "    -fx-base:"+color+";\n";
-        }
-        if (backgroundColor != null && backgroundColor != Color.TRANSPARENT) {
-            final String color = String.format((Locale) null, "#%02x%02x%02x", 
-                    Math.round(backgroundColor.getRed() * 255), 
-                    Math.round(backgroundColor.getGreen() * 255), 
-                    Math.round(backgroundColor.getBlue() * 255));
-            cssOverride += "    -fx-background:"+color+";\n";
-        }
-        if (accentColor != null && accentColor != Color.TRANSPARENT) {
-            final String color = String.format((Locale) null, "#%02x%02x%02x", 
-                    Math.round(accentColor.getRed() * 255), 
-                    Math.round(accentColor.getGreen() * 255), 
-                    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");
-    }
-    
     private EventHandler<ActionEvent> saveBtnHandler = new EventHandler<ActionEvent>() {
         @Override public void handle(ActionEvent event) {
             FileChooser fc = new FileChooser();
@@ -458,6 +490,22 @@
         launch(args);
     }
     
+    /** Utility method to load a URL into a string */
+    private static String loadUrl(URL url) {
+        StringBuilder sb = new StringBuilder();
+        try {
+            BufferedReader br = new BufferedReader(new InputStreamReader(url.openStream()));
+            String line;
+            while ((line = br.readLine()) != null) {
+                sb.append(line);
+                sb.append('\n');
+            }
+        } catch (IOException ex) {
+            Logger.getLogger(Modena.class.getName()).log(Level.SEVERE, null, ex);
+        }
+        return sb.toString();
+    }
+    
     // =========================================================================
     // URL Handler to create magic "internal:stylesheet.css" url for our css string buffer
     {
@@ -475,7 +523,7 @@
         @Override public void connect() throws IOException {}
 
         @Override public InputStream getInputStream() throws IOException {
-            return new ByteArrayInputStream(cssOverride.getBytes("UTF-8"));
+            return new ByteArrayInputStream(styleSheetContent.getBytes("UTF-8"));
         }
     }
     
--- a/apps/experiments/Modena/src/modena/TestApp.css	Wed Jan 16 16:33:31 2013 -0800
+++ b/apps/experiments/Modena/src/modena/TestApp.css	Wed Jan 16 18:16:48 2013 -0800
@@ -29,7 +29,9 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-
+ #TestAppToolbar > * > .label {
+     -fx-font-size: 10px;
+ }
 .section-label {
     -fx-font-weight: normal;
     -fx-text-fill: derive(-fx-text-background-color,30%);
Binary file apps/experiments/Modena/src/modena/reload_12x14.png has changed