Хобрук: Ваш путь к мастерству в программировании

Развернуть текст в компоненте JavaFX

У меня есть строка (длиной около абзаца, содержащая новые строки и юникод), которую я показываю в компоненте JavaFX (сейчас большая метка, но изменение конкретной реализации является опцией), и когда пользователь нажимает на слово, я хочу это слово будет «расширено» («слово» -> «слово»)

(на самом деле это не совсем так, я хочу передать слово более сложной функции и использовать результат, но что это за функция, не должно иметь значения)

Я мог бы сгенерировать html и использовать его, но все способы изменить текст, щелкнув его в html, похоже, требуют javascript, и я не знаю, насколько хорошо java обрабатывает встроенный js.

Я мог бы сгенерировать кучу меток, по одной для каждого слова, и написать прослушиватель onClick, но расстояние, вероятно, будет испорчено.

Я мог бы использовать одну метку и использовать прослушиватель onClick и попытаться выяснить, какое слово нажимается с помощью mouseX и mouseY, но это довольно сложно, и я хотел бы знать, есть ли лучшие решения.

Какие-либо предложения?

16.02.2015


Ответы:


1

Вот пример использования коллекции объектов Text в файле TextFlow. Это позволит вам зарегистрировать обработчик мыши непосредственно для каждого текстового объекта. Это также устанавливает псевдокласс CSS для текстового объекта, поэтому вы можете легко изменить стиль развернутого слова с помощью таблицы стилей CSS.

import java.util.stream.Stream;

import javafx.application.Application;
import javafx.css.PseudoClass;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class ExpandingTextExample extends Application {

    // The following text is taken from the "JavaFX CSS Reference Guide":
    // http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html 

    private static final String text = "Never has styling a Java UI been easier than "
            + "with JavaFX and Cascading Style Sheets (CSS). "
            + "Going from one theme to another, or "
            + "customizing the look of just one control, "
            + "can all be done through CSS. To the novice, "
            + "this may be unfamiliar territory; "
            + "but the learning curve is not that great. "
            + "Give CSS styling a try and the benefits will soon be apparent. "
            + "You can also split the design and development workflow, or "
            + "defer design until later in the project. "
            + "Up to the last minute changes, and even post-deployment "
            + "changes, in the UI's look can be achieved through JavaFX CSS. "
            + "\n"
            + "The structure of this document is as follows. "
            + "First, there is a description of all "
            + "value types for JavaFX CSS properties. "
            + "Where appropriate, this includes a grammar "
            + "for the syntax of values of that type. "
            + "Then, for each scene‑graph node that supports CSS styles, "
            + "a table is given that lists the properties that are supported, "
            + "along with type and semantic information. "
            + "The pseudo‑classes for each class are also given. "
            + "The description of CSS properties continues for the controls. "
            + "For each control, the substructure of that control's skin is given, "
            + "along with the style‑class names for the Region "
            + "objects that implement that substructure." ;

    private static final String NBSP = "\u2007" ;

    private final PseudoClass expanded = PseudoClass.getPseudoClass("expanded");

    @Override
    public void start(Stage primaryStage) {
        String[] words = text.split(" ");
        TextFlow flow = new TextFlow();
        flow.setLineSpacing(5);
        Stream.of(words)
            .map(s -> s.concat(" "))
            .map(Text::new)
            .peek(text -> text.getStyleClass().add("word"))
            .peek(text -> text.setOnMousePressed(event -> expand(text)))
            .forEach(flow.getChildren()::add);

        ScrollPane scroller = new ScrollPane();
        scroller.setFitToWidth(true);
        scroller.setContent(flow);

        Scene scene = new Scene(scroller, 600, 400);

        scene.getStylesheets().add("expanding-text.css");

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void expand(Text text) {
        if (text.getPseudoClassStates().contains(expanded)) { //collapse:
            String[] letters = text.getText().split(NBSP);
            StringBuilder newText = new StringBuilder();
            Stream.of(letters).forEach(newText::append);
            text.setText(newText.toString());
            text.pseudoClassStateChanged(expanded, false);
        } else {
            String[] letters = text.getText().split("");
            text.setText(String.join(NBSP, letters));
            text.pseudoClassStateChanged(expanded, true);
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Таблица стилей расширяется-text.css:

.word:expanded {
    -fx-font-size: 12pt ;
    -fx-font-weight: bold ;
}

Вот скриншот из запуска:

введите здесь описание изображения

и это после нажатия на первое слово каждого предложения в первом абзаце:

введите здесь описание изображения

16.02.2015
Новые материалы

Введение в контекст React
В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..

Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..

Это оно
Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..

7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...

Базовое руководство по переносу концепций обучения в глубокое обучение
Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..

C в C.R.U.D с использованием React-Redux
Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..

5 обязательных элементов современного инструмента конвейера данных
В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..