### Prerequisites Installation Example (Bash) Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/99-evolution/templates/hook-template.md An example of how to list required tools for a hook script. This section is typically used to inform users about necessary installations. ```bash # List any required tools # e.g., brew install jq ``` -------------------------------- ### Setup and Handle Timer Events in Makepad Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/01-core/widgets.md Illustrates setting up an interval timer and handling timer events within a Makepad application. The example includes starting a timer, decrementing a counter, and triggering actions based on the countdown. ```rust #[derive(Live, LiveHook)] pub struct App { #[live] ui: WidgetRef, #[rust] refresh_timer: Timer, #[rust] countdown: i32, } impl MatchEvent for App { fn handle_startup(&mut self, cx: &mut Cx) { self.countdown = 30; self.refresh_timer = cx.start_interval(1.0); // 1 second interval } fn handle_timer(&mut self, cx: &mut Cx, _event: &TimerEvent) { self.countdown -= 1; self.update_countdown_display(cx); if self.countdown <= 0 { self.countdown = 30; self.refresh_data(cx); } } } ``` -------------------------------- ### Create and Run a New Makepad Project (Bash) Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/00-getting-started/SKILL.md This snippet demonstrates the basic steps to create a new Makepad project using Cargo, add Makepad dependencies to the `Cargo.toml` file, and run the application. It assumes you have Rust and Cargo installed. ```bash # Create new Makepad project cargo new my_app cd my_app # Add Makepad dependencies to Cargo.toml [dependencies] makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" } # Run cargo run ``` -------------------------------- ### Install Resource Helper Tool Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Installs the `robius-packaging-commands` tool, a helper utility for managing resources during the packaging process. It's recommended to install a specific version. ```bash cargo install --version 0.2.0 --locked --git https://github.com/project-robius/robius-packaging-commands.git robius-packaging-commands ``` -------------------------------- ### Install Desktop Packaging Tools Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Installs the necessary command-line tools for desktop application packaging: `cargo-packager` and `robius-packaging-commands`. Ensure you have Rust and Cargo installed. ```bash cargo install cargo-packager --locked cargo install --version 0.2.0 --locked \ --git https://github.com/project-robius/robius-packaging-commands.git \ robius-packaging-commands ``` -------------------------------- ### Example Cargo.toml for Makepad Application Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md A comprehensive Cargo.toml file demonstrating dependencies, build profiles, and metadata for packaging Makepad applications. It includes configurations for product name, identifier, icons, and custom packaging commands. ```toml [package] name = "my-makepad-app" version = "1.0.0" edition = "2021" [dependencies] makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" } [profile.release] opt-level = 3 [profile.release-lto] inherits = "release" lto = "thin" [profile.distribution] inherits = "release" codegen-units = 1 lto = "fat" [package.metadata.packager] product_name = "My Makepad App" identifier = "com.example.mymakepadapp" authors = ["Your Name "] description = "A cross-platform Makepad application" long_description = """ My Makepad App is a cross-platform application built with the Makepad UI framework in Rust. It runs on desktop, mobile, and web platforms. """ icons = ["./packaging/icon.png"] out_dir = "./dist" before-packaging-command = """ robius-packaging-commands before-packaging \ --force-makepad \ --binary-name my-makepad-app \ --path-to-binary ./target/release/my-makepad-app """ resources = [ { src = "./dist/resources/makepad_widgets", target = "makepad_widgets" }, { src = "./dist/resources/makepad_fonts_chinese_bold", target = "makepad_fonts_chinese_bold" }, { src = "./dist/resources/makepad_fonts_chinese_bold_2", target = "makepad_fonts_chinese_bold_2" }, { src = "./dist/resources/makepad_fonts_chinese_regular", target = "makepad_fonts_chinese_regular" }, { src = "./dist/resources/makepad_fonts_chinese_regular_2", target = "makepad_fonts_chinese_regular_2" }, { src = "./dist/resources/makepad_fonts_emoji", target = "makepad_fonts_emoji" }, { src = "./dist/resources/my-makepad-app", target = "my-makepad-app" }, ] before-each-package-command = """ robius-packaging-commands before-each-package \ --force-makepad \ --binary-name my-makepad-app \ --path-to-binary ./target/release/my-makepad-app """ [package.metadata.packager.deb] depends = "./dist/depends_deb.txt" section = "utils" [package.metadata.packager.macos] minimum_system_version = "11.0" [package.metadata.packager.nsis] appdata_paths = ["$LOCALAPPDATA/$PRODUCTNAME"] ``` -------------------------------- ### Responsive Sidebar Pattern in Rust Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/06-reference/adaptive-layout.md Demonstrates a common UI pattern for creating a responsive sidebar using Makepad's AdaptiveView. The example shows how to define different sidebar behaviors for Desktop (always visible) and Mobile (within a drawer or modal), ensuring a consistent and adaptable user experience across screen sizes. ```rust live_design! { { Desktop = { flow: Right { width: 280 } { width: Fill } } Mobile = { // Sidebar in drawer/modal on mobile { width: Fill } { {} } } } } ``` -------------------------------- ### Install and Run Makepad App on Android Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/00-getting-started/init.md Installs the `cargo-makepad` tool and then builds and runs the Makepad application on an Android device or emulator in release mode. ```bash # Install cargo-makepad cargo install --force --git https://github.com/makepad/makepad.git --branch rik cargo-makepad # Android cargo makepad android run -p my-app --release ``` -------------------------------- ### Install Desktop Packager Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Installs the `cargo-packager` tool, which is used for packaging applications for desktop platforms like Linux, Windows, and macOS. ```bash cargo install cargo-packager --locked ``` -------------------------------- ### Makepad Skills Frontmatter Example Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/99-evolution/references/collaboration.md Provides an example of the required frontmatter for Makepad skills contribution files. This includes essential metadata such as the file name, author, source, date, tags, level, and the Makepad branch. ```yaml --- name: drag-drop-list author: your-github-handle # Your ID goes here source: my-project date: 2024-01-15 tags: [interaction, list] level: intermediate makepad-branch: main # Required: main|dev --- ``` -------------------------------- ### Build Windows NSIS Installer Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Creates a Windows installer (`.exe`) using the NSIS format via `cargo-packager`. This command generates a self-contained installer for easy distribution on Windows. ```bash # Build NSIS installer cargo packager --release --formats nsis ``` -------------------------------- ### Robrix-Style Layout with AdaptiveView and PageFlip in Rust Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/06-reference/adaptive-layout.md Provides a comprehensive example of a responsive UI layout using Makepad's AdaptiveView and PageFlip components. It defines distinct layouts for Desktop and Mobile platforms, showcasing how to integrate navigation, content, and settings screens. This pattern is ideal for creating adaptable user experiences across different devices. ```rust live_design! { use link::widgets::*; pub HomeScreen = { // Desktop: sidebar + tabbed dock Desktop = { width: Fill, height: Fill flow: Right { nav_bar = {} } { active_page: home_page home_page = { flow: Down {} {} } settings_page = { { settings = {} } } } } // Mobile: stack navigation Mobile = { width: Fill, height: Fill flow: Down { root_view = { flow: Down padding: {top: 40} { active_page: home_page home_page = { {} } settings_page = { { settings = {} } } } { nav_bar = {} } } detail_view = { header = { /* back button, title */ } body = { {} } } } } } } ``` -------------------------------- ### Rust: Usage Example for Setting List Items Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/04-patterns/_base/04-list-template.md Provides a usage example in Rust for the `ItemList` widget. It demonstrates how to create a vector of `ItemData` (assuming `ItemData` has `title` and `subtitle` fields) and then use the `set_items` method to update the `ItemList` with this data. This is typically called from within a UI context. ```rust // Set data let items = vec![ ItemData { title: "Item 1".into(), subtitle: "Description 1".into() }, ItemData { title: "Item 2".into(), subtitle: "Description 2".into() }, ]; self.ui.item_list(id!(my_list)).set_items(cx, items); ``` -------------------------------- ### Rust Usage Example in Makepad Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/99-evolution/templates/pattern-template.md Illustrates a practical usage scenario for a pattern implemented in Makepad. This example focuses on simplicity and clarity to show how the pattern is applied in a real-world context. ```rust // Show how to use this pattern in practice // Keep it simple and focused ``` -------------------------------- ### Rust Code Style Example Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/CONTRIBUTING.md Demonstrates the recommended Rust code style for Makepad contributions, including imports, comments, and the use of `live_design!`. Follow these conventions for clarity and maintainability. ```rust // Include necessary imports use makepad_widgets::*; // Assuming makepad_widgets is the relevant crate // Add comments for non-obvious code live_design! { // Explain what this widget does MyWidget = {{MyWidget}} { // Widget properties go here // ... } } ``` -------------------------------- ### Install jq for UI Specification Checker Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/99-evolution/hooks/README.md These commands provide instructions for installing the 'jq' utility, a lightweight and flexible command-line JSON processor. 'jq' is a prerequisite for the `pre-ui-edit.sh` hook, which parses JSON input via stdin. ```bash # macOS brew install jq # Ubuntu/Debian sudo apt install jq ``` -------------------------------- ### Configure Platform-Specific Desktop Packaging Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Provides TOML configurations for platform-specific packaging options in `Cargo.toml`, including dependencies for Linux, system version for macOS, and installer paths for Windows NSIS. ```toml # Linux (Debian) [package.metadata.packager.deb] depends = "./dist/depends_deb.txt" desktop_template = "./packaging/your-app.desktop" section = "utils" # macOS [package.metadata.packager.macos] minimum_system_version = "11.0" frameworks = [] info_plist_path = "./packaging/Info.plist" entitlements = "./packaging/Entitlements.plist" # Optional: signing identity for distribution signing_identity = "Developer ID Application: Your Name (XXXXXXXXXX)" # macOS DMG [package.metadata.packager.dmg] background = "./packaging/dmg_background.png" window_size = { width = 960, height = 540 } app_position = { x = 200, y = 250 } application_folder_position = { x = 760, y = 250 } # Windows NSIS [package.metadata.packager.nsis] appdata_paths = [ "$APPDATA/$PUBLISHER/$PRODUCTNAME", "$LOCALAPPDATA/$PRODUCTNAME", ] ``` -------------------------------- ### Usage Example for Makepad Modal Widget in Rust Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/04-patterns/_base/02-modal-overlay.md This Rust code demonstrates how to use the `Modal` widget in Makepad. It shows examples of opening and closing the modal using its `open()` and `close()` methods, and how to handle the `ModalAction::Dismissed` event when the user clicks outside the modal. ```rust // Open modal self.ui.modal(id!(confirm_dialog)).open(cx); // Close modal self.ui.modal(id!(confirm_dialog)).close(cx); // Handle dismissal if let ModalAction::Dismissed = action.cast() { // User clicked outside } ``` -------------------------------- ### Implementing Timers in Makepad Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/06-reference/troubleshooting.md Provides guidance on setting up and using timers in Makepad. To ensure the `handle_timer` callback is invoked, the timer reference must be stored in a struct field (e.g., `#[rust] my_timer: Timer`) and the timer must be started correctly using `cx.start_interval()` or similar methods. ```rust @derive(Live, LiveHook) pub struct App { #[live] ui: WidgetRef, #[rust] my_timer: Timer, // Must store the timer } impl MatchEvent for App { fn handle_startup(&mut self, cx: &mut Cx) { self.my_timer = cx.start_interval(1.0); // Store result } fn handle_timer(&mut self, cx: &mut Cx, _event: &TimerEvent) { // Timer callback } } ``` -------------------------------- ### Manual Installation of Makepad Skills Source: https://github.com/zhanghandong/makepad-skills/blob/main/README.md This snippet shows the manual steps to install Makepad agent skills by cloning the repository and copying the skills directory to the appropriate location for different agents (Claude Code, Codex, Gemini CLI). ```bash # Clone this repo git clone https://github.com/ZhangHanDong/makepad-skills.git # Copy to your project (https://code.claude.com/docs/en/skills) cp -r makepad-skills/skills your-project/.claude/skills # Copy to your project for Codex (https://developers.openai.com/codex/skills) cp -r makepad-skills/skills your-project/.codex/skills # Copy to your project for Gemini CLI (https://geminicli.com/docs/cli/skills/) cp -r makepad-skills/skills your-project/.gemini/skills ``` -------------------------------- ### Makepad Directory Structure Example Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/00-getting-started/project-structure.md A common directory layout for Makepad applications, separating source code, resources, platform-specific packaging, and configuration files. ```text my_app/ ├── src/ │ ├── app.rs # Main app orchestrator │ ├── lib.rs # Module declarations, live_register │ │ │ ├── home/ # Feature: Main screen │ │ ├── mod.rs # Submodule declarations + live_design() │ │ ├── home_screen.rs # Main home screen widget │ │ ├── sidebar.rs # Sidebar component │ │ └── content_view.rs # Content area │ │ │ ├── settings/ # Feature: Settings │ │ ├── mod.rs │ │ ├── settings_screen.rs │ │ └── account_settings.rs │ │ │ ├── login/ # Feature: Authentication │ │ ├── mod.rs │ │ └── login_screen.rs │ │ │ ├── shared/ # Reusable components │ │ ├── mod.rs │ │ ├── styles.rs # Colors, fonts, icons │ │ ├── helpers.rs # Utility functions │ │ ├── avatar.rs # Avatar widget │ │ ├── icon_button.rs # Icon button widget │ │ └── confirmation_modal.rs │ │ │ └── utils.rs # General utilities │ ├── resources/ │ ├── icons/ # SVG icons │ │ ├── add.svg │ │ ├── close.svg │ │ └── settings.svg │ ├── img/ # Images │ │ ├── logo.png │ │ └── default_avatar.png │ └── fonts/ # Custom fonts (if any) │ ├── packaging/ # Platform-specific packaging │ ├── macos/ │ ├── windows/ │ └── linux/ │ ├── Cargo.toml ├── rustfmt.toml ├── rust-toolchain.toml ├── CLAUDE.md # AI assistant guidance (optional) └── README.md ``` -------------------------------- ### Rust Implementation Example in Makepad Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/99-evolution/templates/pattern-template.md Provides a basic Rust implementation for a pattern within the Makepad framework. This snippet includes necessary imports and comments for clarity on complex logic. ```rust // Your Rust implementation code here // Include all necessary imports // Add comments for complex parts ``` -------------------------------- ### Portal List Integration Example Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/04-patterns/community/alanpoon-portal-list-auto-grouping.md Example demonstrating how to integrate `GroupHeaderManager` with a portal list for rendering different item types. ```APIDOC ## Portal List Integration Example ### Description This code snippet illustrates how to use the `GroupHeaderManager` within a portal list's rendering loop to conditionally render different views based on item grouping. ### Code Example ```rust while let Some(item_id) = list.next_visible_item(cx) { if let Some(range) = group_manager.check_group_header_status(item_id) { if range.start == item_id { // Render FoldHeader for the start of a group } else { // Render an Empty placeholder for items within a group's range but not the start } } else { // Render a normal item when it's not part of any group header range } } ``` ``` -------------------------------- ### Example settings.example.json for Makepad Hooks Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/99-evolution/references/collaboration.md Illustrates the required format for the `settings.example.json` snippet when submitting hooks contributions. This JSON snippet shows the structure for defining hook configurations, including matchers and commands. ```json { "hooks": { "PreToolUse": [ { "matcher": "YourMatcher", "hooks": [ { "type": "command", "command": "bash ${SKILLS_DIR}/hooks/your-hook.sh" } ] } ] } } ``` -------------------------------- ### Makepad StackNavigation for Mobile UI Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/06-reference/adaptive-layout.md Shows how to implement mobile navigation patterns in Makepad using `StackNavigation`. This includes defining a root view with a bottom navigation bar and a detail view that can be pushed onto the stack, along with handling actions for pushing and popping views. ```rust live_design! { pub MobileUI = { // Root view - always visible root_view = { width: Fill, height: Fill flow: Down {} bottom_nav = {} } // Detail view - pushed on top detail_view = { header = { content = { title = { text: "Detail" } } } body = { {} } } } } // Handle navigation implement MatchEvent for App { fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) { // Push detail view if self.ui.button(ids!(item_button)).clicked(&actions) { cx.widget_action(widget_uid, &path, StackNavigationAction::Push(id!(detail_view))); } // Pop back if self.ui.button(ids!(back_button)).clicked(&actions) { cx.widget_action(widget_uid, &path, StackNavigationAction::Pop); } // Forward actions to stack navigation self.ui.stack_navigation(ids!(view_stack)) .handle_stack_view_actions(cx, &actions); } } ``` -------------------------------- ### Rust: App Setup for Global Widgets Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/04-patterns/_base/06-global-registry.md Demonstrates how to register global widgets, specifically a popup and a tooltip, during the application's startup phase using Makepad's `handle_startup` event. ```rust impl MatchEvent for App { fn handle_startup(&mut self, cx: &mut Cx) { // Register global widgets set_global_popup(cx, self.ui.popup(ids!(global_popup))); set_global_tooltip(cx, self.ui.tooltip(ids!(global_tooltip))); } } ``` -------------------------------- ### Install iOS Toolchain for Makepad Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Installs the necessary toolchain for building Makepad applications for iOS. This is a prerequisite for iOS development. ```bash cargo makepad apple ios install-toolchain ``` -------------------------------- ### Install Wasm Toolchain for Makepad Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Installs the WebAssembly toolchain required for building Makepad applications for web browsers. This command is necessary before building Wasm targets. ```bash cargo makepad wasm install-toolchain ``` -------------------------------- ### Install Mobile Packager (Makepad CLI) Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Installs or updates the `cargo-makepad` command-line tool, which is essential for building and packaging Makepad applications for mobile platforms like Android and iOS. ```bash cargo install --force --git https://github.com/makepad/makepad.git --branch dev cargo-makepad ``` -------------------------------- ### Makepad Live Design DSL Example Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/99-evolution/templates/pattern-template.md Demonstrates the use of Makepad's live_design! macro for defining custom DSL elements. This is useful for declarative UI or component definitions within the framework. ```rust live_design! { // Your DSL code here if applicable } ``` -------------------------------- ### Install Mobile Packaging Tool (cargo-makepad) Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Installs the `cargo-makepad` tool, which is used for building and packaging Makepad applications for mobile platforms like Android and iOS. This command fetches the latest `dev` branch. ```bash cargo install --force --git https://github.com/makepad/makepad.git \ --branch dev cargo-makepad ``` -------------------------------- ### PageFlip for Tab Switching in Rust Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/06-reference/adaptive-layout.md Demonstrates how to implement tab switching using the PageFlip component in Makepad. It shows the live_design! macro for defining pages and a Rust function for programmatically switching between them. This is useful for creating tabbed interfaces with smooth transitions. ```rust live_design! { { width: Fill, height: Fill lazy_init: true active_page: home_page home_page = { {} } settings_page = { {} } profile_page = { {} } } } // Switch pages fn switch_to_settings(&mut self, cx: &mut Cx) { self.view.page_flip(ids!(page_flip)) .set_active_page(cx, id!(settings_page)); } ``` -------------------------------- ### Build Linux Debian Package Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Builds a `.deb` package for Debian/Ubuntu-based Linux distributions using `cargo-packager`. Requires installing specific development libraries before building. ```bash # Install dependencies sudo apt-get update sudo apt-get install libssl-dev libsqlite3-dev pkg-config \ binfmt-support libxcursor-dev libx11-dev libasound2-dev libpulse-dev # Build package cargo packager --release ``` -------------------------------- ### Package Makepad App for Windows Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Builds and packages a Makepad application for Windows, specifically creating an NSIS installer. This command utilizes `cargo-packager` with the appropriate format flag. ```bash cargo packager --release --formats nsis ``` -------------------------------- ### Rust Timer Storage Pattern Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/06-reference/code-quality.md Explains that timers started with `cx.start_interval()` in Makepad must be stored as fields. Failure to store the `Timer` object will result in the timer not functioning. ```rust #[rust] refresh_timer: Timer, fn handle_startup(&mut self, cx: &mut Cx) { self.refresh_timer = cx.start_interval(1.0); // Must store result } ``` -------------------------------- ### Import and Use Image Resources in Rust Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/00-getting-started/init.md Demonstrates how to import an image resource using Makepad's `dep()` function and then use it within an `Image` widget. The image path is defined using a `live_design!` block. ```rust live_design! { // Import image IMG_LOGO = dep("crate://self/resources/logo.png") // Use in widget { source: (IMG_LOGO) width: 100, height: 100 } } ``` -------------------------------- ### Serve Makepad Wasm Application Locally Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Starts a local HTTP server to serve the built Makepad Wasm application. This is useful for testing the web version of your application in a browser. ```bash cd ./target/makepad-wasm-app/release/your-app python3 -m http.server 8080 # Open http://localhost:8080 ``` -------------------------------- ### Run Makepad App on Desktop Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/00-getting-started/init.md Command to build and run the Makepad application in release mode on a desktop environment using Cargo. ```bash cargo run --release ``` -------------------------------- ### Build Android APK with cargo-makepad Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/05-deployment/SKILL.md Builds an Android application package (`.apk`) using `cargo-makepad`. This includes installing the necessary Android toolchain and then compiling the release build of the specified application crate. ```bash # Install Android toolchain cargo makepad android install-toolchain # Full NDK (recommended for complete support) cargo makepad android install-toolchain --full-ndk # Build APK cargo makepad android build -p your-app --release ``` -------------------------------- ### Get Tooltip Size After Setting Text (Rust) Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/06-reference/troubleshooting.md Ensures the tooltip has a valid size before attempting to draw it by first setting the text content and then measuring the resulting dimensions. This prevents the tooltip from appearing with zero size, which can happen if dimensions are calculated before text is applied. ```rust pub fn show_with_options(&mut self, cx: &mut Cx, text: &str, ...) { let mut tooltip = self.view.tooltip(ids!(tooltip)); // 1. Set text first tooltip.set_text(cx, text); // 2. Then get dimensions (text affects size) let tooltip_size = tooltip.view(ids!(rounded_view)).area().rect(cx).size; // 3. Check if size is valid if tooltip_size.x == 0.0 { // May need to wait for layout log!("Warning: tooltip size is zero"); return; } // 4. Apply with valid dimensions tooltip.apply_over(cx, live! { content: { rounded_view = { draw_bg: { expected_dimension_x: (tooltip_size.x) }}} }); } ``` -------------------------------- ### Makepad App Integration with Tokio Async Actions in Rust Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/04-patterns/_base/13-tokio-integration.md Demonstrates how to integrate the asynchronous Tokio runtime into a Makepad application's event handling. It shows how to initiate async operations on startup and via UI interactions (button clicks) by submitting requests to the runtime. It also details how to process asynchronous responses received as actions within the `handle_actions` method, updating the UI accordingly. ```rust impl MatchEvent for App { fn handle_startup(&mut self, cx: &mut Cx) { start_async_runtime(); submit_request(AppRequest::FetchUsers); self.show_loading(cx); } fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) { // Handle button clicks if self.ui.button(id!(refresh_btn)).clicked(&actions) { submit_request(AppRequest::FetchUsers); } if self.ui.button(id!(send_btn)).clicked(&actions) { let content = self.ui.text_input(id!(message_input)).text(); submit_request(AppRequest::SendMessage { room_id: self.current_room.clone(), content, }); } // Handle async responses for action in actions { if let Some(response) = action.downcast_ref::() { match response { AppResponse::UsersFetched(users) => { self.users = users.clone(); self.hide_loading(cx); self.update_user_list(cx); } AppResponse::MessageSent(Ok(())) => { self.ui.text_input(id!(message_input)).set_text(cx, ""); } AppResponse::MessageSent(Err(e)) => { show_error(cx, e); } AppResponse::LoggedOut => { self.navigate_to_login(cx); } } } } } } ``` -------------------------------- ### Align Children within Parent View (Rust) Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/01-core/layout.md Shows how to align child elements within their parent container using the `align` property, which accepts `x` and `y` values from 0.0 (start) to 1.0 (end). Examples include centering, top-right, and bottom-left alignments. ```rust live_design! { // Align children within parent { width: Fill, height: 100 align: { x: 0.5, y: 0.5 } // Center both axes