Capturing a signature, and the three details that separate one that works in the field.
\n\nNone of them is about drawing — DrawingBoard handles that. They are about what happens\naround it.
None of them is about drawing — {@link DrawingBoard} handles that. They are about what happens\n * around it.
\n */\npublic class R19Signature extends Recipe\n{\n private DrawingBoard board;\n private Button confirm;\n private boolean drawn;\n\n public String title()\n {\n return \"Capturing a signature\";\n }\n\n public String note()\n {\n return \"White pad, not the theme surface: the image is captured to be printed. Under dark\"\n + \" mode a themed pad captures white ink on navy, which is unusable downstream.\";\n }\n\n public void build(Component body) throws Exception\n {\n Component pad = new Component();\n pad.setLayout(new VerticalLayout(Position.START, Position.START));\n // 1 · The pad has a colour of its own. This is the ONE place ignoring the theme is right,\n // because the output is not a screen — it is an attachment on a document.\n pad.getStyle()\n .backColor(0xFFFFFFFF)\n .borderColor(Styles.borderColor)\n .borderThick(Styles.borderThick)\n .borderRadius(Styles.borderRadius)\n .autoHeight(Relative.ofFont(10f));\n pad.testTag(\"sign.pad\");\n\n // 2 · The DrawingBoard reports strokes by letting you override its touch handlers. There is no\n // listener to look for, and adding one to the framework for this would be the wrong fix.\n board = new DrawingBoard()\n {\n @Override\n public void onTouchUp(float x, float y, int button) throws Exception\n {\n super.onTouchUp(x, y, button);\n setDrawn(true);\n }\n };\n board.setPenColor(0xFF111111);\n pad.add(LAY_FILL, board);\n body.add(LAY_AUTO, outgap(pad, 0, 0, 0, .8f));\n\n // Ink and pen, as in the DrawingBoard sample: a few ink colours and the thin/thick toggle.\n // A signature was black and hairline only (asked for on the iPhone, 17/10/2026).\n body.add(LAY_AUTO, outgap(inkPalette(), 0, 0, 0, .8f));\n\n Component row = new Component();\n row.setLayout(new GridLayout(Position.START, Position.CENTER));\n\n Button clear = new Button(\"Clear\");\n clear.testTag(\"sign.clear\");\n // Clear asks nothing: it is instantly and obviously reversible — you sign again.\n clear.onAction(c ->\n {\n board.clear();\n setDrawn(false);\n Screen.repaint();\n });\n\n // 3 · Confirm is dead until something is drawn. An empty signature is the easiest thing to\n // capture by accident and is indistinguishable from a real one once it is stored.\n confirm = Tones.action(\"Confirm\");\n confirm.testTag(\"sign.confirm\");\n confirm.setEnabled(false);\n pintarConfirm();\n confirm.onAction(c -> Hint.show(\"Signature captured\", 2000));\n\n row.add(.5f, .5f, clear, confirm);\n body.add(LAY_AUTO, row);\n }\n\n /** Ink colours a signature is made with: black, navy, blue. */\n private static final int[] INKS = {0xFF111111, 0xFF1A237E, 0xFF1E88E5};\n\n /**\n * The ink row: one dot per ink and the pen-thickness toggle - the DrawingBoard sample's palette.\n *\n * @return the row\n * @throws Exception when building fails\n */\n private Component inkPalette() throws Exception\n {\n Component row = new Component();\n row.setLayout(new GridLayout(Position.START, Position.CENTER));\n Object[] params = new Object[(INKS.length + 1) * 2];\n final Button[] dots = new Button[INKS.length];\n for (int i = 0; i < INKS.length; i++)\n {\n final int ink = INKS[i], index = i;\n ComponentStyle dot = Styles.button()\n .copy()\n .backColor(0)\n .borderColor(0)\n .iconColor(ink)\n .ingap(Gap.ofFont(.4f, .3f, .4f, .3f));\n Button b = new Button(inkIcon(i == 0)).style(dot);\n b.testTag(\"sign.ink.\" + i);\n // The chosen ink carries a check: a pen colour you cannot see until you draw is a guess\n // (found by Test73, 19/10/2026 - tapping a dot changed nothing on the screen).\n b.onAction(e ->\n {\n board.setPenColor(ink);\n for (int k = 0; k < dots.length; k++)\n {\n dots[k].icon(inkIcon(k == index), dots[k].textPos);\n dots[k].setValidLayout(false);\n }\n Screen.repaint();\n });\n dots[i] = b;\n params[i] = 0f;\n params[INKS.length + 1 + i] = b;\n }\n ComponentStyle pen = Styles.button()\n .copy()\n .backColor(0)\n .borderColor(0)\n .iconColor(Styles.textColor)\n .ingap(Gap.ofFont(.4f, .3f, .4f, .3f));\n // brush, with the pen it gives: like the ink, the thickness in force is on the screen.\n Button thick = new Button(\"Thin\", new MaterialIcon(\"\\ue3ae\", 1.4f), TextPos.TEXT_AT_RIGHT).style(pen);\n thick.testTag(\"sign.thick\");\n thick.onAction(e ->\n {\n board.thick = !board.thick;\n thick.setText(board.thick ? \"Thick\" : \"Thin\");\n });\n params[INKS.length] = 0f;\n params[INKS.length * 2 + 1] = thick;\n row.add(params);\n return row;\n }\n\n /** A filled dot, and the same dot with a check for the ink in force. */\n private static MaterialIcon inkIcon(boolean chosen)\n {\n return new MaterialIcon(chosen ? \"\" : \"\", 1.5f);\n }\n\n private void setDrawn(boolean b)\n {\n if (drawn != b)\n {\n drawn = b;\n confirm.setEnabled(b);\n pintarConfirm();\n }\n }\n\n /**\n * Fills Confirm only while it can be pressed.\n *\n *{@code setEnabled(false)} dims the label and stops the touch, and on the skin's outlined\n * button that is the whole story. A FILLED button is different: the fill keeps shouting \"press\n * me\" at a control that will not answer, which is worse than no styling at all. So the fill is\n * part of the state, not part of the button.
\n */\n private void pintarConfirm()\n {\n confirm.getStyle()\n .backColor(drawn ? Tones.accent() : Tones.accent().withAlpha(0x22))\n .textColor(drawn ? Styles.colorScheme().onPrimary : Tones.accent().withAlpha(0x88));\n confirm.setValidLayout(false);\n }\n}\n" } ], "lines": 188, "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/signature",
"run": "https://crossfly.dev/playground/index.html?ex=signature",
"runLocally": "gradlew lwjgl3:run --args=\"classname dev.cf.recipe.R19Signature\"",
"license": "See crossfly.dev for licensing. The code is published to be copied into your own project."
}