makepad/examples/uizoo/src/app.rs

use makepad_widgets::*;

app_main!(App);

script_mod! {
    use mod.prelude.widgets.*
    use mod.widgets.*

    let UIZooTab = RectView{
        height: Fill width: Fill
        flow: Down
        padding: 0
        spacing: 0.
    }

    let AppDock = Dock{
        height: Fill width: Fill

        root := DockSplitter{
            axis: SplitterAxis.Horizontal
            align: SplitterAlign.FromA(0.0)
            a: @tab_set_1
            b: @tab_set_2
        }

        tab_set_1 := DockTabs{
            tabs: [@tab_a]
            selected: 0
            closable: false
        }

        tab_set_2 := DockTabs{
            tabs: [
                @tOverview
                @tLayoutDemos
                @tButton
                @tCheckBox
                @tDropDown
                @tFiletree
                @tSpinner
                @tHTML
                @tIcon
                @tIconSet
                @tImage
                @tImageBlend
                @tGlassPanel
                @tLabel
                @tSlug
                @tLinkLabel
                @tMarkdown
                @tPageFlip
                @tPortalList
                @tRadioButton
                @tRotary
                @tRotatedImage
                @tScrollbar
                @tSlider
                @tSlidesView
                @tStackNavigation
                @tAdaptiveView
                @tTextInput
                @tVideo
                @tView
                @tAlignScroll
            ]
            selected: 0
            closable: false
        }

        tab_a := DockTab{
            name: "Welcome"
            template: @PermanentTab
            kind: @TabOverview
        }

        tOverview := DockTab{name: "Intro" template: @PermanentTab kind: @TabOverview}
        tLayoutDemos := DockTab{name: "Layout Demos" template: @PermanentTab kind: @TabLayoutDemos}
        tButton := DockTab{name: "Button" template: @PermanentTab kind: @TabButton}
        tCheckBox := DockTab{name: "CheckBox" template: @PermanentTab kind: @TabCheckBox}
        tDropDown := DockTab{name: "DropDown" template: @PermanentTab kind: @TabDropDown}
        tFiletree := DockTab{name: "FileTree" template: @PermanentTab kind: @TabFiletree}
        tSpinner := DockTab{name: "Spinner" template: @PermanentTab kind: @TabSpinner}
        tHTML := DockTab{name: "HTML" template: @PermanentTab kind: @TabHTML}
        tIcon := DockTab{name: "Icon" template: @PermanentTab kind: @TabIcon}
        tIconSet := DockTab{name: "IconSet" template: @PermanentTab kind: @TabIconSet}
        tImage := DockTab{name: "Image" template: @PermanentTab kind: @TabImage}
        tImageBlend := DockTab{name: "ImageBlend" template: @PermanentTab kind: @TabImageBlend}
        tGlassPanel := DockTab{name: "GlassPanel" template: @PermanentTab kind: @TabGlassPanel}
        tLabel := DockTab{name: "Label" template: @PermanentTab kind: @TabLabel}
        tSlug := DockTab{name: "SLUG" template: @PermanentTab kind: @TabSlug}
        tLinkLabel := DockTab{name: "LinkLabel" template: @PermanentTab kind: @TabLinkLabel}
        tMarkdown := DockTab{name: "Markdown" template: @PermanentTab kind: @TabMarkdown}
        tPageFlip := DockTab{name: "PageFlip" template: @PermanentTab kind: @TabPageFlip}
        tPortalList := DockTab{name: "PortalList" template: @PermanentTab kind: @TabPortalList}
        tRadioButton := DockTab{name: "RadioButton" template: @PermanentTab kind: @TabRadioButton}
        tRotary := DockTab{name: "Rotary" template: @PermanentTab kind: @TabRotary}
        tRotatedImage := DockTab{name: "RotatedImage" template: @PermanentTab kind: @TabRotatedImage}
        tScrollbar := DockTab{name: "Scrollbar" template: @PermanentTab kind: @TabScrollbar}
        tSlider := DockTab{name: "Slider" template: @PermanentTab kind: @TabSlider}
        tSlidesView := DockTab{name: "SlidesView" template: @PermanentTab kind: @TabSlidesView}
        tStackNavigation := DockTab{name: "StackNavigation" template: @PermanentTab kind: @TabStackNavigation}
        tAdaptiveView := DockTab{name: "AdaptiveView" template: @PermanentTab kind: @TabAdaptiveView}
        tTextInput := DockTab{name: "TextInput" template: @PermanentTab kind: @TabTextInput}
        tVideo := DockTab{name: "Video" template: @PermanentTab kind: @TabVideo}
        tView := DockTab{name: "View" template: @PermanentTab kind: @TabView}
        tAlignScroll := DockTab{name: "Align+Scroll" template: @PermanentTab kind: @TabAlignScroll}

        TabOverview := UIZooTab{WidgetsOverview{}}
        TabLayoutDemos := UIZooTab{DemoLayout{}}
        TabButton := UIZooTab{DemoButton{}}
        TabCheckBox := UIZooTab{DemoCheckBox{}}
        TabDropDown := UIZooTab{DemoDropdown{}}
        TabFiletree := UIZooTab{DemoFT{}}
        TabSpinner := UIZooTab{DemoSpinner{}}
        TabHTML := UIZooTab{DemoHtml{}}
        TabIcon := UIZooTab{DemoIcon{}}
        TabIconSet := UIZooTab{DemoIconSet{}}
        TabImage := UIZooTab{DemoImage{}}
        TabImageBlend := UIZooTab{DemoImageBlend{}}
        TabGlassPanel := UIZooTab{DemoGlassPanel{}}
        TabLabel := UIZooTab{DemoLabel{}}
        TabSlug := UIZooTab{DemoSlug{}}
        TabLinkLabel := UIZooTab{DemoLinkLabel{}}
        TabMarkdown := UIZooTab{DemoMarkdown{}}
        TabPageFlip := UIZooTab{DemoPageFlip{}}
        TabPortalList := UIZooTab{DemoPortalList{}}
        TabRadioButton := UIZooTab{DemoRadioButton{}}
        TabRotary := UIZooTab{DemoRotary{}}
        TabRotatedImage := UIZooTab{DemoRotatedImage{}}
        TabScrollbar := UIZooTab{DemoScrollBar{}}
        TabSlider := UIZooTab{DemoSlider{}}
        TabSlidesView := UIZooTab{DemoSlidesView{}}
        TabStackNavigation := UIZooTab{DemoStackNavigation{}}
        TabAdaptiveView := UIZooTab{DemoAdaptiveView{}}
        TabTextInput := UIZooTab{DemoTextInput{}}
        TabVideo := UIZooTab{DemoVideo{}}
        TabView := UIZooTab{DemoView{}}
        TabAlignScroll := UIZooTab{DemoAlignScroll{}}
    }

    mod.gc.set_static(AppDock)
    mod.gc.run()

    startup() do #(App::script_component(vm)){
        ui: Root{
            main_window := Window{
                window.inner_size: vec2(1200 800)
                body +: {
                    flow: Down
                    spacing: 0.
                    margin: 0.

                    dock := AppDock{}
                }
            }
        }
    }
}

