Question

在构建JavaFX桌面应用程序的GUI时，遇到了this amazing button design我正在尝试实现的

。

是否可以将其实现到JavaFX桌面应用程序中？

对于冗长的背景，我深表歉意。对于引导部分，请跳至下一部分。

在我征服这个任务的过程中，我..

已阅读：

“ FXML简介”发布了JavaFX11，JavaFX 10.0 JavaFX 8.0。
Adding HTML Content to JavaFX Applications。
Using FXML to Create a User Interface。
JavaFX and JavaScript。
更多，但只是简要阅读。

已搜索：

“在JavaFX桌面应用程序中使用JavaFX WebView”-那里什么也没有。
“将HTML元素集成到JavaFX FXML文件中”-那里什么也没有。
“使用JavaScript初始化JavaFX FXML元素”-那里什么也没有。

经历了以下StackOverflow问题：

javafx + javascript on desktop app
What version of HTML and CSS does JavaFX support?
JavaFx Include custom components in FXML
Is It Possible To Import Classes into FXML <fx:script> block (JavaFX-2)
FXML, script tag and initialize method
我希望在那里终于找到了答案，但jewelsea的答案包含一个断开的链接。
javascript pass XML document object as argument
Passing XML element to JavaScript function
JavaScript script in a FXML

这次旅行之后，我实际上可以确定的信息（如果我输入错了，请纠正我）：

我可以使用JavaScript指定FXML元素的事件处理程序。
可以从Java内部调用JavaScript方法（不知道怎么做）。
似乎无法在JavaFX的FXML文件中声明HTML的元素。
- 因此，无法将这些 CSS类应用于我的JFXButton。
  - 因此，（1）毫无价值，因为JS代码操纵CSS类。

Tobias Reich的按钮代码：

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.
}

OR

因为可以执行以下操作：（基于JavaScript script in a 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..

总结一下：

是否可以将这种CSS应用于Button / JFXButton？（解决方法？）
是否可以从外部JavaScript文件“构造”或初始化按钮？
如果（（（1＆2）==“ no”），您能为我指出将JS代码转换为Java / JavaFX的正确方向吗？

感谢您与我保持联系。

是否可以通过HTML或JavaScript文件声明\初始化JavaFX的FXML元素？

0 个答案: