Есть ли способ объявить \ инициализировать элементы FXML JavaFX через файлы HTML или JavaScript?

Question

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

Есть ли способ реализовать это в настольном приложении JavaFX?

Я прошу прощения за длинный фон. Для получения более подробной информации перейдите к следующему разделу.

По моему желанию, чтобы победить в этой миссии, я ..

прочитал:

• Выпуски "Введение в FXML" JavaFX11 , JavaFX 10.0 JavaFX 8.0 .

• Добавление содержимого HTML в приложения JavaFX .

• Использование FXML для создания пользовательского интерфейса .

• JavaFX и JavaScript .

• еще пара, но только краткое чтение.

искали:

1. «Использование JavaFX WebView в настольном приложении JavaFX» - ничего нет.
2. «Интеграция элементов HTML в файлы JavaFX FXML» - ничего нет.
3. «Инициализация элементов JavaFX FXML с использованием JavaScript» - ничего нет.

прошел через эти вопросы StackOverflow:

• javafx + javascript в настольном приложении
• Какую версию HTML и CSS поддерживает JavaFX?
• JavaFx Включение пользовательских компонентов в FXML
• Можно ли импортировать классы в блок FXML (JavaFX-2)
• FXML, тег сценария и метод инициализации
  , где я надеялся, что наконец-то нашел свой ответ, но ответ jewelsea содержит неработающую ссылку.
• javascript передает объект документа XML в качестве аргумента
• Передача элемента XML в функцию JavaScript
• JavaScript-скрипт на FXML

После этого путешествия, что я действительно знаю наверняка (пожалуйста, поправьте меня, если я ошибаюсь):

1. Я могу указать обработчики событий элементов FXML, используя JavaScript.
2. Возможно вызвать метод JavaScript изнутри Java (хотя и не знаю, как).
3. Похоже, что невозможно объявить элемент HTML в файлах FXML JavaFX.
   • Следовательно, нет никакого способа применения этих CSS-классов к моему JFXButton.
     • Следовательно, (1) ничего не стоит, поскольку код JS манипулирует классом CSS.

Код кнопки Тобиаса Райха:

HTML:

<a href="#" data-title="Awesome Button"></a>

CSS:

a {
    position: relative;
    display: inline-block;
    padding: 1.2em 2em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    color: white;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        border-radius: 4px;
        transition: box-shadow .5s ease, transform .2s ease; 
        will-change: transform;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
        transform:
            translateY(var(--ty, 0))
            rotateX(var(--rx, 0))
            rotateY(var(--ry, 0))
            translateZ(var(--tz, -12px));
    }

    &:hover::before {
        box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    }

    &::after {
        position: relative;
        display: inline-block;
        content: attr(data-title);
        transition: transform .2s ease; 
        font-weight: bold;
        letter-spacing: .01em;
        will-change: transform;
        transform:
            translateY(var(--ty, 0))
            rotateX(var(--rx, 0))
            rotateY(var(--ry, 0));
    }
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    transform-style: preserve-3d;
    transform: perspective(800px);
}

JavaScript:

const docStyle = document.documentElement.style
const aElem = document.querySelector('a')
const boundingClientRect = aElem.getBoundingClientRect()

aElem.onmousemove = function(e) {
    const x = e.clientX - boundingClientRect.left
    const y = e.clientY - boundingClientRect.top

    const xc = boundingClientRect.width/2
    const yc = boundingClientRect.height/2

    const dx = x - xc
    const dy = y - yc

    docStyle.setProperty('--rx', `${ dy/-1 }deg`)
    docStyle.setProperty('--ry', `${ dx/10 }deg`)
}

aElem.onmouseleave = function(e) {
    docStyle.setProperty('--ty', '0')
    docStyle.setProperty('--rx', '0')
    docStyle.setProperty('--ry', '0')
}

aElem.onmousedown = function(e) {
    docStyle.setProperty('--tz', '-25px')   
}

document.body.onmouseup = function(e) {
    docStyle.setProperty('--tz', '-12px')
}

Что у меня есть до сих пор:

Я могу обрабатывать различные события мыши одно за другим. Что делает применение CSS к моему JFXButton проблемой, решение которой я ищу.
Мой FXML:

<JFXButton fx:id="testBTN" onAction="handleTestAction(this)" onMouseEntered="mouseEntered(this)" text="TestButton"/>
<fx:script source="JStestBTN.js"/>

JStestBTN:

load("nashorn:mozilla_compat.js");
importClass(java.lang.System);

function handleTestAction(event) {
    docStyle.setProperty('--tz', '-25px') //not tested, might not work.
}

ИЛИ

Поскольку возможно сделать что-то вроде этого: (на основе JavaScript-скрипт в FXML )

<Label fx:id="myLabel" />
<fx:script>
    myLabel.text = "This is the text of my label.";
</fx:script>

Я думал, что смогу сделать что-то вроде этого:

<JFXButton fx:id="testBTN" text="TestButton"/>
<fx:script>
    testBTN.sendToExternalJS; //where it will apply all the "aElem.onmouseSomething"
</fx:script>

/*OR something like:*/
<JFXButton fx:id="testBTN" text="TestButton"/>
<fx:script source="JStestBTN.js" isItPossibleToPassTheJFXButtonHere?"/>

/*OR if neither is possible:*/
//I think my solution would be getting as close as possible to the button's
//design using the available JavaFX & CSS tools. Plus "translating" the 
//functions from JavaScript to Java+JavaFX, using animations, etc..

Итак, подведем итог:

1. Можно ли применить этот вид CSS к кнопке / кнопке JFX? (Обходной путь?)
2. Можно ли "создать" или инициализировать кнопку из внешнего файла JavaScript?
3. Если ((1 & 2) == "нет"), не могли бы вы указать мне правильное направление для перевода кода JS в Java / JavaFX?

Спасибо, что выдержали со мной это длинное эссе.