Newer
Older
# Chapter 1 - Installing and hello world!
Kayak UI is quite easy to setup! First make sure you add it to your cargo.toml file in your project.
Because a crate has yet to be released this currently this looks like:
```toml
kayak_ui = { git = "https://github.com/StarArawn/kayak_ui/", rev = "9b212e230a5325a3ac6897390ded0bc358eebc80"}
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
```
Once you've added Kayak UI to your bevy project you can now start to use it!
Hello World Example:
```rust
use bevy::prelude::*;
use kayak_ui::prelude::{widgets::*, *};
fn startup(
mut commands: Commands,
mut font_mapping: ResMut<FontMapping>,
asset_server: Res<AssetServer>,
) {
font_mapping.set_default(asset_server.load("roboto.kayak_font"));
commands.spawn(UICameraBundle::new());
let mut widget_context = KayakRootContext::new();
let parent_id = None;
// The rsx! macro expects a parent_id, a widget_context from the user.
// It also expects `Commands` from bevy.
// This can be a little weird at first.
// See the rsx! docs for more info!
rsx! {
<KayakAppBundle>
<TextWidgetBundle
text={TextProps {
content: "Hello World".into(),
..Default::default()
}}
/>
</KayakAppBundle>
}
commands.insert_resource(widget_context);
}
fn main() {
App::new()
.insert_resource(ImageSettings::default_nearest())
.add_plugins(DefaultPlugins)
.add_plugin(KayakContextPlugin)
.add_plugin(KayakWidgets)
.add_startup_system(startup)
.run()
}
```
## Wait where is the ECS?
Kayak UI encourages the use of our proc macro called `rsx!`. This proc macro simulates XML like syntax and turns it into bevy commands. This proc macro is completely optional though!
Here is the same hello world example but this time we'll use bevy's ECS directly.
```rust
use bevy::prelude::*;
use kayak_ui::prelude::{widgets::*, *};
fn startup(
mut commands: Commands,
mut font_mapping: ResMut<FontMapping>,
asset_server: Res<AssetServer>,
) {
font_mapping.set_default(asset_server.load("roboto.kayak_font"));
commands.spawn(UICameraBundle::new());
let mut widget_context = KayakRootContext::new();
let pre_existing_app_entity = widget_context.get_child_at(None);
let app_entity = if let Some(entity) = pre_existing_app_entity {
commands.get_or_spawn(entity).id()
} else {
commands.spawn_empty().id()
};
// Create default app bundle
let mut app_bundle = KayakAppBundle {
..Default::default()
};
// Create app's children
let mut children = KChildren::new();
// Create the text child
let pre_existing_text_entity = widget_context.get_child_at(Some(app_entity));
let text_entity = if let Some(entity) = pre_existing_text_entity {
commands.get_or_spawn(entity).id()
} else {
commands.spawn_empty().id()
};
commands.entity(text_entity).insert(TextWidgetBundle {
text: TextProps {
content: "Hello World".into(),
..Default::default()
},
..Default::default()
});
// Add the text as a child of the App Widget.
children.add(text_entity);
// Finalize app bundle and add to entity.
app_bundle.children = children;
commands.entity(app_entity).insert(app_bundle);
// Add app widget to context.
widget_context.add_widget(None, app_entity);
// Add widget context as resource.
commands.insert_resource(widget_context);
}
fn main() {
App::new()
.insert_resource(ImageSettings::default_nearest())
.add_plugins(DefaultPlugins)
.add_plugin(KayakContextPlugin)
.add_plugin(KayakWidgets)
.add_startup_system(startup)
.run()
}
```