Saltar al contenido
CrossFly es 100% open sourceSíguenos en GitHub
CrossFlyCrossFly
Empezar
Ejemplos

Treinta y ocho pantallas que puedes ejecutar aquí mismo

Cuatro aplicaciones completas y treinta y cuatro recetas, cada una corriendo en tu navegador desde el mismo Java que llega a Android, iOS, escritorio (Windows, macOS y Linux) y web. Lee el código al lado, cópialo y sigue.

4
apps de ejemplo
34
recetas
4
plataformas, un solo código

Ejecutándose aquí

Compilado a JavaScript por TeaVM: es el mismo código, no un vídeo de él.

WindowGridLayoutSkinSqliteDbTeaVM
Ejecutándose aquíCrossFly 0.1.32
Iniciando la aplicación…

Compilado a JavaScript por TeaVM: es el mismo código, no un vídeo de él.

Temas
Recetas93 líneas
Layouts

Any Component becomes a container with setLayout. The same three labels, three ways.

Disposición
Recetas65 líneas
Theme tokens

Flip the switch. The token line follows the theme; the hardcoded one does not, and turns unreadable — no rebuild involved.

Tema
Recetas76 líneas
Switching skins

Shape, radius, padding and typeface all come from the skin. Nothing below knows which one is in force.

Tema
Recetas71 líneas
Bottom sheet with a fixed footer

BottomSheet already gives you the header, the grabber, the close button and a footer that floats over the scroll. You only fill body().

NavegaciónSuperposiciones
Recetas113 líneas
Listing: cards or table

A card answers "what is this one?"; a row answers "how do these compare?". Which one the reader needs changes during the day, so Listing lets them switch.

Listas
Recetas81 líneas
Choosing from a list

ListViewWindow does single and multi selection, with the title, the confirm and the tap-to-choose already wired.

ListasEntrada
Recetas123 líneas
Picking a date range

DatePicker answers "which day". This answers "between which two", which has its own rules — and its own ways of being wrong.

Entrada
Recetas65 líneas
Reordering a list

The first row has no up arrow and the last has no down arrow — hidden, not removed, so the column does not jitter as rows move.

Listas
Recetas77 líneas
Making a screen testable

Tag anything a test must reach. Text breaks on rewording, class breaks on a second instance, index breaks on insertion — a tag breaks only when someone removes it.

Pruebas
Recetas84 líneas
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.

FormulariosEntrada
Recetas97 líneas
Telling the user something

Interrupt in proportion to what you need back. A confirmation on something reversible teaches people to dismiss confirmations — including the one that mattered.

Avisos
Recetas65 líneas
Bottom nav that becomes a rail

One flag — tabsAtBottom — and the strip is a bottom bar on a phone and a rail on a tablet. Resize the window to see it happen.

NavegaciónDisposición
Recetas131 líneas
Waiting

Known length gets a bar. Unknown gets a spinner. A finished measurement — a share, a score — gets a ring, and that one is not waiting at all.

Avisos
Recetas80 líneas
Cards that reflow

Tell CardGrid the width a card wants, not how many columns to use. Resize the window — the reflow is the framework's, not yours.

Disposición
Recetas97 líneas
A header that collapses

header() scrolls away, pinned() never does. Put the identity in the first and the control the reader needs at row 200 in the second.

DisposiciónListas
Recetas102 líneas
Charts

autoThemeColors themes the axes, grid and background — but NOT the series. A series left at colour 0 falls back to a library grey, and becomes the one thing on screen ignoring your brand.

Gráficos
Recetas110 líneas
A list too big to build

createView is rare, bindView is constant. Anything slow in bindView — a query, a request, an allocation — is felt directly as stutter while scrolling.

ListasRendimiento
Recetas154 líneas
Storing something

Add a few notes and reopen the recipe — they are still there. The same code runs on desktop, Android, iOS and the web.

Datos
Recetas188 líneas
Capturing a signature

