Skip to content

markijohn/druid-xml

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

88 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

druid-xml : druid ui builder as xml

WARNING

  • VERY EARLY DEVELOPMENT STAGES
  • Experimental project

crates

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages