🎨 Understanding Logical Widgets in Uniface 10.4

⚠️ This blog post was created with AI assistance

🤔 What Are Logical Widgets?

Logical widgets are named configurations of physical widgets in Uniface. Think of them as custom presets or templates for user interface elements. A single physical widget can have multiple logical widgets mapped to it, each with different properties and behaviors.

For example, you might have one physical widget called ueditbox, but create multiple logical widgets from it like BlueEditBox, RedEditBox, or LargeEditBox, each with different colors or sizes.

🎯 Why Use Logical Widgets?

Logical widgets give you three powerful capabilities:

1️⃣ Define Custom Widgets

You can create your own widget configurations by declaring a name and setting properties. Here's an example of a custom blue edit box:

BlueEditBox=ueditbox(font=editfont;autoselect=off;backcolor=steelblue)

2️⃣ Modify Default Widgets

You can change the default properties of existing logical widgets. For instance, changing the size of a ListBox:

; Original definition
ListBox=htmlselect(html:size=3)

; Modified definition
ListBox=htmlselect(html:size=5)

3️⃣ Change Widget Mapping

You can map a logical widget to a different physical widget. This example changes the Tab widget from utab to utabex, which provides more styling options:

; Original mapping
Tab=utab

; New mapping
Tab=utabex

📝 Where Are Logical Widgets Defined?

Logical widgets are defined in the application assignment file, which is typically usys.ini. Uniface provides default logical widgets, but you can create your own.

The file has different sections for different types of components:

• [webwidgets] - for Dynamic Server Page (DSP) widgets 🌐
• [WIDGETS] - for form widgets (GUI widgets) 🖥️
• [areaframes] - for area frames in forms 📦

🔧 Logical Widget Syntax

The basic syntax for defining a logical widget is simple:

LogicalWidget = PhysicalWidget(Property=Value;PropertyN=ValueN)

Real-world examples from Uniface:

Example 1: Different Button Types

; Standard command button
CommandButton=ucmdbutton(tooltip=on;font=buttonfont;actoneachclick=on)

; Button with Uniface branding
UnifaceButton=ucmdbutton(tooltip=on;font=buttonfont;representation=uniface)

Example 2: Different HTML Input Types

; Text input field
EditBox=htmlinput(html:type=text;detail=dblclick)

; Button input
CommandButton=htmlinput(html:type=button;clientsyntaxcheck=false)

; Checkbox input
CheckBox=htmlinput(html:type=checkbox)

As you can see, all three use the same physical widget (htmlinput), but they look and behave completely differently! 🎭

📏 Naming Rules

When creating custom logical widgets, follow these guidelines:

• ✅ Maximum length: 16 characters
• ✅ Valid characters: A-Z, 0-9
• ✅ Must start with a letter (A-Z)
• ❌ Cannot use Uniface reserved words
• ❌ Don't use names starting with IDE or IDF (reserved for internal use)
• ❌ Don't use the same name as physical widgets
• ⚠️ Avoid names starting with U to prevent conflicts

💡 Practical Tips

Override Properties

The properties you define in logical widgets are defaults. You can override them in two ways:

• In the Properties Inspector when designing your component
• In script code at runtime

Order Matters

The order of widgets in usys.ini determines their order in the Widget Type dropdown list. Organize them in your preferred order for easier selection! 📋

Create Custom Templates

If you create custom logical widgets, consider creating custom templates too. This makes it easier to use your widgets consistently throughout your application. 🎨

🎬 Conclusion

Logical widgets are a powerful feature in Uniface 10.4 that give you control over your user interface. They let you create reusable widget configurations, maintain consistency across your application, and adapt to changing requirements without modifying component definitions.

By understanding and using logical widgets effectively, you can build more maintainable and flexible Uniface applications! 🚀

Happy coding! 💻