|
✓Works with OpenClaudeCheck for updates: https://crates.io/crates/makepad-widgets
You are an expert at Makepad event and action handling. Help users by:
- Handling events: Mouse, keyboard, touch, lifecycle events
- Creating actions: Widget-to-parent communication
- Event flow: Understanding event propagation
Documentation
Refer to the local files for detailed documentation:
./references/event-system.md- Event enum and handling./references/action-system.md- Action trait and patterns
IMPORTANT: Documentation Completeness Check
Before answering questions, Claude MUST:
- Read the relevant reference file(s) listed above
- If file read fails or file is empty:
- Inform user: "本地文档不完整,建议运行
/sync-crate-skills makepad --force更新文档" - Still answer based on SKILL.md patterns + built-in knowledge
- Inform user: "本地文档不完整,建议运行
- If reference file exists, incorporate its content into the answer
Event Enum (Key Variants)
pub enum Event {
// Lifecycle
Startup,
Shutdown,
Foreground,
Background,
Resume,
Pause,
// Drawing
Draw(DrawEvent),
LiveEdit,
// Window
WindowGotFocus(WindowId),
WindowLostFocus(WindowId),
WindowGeomChange(WindowGeomChangeEvent),
WindowClosed(WindowClosedEvent),
// Mouse
MouseDown(MouseDownEvent),
MouseMove(MouseMoveEvent),
MouseUp(MouseUpEvent),
Scroll(ScrollEvent),
// Touch
TouchUpdate(TouchUpdateEvent),
// Keyboard
KeyDown(KeyEvent),
KeyUp(KeyEvent),
TextInput(TextInputEvent),
TextCopy(TextClipboardEvent),
// Timer
Timer(TimerEvent),
NextFrame(NextFrameEvent),
// Network
HttpResponse(HttpResponse),
// Widget Actions
Actions(ActionsBuf),
}
Handling Events in Widgets
impl Widget for MyWidget {
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
// Check if event hits this widget's area
match event.hits(cx, self.area()) {
Hit::FingerDown(fe) => {
// Mouse/touch down on this widget
cx.action(MyWidgetAction::Pressed);
}
Hit::FingerUp(fe) => {
if fe.is_over {
// Released while still over widget = click
cx.action(MyWidgetAction::Clicked);
}
}
Hit::FingerHoverIn(_) => {
self.animator_play(cx, id!(hover.on));
}
Hit::FingerHoverOut(_) => {
self.animator_play(cx, id!(hover.off));
}
Hit::KeyDown(ke) => {
if ke.key_code == KeyCode::Return {
cx.action(MyWidgetAction::Submitted);
}
}
_ => {}
}
}
}
Hit Enum
pub enum Hit {
// Finger/Mouse
FingerDown(FingerDownEvent),
FingerUp(FingerUpEvent),
FingerMove(FingerMoveEvent),
FingerHoverIn(FingerHoverEvent),
FingerHoverOver(FingerHoverEvent),
FingerHoverOut(FingerHoverEvent),
FingerLongPress(FingerLongPressEvent),
// Keyboard
KeyDown(KeyEvent),
KeyUp(KeyEvent),
KeyFocus,
KeyFocusLost,
TextInput(TextInputEvent),
TextCopy,
// Nothing
Nothing,
}
Action System
Defining Actions
#[derive(Clone, Debug, DefaultNone)]
pub enum ButtonAction {
None,
Clicked,
Pressed,
Released,
}
// DefaultNone derives Default returning None variant
Emitting Actions
// From main thread (in handle_event)
cx.action(ButtonAction::Clicked);
// From any thread (thread-safe)
Cx::post_action(MyAction::DataLoaded(data));
Handling Actions
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
// Handle child widget actions
let actions = cx.capture_actions(|cx| {
self.button.handle_event(cx, event, scope);
});
// Check for specific action
if self.button(id!(my_button)).clicked(&actions) {
// Button was clicked
}
// Or iterate actions
for action in actions.iter() {
if let Some(ButtonAction::Clicked) = action.downcast_ref() {
// Handle click
}
}
}
Widget Action Helpers
// Common widget action checks
impl ButtonRef {
fn clicked(&self, actions: &ActionsBuf) -> bool;
fn pressed(&self, actions: &ActionsBuf) -> bool;
fn released(&self, actions: &ActionsBuf) -> bool;
}
impl TextInputRef {
fn changed(&self, actions: &ActionsBuf) -> Option<String>;
fn returned(&self, actions: &ActionsBuf) -> Option<String>;
}
Event Flow
- Event arrives from platform layer
- Root widget receives event first
- Propagates down to children via
handle_event - Widgets emit actions via
cx.action() - Parent captures actions via
cx.capture_actions() - App handles remaining actions
Timer and NextFrame
// Start a timer
let timer = cx.start_timer(1.0); // 1 second
// In handle_event
if let Event::Timer(te) = event {
if te.timer_id == self.timer {
// Timer fired
}
}
// Request next frame callback
let next_frame = cx.new_next_frame();
// In handle_event
if let Event::NextFrame(ne) = event {
if ne.frame_id == self.next_frame {
// Next frame arrived
}
}
When Answering Questions
- Use
event.hits(cx, area)to check if event targets a widget - Actions flow UP from child to parent (unlike events which flow DOWN)
- Use
cx.capture_actions()to intercept child actions Cx::post_action()is thread-safe for async operationsDefaultNonederive macro auto-implements Default for enums
Related community Skills
Other Claude Code skills in the same category — free to download.
board-prep
/em -board-prep — Board Meeting Preparation
browserstack
>-
challenge
/em -challenge — Pre-Mortem Plan Analysis
code-to-prd
|
codebase-onboarding
Codebase Onboarding
competitor-alternatives
When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparis
content-strategy
When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions \"content strategy,\" \"what should I write about,\"
contract-and-proposal-writer
Contract & Proposal Writer
Want a community skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.