Getting Started Guide

[BillyDM]

There should be an official online book that contains a getting-started guide.

The guide should walk the reader through these core concepts in the following order:

Part 1 - Hello World

This part will essentially have the user recreate the hello_world example.

• Basic app structure and the Application trait.
• Create a struct called MainWindowElements to hold some element handles.
• Respond to the AppWindowEvent::WindowOpened event and create a method called build_main_window and returns a new MainWindowElements struct.
• Add a Label element to MainWindowElements and build it inside of build_main_window.
• Tell the user to run the application, and have them note that nothing will display on the screen yet. This is because elements must have a defined "bounding rectangle" before they can be displayed.
• Create a method called layout_main_window, and call it at the bottom of build_main_window and in response to the AppWindowEvent::WindowResized event.
• Inside layout_main_window, get the desired size of the label from the handle. Then center the label inside the window. Run it and see the "Hello World!" message!
• At the top of build_main_window, showcase how to add a custom style for a Label element. Note that when the class name is "", it means that it will become the default style for that type of element.
• Run it and see the new fancy label.
• Change the name of the class to "fancy_label", and add the line `.class("fancy_label") to the label builder.
• Now showcase loading Yarrow's default theme (yarrow::theme::yarrow_dark::load()). Note that is is simply a function that adds a bunch of styles to the style system. The user can easily create their own themes.
• Create a struct called MyStyle, and add it to the application. Move the "fancy_label" style to a method inside of this struct.

Part 2 - Button

• We will now create a button. Add a Button element to our application, build it, and lay it out at the top-left corner of the screen.
• Add a margin_top and margin_left field to the MyStyle struct, and use it in the layout function.
• Now let's make the button do something when selected. Create an enum called MyAction and add a variant called ChangeLabelText. Now add this action to the button in the builder with .on_select(MyAction::ChangeLabelText).
• Implement the on_action_emitted method and respond to the action by changing the text of the label to "The button was clicked!".
• Run it, and note that the text no longer fits in the label. This is because we need to perform a layout on the label again. Simply call layout_main_window() after the changing the label text.

Part 3 - State

• Create a struct called MyState and add it to our application.
• Add the field label_toggled: bool.
• In build_main_window, change it so the label builder has the text "Hello World!" if the bool is false and "I am toggled!" if true.
• In the action handler, mutate the bool by toggling it and do the same thing to set the label text.

Part 4 - Tooltips

Showcase how tooltips work (TODO)

Part 5 - Dropdown menus

Showcase how dropdowns work (TODO)