DEV Community

Peter + AI
Peter + AI

Posted on

🎨 Building Forms and Reports in Uniface 10.4: A Visual Guide to the Define Frames Worksheet

✨ This blog post was created with AI assistance to help explain Uniface concepts in a clear and accessible way.

πŸ“‹ What is the Define Frames Worksheet?

The Define Frames Worksheet is a powerful graphical editor in Uniface 10.4 that lets you design both your component's data structure and its visual layout at the same time. Instead of writing complex code, you simply draw frames on a canvas to represent entities, occurrences, and fields.

Think of it like this: imagine building with LEGO blocks 🧱. Each entity is a container, and you place field blocks inside those containers. By arranging these blocks visually, you're defining how your data is organized and how it appears to users.

πŸ–ΌοΈ The Canvas: Your Design Workspace

When you open the Define Frames Worksheet in the Component Editor, you'll see a graphical editor called the Canvas. This is your workspace where the magic happens. The Canvas has a default size and location, but you can customize these settings in the Properties Inspector to match your needs.

πŸ—οΈ Building Your Component: Step by Step

Step 1: Add an Entity Frame πŸ“¦

Start by selecting a modeled entity from the Resource Browser. You can find entities in two places:

  • The Model tab (for database entities)
  • The Templates tab (for UI-only entities)

Once selected, draw an entity frame on the Canvas. Make sure it's large enough to hold all the fields you'll need. An entity frame represents a data container that will hold your information at runtime.

Example: If you're building an order management system, you might start with a CUSTOMER entity frame. This frame will contain all customer-related fields like name, address, and contact information.

Step 2: Add Fields to Your Entity ✏️

Now it's time to populate your entity with fields. Select a modeled field from the Resource Browser or choose a widget template. Then draw the field inside the entity frame you just created.

Here's something important to remember: fields that belong to modeled entities can only be added to their parent entity. They automatically inherit their definitions from the model, which keeps your data consistent across the application.

Widget templates are different – they represent non-database fields with specific widget types and data types. You can add these to any entity in your component, giving you flexibility for UI elements.

Example: Inside your CUSTOMER entity frame, you might draw fields like:

  • CUSTOMER_NAME (text input)
  • EMAIL_ADDRESS (text input)
  • PHONE_NUMBER (text input)
  • IS_ACTIVE (checkbox)

Step 3: Create Related Entities πŸ”—

One of the coolest features of Uniface is how it handles relationships between entities. To enforce referential integrity between related entities, simply draw one entity frame inside another entity frame. This nesting visually represents the parent-child relationship in your data structure.

Example: Continuing with our order management system, you might nest an ORDER entity inside your CUSTOMER entity. This shows that orders belong to customers. Inside the ORDER entity, you could then nest LINE_ITEM entities to represent individual products in each order.

CUSTOMER (parent entity)
└── ORDER (child entity)
└── LINE_ITEM (grandchild entity)

⚠️ Important Note: Uniface will issue compilation warnings if you nest entities that don't have a relationship defined in the application model. Make sure your model relationships match your component structure.

Step 4: Customize Properties πŸŽ›οΈ

After creating your basic structure, you can modify the properties of component entities and fields. For modeled fields, the inherited values usually work just fine. However, Uniface gives you the flexibility to override these properties for specific requirements, creating component variations tailored to your needs.

Example: Maybe the CUSTOMER_NAME field is defined as optional in your data model, but for this particular component, you want to make it required. You can override the Required property just for this component without changing the global model.

🎨 Refining Your Layout

Once your data structure is in place, you can further refine the visual appearance of your forms and reports. This includes:

  • Adjusting the size and position of frames πŸ“
  • Choosing different widget types (text boxes, dropdowns, checkboxes, etc.) πŸŽ›οΈ
  • Adding labels and descriptive text 🏷️
  • Setting up multiple occurrences for list views πŸ“Š
  • Adding visual elements like borders and colors 🌈

πŸ’‘ The Magic of Visual Design

What makes the Define Frames Worksheet so powerful is that what you see is what you get. The visual layout you create directly corresponds to the data structure that Uniface uses at runtime. This tight integration between design and structure means:

  • Faster development – no need to switch between structure definition and layout design ⚑
  • Fewer errors – the visual representation makes relationships obvious πŸ‘οΈ
  • Better understanding – team members can quickly grasp the component's organization 🀝
  • Automatic data processing – Uniface knows how to handle your data based on the frame hierarchy πŸ€–

πŸš€ Quick Tips for Success

  • Plan ahead: Sketch out your entity relationships before you start drawing frames
  • Size matters: Make entity frames large enough to accommodate all planned fields plus some extra space for future additions
  • Use inheritance wisely: Let modeled entities provide default behavior, but don't be afraid to override when needed
  • Test early: Build a simple version first, test it, then add complexity gradually
  • Keep it organized: Use clear naming conventions and logical groupings to make your components maintainable

🎯 Conclusion

The Define Frames Worksheet is your gateway to building robust forms and reports in Uniface 10.4. By combining data structure definition with visual layout design in one intuitive interface, Uniface empowers developers to create powerful applications quickly and efficiently. Whether you're new to Uniface or an experienced developer, mastering the Define Frames Worksheet will significantly boost your productivity and help you build better applications. Happy coding! πŸŽ‰

Top comments (0)