In IRBCAM, plugins are implemented as QML (Qt Modeling Language) files. These QML plugins enhance the functionality of the application by providing additional user interfaces, features, or integrations. To ensure a consistent and flexible user experience, plugins are loaded within popups. This document outlines the fundamental structure of a QML-based plugin, emphasizing the importance of a responsive layout that adapts to the content size.

QML-Based Plugins

A QML-based plugin in IRBCAM is a QML file that encapsulates the user interface and functionality of the plugin. This file can include various QML components, such as text elements, buttons, images, custom controls, functions and variables, depending on the plugin's purpose.

Dynamic Loading

One of the key features of plugins in IRBCAM is the ability to dynamically load them as needed. This dynamic loading allows the application to keep the core runtime lightweight while allowing users to extend functionality through plugins. When a user opens a plugin, the associated QML file is loaded on-demand, providing a seamless and responsive user experience.

Layout and Responsiveness

To ensure a consistent and user-friendly experience, plugins are wrapped within a single QML component, preferably within a component from the Layout Module. The use of a Layout is makes it easier to create responsive and adaptable popups that scale to the content size of the plugin.

Why Use a Layout?

The use of a Layout in your QML-based plugins is recommended for several reasons:

Responsiveness: A Layout automatically adjusts the position and size of child components, ensuring that the plugin's user interface adapts to different screen sizes and orientations.
Alignment: You can control how child components are aligned within the layout, ensuring that they are correctly positioned within the popup.
Ease of Development: With a Layout, you can design your plugin's user interface with less concern about precise positioning, making development more efficient and reducing the need for hard-coded values.

Creating a Layout

To create a responsive layout for your plugin, follow these steps:

Wrap Your Plugin Content: Wrap the content of your plugin within a Layout as the root item.

// Import QtQuick modules

import QtQuick

import QtQuick.Layouts

// Import Hokarob theme

import HokarobQml.Theme

// Import Hokarob controls

import HokarobQml.Controls

// Import IRBCAM public interface

import IRBCAM.InterfacePublic

ColumnLayout {

id: root

// Your content goes here

}
Plugin Components: Place your plugin-specific QML components within the Layout. These components make up the user interface and functionality of your plugin. Ensure that these components are designed to work within a responsive layout.

Best Practices

When creating QML-based plugins for IRBCAM, consider the following best practices:

Keep your QML code modular and well-organized, following QML's component-based structure.
Design your plugin to be responsive to different screen sizes and orientations. Test it on various devices to ensure it works as expected.
Ensure that the plugin's user interface components are compatible with the popup's layout and do not cause layout issues.
Use layout properties to control the positioning and sizing of components within the Layout.