Filling a form without touching the screen.
\n\nEvery CrossFly app runs on the desktop, and on the desktop a form is filled with the keyboard.\nTab walks the fields in the order they were added, which is why building a form in reading\norder is not only tidier — it is the tab order, for free. Build it out of order and the user\ntabs from the postcode back up to the surname.
\n\nTwo style flags decide who can be reached. focusOnTouch means tapping this gives it\nthe keyboard; focusOnKey means a keypress can move focus into it. A button that should\nbe reachable by Tab needs the second, and a display-only panel wants neither — a Tab stop on\nsomething that does nothing is a Tab stop the user has to press through every time.
The other keyboard is the one you bring with you: NumericKeypad is an on-screen pad\nfor a device that has no keys at all, or for a value that is only ever digits — a warehouse\nterminal, a scale, a till.
Every CrossFly app runs on the desktop, and on the desktop a form is filled with the keyboard.\n * Tab walks the fields in the order they were added, which is why building a form in reading\n * order is not only tidier — it is the tab order, for free. Build it out of order and the user\n * tabs from the postcode back up to the surname.
\n *\n *Two style flags decide who can be reached. {@code focusOnTouch} means tapping this gives it\n * the keyboard; {@code focusOnKey} means a keypress can move focus into it. A button that should\n * be reachable by Tab needs the second, and a display-only panel wants neither — a Tab stop on\n * something that does nothing is a Tab stop the user has to press through every time.
\n *\n *The other keyboard is the one you bring with you: {@link NumericKeypad} is an on-screen pad\n * for a device that has no keys at all, or for a value that is only ever digits — a warehouse\n * terminal, a scale, a till.
\n */\npublic class R27Focus extends Recipe\n{\n private Label reached;\n\n public String title()\n {\n return \"Keyboard and focus\";\n }\n\n public String note()\n {\n return \"Tab follows the order you ADDED the fields, not where they ended up on screen. Build\"\n + \" in reading order and the tab order is correct without being designed.\";\n }\n\n public void build(Component body) throws Exception\n {\n body.add(LAY_AUTO, outgap(label(\"Press Tab. It walks these in the order they were added.\", 1f,\n false, Styles.captionColor, Position.START), 0, 0, 0, .8f));\n\n field(body, \"Name\");\n field(body, \"Company\");\n field(body, \"Postcode\");\n\n reached = label(\"Focus has not reached the button yet.\", 1f, false, Styles.captionColor,\n Position.START);\n body.add(LAY_AUTO, outgap(reached, 0, .4f, 0, .6f));\n\n Button send = Tones.action(\"Send\");\n // Reachable by keyboard, not only by pointer. Without this the last thing in the form is the\n // one thing a keyboard user cannot get to, and they have to reach for the mouse to finish.\n send.getStyle()\n .focusOnKey(true)\n .focusOnTouch(true);\n send.onAction(c -> Hint.show(\"Sent\", 1500));\n send.testTag(\"focus.send\");\n body.add(LAY_AUTO, outgap(send, 0, 0, 0, 1.4f));\n\n body.add(LAY_AUTO, Tones.head(0xE312, \"A keypad of your own\", Tones.highlight()));\n body.add(LAY_AUTO, outgap(label(\"For a device with no keyboard, or a value that is only ever\"\n + \" digits.\", 1f, false, Styles.captionColor, Position.START), 0, 0, 0, .6f));\n\n final TextField total = new TextField();\n total.caption(\"Total\");\n total.setMode(EditMode.CURRENCY);\n total.testTag(\"focus.total\");\n body.add(LAY_AUTO, outgap(total, 0, 0, 0, .6f));\n\n // The keypad reports TOKENS, not characters — \"0\"..\"9\", \",\" and BACK — so the screen decides\n // what each one means. That is what lets the same pad drive a currency field, a quantity and\n // a PIN without the pad knowing about any of them.\n NumericKeypad pad = new NumericKeypad(token ->\n {\n String now = total.getText();\n if (NumericKeypad.BACK.equals(token))\n total.setText(now.isEmpty() ? \"\" : now.substring(0, now.length() - 1));\n else\n total.setText(now + token);\n Screen.repaint();\n });\n pad.testTag(\"focus.keypad\");\n body.add(LAY_AUTO, pad);\n }\n\n private void field(Component body, String caption) throws Exception\n {\n TextField f = new TextField();\n f.caption(caption);\n f.testTag(\"focus.\" + caption.toLowerCase());\n // Fired when the field takes the keyboard. On a phone this is where a screen scrolls the\n // field clear of the on-screen keyboard, which is what Device.shiftScreen is for.\n f.onFocus(c ->\n {\n reached.setText(\"Focus is on: \" + caption);\n reached.setValidLayout(false);\n Screen.repaint();\n });\n body.add(LAY_AUTO, outgap(f, 0, 0, 0, .6f));\n }\n}\n" } ], "lines": 110, "sharedFiles": [ { "path": "dev/cf/recipe/Recipe.java", "name": "Recipe.java", "code": "package dev.cf.recipe;\n\nimport dev.cf.*;\nimport dev.crossfly.ui.*;\nimport dev.crossfly.ui.graphics.*;\nimport dev.crossfly.ui.layout.*;\nimport dev.crossfly.ui.skin.*;\nimport dev.crossfly.ui.style.*;\n\nimport static dev.crossfly.ui.Widgets.*;\n\n/**\n * Base of a recipe: one screen that shows one thing, and nothing else.\n *\n *A recipe is not a sample. A sample shows a component with all its knobs; a recipe answers a\n * question somebody actually has — \"how do I put a filter sheet over a list?\", \"how do I make this\n * follow the theme?\" — in as few lines as it takes, so the answer can be read in one screen and\n * copied without editing.
\n *\n *That is the whole design constraint: the boilerplate lives here, the substance lives in the\n * subclass. A recipe that spends twenty lines building a title bar teaches the title bar.
\n *\n *Write one as:
\n *\n *\n * public class MyRecipe extends Recipe\n * {\n * public String title() { return \"What this shows\"; }\n * public String note() { return \"The one sentence worth knowing.\"; }\n *\n * public void build(Component body) throws Exception\n * {\n * body.add(LAY_AUTO, new Button(\"Tap\"));\n * }\n * }\n * \n */\npublic abstract class Recipe extends SampleWindow implements Described\n{\n @Override\n public abstract String title();\n\n /**\n * The one thing a reader should take away — printed above the recipe, in caption tone.\n *\n * @return the note, or null for none\n */\n @Override\n public String note()\n {\n return null;\n }\n\n /**\n * Builds the recipe.\n *\n * @param body a vertical, scrollable container with sensible padding — add to it and stop\n * @throws Exception when building fails\n */\n public abstract void build(Component body) throws Exception;\n\n @Override\n public void onAdd(boolean firstTime) throws Exception\n {\n addTopBar(title());\n\n // The page, not the surface. addTopBar just set fullscreenColor to the surface,\n // and on a white page a white card has no edges — see Tones.page(). Re-derived on restyle so\n // a dark-mode flip does not leave the light page behind.\n fullscreenColor = Tones.page();\n onRestyle(() -> fullscreenColor = Tones.page());\n\n contents.setLayout(new VerticalLayout(Position.START, Position.START));\n contents.getStyle()\n .ingap(Gap.ofFont(1f, 1f, 1f, 1f));\n\n String n = note();\n if (n != null)\n contents.add(LAY_AUTO, outgap(nota(n), 0, 0, 0, 1f));\n\n Component body = new Component();\n body.setLayout(new VerticalLayout(Position.START, Position.START));\n body.setScrollable(ScrollDirection.VERTICAL);\n body.testTag(\"recipe.body\");\n contents.add(LAY_FILL, body);\n build(body);\n if (pinned != null)\n {\n // Measured again once its labels have sizes: the band's AUTO height is taken in the first\n // layout, before them, and on the iPhone it showed only its first line - the odometer's\n // \"No text recognizer on this device.\" was set and never seen (17/10/2026).\n final Component band = pinned;\n onUI(band::invalidateMeasure);\n }\n if (pinned != null)\n body.add(LAY_AUTO, new Component()\n {\n @Override\n public int getAutoHeight()\n {\n // Room for the last row to scroll clear of the floating band.\n return pinned.getAutoHeight();\n }\n });\n }\n\n /**\n * The note, as a tinted band rather than three lines of grey.\n *\n * It is the one sentence the reader is meant to leave with, and it used to be the least\n * legible thing on the screen: caption-coloured, caption-sized, indistinguishable from the\n * captions further down that are only labels. A tone and a glyph cost nothing here — nobody has\n * to read the band to know what it is.
\n *\n * @param n the note text\n * @return the band\n * @throws Exception when building fails\n */\n /**\n * Pins {@code c} to the bottom of the screen, in a band that FLOATS over the scrolling body: it\n * stays on screen however far the body is scrolled, and the body scrolls underneath it. That is the\n * place a recipe says what just happened. An answer at the top of the body went out of view as soon\n * as the person scrolled down to the button that produced it (14/10/2026).\n *\n * The band is 80% OPAQUE (the surface at alpha 0xCC), as the user asked; it floats rather than\n * sitting below the body because a transparency with nothing behind it cannot be seen -- the first\n * version had the band under the body, and the person saw a plain bar. The body gets a spacer as\n * tall as the band at its end, so its last row can still scroll clear of it.\n *\n * @param c the component to pin, usually the answer label\n * @return {@code c}, to chain\n * @throws Exception if the layout refuses\n */\n protected \n * Provides common infrastructure:\n * \n *
\n *\n * Usage
\n * \n * public class MySample extends SampleWindow {\n * public void onAdd(boolean firstTime) throws Exception {\n * if (!firstTime) return;\n * initWindow();\n * addTopBar(\"My Sample\");\n * // ... add content\n * }\n * }\n * \n */\npublic abstract class SampleWindow extends Window\n{\n /** The main content area of the window, added by {@link #addTopBar(String, Button...)}, for subclasses to add their content into. */\n protected Component contents;\n\n // ─── Top bar ─────────────────────────────────────────────────────────────\n\n /**\n * Builds and adds a standard top bar with a back (←) button on the left,\n * a centered title, and any optional extra buttons on the right.\n *\n * @param title the text shown in the bar\n * @param rightButtons zero or more icon buttons placed aligned to the right\n * @throws Exception if component construction fails\n */\n protected void addTopBar(String title, Button... rightButtons) throws Exception\n {\n fullscreenColor = Styles.backColor.color();\n setLayout(new VerticalLayout());\n add(0f, buildTopBar(title, rightButtons));\n add(LAY_FILL, contents = new Component());\n contents.getStyle()\n .ingap(Gap.ofFont(0, .5f, 0, .5f));\n }\n\n /**\n * Same as {@link #addTopBar(String, Button...)}, but returns the bar component\n * instead of adding it, for callers that need to position it manually.\n *\n * @param title the bar title\n * @param rightButtons optional right-side icon buttons\n * @return the assembled top-bar {@link Component}\n * @throws Exception if component construction fails\n */\n protected Component buildTopBar(String title, Button... rightButtons) throws Exception\n {\n Button btBack = barButton(\"\\ue5c4\", this::hide); // arrow_back\n btBack.testTag(\"sample.back\");\n // Padded on every side, like the bar's right buttons: with none above and below, the target\n // was the arrow itself, too small to hit on a small phone (iPhone 5s, 17/10/2026).\n btBack.getStyle()\n .ingap(Gap.ofFont(.75f))\n .outgap(Gap.ofFont(0, 0, .25f, 0));\n\n Component bar = new Component().style(barStyle);\n bar.setLayout(new GridLayout(Position.START, Position.CENTER));\n\n int n = 2 + rightButtons.length;\n Object[] params = new Object[n * 2];\n params[0] = 0f;\n params[1] = 1f;\n for (int i = 0; i < rightButtons.length; i++)\n params[2 + i] = 0f;\n params[n] = btBack;\n params[n + 1] = new Label(title).style(barTitleStyle);\n for (int i = 0; i < rightButtons.length; i++)\n {\n params[n + 2 + i] = rightButtons[i];\n rightButtons[i].getStyle()\n .ingap(Gap.ofFont(.75f));\n }\n\n bar.add(params);\n return bar;\n }\n\n /**\n * Creates a standard bar icon button (transparent, white icon, pressed feedback).\n *\n * @param materialIcon the Material Icon unicode codepoint string\n * @param action the action to run when the button is tapped\n * @return the configured {@link Button}\n */\n protected Button barButton(String materialIcon, Runnable action)\n {\n return new Button(new MaterialIcon(materialIcon)).style(barButtonNormal)\n .pressedStyle(barButtonPressed)\n .onAction(e -> action.run());\n }\n}\n"
}
],
"page": "https://crossfly.dev/examples/focus",
"run": "https://crossfly.dev/playground/index.html?ex=focus",
"runLocally": "gradlew lwjgl3:run --args=\"classname dev.cf.recipe.R27Focus\"",
"license": "See crossfly.dev for licensing. The code is published to be copied into your own project."
}