#[derive(Script, ScriptHook)]
pub struct App {
    #[live]
    ui: WidgetRef,
    #[rust]
    counter: usize,
}

impl MatchEvent for App {
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        let ui = self.ui.clone();

        ui.radio_button_set(
            cx,
            ids_array!(
                radios_demo_1.radio1,
                radios_demo_1.radio2,
                radios_demo_1.radio3,
                radios_demo_1.radio4
            ),
        )
        .selected(cx, actions);

        ui.radio_button_set(
            cx,
            ids_array!(
                radios_demo_2.radio1,
                radios_demo_2.radio2,
                radios_demo_2.radio3,
                radios_demo_2.radio4
            ),
        )
        .selected(cx, actions);

        ui.radio_button_set(
            cx,
            ids_array!(
                radios_demo_3.radio1,
                radios_demo_3.radio2,
                radios_demo_3.radio3,
                radios_demo_3.radio4
            ),
        )
        .selected(cx, actions);

        ui.radio_button_set(
            cx,
            ids_array!(
                radios_demo_11.radio1,
                radios_demo_11.radio2,
                radios_demo_11.radio3,
                radios_demo_11.radio4
            ),
        )
        .selected(cx, actions);

        ui.radio_button_set(
            cx,
            ids_array!(
                radios_demo_12.radio1,
                radios_demo_12.radio2,
                radios_demo_12.radio3,
                radios_demo_12.radio4
            ),
        )
        .selected(cx, actions);

