UI objects

Effective UI object naming and layout practices improve readability, maintainability, and performance. This section outlines conventions for naming, organizing, and designing UI elements to ensure clarity and consistency.

Name a UI object

Instead of using role-based prefixes, try to keep UI object names minimal, clear, and meaningful while avoiding redundancy.
  • Use concise, descriptive names that define the object function without unnecessary prefixes. For example:
    • StartAction
       instead of
      btnStart
    • TemperatureString
       instead of
      lblTemperature
    • Username
       instead of
      txtUsername
IMPORTANT: Avoid vague names like
Object1
 or
UIElement
.

Grouping and hierarchy

Grouping and objects organization is essential for a collaborative environment and to save time while creating your project.
  • Organize UI objects by function, such as buttons, labels, graphs, containers, and so on.
  • Use nested hierarchies for better structure and scalability.
  • Minimize node count by avoiding redundant properties.
  • Reduce unnecessary dynamic links that are only needed at design time.
    TIP: See Dynamic links for further information on this subject.

Sizing and layout

Ensure consistency in objects size and positioning for a more balanced layout in your application.
  • Ensure consistent sizing for similar UI objects.
    TIP: See Graphic objects layout for further information on this subject.
  • Use relative positioning (anchors) to support different screen sizes.
  • If you want your widgets to automatically adapt to content changes, such as font size, use the size
    Auto
     feature.
    TIP: The
    Auto
     feature is designed for fit-to-content scenarios, making it ideal when containers need to adjust to their content or when text needs to adapt to container dimensions.
    To activate
    Auto
    , open the
    Properties
     panel and remove the value from either the
    Height
     or
    Width
     field. Once cleared, the field will automatically switch to
    Auto
    , enabling dynamic resizing based on content.

Consistent design

Apply consistency for a well-finished application.
  • Follow a unified theme for colors, fonts, and borders.
  • Align UI elements for a structured and professional look.
TIP: Refer to Graphic objects and its subchapters for further information.

Reusable Types

Use reusable types and global styles to ensure consistency and simplify maintenance across UI components.
  • Create reusable types for common UI objects, such as buttons and text fields.
  • Use global styles for text and buttons to maintain uniformity.

Spacing, alignment, and grid system

Apply consistent spacing and layout alignment to create a clean, scalable, and visually balanced UI layout.
  • Follow the 8-pixel rule: Keep spacing and margins in increments of 8px (8px, 16px, 24px).
  • Use a grid-based layout for better UI structure.
  • Ensure consistent padding and margins for a uniform look.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal