UI Layout & editors

DronaHQ offers two distinct types of screen editors: the Freeflow Editor and the Advanced Editor. By default, any new screen created in the DronaHQ is set to the Freeflow Editor mode. However, users have the flexibility to choose which screen editor they want to use for each screen they are working on.

Info

You can switch between Advance Editor Mode and Freeflow Editor Mode only when there are no controls placed inside the screen. The button to switch between the modes can be found at the bottom of the screen.

Freeflow Editor

The Freeflow Editor provides users with a straightforward approach to designing screens. Controls can be placed on the screen in a grid-like fashion, making it easy to align and position elements precisely. The editor's grid is composed of 24 columns, enabling users to create responsive and organized layouts. Each row has a fixed height of 10 pixels, maintaining consistency throughout the design.

Key Features:

• Grid-based Layout: Users can easily snap controls to the grid, simplifying alignment and maintaining a structured appearance.
• 24-Column Grid: The screen is divided into 24 columns, offering precise control over the placement of elements.
• Fixed Row Height: Each row has a height of 10 pixels, ensuring a uniform look and feel across the screen.
• Custom resizing and placement: Users can resize the control to any number of columns and rows and place them anywhere inside the editor, allowing them to create their desired UI.

Advanced Editor

The Advanced Editor empowers users to create more complex and flexible screen layouts. Controls are positioned relative to each other, allowing for controlled placement of the layout of the control. The editor comes equipped with advanced layout controls, such as Layout, Rows, and Columns, which enhance the user's ability to design intricate and responsive screens.

Key Features

• Relative Control Placement: Controls can be positioned in relation to each other, providing greater flexibility in screen design.
• Layout Controls: Users can leverage powerful controls, such as Layout, Rows, and Columns, to build sophisticated screen layouts effortlessly.
• Advanced Screen Layout: The Advanced Editor is ideal for creating intricate designs that adapt to various screen sizes and orientations.

info

Advance Editor is deprecated and will not be available to use in future releases.

Panel Control

The Panel control is available in both editors and serves as a valuable tool for grouping multiple controls. This enables users to manage complex arrangements of elements efficiently.

Key Features:

• Grouping controls: Useful in grouping multiple controls and displaying them as blocks in UI by using panel styling properties.
• Rules for groups: The user can apply visibility rules to the panel thus affecting the entire control group placed inside the panel. Useful if the user wants to display a set of control in one case and another in a different case.
• Clean UI: Helps in creating clean ui by grouping closely related controls together and with UI styling properties available in the panel.