Come far apparire un pulsante su cui è stato fatto clic o selezionato? (JavaFX2)

Question

Quando l'utente preme un pulsante nell'interfaccia utente JavaFX2.2, viene visualizzato un alone blu scuro per indicare che è stato fatto clic. Durante il corso degli eventi, il mio programma potrebbe voler "sbloccare" per mostrare che non è più selezionato.

Mi aspettavo un button.setSelected(false); Ricordo che Swing aveva questo, ma non c'è una tale chiamata in JavaFx. Questo article discute le ombre esterne, ma voglio semplicemente usare lo stesso aspetto usato quando si fa clic su un pulsante che non è realmente un'ombra esterna. setEffect(new DropShadow()) L'utilizzo di setStyle() è ok, ma quali valori utilizzare?

Answer 1

Penso che per la tua descrizione, in realtà desideri uno ToggleButton anziché uno standard Button.

C'è un bel tutorial Oracle su ToggleButtons.

---

Articoli Affrontare la questione

scuro alone blu sembra mostrarlo stato cliccato

L'alone blu è in realtà un anello di messa a fuoco che indica che un controllo è focalizzato. Per mettere a fuoco un controllo, è possibile richiamare il metodo requestFocus.

Durante il corso degli eventi, il mio programma potrebbe voler "sbloccare" per mostrare che non è più selezionato.

Per rimuovere attenzione da un controllo, è possibile chiamare requestFocus su un altro controllo di concentrarsi su quel controllo, invece.

Mi aspettavo un button.setSelected (false);

Per avere un pulsante che può passare da uno stato selezionato a uno non selezionato, utilizzare ToggleButton. A ToggleButton ha un metodo setSelected.

setEffect (nuova DropShadow()) Utilizzando setStyle() è ok, ma quali valori usare

valori di stile CSS per gli effetti ombra esterna sono definire nel JavaFX CSS Reference Guide.

È visivamente equivalente definire l'effetto di ombreggiatura nel codice tramite setEffect o tramite css con setStyle o applicare una classe di stile da un foglio di stile. Dei tre approcci, non consiglierei mai l'approccio setStyle, ma solo il CSS dal foglio di stile o l'approccio setEffect dal codice.

---

correlati

Nota v'è un ulteriore relativa proprietà - armed:

Indica che il pulsante è stato "armato" in modo tale che un rilascio del mouse causerà l'azione del pulsante per essere invocato. Questo è sottilmente diverso da premuto. Premuto indica che il mouse è stato premuto su un nodo e non è ancora stato rilasciato. braccio tuttavia tiene anche conto se il mouse è effettivamente sopra il pulsante e premuto.

Un pulsante in uno stato armato ha un aspetto leggermente diverso rispetto a uno che non è in uno stato armato. La maggior parte dei programmi non ha mai bisogno di interagire con lo stato armato dei pulsanti.

---

di esempio per lo styling lo stato selezionato

Il metodo standard per differenziare un ToggleButton selezionato da uno che non è stato selezionato è per renderla più scura per dare un effetto di stile di profondità e farla apparire più lontano quando è stato spinto. Qui è lo standard toggle button css for JavaFX 2.2:

.toggle-button:selected { 
    -fx-background-color: 
     -fx-shadow-highlight-color, 
     linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%), 
     linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%), 
     linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%); 
    -fx-background-insets: 0 0 -1 0, 0, 1, 1; 
    /* TODO: -fx-text-fill should be derived */ 
    -fx-text-fill: -fx-light-text-color; 
} 

è possibile ignorare questo comportamento predefinito defining your own stylesheet che fornisce una definizione di alternativo per lo stato selezionato. L'esempio seguente garantirà che la visualizzazione dello stato selezionata sia molto più sottile dello standard, oscurando solo il colore dello stato selezionato una piccola frazione piuttosto che molto.

Unselected

selezionati

css associata:

/** 
* file: colored-toggle.css 
* Place in same directory as ColoredToggle.java. 
* Have your build system copy this file to your build output directory. 
**/ 

.root { 
    -fx-background-color: cornsilk; 
    -fx-padding: 10; 
} 

.toggle-button { 
    -fx-color: paleturquoise; 
} 

.toggle-button:selected { 
    -fx-background-color: 
     -fx-shadow-highlight-color, 
     linear-gradient(to bottom, derive(-fx-color,-22%) 0%, derive(-fx-color,-15%) 100%), 
     linear-gradient(to bottom, derive(-fx-color,-15%) 0%, derive(-fx-color,-10%) 50%, derive(-fx-color,-8%) 98%, derive(-fx-color,-12%) 100%); 
} 

.toggle-button:selected:focused { 
    -fx-background-color: 
     -fx-focus-color, 
     linear-gradient(to bottom, derive(-fx-color,-22%) 0%, derive(-fx-color,-15%) 100%), 
     linear-gradient(to bottom, derive(-fx-color,-15%) 0%, derive(-fx-color,-10%) 50%, derive(-fx-color,-8%) 98%, derive(-fx-color,-12%) 100%); 
} 

File di origine:

import javafx.application.Application; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

public class ColoredToggle extends Application { 
    public static void main(String[] args) { Application.launch(ColoredToggle.class, args); } 

    @Override public void start(Stage stage) { 
    ToggleButton visibilityControl = new ToggleButton("Winterfell"); 

    VBox layout = new VBox(10); 
    layout.setAlignment(Pos.CENTER); 
    layout.getChildren().setAll(visibilityControl); 

    layout.getStylesheets().add(getClass().getResource("colored-toggle.css").toExternalForm()); 

    stage.setScene(new Scene(layout)); 
    stage.show(); 
    } 
} 

Answer 2

Da un foglio di stile css questo comando funziona anche. Non è necessario un pulsante di attivazione/disattivazione. Premendo un pulsante diverso, la messa a fuoco cambia in quella nuova.

.button:focused{ 
    -fx-background-color: gray;