Pular para o conteúdo
CrossFly é 100% open sourceSiga no GitHub
CrossFlyCrossFly
Começar
Todos os exemplos
ReceitasFormuláriosEntrada84 linhas · 1 arquivos

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.

O que isto mostra

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

Rodar na sua máquina

Todo exemplo é uma Window comum, então o launcher só precisa do nome dela.

gradlew lwjgl3:run --args="classname dev.cf.recipe.R10Form"
Editar o exemplo

Java é compilado antes de rodar, então o navegador não consegue reconstruir uma edição sozinho — o código que você vê aqui virou JavaScript pelo TeaVM antes de ser publicado. Copie o arquivo para um projeto e ele roda sem mudanças nas quatro plataformas; o comando acima é toda a preparação.

Rodando aquiCrossFly 0.1.32
Iniciando o aplicativo…

Compilado para JavaScript pelo TeaVM — é o mesmo código, não um vídeo dele. · Todos os exemplos

O que ele usa

Tipos do framework que este exemplo toca. Os que têm link têm página de referência.

ButtonComponentHintLabelScreenTextFieldTextFieldStyleWidgets

O código

Completo, sem cortes. É o arquivo, não um trecho dele.

Bruto
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();
   }
}
Para uma IA

Versões desta página legíveis por máquina, para um modelo ler a prateleira em vez de adivinhar a API.

Este exemplo, em JSONEste exemplo, em Markdown
AnteriorMaking a screen testablePróximoTelling the user something