Ohhnews

分类导航

$ cd ..
foojay原文

JavaFX开发调试：BentoFX布局排错与AI辅助编程的深度反思

#javafx#bentofx#软件调试#ui布局#人工智能编程

目录 BentoFX 的实际功能 Scenic View：JavaFX 的浏览器开发工具 关于 AI 生成代码的一些真诚思考 我们可能发现了一个 Bug

有些 Bug 你可以自己解决，而有些则需要请教精通内部原理的专家。这段视频属于后者。MelodyMatrix 使用 BentoFX 来实现其可停靠面板布局。无论是分支、叶节点、侧边标签页，还是开合的内容面板，它都能很好地工作，直到某些组件与布局发生冲突。我遇到了一些无法解释的视觉问题，一些代码看起来比预想的要复杂得多，却找不到合理的解释。

当你的布局库表现异常时，请联系它的作者

因此，我询问了 Matt Coley 是否有时间帮忙看看。Matt 不仅是 BentoFX 的作者，还因开发 Java 字节码编辑器 Recaf 而闻名，该项目本身就大量使用了 BentoFX 作为其 UI 框架。这意味着当 Matt 查看 BentoFX 的集成时，他既是库的编写者，也是其重度使用者。如果你想了解他工作的完整背景，可以参考之前的访谈：JavaFX In Action #22 with Matt Coley。

BentoFX 的实际功能

BentoFX 是一个用于 JavaFX 的停靠和布局库。其核心理念是使用容器树：分支按水平（或旋转后垂直）方向划分空间，叶节点则承载实际内容。通过标签页，你可以在一个叶节点中堆叠多个面板。

在 MelodyMatrix 中，这对应于左侧的侧边栏、中间的主内容区域以及右侧的附加面板。当你理解了其中的逻辑，这是一种很整洁的模型，但有些行为并不直观。例如“修剪”（Pruning）：当你关闭一个面板时，BentoFX 会移除空容器并重新组织剩余的分支。这通常是你想要的效果，但如果你在代码中同时也手动管理宽度或可见性，就会产生冲突。这正是我遇到的问题所在。

Scenic View：JavaFX 的浏览器开发工具

这次会话提醒了我 Scenic View 的存在，我应该更早使用它。

如果你从事过 Web 开发，就会知道浏览器检查工具（Inspect Tools）有多么有用。你可以将鼠标悬停在元素上，精确查看应用了哪些 CSS、内边距是多少、为什么某个元素偏移了 12 像素。Scenic View 为正在运行的 JavaFX 应用程序提供了同样的功能。它能够连接到运行中的程序，实时显示场景图（Scene Graph）以及所有布局属性。

在视频中，我们用它来查看我遇到的标签页标题旋转问题。我们不再需要猜测是哪个 CSS 规则导致了偏移，而是可以直接在布局树中准确看到发生了什么。令人汗颜的是，在这次会话之前我竟然还没用过它。它绝对应该成为你 JavaFX 调试工具箱里的必备工具！

关于 AI 生成代码的一些真诚思考

我们还花了一些时间审视由 Claude 和 Copilot 编写或修改的代码。Matt 很快就指出了问题：这些代码带有明显的 AI 生成特征。关于标签页标题旋转的修复就是一个例子。代码从技术上讲确实能运行，但非常脆弱：它使用了 CSS 类查找，如果 BentoFX 在内部做了任何改动，这些代码就会失效。Matt 的看法很务实：如果它现在能用，且你有办法在它失效时进行更新，那没问题。但重要的是要意识到你正在处理什么样的代码。

在 Matt 解释了 BentoFX 如何管理其叶节点宽度后，更广泛的代码清理工作变得直截了当。我之前添加的动画和宽度跟踪代码实际上是在与库本身“作对”。移除这些代码大大简化了逻辑，并在此过程中解决了一个问题。并不是说所有 AI 生成的代码都不好，但来自精通该库的人员的代码审查，远胜于通过不断提示（Prompt）来摸索。这次会话很好地证明了这一点。

我们可能发现了一个 Bug

BentoFX 在重新打开一个已关闭的面板时，在分隔符模式（Divider Modes）的处理上表现出了意外的行为。Matt 查看了他的源码，表示怀疑那里确实存在问题。虽然这是一个 0.x 版本的库，但它维护活跃且在 Recaf 中用于生产环境。Matt 的回应很直接：提交一个带有重现步骤的工单。

时间轴

  • 00:00 介绍：Matt Coley、Recaf、BentoFX
  • 02:19 BentoFX 在 MelodyMatrix 中的应用
  • 04:18 BentoFX 集成的视觉问题
  • 06:33 MelodyMatrix 代码分析
  • 09:15 将标签页位置从顶部移至侧边，以及项目为何使用 Kotlin
  • 16:25 使用 Scenic View 实时调试 JavaFX 布局
  • 22:38 修剪（Pruning）如何影响 BentoFX 可视化组件
  • 34:53 清理冗余代码：让 BentoFX 处理叶节点宽度，移除动画
  • 41:33 我们可能在 BentoFX 中发现了一个 Bug，并深入查看源码

链接