1 module fluid.showcase.introduction; 2 3 import fluid; 4 import fluid.showcase; 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(.headingTheme, "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() { }