White pad, not the theme surface: the image is captured to be printed. Under dark mode a themed pad captures white ink on navy, which is unusable downstream.

EntradaDibujo
Recetas84 líneas
Pickers

show(answer -> …) on all of them, and answer is null when the user backed out. The ones needing hardware live in R21, and the system file picker in R31 — those can be refused.

Entrada
Recetas244 líneas
Camera, barcode and GPS

Ask whether the device HAS it before offering it. PlatformUtils.isSupported answers per capability, at runtime — never a check on which platform this is.

Dispositivo
Recetas162 líneas
Animation

Styles.animationDuration is the house value — match it, so the app moves at one speed. Anything the user waits through twice was too long the first time.

Animación
Recetas119 líneas
Painting your own

A component is a rectangle that can draw. width/height are yours, getAutoHeight says how much room you want, and onPaint puts something in it.

Dibujo
Recetas90 líneas
Floating action button

It floats over the content, so leave room at the bottom of the list — bottomInset is what stops it covering the last row nobody can then scroll past.

Navegación
Recetas124 líneas
A map with pins

OSM needs no API key, so a map works the moment you write it. Opens in a window of its own — a native view inside a scrolling page floats over everything around it.

Dispositivo
Recetas97 líneas
Images

Decode once, keep the Image, reuse it. Loading inside onPaint or inside a list's bind step is what makes scrolling stutter where the pictures are.

Imágenes
Recetas110 líneas
Keyboard and focus

Tab follows the order you ADDED the fields, not where they ended up on screen. Build in reading order and the tab order is correct without being designed.

Entrada
Recetas161 líneas
Writing your own component

Search dev/crossfly/ui first — most of what you are about to write is already there. When it genuinely is not, this is the shape.

Componentes propios
Recetas129 líneas
Brand and dark mode

One seed generates the whole palette, for both themes. Nothing below names a colour, which is why the switch needs no rebuild.

Tema
Recetas160 líneas
Empty, loading and broken

Three of these are usually left to render as blank space. Blank space reads as a bug, never as an answer.

AvisosListas
Recetas249 líneas
Files, sharing and printing

Ask the capability, not the platform. Phones, Windows 10+ and the Mac have the picker and the share sheet; Linux has no share sheet; a browser has the picker always and the sheet only sometimes. Printing takes a PDF, and every platform's own dialog does the rest.

Dispositivo
Recetas284 líneas
Video playback

A native surface over the canvas, like the map. Ask the capability first: all five platforms have it now, and one that does not says so instead of showing black.

Dispositivomedia
Recetas120 líneas
Embedded web page

A native browser over the canvas, at this component's rect. On the web it is an <iframe>, and script only reaches a page from your own origin.

Dispositivomedia
Recetas402 líneas
Reading an odometer (OCR)

Show a strip, read the strip. The viewfinder is only as tall as the digits, and the recognizer gets that band and nothing else — so the speedometer and the trip meter around it never compete with the number.

Dispositivo
Aplicaciones2025 líneas
Depot — offline-first CRUD

One shell, three listings over a local database, a detail and a long form. A thing you navigate away from is a Window; a thing you switch between is not.

DatosListasFormularios
Aplicaciones495 líneas
Pulse — a dashboard

One screen, read rather than operated: a headline number, a KPI grid and charts, all re-fed by the single control that changes the period.

Gráficos
Aplicaciones445 líneas
Fieldwork — capturing from the device

Every capture has three states, not two: empty, captured, and unavailable on this device — and the third is the one a phone-only developer never sees.

Dispositivo
Aplicaciones1017 líneas
Order entry — a wizard

A linear flow that validates per step, lets the reader walk back freely, and ends on a review built from the same data the steps collected.

FormulariosNavegación
Para una IA

Versiones de esta página legibles por máquina, para que un modelo lea el estante en vez de adivinar la API.

Todos los ejemplos, en JSONllms.txt

Empieza por uno de estos

Elige la forma más cercana a lo que estás construyendo, cópiala y cambia lo que sea tuyo.

Leer la documentación