Because my custom component doesn’t have a Mac look and feel (the rounded corners of the TextBox) and because I don’t want to change the code of my component, I decided to create a Mac Style Sheet.
Now, let us study the Mac style sheet and the code to use this style sheet
the Mac style sheet - mac.css
.searchTextBox {corner-radius: 25;padding-left: 10}
To have a rounded corners of the textbox, I use the CSS attribute corner-radius
and to move the position of the input cursor (because of the rounded corners), I use the CSS attribute padding-left
To use this CSS just set the style sheets attribute of your Scene with the location of your CSS file.
scene: Scene { stylesheets : ["{__DIR__}resources/mac.css"]
The code of the demo (the code of the custom component doesn’t change)
resources\mac.css |
/* Document : style Created on : 3 oct. 2009, 00:34:05 Author : paddy Description: Purpose of the stylesheet follows. */ .searchTextBox {corner-radius: 25;padding-left: 10} .searchTextBoxRed{corner-radius: 25;padding-left: 10;border-fill:#FF0000;}
Main.fx |
/* * Main.fx * * Created on 3 oct. 2009, 00:44:05 */ package customcomponentcssdemo; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.text.Text; import javafx.scene.text.Font; import javafx.scene.control.Button; import javafx.scene.control.RadioButton; import javafx.scene.control.ToggleGroup; /** * @author Patrick */ class ExtRadioButton extends RadioButton { public var action:function(); override public var selected on replace { if (selected) { action(); } } } def macStyleSheet="{__DIR__}resources/mac.css"; var stylesheets:String = macStyleSheet; Stage { title: "Application title" width: 250 height: 200 var cssToggleGroup = ToggleGroup {}; scene: Scene { //stylesheets : ["{__DIR__}resources/mac.css"] stylesheets : bind stylesheets content: [ Text { font : Font { size : 16 } x: 10 y: 30 content: "Search " } SearchTextBox { //styleClass : "searchTextBoxRed" translateX :10 translateY :40 onResetSearch:function(){ println("reset !"); } onSearch:function(s: String){ println("Search of : {s}"); } } Button { text: "just a button to change focus" translateX :10 translateY :80 action: function() { println("Hello !") } } ExtRadioButton { text: "do not use the CSS" translateX :10 translateY :110 toggleGroup: cssToggleGroup // selected: true action: function() { stylesheets = " "; } } ExtRadioButton { text: "use the CSS" translateX :10 translateY :130 toggleGroup: cssToggleGroup selected: true action: function() { stylesheets = macStyleSheet; } } ] } }
Aucun commentaire:
Enregistrer un commentaire