1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
use raui_app::app::declarative::DeclarativeApp;
use raui_core::{
make_widget,
widget::{
WidgetRef,
component::{
RelativeLayoutProps,
containers::{anchor_box::anchor_box, content_box::content_box},
image_box::{ImageBoxProps, image_box},
},
context::WidgetContext,
node::WidgetNode,
unit::content::ContentBoxItemLayout,
utils::Color,
},
};
fn preview(ctx: WidgetContext) -> WidgetNode {
// we print this widget props to show how AnchorProps values change relative to window resize.
println!("Preview props: {:#?}", ctx.props);
// we create simple colored image that fills available space just to make you see the values.
make_widget!(image_box)
.with_props(ImageBoxProps::colored(Color {
r: 1.0,
g: 0.25,
b: 0.25,
a: 1.0,
}))
.into()
}
fn main() {
// we create widget reference first so we can apply it to some widget and and reference
//that widget in another place - basically what widget reference is, it is a way to read
// some other widget ID in some other place outside the referenced widget scope.
let idref = WidgetRef::default();
let tree = make_widget!(content_box)
// we apply widget reference to the root content box so we can reference that root widget
// later in anchor box to enable it to calculate how anchor box content is lay out relative
// to the root widget - this is the most important thing to setup, because if we won't do
// that, anchor box would not be able to give its content a proper data about its layout
// relative to the referenced widget. Note that, you can reference ANY widget in the widget
// tree - it will always give you a relative location to any widget you provide.
.idref(idref.clone())
.listed_slot(
make_widget!(anchor_box)
// we pass widget reference to anchor box via RelativeLayoutProps, because anchor
// uses relative layout hook to perform calculations of relative layout box.
.with_props(RelativeLayoutProps {
relative_to: idref.into(),
})
// we apply margin to anchor box just to make it not fill entire space by default.
.with_props(ContentBoxItemLayout {
margin: 100.0.into(),
..Default::default()
})
.named_slot("content", make_widget!(preview)),
);
DeclarativeApp::simple("Anchor Box", tree);
}