📐 Understanding Layout in Uniface 10.4: A Developer's Guide

⚠️ This blog post was created with the help of AI.

Layout is a fundamental concept in Uniface development that defines how data is arranged, formatted, and styled for users. Whether you're building web applications or desktop forms, understanding layout mechanics is crucial for creating effective user interfaces. 🎨

🔍 What is Layout?

In Uniface, layout refers to the presentation layer of your application. It controls how information appears to users, either on screen or in print. Think of it as the blueprint that determines where each piece of data lives and how it looks.

Layout encompasses several key elements:

• Component dimensions 📏
• Arrangement of fields and entities
• Widget selection
• User interface elements like lines, frames, and split bars

🌐 Web Component Layouts

For web applications, Uniface uses HTML to define layout and appearance. This approach offers flexibility for both developers and designers. 💻

Storage Options

Layout definitions can be stored in two ways:

• Repository storage: Stored directly in the Uniface Repository
• File storage: Saved as separate files with an .hts extension

💡 Example: Using separate .hts files allows web designers to maintain the visual appearance of server pages independently, while developers focus on data handling and business logic. This separation of concerns improves team collaboration.

Two Types of Server Pages

Dynamic Server Pages (DSP): 🔄

In DSP, HTML element IDs bind directly to Uniface objects. The ID of an HTML element connects it to a specific component instance, entity, or field in your application structure.

Static Server Pages (SSP): 📄

SSP uses special Uniface-specific tags to define component entities and fields within the HTML structure.

🖥️ Form and Report Layouts

For desktop applications, Uniface provides a graphical editor that makes layout design intuitive and visual. 🎯

The Canvas Editor

The editor features a Canvas where you can visually design your component layout by drawing and positioning various elements:

• Entity and Field Frames: Define the dimensions and positions of your data elements
• Labels: Add descriptive text that can be associated with fields or stand alone
• Widgets: UI controls for data presentation, such as:
  • Grid widgets for entity-level display 📊
  • Edit boxes, buttons, and checkboxes for field-level interaction ✏️
• Visual Elements: Frames, lines, splits, page breaks, headers, and footers for organization and clarity 📐

🔧 Runtime Flexibility

One powerful feature of Uniface layout is its runtime flexibility. You can modify layouts dynamically using ProcScript or JavaScript. This means your application can adapt its presentation based on user preferences, device capabilities, or business rules. ⚡

💡 Example: You might hide certain fields for users with limited permissions, or reorganize a form layout for mobile devices—all at runtime without changing the original layout definition.

🎨 Layout and Data Structure

While component layout typically reflects the underlying data structure, this relationship isn't visible to end users at runtime. The layout acts as a presentation layer that makes the data structure accessible and understandable. 👥

✨ Key Takeaways

• Layout in Uniface separates presentation from data structure 🎭
• Web layouts use HTML with flexible storage options 🌐
• Desktop layouts use a visual Canvas editor for intuitive design 🖼️
• Layouts can be modified at runtime for dynamic user experiences 🔄
• Different widget types provide various data presentation options 🧩

Understanding layout concepts in Uniface 10.4 helps you create applications that are both functional and user-friendly. Whether you're building web or desktop applications, mastering layout techniques is essential for delivering professional results. 🚀

---

Happy coding! 💻✨