        if let Some(txt) = self
            .ui
            .text_input(cx, ids!(simpletextinput))
            .changed(&actions)
        {
            log!("TEXTBOX CHANGED {}", self.counter);
            self.counter += 1;
            let lbl = self.ui.label(cx, ids!(simpletextinput_outputbox));
            lbl.set_text(cx, &format!("{} {}", self.counter, txt));
        }

        if let Some(is_multiline) = self
            .ui
            .check_box(cx, ids!(multiline_toggle))
            .changed(actions)
        {
            let ti = self.ui.text_input(cx, ids!(multiline_toggleable));
            ti.set_is_multiline(cx, is_multiline);
        }

        if self.ui.button(cx, ids!(basicbutton)).clicked(&actions) {
            log!("BASIC BUTTON CLICKED {}", self.counter);
            self.counter += 1;
            let btn = self.ui.button(cx, ids!(basicbutton));
            btn.set_text(cx, &format!("Clicky clicky! {}", self.counter));
        }

        if self.ui.button(cx, ids!(blendbutton)).clicked(&actions) {
            self.ui.image_blend(cx, ids!(blendimage)).switch_image(cx);
        }

        if self.ui.button(cx, ids!(pageflipbutton_a)).clicked(&actions) {
            self.ui
                .page_flip(cx, ids!(page_flip))
                .set_active_page(cx, live_id!(page_a));
        }

        if self.ui.button(cx, ids!(pageflipbutton_b)).clicked(&actions) {
            self.ui
                .page_flip(cx, ids!(page_flip))
                .set_active_page(cx, live_id!(page_b));
        }

        if self.ui.button(cx, ids!(pageflipbutton_c)).clicked(&actions) {
            self.ui
                .page_flip(cx, ids!(page_flip))
                .set_active_page(cx, live_id!(page_c));
        }

        if self.ui.button(cx, ids!(iconbutton)).clicked(&actions) {
            log!("ICON BUTTON CLICKED {}", self.counter);
            self.counter += 1;
            let btn = self.ui.button(cx, ids!(iconbutton));
            btn.set_text(cx, &format!("Icon button clicked: {}", self.counter));
        }

        if let Some(check) = self.ui.check_box(cx, ids!(simplecheckbox)).changed(actions) {
            log!("CHECK BUTTON CLICKED {} {}", self.counter, check);
            self.counter += 1;
            let lbl = self.ui.label(cx, ids!(simplecheckbox_output));
            lbl.set_text(cx, &format!("{} {}", self.counter, check));
        }

        // StackNavigation demo handlers
        let stack_nav = self.ui.stack_navigation(cx, ids!(stack_nav_demo));

        if self.ui.button(cx, ids!(push_view_a)).clicked(&actions) {
            stack_nav.push(cx, live_id!(stack_view_a));
        }
        if self.ui.button(cx, ids!(push_view_b)).clicked(&actions) {
            stack_nav.push(cx, live_id!(stack_view_b));
        }
        if self.ui.button(cx, ids!(push_view_c)).clicked(&actions) {
            stack_nav.push(cx, live_id!(stack_view_c));
        }
        if self
            .ui
            .button(cx, ids!(push_nested_from_a))
            .clicked(&actions)
        {
            stack_nav.push(cx, live_id!(stack_view_b));
        }
        if self
            .ui
            .button(cx, ids!(push_nested_from_b))
            .clicked(&actions)
        {
            stack_nav.push(cx, live_id!(stack_view_c));
        }
        if self.ui.button(cx, ids!(pop_to_root_btn)).clicked(&actions) {
            stack_nav.pop_to_root(cx);
        }

