NextLayout6 is one of most powerful and versatile component from NextSuite6. With it users can easily and quickly build an UI found in many popular applications such as Blender3D, Figma, 3DSMax, Unity3d. This kind of UI is usually used in applications that are fairly complex but powerful, and with this UI paradigm they can make complex things easier and faster to work with.
NextLayout6 is also used internally inside our other components for example Columns and Views editors for NextGrid6.
In many ways NextLayout6 expands our other component NextInspector6, but with more flexibility and with more flexible layout.
Developers are usually attempting to produce similar UI by nesting dozens of
TPanel components. But after some time thr user interface will become slow and hard to maintain, especially when there is a lot of panels and child controls involved.
Reading data (every item can bind to a property), property binding can be harder too.
NextLayout6 is still only one component (one Handle), it’s faster to render and the styling is done on one place. Keyboard support is already built-in and you don't need to set up
TabOrder and similar properties.
Items (nodes) hierarchy
Items inside NextLayout6 are organised in a form of hierarchy, similar as how standard TTreeView component does it.
NextLayout6 gives way richer display such as displaying different items in different way, user can also interact with items in different way, not just typing etc.
Elements of a node
Every node consist of the following elements.
- Toggle button
- The before area
- The after area
Click on Toggle button changes Expanded property of a node. If the node had children nodes, when set to False they will be hidden.
The before area
Area between toggle and content can display an image and/or text.
The text is specified by
TextBeforeproperty and an icon is specified by a
Different node types displays content area in own unique way.
The after area
Same as the before area, an icon and/or
TextAftercan be placed after the content.
Continue to the design-time tutorial.