Your first window
Create a tiny Cargo project, add Ailloli UI, and open a native window with one friendly message.
Outcome: a native 800 by 600 window titled Hello Ailloli, with a message rendered by Ailloli UI.
01
Give the app a home
Start with a normal binary Cargo project. Ailloli UI does not require a separate project generator.
1. Create and enter the project
Cargo creates the manifest and src/main.rs. The second command places your terminal inside the new folder.
cargo new hello-ailloli
cd hello-ailloli2. Add Ailloli UI
Add the exact beta.2 dependency under [dependencies] so the example and the book stay on the same API.
[dependencies]
ailloli_ui = "0.1.0-beta.2"The beta.2 release is being published. If Cargo cannot find it yet, wait for the publication to finish instead of silently falling back to beta.1.
02
Write one window and one message
Replace src/main.rs with this complete program. It stays deliberately small: one application, one window, one column, and one text widget.
use ailloli_ui::prelude::*;
fn main() -> ailloli_ui::Result<()> {
App::new()
.window(
Window::new("main")
.title("Hello Ailloli")
.size(800.0, 600.0)
.content(|| {
Column::new()
.padding(24.0)
.child(Text::new("Hello from Ailloli UI!").size(32.0))
}),
)
.run()
}This exact program has been checked with Rust 1.88 against the current beta.2 source.
03
3. Run the app
cargo runThe first build may take longer because Cargo compiles the native window and GPU stack. Later builds should be quicker.
A native window named Hello Ailloli, with the message Hello from Ailloli UI! near the top-left of its content area.
04
Read the program from the outside in
Each builder adds one clear responsibility. Follow the chain and the code stops looking mysterious.
Bring the everyday API into scope
The prelude re-exports the application, window, layout, widget, style, state, and action types used by most examples. prelude::*
Create and run the application
App::new starts the builder. run validates the configuration, creates the native host, and enters its event loop. App::new().run()
Describe the starting window
Window::new receives a stable logical identifier. title and size configure the native window before it opens. Window::new(...)
Build the retained content
content receives a closure. Here it returns a Column that adds padding and owns one Text widget. content(|| ...)
05
Make one visible change
Change only the Text builder first. This keeps the feedback loop short and shows how builder methods transform a widget.
Text::new("I built this!")
.size(24.0)size changes the logical font size. The surrounding window and layout stay untouched.
The smallest useful Ailloli UI app is running
You now have the base that every later example will extend. The next chapter changes only the layout, not the whole program.
Try it yourself
Exercise: give the window a personality
Make three tiny edits and use the window itself as your feedback.
- 1Change the window title and resize it to 640 by 420.
- 2Replace the message and set its text size to 24.
Look for title, size, Text::new, and size on the Text widget. No new type is needed.
cargo run opens the resized window with your own title and message, without a Rust error.