Fabric Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Creating a screen ======

A **screen** is a graphical user interface that extends ''Screen'', allowing the user to interact and fulfill some functionalities. One example of a screen is a custom config screen of your mod. Screens only exist in the client, so if you are using split sources, make sure to place it in your `client` source set.

You may use mixins to add into an existing screen a button that goes to your screen. But in many cases, we can implement the ''ModMenuApi'' of [[https://modrinth.com/mod/modmenu|Mod Menu]] mod, and make it possible to access the screen via the config button in the Mod Menu screen. This article does document how to implement ''ModMenuApi''.

===== Adding widgets =====
A screen should have several "widgets", which refer to elements in the screen. We add widgets in the ''init'' method.

<code java>
public class TutorialScreen extends Screen {
  protected TutorialScreen() {
    // The parameter is the title of the screen,
    // which will be narrated when you enter the screen.
    super(Component.literal("My tutorial screen"));
  }


  public Button button1;
  public Button button2;

  @Override
  protected void init() {
    button1 = ButtonWidget.builder(Component.literal("Button 1"), button -> {
      System.out.println("You clicked button1!");
    })
        .bounds(width / 2 - 205, 20, 200, 20)
        .tooltip(Tooltip.create(Component.literal("Tooltip of button1")))
        .build();
    button2 = ButtonWidget.builder(Text.literal("Button 2"), button -> {
      System.out.println("You clicked button2!");
    })
        .bounds(width / 2 + 5, 20, 200, 20)
        .tooltip(Tooltip.create(Component.literal("Tooltip of button2")))
        .build();
    
    addRenderableWidget(button1);
    addRenderableWidget(button2);
  }
}
</code>

==== The "init" method ====

The ''init'' method is called then:
  * The screen is created.
  * The screen is resized. Before invoking this, all existing elements are removed.

You must use add the elements to the screen via using ''addRenderableOnly'', ''addWidget'' or ''addRenderableWidget''. The difference is:
  * ''addRenderableOnly'': The element will be rendered, but you cannot select it, either by using mouse or keyboard.
  * ''addWidget'': You can select and interact it, but it will not be rendered.
  * ''addRenderableWidget'': The element will be both rendered and interactable, which is the most common case.

In the ''Button.builder(...).builder()'', you can specify the size and position of the button by using ''size'' and ''pos'' respectively, or directly using ''bounds''. The ''tooltip'' specifies the tooltip, which will be rendered and narrated when your mouse hovers on, or use Tab to focus on it. ''Tooltip.create'' takes two arguments, the first to be shown, and the second (optional) to be narrated.

For versions before 1.19.3, ''Button.builder(...)'' does not exist. In that case, please directly invoke the constructor of ''Button''.

==== Can I instantiate widgets in the constructor ====
Some users may instantiate the widgets in the constructor, or the initialization of class. For example, they may write the code like this:
<code java>
  public ButtonWidget button1 = ButtonWidget.builder(...).build();
  public ButtonWidget button2 = ButtonWidget.builder(...).build();

  @Override
  protected void init() {
    addRenderableWidget(button1);
    addRenderableWidget(button2);
  }
</code>

This is also OK. Its advantage is, if the widgets have some several states (such as the current selections of ''CycleButton'', or typed text in the ''EditBox''), they will not be reset when you resize the screen, because they will not be created again. However, when resizing, the ''width'' and ''height'' of screen are changed, but the positions and sizes of elements will not update. Therefore, in this case, you have to update the sizes or positions in the ''init'' method.

<code java>
  @Override
  protected void init() {
    button1.setPosition(width / 2 - 205, 20);
    button2.setPosition(width / 2 + 5, 20);

    addRenderableWidget(button1);
    addRenderableWidget(button2)
  }
</code>

==== Notice about the order ====
After adding amounts of elements, all of them can render and be selected. Some people don't care about the order they are added, because all of the widgets are rendered at the sametime. However, if you select widgets by pressing the "Tab" key, you may find they are focused in a messy order. Therefore, please ensure that the widgets are added in a correct order, which the behaviour of "Tab" key depends on.

===== The parent screen =====
I accessed the screen via another screen, such as the Mod Menu screen, but when I press "Esc" to go back, it just jumped to the main screen, not the previous screen, why?

This is because you did not specify a parent screen, and the ''close'' method just directly jumps to the main screen.

Add a ''parent'' as a parameter and field, and use it in the ''close'' method:
<code java>

  private final Screen parent;

  protected TutorialScreen(Screen parent) {
    super(Component.literal("My tutorial screen"));
    this.parent = parent;
  }
  
  @Override
  public void onClose() {
    client.setScreen(parent);
  }
</code>

===== Add narrations =====
By default, when narration is enabled, the screen title and information of the element you hover or focus on will be narrated. If the screen requires extra narrations (for example it has some texts rendered but not added as a widget), you can override ''updateNarrationState'' or ''updateNarratedWidget''. The methods take a ''NarrationElementOutput'', in which you can use ''add'' method to add narration messages. The narration messages are divided into the following parts (''NarratedElementType''):

  * **Title**: The title of the screen, which is defined in the constructor. When you enter the screen, the title will be automatically narrated.
  * **Position**: Telling you the position of the widget you are focusing on. In vanilla, it is: "//Screen element %s out of %s//". Besides, if in a list widget, the following will also be narrated: "//Selected list row %s out of %s//".
  * **Hint**: This refers the tooltip of the element you focus on or hovers on. For example, you may remember about the ''tooltip'' method when you create the ''Button'' in the code above. The tooltip is narrated in this part.
  * **Usage**: In vanilla, the usage is: "//Use mouse cursor or Tab button to select element//".

Besides the narration of the screen, you can also customize the narration of the element, by overriding ''appendNarrations'' method of the class of that element. The element is narrated after the narration of the screen.

In the method of appending narrations, using ''narrationBuilder.nest()'' can append narrations after the current narrations, instead of replacing existing part of the narration.

In some cases, you want repetitive narrations, instead of narrating only once. For example, when loading a level, the percentage of loading is narrated repetitively, telling the user the current loading status. You can call ''notifyListUpdated'' in the ''render'' or ''tick'' method. For more details, you may refer to sources of ''LevelLoadingScreen''.

===== Adding text =====
In ''render'' method, you can invoke methods like ''font.draw'', ''drawString'' or ''drawCenteredString'' to render a text on the screen.
<code java>
  // For versions 1.20 below
  @Override
  public void render(PoseStack matrices, int mouseX, int mouseY, float delta) {
    super.render(matrices, mouseX, mouseY, delta);
    drawCenteredString(matrices, textRenderer, Component.literal("You must see me"), width / 2, height / 2, 0xffffff);
  }
  
  // For versions 1.20 and after
  @Override
  public void render(GuiGraphics context, int mouseX, int mouseY, float delta) {
    super.render(context, mouseX, mouseY, delta);
    context.drawCenteredString(font, Component.literal("You must see me"), width / 2, height / 2, 0xffffff);
  }
</code>

If you're concerned that the text can be pretty long and may exceed the screen limit, you can use ''MultilineText'' so it can be wrapped smartly.
<code java>
    final MultiLineLabel multilineText = MultiLineLabel.create(textRenderer, Component.literal("The text is pretty long ".repeat(20)), width - 20);
    
    // For versions 1.20 below
    multilineText.renderLeftAligned(matrices, 10, height / 2, 16, 0xffffff);
    // For versions 1.20 and after
    multilineText.renderLeftAligned(context, 10, height / 2, 16, 0xffffff);
</code>

Another alterative is using ''StringWidget'' or ''MultilineTextWidget''. They are by default not selectable or narratable because their ''active'' field is ''false''.

===== Scrolling =====
The screen does not support scrolling, but you can add widgets that supports scrolling. ''AbstractSelectionList'' is a class for widgets that contains multiple entries and supports scrolling. However, instead of directly extending it, it is more suitable to extend ''ObjectSelectionList'' or ''ContainerObjectSelectionList'', which already implemented navigation and narration. The difference is:

  * ''ObjectSelectionList'' refers to a widget in which you can select a row. In widgets that extends the class, you usually select one entry in the list. Some vanilla examples are biome selection screen in the buffet (single biome) world option, and the language selection screen.
  * ''ContainerObjectSelectionList'' refers to a widget where each row has child elements. In widgets that extends this class, you select and interacts the elements in the rows. Like a ''Screen'', the ''ContainerObjectSelectionList.Entry'' should have zero, one, or more child elements.

===== Things to check before finishing =====

After finishing your screen, in order to avoid potential issues, please check:
  * whether the screen returns to the last screen (parent screen) when you press "Esc"
  * whether these classes exist only on client (which means they will not be loaded in the dedicated server)
  * whether elements are focused in the correct order when you press "Tab" to select them
  * whether the behaviors are correct when you resize
  * whether the narrations are correct when you use "Tab" or mouse cursor to select element while narration enabled