跳到内容
CrossFly 是 100% 开源在 GitHub 关注我们
CrossFlyCrossFly
开始使用
全部示例
配方表单输入84 行 · 1 个文件

A form that fights back

setMode does most of the work: it picks the keyboard, the mask and the validation together. A regex on the way out only tells the user they already got it wrong.

它展示了什么

A form that prevents mistakes instead of complaining about them afterwards.

在你的机器上运行

每个示例都是普通的 Window，启动器只需要它的名字。

gradlew lwjgl3:run --args="classname dev.cf.recipe.R10Form"
修改它

Java 是提前编译的，浏览器无法自行重建你的修改 —— 这里的代码在发布前已由 TeaVM 转成 JavaScript。把文件复制到项目里，它在四个平台上原样运行；上面那条命令就是全部准备工作。

正在此处运行CrossFly 0.1.32
正在启动应用…

由 TeaVM 编译为 JavaScript —— 是同一份代码，不是录像。 · 全部示例

它用到了什么

本示例触及的框架类型。带链接的有参考页。

ButtonComponentHintLabelScreenTextFieldTextFieldStyleWidgets

源码

完整无删减。这就是那个文件，不是片段。

原始
dev/cf/recipe/R10Form.java
package dev.cf.recipe;

import dev.cf.Tones;

import dev.crossfly.ui.*;
import dev.crossfly.ui.color.*;
import dev.crossfly.ui.graphics.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;

import static dev.crossfly.ui.Widgets.*;

/**
 * A form that prevents mistakes instead of complaining about them afterwards.
 */
public class R10Form extends Recipe
{
   private TextField amount, when, pin;
   private Label problem;

   public String title()
   {
      return "A form that fights back";
   }

   public String note()
   {
      return "setMode does most of the work: it picks the keyboard, the mask and the validation"
         + " together. A regex on the way out only tells the user they already got it wrong.";
   }

   public void build(Component body) throws Exception
   {
      // CURRENCY masks as you type and gives a numeric keyboard on a phone. Two decimals is the
      // mask's business, not the screen's — no parsing here, no "please use a dot".
      amount = field(body, "Amount", EditMode.CURRENCY);

      // DATE opens the date picker rather than a text keyboard, so an impossible date cannot be
      // typed at all. Same for TIME.
      when = field(body, "Date", EditMode.DATE);

      pin = field(body, "PIN", EditMode.PASSWORD);
      // maxLength lives on the STYLE, not on the field — along with the mask, the valid characters
      // and the keyboard. Worth knowing before you write your own length check in a key handler.
      TextFieldStyle st = pin.getStyle();
      st.maxLength(6);

      // The message is the one thing on this screen that means something went wrong, so it is the
      // one thing wearing the error tone. In secondary grey it read as another caption.
      problem = label("", 1f, true, Tones.danger(), Position.START);
      problem.setVisible(false);
      body.add(LAY_AUTO, outgap(problem, 0, .4f, 0, .4f));

      Button ok = Tones.action("Submit");
      ok.testTag("form.submit");
      ok.onAction(c -> submit());
      body.add(LAY_AUTO, ok);
   }

   private TextField field(Component body, String caption, EditMode mode) throws Exception
   {
      TextField f = new TextField();
      f.caption(caption);
      f.setMode(mode);
      f.testTag("form." + caption.toLowerCase());
      body.add(LAY_AUTO, outgap(f, 0, 0, 0, .7f));
      return f;
   }

   /** Says WHICH field and WHY. "Please complete all fields" is what a form says when nobody owns the rule. */
   private void submit()
   {
      String p = amount.getText().isEmpty() ? "How much? The amount is still empty."
         : when.getText().isEmpty() ? "Pick a date — tap the field and the picker opens."
            : pin.getText().length() < 4 ? "The PIN is at least four digits." : null;
      problem.setText(p == null ? "" : p);
      problem.setVisible(p != null);
      problem.setValidLayout(false);
      if (p == null)
         Hint.show("Submitted", 2000);
      Screen.repaint();
   }
}
给 AI 助手

本页的机器可读版本，让模型直接读取示例集，而不是猜测 API。

本示例（JSON）本示例（Markdown）
上一个Making a screen testable下一个Telling the user something