fluid.tour.introduction source code

1 module fluid.tour.introduction;
2 
3 import fluid;
4 import fluid.tour;
5 
6 
7 @safe:
8 
9 
10 @(
11     () => label("Fluid is a library for creating user interfaces. The focus of the library is ease of use, making "
12         ~ "it possible to design menus, input forms, controls and displays while minimizing amount of effort and "
13         ~ "time."),
14     () => label("To start from the basics, Fluid programs are built using nodes. There's a number of "
15         ~ "different node types; Each serves a different purpose and does something different. A good "
16         ~ "initial example is the label node, which can be used to display text. Let's recreate the classic Hello "
17         ~ "World program.")
18 )
19 Label helloWorldExample() {
20 
21     return label("Hello, World!");
22 
23 }
24 
25 @(() => label("Nodes as such do nothing, and the code above, while used to create a label, won't display it on the "
26     ~ "screen by itself. Typically, you'd like to create a window the user interface can live in. Because Fluid is "
27     ~ "made with game development in mind, it can integrate with Raylib to do this. A minimal example of using Fluid "
28     ~ "in Raylib will thus look like this:"))
29 void raylibExample()() @system {
30 
31     // Create the window
32     InitWindow(800, 600, "Hello, World!");
33     SetTargetFPS(60);
34     scope (exit) CloseWindow();
35 
36     // Prepare the UI
37     auto root = label("Hello, World!");
38 
39     // Run the app
40     while (!WindowShouldClose) {
41 
42         BeginDrawing();
43         scope (exit) EndDrawing();
44 
45         ClearBackground(Colors.WHITE);
46 
47         // Draw the UI
48         root.draw();
49 
50     }
51 
52 }
53 
54 @(
55     () => label("This tutorial will focus on Fluid however, and won't describe Raylib in detail. If you would like to "
56         ~ "learn more about Raylib, visit its homepage:"),
57     () => button("https://raylib.com", delegate {
58         openURL("https://raylib.com");
59     }),
60     () => label(.tags!(Tags.heading), "Frames"),
61     () => label("Next up in our list of basic nodes is the frame node. Frames are containers, which means they connect "
62         ~ "a number of nodes together. To start, we can place a few labels in a column."),
63 )
64 Frame vframeExample() {
65 
66     return vframe(
67         label("First line"),
68         label("Second line"),
69         label("Third line"),
70     );
71 
72 }
73 
74 @(
75     () => label("Frames have two core variants, the vframe, and the hframe. The difference is that the vframe aligns "
76         ~ "nodes vertically, while hframe aligns them horizontally."),
77 )
78 Frame hframeExample() {
79 
80     return hframe(
81         label("Left, "),
82         label("right"),
83     );
84 
85 }
86 
87 @(
88     () => label("The example above makes it look like if there was only a single label. Let's try something more "
89         ~ `exciting and insert a vframe inside of the hframe. Notice here, how "down under" appears immediately under `
90         ~ `"right", instead of being aligned to the start of the line.`),
91 )
92 Frame bothFramesExample() {
93 
94     return hframe(
95         label("Left, "),
96         vframe(
97             label("right"),
98             label("down under"),
99         ),
100     );
101 
102 }
103 
104 @(
105     () => label("Building Fluid apps comes down mostly to combining container nodes like frames with nodes that "
106         ~ "display containers or take input. The frame system is flexible enough to support a large number of usecases. Please "
107         ~ "follow to the next chapter to learn more about building layout with frames."),
108 )
109 void endExample() { }