DEV Community

Peter + AI
Peter + AI

Posted on

🎨 Setting Widget Properties in Uniface 10.4 Initialization Files

Note: This blog post was created with the assistance of AI.

πŸ“‹ What Are Initialization Files?

Initialization files in Uniface are configuration files that help you set default values for your application's user interface elements. Think of them as a central place where you can define how your widgets should look and behave across your entire application. 🎯

The main initialization file in Uniface is called usys.ini. This file is like a control center for your application's appearance and behavior.

πŸ”§ What Are Logical Widgets?

Logical widgets are named configurations for user interface elements. Instead of setting properties for each widget individually in every component, you can create a logical widget once in the initialization file and reuse it everywhere. This saves time and keeps your application consistent. ✨

A logical widget consists of:

  • A name that you choose
  • A physical widget that it maps to
  • Optional properties that customize its appearance and behavior

πŸ’‘ Why Use Initialization Files?

There are several benefits to defining widget properties in initialization files:

  • Consistency: All widgets of the same type look and behave the same way 🎭
  • Easy maintenance: Change one setting in the file, and it updates everywhere πŸ”„
  • Flexibility: You can still override these defaults at runtime if needed ⚑
  • Time-saving: No need to set the same properties repeatedly πŸ’ͺ

🌐 Widget Configuration for Web Applications

For Dynamic Server Page components (web applications), you configure widgets in the [webwidgets] section of your initialization file.

Example for Web Widgets:

[webwidgets]
EditBox=htmlinput(html:type=text;detail=dblclick)
TextArea=htmltextarea(detail=dblclick)
CommandButton=htmlinput(html:type=button;clientsyntaxcheck=false)
CheckBox=htmlinput(html:type=checkbox)
FlatButton=plain(rawhtml=false;clientsyntaxcheck=false)
Enter fullscreen mode Exit fullscreen mode

In this example:

  • EditBox is mapped to an HTML input field with type text πŸ“
  • CommandButton is configured as a button without client-side syntax checking πŸ”˜
  • CheckBox creates a standard HTML checkbox β˜‘οΈ

Important note: You cannot set default properties for widgets in Static Server Page components this way.

πŸ–₯️ Widget Configuration for Desktop Applications

For desktop Form components, widgets are configured in the [widgets] section.

Example for Desktop Widgets:

[widgets]
EditBox=ueditbox(font=editfont;autoselect=on;dimmedbackcolor=off)
CommandButton=ucmdbutton(tooltip=on;font=buttonfont;actoneachclick=on)
DropDownList=udropdownlist(font=listfont;forcefit=on;dimmedbackcolor=off)
Combobox=ucombobox(font=listfont;dimmedbackcolor=off)
CheckBox=ucheckbox(font=label;fittotext=off)
Enter fullscreen mode Exit fullscreen mode

Let's break down what these properties mean:

  • font: Determines which font is used for the widget πŸ”€
  • autoselect: When turned on, text is automatically selected when the field gets focus πŸ“Œ
  • tooltip: Enables or disables tooltips πŸ’¬
  • dimmedbackcolor: Controls the background color when the field is disabled 🎨
  • forcefit: Adjusts the display to fit available space πŸ“

🎯 Other Configuration Options

Beyond field widgets, you can also configure:

  • Application Shells: In the [application] section 🏠
  • Menus: Default colors and highlighting for menu items πŸ”
  • Panels: Button styles and panel appearance 🎨
  • Entity Widgets: Default grid settings (Egrid) or custom entity widgets πŸ“Š
  • Area Frames: In the [areaframes] section πŸ–ΌοΈ
  • Labels: Universal label appearance 🏷️

πŸ“ Creating Your Own Logical Widgets

You can create custom logical widgets by following these naming rules:

  • Maximum length: 16 characters
  • Use only letters (A-Z) and numbers (0-9)
  • First character must be a letter
  • Avoid names starting with "U", "IDE", or "IDF" (reserved by Uniface)
  • Don't use Uniface reserved words

Custom Widget Example:

[widgets]
MyEditBox=ueditbox(font=customfont;autoselect=on;3d=on)
MyButton=ucmdbutton(tooltip=on;font=buttonfont;3d=on;color=blue)
Enter fullscreen mode Exit fullscreen mode

These custom widgets will appear in the Widget Type property dropdown in the Uniface IDE, making them easy to use in your components. πŸŽ‰

πŸ”„ How Override Works

The beauty of initialization file settings is their flexibility. The priority order is:

  1. Runtime values (set dynamically in script) - Highest priority ⚑
  2. Declarative values (set in component properties) πŸ“‹
  3. Initialization file values (usys.ini) - Default values πŸ“

This means your initialization file provides smart defaults, but you can still customize individual widgets when needed without breaking the overall design pattern.

βœ… Best Practices

When working with initialization files, keep these tips in mind:

  • Document your custom widgets: Add comments in your ini file to explain what each widget does πŸ“
  • Use meaningful names: Choose logical widget names that describe their purpose 🏷️
  • Keep it consistent: Use the same naming conventions across your application 🎯
  • Test thoroughly: After modifying the ini file, restart your application and test all affected widgets πŸ§ͺ
  • Backup before changes: Always keep a backup copy of your usys.ini file before making major changes πŸ’Ύ

πŸŽ“ Summary

Initialization files in Uniface 10.4 are powerful tools for managing widget properties across your application. By defining logical widgets in the usys.ini file, you can create consistent, maintainable user interfaces for both web and desktop applications. Whether you're using the default widgets or creating custom ones, initialization files give you centralized control over your application's look and feel. πŸš€

Start experimenting with your own custom widgets today and see how much time and effort you can save in your Uniface development projects! πŸ’‘

Top comments (0)