Looking into Issue #2058, Need a little kickstart

[codesavory]

Hi there,

Anyone who can help me understand NUI(what is its full form?) and how does the "VideoMenuScreen.ui" gets rendered to UI with the functionality of "VideoSettingsScreen.java" ?
The *.UI files are JSON Files right, from where does it gets its properties ? Is it similar to a prefab ? and also wanted to know where can I start to make a few UI modifications with added functionality.

Anyone, Anyhelp would be wonderful,
Suriya

 

[Florian]

Hello codesavory,

The UI file specifies which java class it is liked to via the first "type" attribute.

The VideoMenuScreen.ui asset file gets referenced via <module>:<className> uri. e.g.

e.g. via the following line in SettingsMenuScreen:

WidgetUtil.trySubscribe(this, "video", button -> getManager().pushScreen("engine:VideoMenuScreen"));

Configurable attributes of UI element are annotated with @LayoutConfig. e.g field "text" of class UILabel.

In the java class you can get named elements from the ui file via the "find" method e.g.

UIText textUI = find("myTextField", UIText.class);

It looks like MottaTheHutt has already started to work on the issue you picked. You may want to pick a differnt one.

 

[Rostyslav Zatserkovnyi]

Hi there! @Florian 's answer sums this up pretty well - just going to add my two cents.

Anyone who can help me understand NUI(what is its full form?)

The NUI thread has a pretty good high-level description of the framework, as well as some documentation further down: Principles, Skinning.

where can I start to make a few UI modifications with added functionality.

This depends on what issue will you be working on next, but you'll most likely want to modify these:

• org.terasology.rendering.nui.layers - defines the functionality for core interfaces: menus, inventory grids, console windows etc.
• org.terasology.rendering.nui.widgets - implements a set of basic interface widgets: UIButton, UILabel, UISlider etc.
• assets/ui - provides widget definitions for core Terasology interfaces: while the Java classes define functionality, these describe the actual widget hierarchy.
• assets/skins - a collection of styles applied after the widgets are rendered; these are somewhat similar to CSS.

 

[codesavory]

Hello codesavory,

The UI file specifies which java class it is liked to via the first "type" attribute.

The VideoMenuScreen.ui asset file gets referenced via <module>:<className> uri. e.g.

e.g. via the following line in SettingsMenuScreen:

WidgetUtil.trySubscribe(this, "video", button -> getManager().pushScreen("engine:VideoMenuScreen"));

Configurable attributes of UI element are annotated with @LayoutConfig. e.g field "text" of class UILabel.

In the java class you can get named elements from the ui file via the "find" method e.g.

UIText textUI = find("myTextField", UIText.class);

It looks like MottaTheHutt has already started to work on the issue you picked. You may want to pick a differnt one.

Thanks Florian,

Yes, now I get it. Atleast I am understanding how the UI structure works. I will look into an another issue.

 

[codesavory]

Hi there! @Florian 's answer sums this up pretty well - just going to add my two cents.

Anyone who can help me understand NUI(what is its full form?)

The NUI thread has a pretty good high-level description of the framework, as well as some documentation further down: Principles, Skinning.

where can I start to make a few UI modifications with added functionality.

This depends on what issue will you be working on next, but you'll most likely want to modify these:

• org.terasology.rendering.nui.layers - defines the functionality for core interfaces: menus, inventory grids, console windows etc.
• org.terasology.rendering.nui.widgets - implements a set of basic interface widgets: UIButton, UILabel, UISlider etc.
• assets/ui - provides widget definitions for core Terasology interfaces: while the Java classes define functionality, these describe the actual widget hierarchy.
• assets/skins - a collection of styles applied after the widgets are rendered; these are somewhat similar to CSS.

Thanks @rzats for referencing the entire documentation on NewUI and also explaining what each code block functionality does. Guess the issue is being resolved by another member. But it was still worth knowing the stuff