I have a IButton instance and I want to change its name and color after click.
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
if(button.getTitle().equals("Enabled")) {
button.setTitle("Disabled");
button.setTitleStyle("disabledButton");
}
else {
button.setTitle("Enabled");
button.setTitleStyle("enabledButton");
}
}
});
As we do in general GWT project,
I have added following to the default .css file:
.enabledButton {
color:green;
}
.disabledButton {
color:red;
}
But when I run the application, it is not showing either red or green color.
Is there any other way in SmartGWT to apply CSS styles?
IButton is a StatefulCanvas, which means it handles states. This is done by adding suffixes after the base style name. For example if you set the titleStyle to "enableButton" and you move your mouse over the button, it will look for the css class: enableButtonOver. If the button is also focused, it will look for enableButtonFocusedOver etc (there are a couple of suffix combinations). Your example works if you click outside from the browser, so it will lost the focus and simply will use the enableButton css class. You can disable each state by for example setShowFocused(false). See the api.
Related
I am creating a custom RowFactory for my TableView to accept drag-and-drop files. I want to update the style of the specific Row when an acceptable DragOver event is detected.
Using :hover obviously won't work because that would apply even if the user is not dragging anything.
The end goal is simply to make it visually clear which row the user is about to drop the items onto.
Is there a selector I can use in my stylesheet to handle this? I could not find anything in the JavaFX CSS Reference Guide.
I can currently work around this by defining my own StyleClass and adding it in the setOnDragOver() method:
setOnDragOver(event -> {
// Determine if the dragged items are files
if (!this.isEmpty() && event.getDragboard().hasFiles()) {
event.acceptTransferModes(TransferMode.LINK);
this.getStyleClass().add("dragging");
}
});
However, attempting to remove the class when exiting does not seem to work:
setOnDragExited(event -> this.getStyleClass().remove("dragging"));
Edit: I should also clarify that each row may have other styles applied to them (based on several factors) and would want to ADD a style to the row when being dragged over, not replace all the rest)
As mentioned by #kleopatra, working with custom PseudoClass can work for you.
/**
* Interface to keep all custom pseudo classes.
*/
public interface Styles{
/** Dragged pseudo class. */
public static final PseudoClass DRAGGED_PSEUDOCLASS = PseudoClass.getPseudoClass("dragged");
}
In your code:
setOnDragOver(event -> {
if (!this.isEmpty() && event.getDragboard().hasFiles()) {
event.acceptTransferModes(TransferMode.LINK);
this.pseudoClassStateChanged(Styles.DRAGGED_PSEUDOCLASS,true);
}
});
setOnDragExited(event -> this.pseudoClassStateChanged(Styles.DRAGGED_PSEUDOCLASS,false));
In CSS:
.table-row-cell:dragged{
-fx-background-color:$custom-color;
}
I'd been confused by simple scenario when I was working with BEM.
There is a base button in example:
.button {
// styles for button
}
and its modifier with more specific styles:
.button.button_run {
// additional styles for this type of button
// i.e. custom width and height
}
One moment I realize that I need modifier for button_run, let's name it like button_run_pressed:
.button_run_pressed {
// more styles, i.e. darker background color
}
The problem is that it's not correct to name the last element as I did above button_run_pressed according to BEM conventions. But I need to add "pressed" styles only to "run" button, not for all buttons by writing class like button_pressed and mixing modifier button button_run button_pressed.
How should I refactor my code to match BEM conventions?
According to http://getbem.com/naming/, the modifier classes are initiated with two hyphens (--). So a modifier for .button should look like
.button--modifier { /* ... */ }
In your case, I would suggest choosing the following names:
.button {}
.button--run {}
.button--run-pressed {}
Notice, that I also decoupled the modifier classes from the block class, which is more according to BEM rules. You want to avoid creating classes which depend on others to work.
Since you added less as a tag to the post, here's how this could look in less or scss:
.button {
// button styles
&--run {
// modified styles
}
&--run-pressed {
// more modifiers
}
}
This would result in the classnames I wrote above
Firstly, the name should be .block--modifier or .button--run
If you want it only works with both modifier run and press, you should name it as
.button.button--run.button--pressed
Hope this help
I wan to make 2 different styles of button in one css. So when creating the second button i added class to it using:
close.getStyleClass().add("close-button");
so now i can reference this button in css by:
.button.close-button
But now i dont know how to reference pseudoclasses of button when using the .close-button class.
I tried accessing it by
.button.close-button:selected
or
.button:selected.close-button
Nor of these seems to work. Is there any way how to do it? Or do i have to create my own pseudoclasses for the .close-button class and add and remove them in listeners of the btton in code?
I am creating the button using:
Button close = new Button("X");
close.getStyleClass().add("close-button");
close.setOnAction((event) -> {
....
});
Than i am adding it to the layout:
HBox hbox = new HBox(rbSelect, label, pane, close);
my css looks like:
.button {
...
}
.button.close-button {
-fx-background-color: #E81123;
}
.button:selected.close-button {
-fx-background-color: greenyellow;
}
The button looks like this:
When i click on it:
Seems like nothing happens, when i would expect the button to change color to greenyellow
I'm not 100% sure this is necessary, but by convention the pseudo class selector is added after the class selectors:
.button.close-button:selected {
-fx-background-color: greenyellow;
}
However there is no selected pseudo class for Button. It's available for CheckBox and ToggleButton, but not for regular Buttons. Pseudoclasses that are available are :pressed and :hover, see css reference.
You could of course add the pseudoclass yourself, assuming you're using JavaFX 8:
PseudoClass selected = PseudoClass.getPseudoClass("selected");
close.setOnAction((event) -> {
....
close.pseudoClassStateChanged(selected, true);
});
I have a TableView and I am trying to make it so that when I click on a row, all of the rows above will change their style (turn gray). I created a custom TableCell, and its updateItem method is shown below. The .row-to-ignore CSS class has a few !important properties.
On each updateItem, I check whether the row index is above or below a certain threshold, and then either apply or remove a style class.
Everything works fine until I scroll; when I scroll up, everything gets the style applied to like it should. However, when I scroll down, random lines have the style applied, and others don't.
The odd thing is that if I apply the style using setStyle(), everything works correctly.
Custom Table Cell snippet:
#Override protected void updateItem(String cellItem, boolean empty) {
super.updateItem(cellItem, empty);
if (cellItem != null) {
setText(cellItem);
// Apply styling depending on whether the row is selected as not-data.
if ((this.getTableRow().getIndex()) < mHighlightIndex)
{
// Apply "ignore" styling.
this.getStyleClass().add("row-to-ignore");
} else {
// Remove ignore styling.
this.getStyleClass().remove(".row-to-ignore");
}
} else {
setText("");
}
}
CSS file:
.row-to-ignore {
-fx-background-color: #e3e4e9 !important;
-fx-text-fill: #b8b8b8 !important;
}
I found my answer in this post. It turns out that I was adding multiple copies of the class to the list with the style class. Removing all of the copies of the class made the issue go away.
I changed this:
// Apply "ignore" styling.
this.getStyleClass().add("row-to-ignore");
to this:
// Apply "ignore" styling. Make sure not to add duplicate copies of class to style list.
if (!this.getStyleClass().contains("row-to-ignore")) {
this.getStyleClass().add("row-to-ignore");
}
I am developing a web app using twitter bootstrap, i want to create my own button with my own background, i don't want to use the already present buttons using btn-primary etc... but i want to create my own button with my own class. I want to use the core functionality of the btn class. so ideally my button will use the class=" btn btn-myPrimary".
I checked in variables.less and buttons.less, there only i am able to change the value of existing buttons such as btn-primary. i am not able create my own button something like btn-myPrimary.
Thanks in advance for any help.
If you can compile the less files then you can use this button mixin (from mixins.less):
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(#color; #background; #border) {
color: #color;
background-color: #background;
border-color: #border;
...
If you look at buttons.less you can see how they use it:
.btn-default {
.button-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.btn-primary {
.button-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
Like this ref links below
Link