druid-xml : druid ui builder as xml

WARNING

• VERY EARLY DEVELOPMENT STAGES
• Experimental project

crates

• druid-xml : parse xml and genrate rust code or widget
• druid-xml-macro : parse xml and generate rust code
• druid-xml-example : examples

Quick Example

• Cargo.toml

[dependencies]
druid = {git="https://github.com/linebender/druid.git"}
druid-xml-macro = {git="https://github.com/markijohn/druid-xml.git"}

• Rust code

#[macro_use]
extern crate druid_xml_macro;

use druid::{AppLauncher, WindowDesc, Data, Lens};

pub fn main() {
    #[derive(Clone, Lens, Data)]
    struct LoginInfo {
        id : String,
        pwd : String,
        remember : bool
    }

    druid_xml!(
        r#"
        <style>
        #login_label { color:aqua; font-size:2.1em }
        .idpwd_label { width:100px }
        button {width:100px}
        button.ok {width:100px; color:yellow}
        button.cancel {width:100px; color:red}
        </style>


        <flex direction="column" fn="build_main" lens="LoginInfo" axis_alignment="center">
            <label id="login_label">LOGIN</label>
            <spacer/>

            <!-- ID row -->
            <flex>
                <label class="idpwd_label">ID</label>
                <textbox placeholder="id" lens="LoginInfo::id"/>
            </flex>

            <spacer/>

            <!-- Password row -->
            <flex>
                <label class="idpwd_label">Password</label>
                <textbox placeholder="password"  lens="LoginInfo::pwd"/>
            </flex>

            <spacer/>

            <checkbox lens="LoginInfo::remember">Remeber Me</checkbox>

            <spacer/>

            <!-- Button row -->
            <flex style="padding:0px 20px">
                <button class="ok">OK</button>
                <button class="cancel">CANCEL</button>
            </flex>
        </flex>
        "#
    );
    
    let window = WindowDesc::new(build_main())
        .window_size((500., 380.))
        .resizable(false)
        .title("Login sample");
    AppLauncher::with_window(window)
        .launch( LoginInfo { id : "".to_owned(), pwd:"".to_owned(), remember:true } )
        .expect("launch failed");
}

• Result

Try online (include demo)

• Designer with Demo
• The left panel is the xml code editor, the top right is the real-time wasm reflection panel, and the bottom right is the html rendering. html rendering currently has no meaning, but i plan to make it compatible later.

Style

ATTRIBUTE	VALUE(example)	AVAILABLE WIDGET	DESCRIPTION
border	1 solid black 1px solid yellow	all	Only solid brush type is supported
padding	5 10 5 10 15 15 10	all	(top,right,bottom,left) (top,bottom) (left,right) (top) (right) (bottom) (left)
background-color	rgb(0,255,255) rgba(0,255,255,88) #96ab05	all
color	rgb(0,255,255) rgba(0,255,255,88) #96ab05	label, button	text color
width	25 25px	all	percentage size not yet support(or impossible)
height	25 25px	all	percentage size not yet support(or impossible)
transition	2s background-color linear font-size margin padding color border	all	for hover, focus, active animation

Widget

LOCALNAME	ATTRIBUTES
flex	must_fill_main_axis flex axis_alignment cross_axis_alignment
label	flex line-break
button	flex
checkbox	flex
textbox	flex
image(not yet)	flex
list(not yet)	flex
scroll(not yet)	flex
slider	flex min max
spinner(some proble on wasm)	flex
split	flex split_point min_size bar_size min_bar_area draggable solid_bar
stepper	flex min max step wraparound
switch	flex
painter(not yet)	flex
container	flex

TODO

• Load xml from project path
• Animation : CSS transition and Animation
• Drawable widget : like Android Drawable