# Minecraft Flex UI<\/p>\n
# For ordinary players do not download the mod
\nIn most cases the module is used by other module developers and is included in their mod Jar package<\/p>\n
# Description
\nBased on `facebook` open source `Yoga` layout engine implements the `Minecraft` GUI framework based on the `Flex` layout.<\/p>\n
A subset of the `Flex` standard is implemented on top of `Yoga` and most of the `CSS` properties are implemented as well.<\/p>\n
The design concept of `MVC` is adopted to realize the one-way and two-way data binding.<\/p>\n
Developers can design and implement complex UI interfaces on top of this, and this project can be used as `Yoga` engine embedded in the game as a non-exhaustive reference implementation of the game layout engine.<\/p>\n
# Example<\/p>\n
<\/p>\n
“`java
\npublic class WidgetTestScreen extends WidgetScreen {
\n\tprotected StringBuilderObservable text = new StringBuilderObservable();<\/p>\n
\tpublic WidgetTestScreen() {
\n\t\tsuper(Text.of(“test”));
\n\t}<\/p>\n
\t@Override
\n\tpublic void widget(ScreenWidget root) {
\n\t\troot.flexDirection.set(WidgetFlexDirection.Row)
\n\t\t\t\t.justifyContent.set(WidgetJustify.Center)
\n\t\t\t\t.alignItems.set(WidgetAlign.Center)
\n\t\t\t\t.child(new BoxWidget()
\n\t\t\t\t\t\t.background.set(RectDrawable.LIGHT_PANEL)
\n\t\t\t\t\t\t.child(new LabelWidget()
\n\t\t\t\t\t\t\t\t.text.binding(text.computed((StringBuilderObservable text) -> Text.of(text.getString())))
\n\t\t\t\t\t\t\t\t.margin(WidgetEdge.All, 4))
\n\t\t\t\t\t\t.child(new TextBoxWidget()
\n\t\t\t\t\t\t\t\t.text.binding(text))
\n\t\t\t\t\t\t.child(new ButtonWidget()
\n\t\t\t\t\t\t\t\t.click.on((mouse) -> close())
\n\t\t\t\t\t\t\t\t.child(new LabelWidget()
\n\t\t\t\t\t\t\t\t\t\t.text.set(Text.of(“\u53d6\u6d88”))))
\n\t\t\t\t);
\n\t}
\n}<\/p>\n
“`<\/p>\n
# Data Binding
\nBy default all bindings from `non-computed binding sources` are `bi-directional bindings`.
\n> Setting values for `computed binding sources` is ignored<\/p>\n
**But most components will only operate `one-way` on bound values**<\/p>\n","protected":false},"excerpt":{"rendered":"
Implement a Flex layout-based Minecraft GUI framework based on facebook’s open source Yoga layout engine.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_minecraft_slug":"minecraft-flex-ui","_minecraft_project_id":"J9xCf3zC","_minecraft_author":"moheng233","_minecraft_license":"MIT","_minecraft_downloads":255,"_minecraft_follows":10,"_minecraft_client_side":"required","_minecraft_server_side":"required","_minecraft_storage_type":"zip","_minecraft_archive_name":"minecraft-flex-ui.zip","_minecraft_size_bytes":276133,"_minecraft_version_count":2,"_minecraft_updated_at":"2026-05-15T20:48:33.612151Z","_minecraft_date_created":"2023-02-01T21:28:13.272124Z","_minecraft_date_modified":"2023-01-30T15:03:41.972689Z","_minecraft_project_url":"https:\/\/modrinth.com\/mod\/minecraft-flex-ui","_minecraft_icon_attachment_id":0,"_minecraft_imported_at":"2026-06-05T20:27:47+00:00","_minecraft_import_hash":"4fab327d0577521f9440419e3bacdc0b","_minecraft_versions":"","_minecraft_links":"","_minecraft_gallery":"","_minecraft_api_metadata":""},"mod_category":[97,873,92],"mod_loader":[99],"minecraft_version":[54,55,56,57],"class_list":["post-101859","mod","type-mod","status-publish","hentry","mod_category-fabric","mod_category-library","mod_category-utility","mod_loader-fabric","minecraft_version-1-19","minecraft_version-1-19-1","minecraft_version-1-19-2","minecraft_version-1-19-3"],"yoast_head":"\n