2013-04-04 2 views
7

Когда пользователь нажимает кнопку в моем интерфейсе JavaFX2.2, появляется синее гало, показывающее, что было нажато. В ходе событий моя программа может захотеть «отключить» ее, чтобы показать, что она больше не выбрана.Как сделать кнопку нажатой или выбранной кнопкой? (JavaFX2)

Я ожидал button.setSelected(false); Я помню, что у Swing это было, но в JavaFx такого вызова нет. Этот article обсуждает тени тени, но я хочу просто использовать тот же внешний вид, который используется при нажатии кнопки, что на самом деле не является теневой тень. setEffect(new DropShadow()) Использование setStyle() в порядке, но какие значения использовать?

ответ

19

Я думаю, для вашего описания, что вы на самом деле хотите ToggleButton, а не стандартный Button.

Существует хороший учебник Oracle по адресу ToggleButtons.

enter image description here


Адресация Предметы из Вопрос

темно-синий ореол появляется, чтобы показать, что была нажата

Синее гало на самом деле кольцо фокусировки указывает, что элемент управления имеет фокус. Чтобы сфокусировать управление, вы можете вызвать метод requestFocus.

В ходе событий моя программа может захотеть «отпереть» ее, чтобы показать, что она больше не выбрана.

Чтобы удалить фокус с элемента управления, вы можете вызвать requestFocus на другой элемент управления, чтобы сфокусироваться на этом элементе управления.

Ожидаемая кнопка.setSelected (false);

Чтобы иметь кнопку, которая может переключаться между выбранным и невыбранным состоянием, используйте ToggleButton. A ToggleButton имеет метод setSelected.

setEffect (новый DropShadow()) Использование SetStyle() в порядке, но какие значения использовать

значения CSS стилей для отбрасывания тени эффекты определяют в JavaFX CSS Reference Guide.

Это визуально эквивалентно определению эффекта тени в коде через setEffect или через css с помощью setStyle или применения класса стиля из таблицы стилей. Из трех подходов я бы никогда не рекомендовал подход setStyle, но только css из таблицы стилей или setEffect от кодового подхода.


Связанные

Примечание есть дополнительные связанные с собственностью - armed:

Указывает, что кнопка была «вооружен», так что релиз мыши будет вызывать действие кнопки на вызывается. Это тонко отличается от нажатого. Нажатие указывает, что мышь была нажата на узле и еще не выпущена. однако рука также учитывает, действительно ли мышь над кнопкой и нажата.

Кнопка в вооруженном состоянии имеет несколько иной вид, чем тот, который не находится в состоянии вооружения. Большинство программ никогда не должны взаимодействовать с включенным состоянием кнопок.


Образец для укладки выбранного состояния

Стандартный способ отличить выбранный ToggleButton от одного, который не выбран, чтобы затемнить его, чтобы придать ему эффект глубины стиля и сделать его дальше когда он был нажат. Вот стандартная 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; 
} 

Вы можете переопределить это поведение по умолчанию, defining your own stylesheet что обеспечивает альтернативное определение выбранного состояния. В приведенном ниже примере убедитесь, что выбранный индикатор состояния намного более тонкий, чем стандарт, только затемняющий выбранный цвет состояния - небольшая, а не много.

toggle-plain Unselected

toggle-selected Выбранный

Попутный CSS:

/** 
* 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%); 
} 

Исходный файл:

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(); 
    } 
} 
+0

Я буду использовать ToggleButton. Приношу свои извинения за задержку в ответе. – likejiujitsu

+0

Я изменил свои кнопки на кнопку переключения и попробовал следующее, но при установке цвета кнопки удалился синий гало - он не появлялся, даже когда я запросил фокус. Любые предложения оценили. 'String activeButtonStyle =" -fx-background-color: PaleTurquoise; "; b.setStyle (activeButtonStyle); b.requestFocus(); ' – likejiujitsu

+1

Используйте' -fx-base: paleturquoise; 'вместо' -fx-background-color: paleturquoise; ' – jewelsea

1

Из таблицы стилей CSS Эта команда также работает. Нет необходимости в кнопке переключения. Вы нажимаете другую кнопку, фокусировка меняется на новую.

.button:focused{ 
    -fx-background-color: gray; 
Смежные вопросы