        // Responsive Nav demo: desktop click handlers
        let desktop_items = [
            (ids!(desktop_item_1), "Settings"),
            (ids!(desktop_item_2), "Profile"),
            (ids!(desktop_item_3), "Notifications"),
        ];
        for (item_id, title) in desktop_items {
            if let Some(_) = self.ui.view(cx, item_id).finger_down(actions) {
                self.ui
                    .label(cx, ids!(desktop_detail_title))
                    .set_text(cx, title);
                self.ui.label(cx, ids!(desktop_detail_body)).set_text(
                    cx,
                    &format!("{} detail content.\n\nOn Desktop, the list and detail are visible side-by-side.", title),
                );
            }
        }

        // Responsive Nav demo: mobile StackNavigation handlers
        let mobile_nav = self.ui.stack_navigation(cx, ids!(mobile_nav));

        let mobile_items = [
            (ids!(mobile_item_1), "Settings"),
            (ids!(mobile_item_2), "Profile"),
            (ids!(mobile_item_3), "Notifications"),
        ];
        for (item_id, title) in mobile_items {
            if let Some(_) = self.ui.view(cx, item_id).finger_down(actions) {
                mobile_nav.set_title(cx, live_id!(mobile_detail_view), title);
                self.ui
                    .label(cx, ids!(mobile_detail_title))
                    .set_text(cx, title);
                self.ui.label(cx, ids!(mobile_detail_body)).set_text(
                    cx,
                    &format!("{} detail content.\n\nOn Mobile, this was pushed onto the navigation stack.", title),
                );
                mobile_nav.push(cx, live_id!(mobile_detail_view));
            }
        }
    }
}

impl AppMain for App {
    fn script_mod(vm: &mut ScriptVm) -> ScriptValue {
        crate::makepad_widgets::script_mod(vm);
        // The design tweaker's shader view uses the real code editor when
        // the app registers it.
        makepad_code_editor::script_mod(vm);
        crate::layout_templates::script_mod(vm);
        crate::demofiletree::script_mod(vm);
        crate::tab_button::script_mod(vm);
        crate::tab_checkbox::script_mod(vm);
        crate::tab_dropdown::script_mod(vm);
        crate::tab_filetree::script_mod(vm);
        crate::tab_spinner::script_mod(vm);
        crate::tab_html::script_mod(vm);
        crate::tab_icon::script_mod(vm);
        crate::tab_iconset::script_mod(vm);
        crate::tab_image::script_mod(vm);
        crate::tab_imageblend::script_mod(vm);
        crate::tab_glasspanel::script_mod(vm);
        crate::tab_label::script_mod(vm);
        crate::tab_layout::script_mod(vm);
        crate::tab_linklabel::script_mod(vm);
        crate::tab_markdown::script_mod(vm);
        crate::tab_pageflip::script_mod(vm);
        crate::tab_portallist::script_mod(vm);
        crate::tab_radiobutton::script_mod(vm);
        crate::tab_rotary::script_mod(vm);
        crate::tab_rotatedimage::script_mod(vm);
        crate::tab_scrollbar::script_mod(vm);
        crate::tab_slider::script_mod(vm);
        crate::tab_slug::script_mod(vm);
        crate::tab_slidesview::script_mod(vm);
        crate::tab_stacknavigation::script_mod(vm);
        crate::tab_adaptiveview::script_mod(vm);
        crate::tab_textinput::script_mod(vm);
        crate::tab_video::script_mod(vm);
        crate::tab_view::script_mod(vm);
        crate::tab_align_scroll::script_mod(vm);
        crate::tab_widgetsoverview::script_mod(vm);
        self::script_mod(vm)
    }

    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}