[DOCS] Lyshine, UI components, dev-languages

[mythrz]

Describe the issue

UI Lyshine and UI components are missing relevant information on how to use the Gem and its components. There are some code examples in the LyShineExamples but these are NOT focused or individualised on the tasks and necessities of the professional. They are all abstract and over-generalised. Ideally, each UI-component page should have clear instruction on how to achieve the expected result

Some of Impacted pages found so far

https://www.docs.o3de.org/docs/user-guide/interactivity/user-interface/components/working/

https://www.docs.o3de.org/docs/user-guide/programming/components/create-component/

All of the interactive componenents pages (child pages. e.g., button, textinput, dropdown, etc):

https://www.docs.o3de.org/docs/user-guide/interactivity/user-interface/components/interactive/

Some UI Canvases. Accessing UI elements at runtime:

https://www.docs.o3de.org/docs/user-guide/interactivity/user-interface/canvases/accessing-ui-canvas-runtime/

Expected experience

Clear and concise examples and descriptions on how to use LyShine and its components.

Issues worth tracking:

• Dropdown: [Docs] Dropdown cpp code examples #2706
• Button: [Docs] components-button.md code for OnButtonClick example (Lua and Cpp) #2703
• Dynamic Layout Content (applied to a dropdown): [Docs] Dynamic Layout content populated with cpp #2707
• Text Input (only one method): [Docs] Update components-textinput.md #2714
• UiInitializationBus (important function that triggers after all UI is loaded and ready): [Docs] UiInitializationBus. Update accessing-ui-canvas-runtime.md #2717
• UIElementBus: Which page should this go? [DOCS] Lyshine, UI components, dev-languages #2705 (comment)
• UITextBus: Which page should this go? [DOCS] Lyshine, UI components, dev-languages #2705 (comment)
• Scrollbar:

[mythrz]

Not sure where to place the UITextBus. Leaving it here for now, will structure it later!

---

Two of the most common examples of UITextBus is to set it to a new value or get the value from the UI-Text.

Lua

local currentSelection = UiTextBus.Event.GetText("NameOfElement");

UiTextBus.Event.SetText(m_idOfTextElement, "newValue"); 

For more examples consider checking Github, available here

---

Cpp

#include <LyShine/Bus/UiTextBus.h>

YourComponent::YourGetMethod(AZ::EntityId textElementId)
{
   AZStd::string optionText;
   UiTextBus::EventResult(optionText, textElementId, &UiTextBus::Events::GetText);
}

YourComponent::YourSetMethod(AZ::EntityId textElementId, const AZStd::string optionText)
{
   UiTextBus::Event(textElementId, &UiTextBus::Events::SetText, optionText);
}

[mythrz]

UIElementBus

Not sure where to place the UIElementBus. Leaving it here for now, will structure it later!

---

local parentElement = UiElementBus.Event.GetParent(yourElementID);

UiElementBus.Event.Reparent(yourElementID, parentElement , yourElementID);

local childrenElements = UiElementBus.Event.GetChildren(yourElementID);

local firstChild= UiElementBus.Event.GetName(childrenElements[1]);

---

#include <LyShine/Bus/UiElementBus.h>

YourComponent::YourGetMethod1(const AZ::EntityId& elementID, const int i)
{
   AZ::EntityId childEntityId;
   UiElementBus::EventResult(childEntityId, elementID, &UiElementBus::Events::GetChildEntityId, i);
}

YourComponent::YourGetMethod2(const AZ::EntityId& elementID)
{
   AZStd::vector<AZ::EntityId> vectorOfIDs;
   UiElementBus::EventResult(vectorOfIDs, elementID, &UiElementBus::Events::GetChildEntityIds);
}

YourComponent::YourFindMethod1(AZ::EntityId childEntityId, const AZStd::string& textOfTheOption)
{
   AZ::Entity* textEntity = nullptr;
   UiElementBus::EventResult(textEntity, childEntityId, &UiElementBus::Events::FindChildByName, textOfTheOption);
}