UI Styling

Styling can be done in .ui files or programmatically from the server. See Markup for .ui file syntax.

PatchStyle

9-patch texture styling for backgrounds and borders.

Note

Setters use Value<T> wrapper types. Use Value.of(...) for literal values or Value.ref(...) for references to .ui file values.

PatchStyle style = new PatchStyle();
style.setTexturePath(Value.of("Textures/Button.png"));
style.setBorder(Value.of(4));  // all sides
// or per-axis:
style.setHorizontalBorder(Value.of(4));
style.setVerticalBorder(Value.of(8));

style.setColor(Value.of("#FF0000"));

cmd.setObject("#Element.Style", style);

In .ui:

Group {
  Style: (
    TexturePath: "Textures/Panel.png",
    Border: 4,
    Color: #FFFFFF
  );
}

Anchor

Positioning and sizing. Like PatchStyle, setters use Value<T> wrappers.

Anchor anchor = new Anchor();

// position
anchor.setLeft(Value.of(10));
anchor.setTop(Value.of(10));
anchor.setRight(Value.of(10));   // from right edge
anchor.setBottom(Value.of(10));  // from bottom edge

// size
anchor.setWidth(Value.of(200));
anchor.setHeight(Value.of(100));
anchor.setMinWidth(Value.of(50));
anchor.setMaxWidth(Value.of(400));

// fill modes
anchor.setFull(Value.of(1));        // fill parent
anchor.setHorizontal(Value.of(1));  // fill width
anchor.setVertical(Value.of(1));    // fill height

cmd.setObject("#Element.Anchor", anchor);

In .ui:

Group {
  Anchor: (
    Left: 10,
    Top: 10,
    Width: 200,
    Height: 100
  );
}

// fill parent
Group {
  Anchor: (Full: true);
}

Area

Defines a rectangular region (for texture slicing, etc).

Area area = new Area(x, y, width, height);
// or
Area area = new Area();
area.setX(0);
area.setY(0);
area.setWidth(100);
area.setHeight(50);

FormattedMessage

Rich text with styling. Uses public fields:

FormattedMessage msg = new FormattedMessage();
msg.rawText = "Hello World";
msg.color = "#FF0000";
msg.bold = MaybeBool.True;
msg.italic = MaybeBool.True;
msg.underlined = MaybeBool.True;
msg.monospace = MaybeBool.True;
msg.link = "https://example.com";

cmd.set("#Label.Text", msg);

Nested Messages

Build complex formatted text with children:

FormattedMessage parent = new FormattedMessage();
parent.rawText = "Score: ";

FormattedMessage score = new FormattedMessage();
score.rawText = "100";
score.color = "#00FF00";
score.bold = MaybeBool.True;

parent.children = new FormattedMessage[]{score};
cmd.set("#Label.Text", parent);

Translation with Parameters

FormattedMessage msg = new FormattedMessage();
msg.messageId = "mymod.welcome";  // translation key

MaybeBool

Three-state boolean for style inheritance:

Value	Meaning
MaybeBool.Null	Inherit from parent
MaybeBool.False	Explicitly false
MaybeBool.True	Explicitly true

msg.bold = MaybeBool.True;    // force bold
msg.bold = MaybeBool.Null;    // inherit

Value References

Reference styles defined in .ui files:

// reference a value from another file
cmd.set("#Element.Style", Value.ref("Pages/Styles.ui", "ButtonStyle"));

In the referenced file:

Pages/Styles.ui

@ButtonStyle = (
  TexturePath: "Textures/Button.png",
  Border: 4,
  Color: #FFFFFF
);

Color Formats

Both in .ui and Java:

Format	Example
RGB hex	#FF0000
RGBA hex	#FF0000FF
RGB + alpha	#FF0000(0.5)
rgb()	rgb(255, 0, 0)
rgba()	rgba(255, 0, 0, 128)

Text Styles in .ui

Label {
  Style: (
    FontSize: 24,
    FontName: "Secondary",
    LetterSpacing: 1.5,
    HorizontalAlignment: Center,
    VerticalAlignment: Center,
    RenderBold: true,
    RenderItalic: true,
    RenderUppercase: true,
    Wrap: true
  );
}

Alignment Values

Property	Values
HorizontalAlignment	Left, Center, Right
VerticalAlignment	Top, Center, Bottom
Alignment	Center, Left, Right, Top, Bottom

Button Styles

Buttons support multiple states:

TextButton {
  Style: (
    TexturePath: "Textures/Button.png",
    Border: 4,
    Hovered: (
      TexturePath: "Textures/ButtonHover.png"
    ),
    Pressed: (
      TexturePath: "Textures/ButtonPressed.png"
    ),
    Disabled: (
      TexturePath: "Textures/ButtonDisabled.png",
      Color: #808080
    )
  );
}

Sounds

Attach sounds to UI interactions:

$Sounds = "../Sounds.ui";

TextButton {
  Style: (
    Sounds: (
      Hovered: "UI/ButtonHover",
      Activated: "UI/ButtonClick"
    )
  );
}

// or use predefined
TextButton {
  Style: (
    ...$Sounds.@ButtonSounds
  );
}