DEV Community

Peter + AI
Peter + AI

Posted on

🎨 Understanding UI Styling Properties in Uniface 10.4

✨ This blog post was created with the assistance of AI

When building applications with Uniface 10.4, one of the most important aspects is making your user interface look good and behave correctly. Uniface provides a comprehensive set of properties that let you control how your application components appear to users. Let's dive into how these properties work! 🚀

📋 What Are UI Styling Properties?

Every visual element in your Uniface application—whether it's a widget, window, label, or frame—has a collection of properties that control its appearance and visual behavior. Think of these properties as the styling tools that help you create an attractive and user-friendly interface.

For example, you can control:

  • Background colors 🎨
  • Window appearance in desktop applications 🖥️
  • How fields display (as edit boxes, checkboxes, or grids) ✏️
  • Layout and positioning 📐

🔄 Static vs. Dynamic Properties

Understanding the difference between static and dynamic properties is crucial for effective development:

Static Properties

Static properties are set in stone once your component is created. You define them during development, and they cannot be changed while the application is running. Think of them as permanent settings.

Dynamic Properties

Dynamic properties are flexible! You can change them on-the-fly using ProcScript or JavaScript after the component has been created. This allows you to create interactive and responsive user interfaces.

Example: You could start with a button that has a blue background, but change it to red when a user makes an error:

$properties(SUBMIT_BUTTON) = "backcolor=red"
Enter fullscreen mode Exit fullscreen mode

⚙️ How Uniface Determines Property Values

Uniface uses a smart priority system to figure out which property value to apply at runtime. This is called the "order of precedence," and it works like a hierarchy from highest to lowest priority:

  1. Dynamic Script Values 🎯 - Values set in ProcScript or JavaScript (highest priority)
  2. Instantiation Script Values 📝 - Values set during component creation
  3. Declarative Values 🏗️ - Values set in the Properties Inspector
  4. Inherited Values 👨‍👩‍👧 - Values inherited from parent objects
  5. Initialization File Values ⚙️ - Values defined in configuration files
  6. Platform Defaults 🖥️ - Default values from the technology platform (lowest priority)

Example: If you set a field's background color to "lightblue" in the Properties Inspector, but then change it to "yellow" in ProcScript, the field will be yellow because script values have higher priority! 💛

📛 Understanding Property Names

Each property has two names:

  • Technical Name (Literal Name): Used in scripts and configuration files. Example: clientsyntaxcheck
  • Display Name: A user-friendly name shown in the Properties Inspector. Example: "Syntax Check in Browser"

Good news! Property names are not case-sensitive. This means clientsyntaxcheck, ClientSyntaxCheck, and CLIENTSYNTAXCHECK all work the same way. 👍

🌐 Platform-Specific Behavior

The effect of properties can vary depending on where your application runs:

  • Web Applications 🌍: Properties can be influenced by CSS, and Dynamic Server Pages (DSP) provide full support for changing properties dynamically
  • Desktop Applications 💻: Window properties let you control form and shell window appearances
  • Mobile Applications 📱: Properties adapt to mobile-specific UI patterns
  • Character-Based Applications ⌨️: Limited but functional property support

🎓 Best Practices

Here are some tips for working with UI styling properties:

  • Use Inheritance Wisely 👪: Properties can be inherited from parent objects. Set common properties at the entity or component level to avoid repetition
  • Plan for Flexibility 🔧: Use dynamic properties when you need to change the UI based on user actions or application state
  • Test Across Platforms 🧪: If your application runs on multiple platforms (web, desktop, mobile), test how properties behave on each
  • Document Your Settings 📚: Keep track of which properties are set where, especially when using multiple configuration methods

💡 Practical Example

Let's say you're building a form with a customer address field. You want the field to have a light gray background by default, but turn light green when the user enters valid data:

; Set default color in Properties Inspector
; backcolor=lightgray

; In your validation trigger:
if (valid_address)
    $properties(ADDRESS_FIELD) = "backcolor=lightgreen"
else
    $properties(ADDRESS_FIELD) = "backcolor=lightpink"
endif
Enter fullscreen mode Exit fullscreen mode

This simple example shows how dynamic properties can provide immediate visual feedback to users! ✅

🎯 Conclusion

Understanding UI styling properties in Uniface 10.4 is essential for creating professional, user-friendly applications. By mastering the difference between static and dynamic properties, understanding the order of precedence, and knowing how to set properties in different ways, you can build interfaces that are both attractive and functional.

Remember: the key to effective UI styling is understanding your options and choosing the right approach for your specific needs. Whether you're setting properties declaratively in the IDE or dynamically in code, Uniface gives you the flexibility to create exactly the user experience you want! 🌟

Happy coding! 👨‍💻👩‍💻

Top comments (0)