Device Previews & Responsiveness
Applications built with Heisenware are inherently responsive, designed to adapt automatically to any screen size from smartphones to large desktop monitors. The App Builder provides a powerful set of Responsive Layout Settings to customize the appearance for each device, and a suite of Device Preview tools to see how your app looks on different screens.
Preview Tools
These tools help you view your design in the editor.
Switching Previews
The top bar of the App Builder contains five device icons, representing screen sizes from Extra-Small (XS - phone) to Extra-Large (XL - large monitor). Simply click an icon to switch the UI editor to that specific preview.
Zooming
Use the zoom bar to zoom in and out of the current preview. This is a design-time aid only.
Responsive Layout Settings
These settings make permanent changes to your application's layout and behavior on different screen sizes.
Customizing Widget Layouts
The position, size, and other properties of each widget can be tailored individually for each enabled screen size. This allows for full customization of your responsive layout.
Design Tip: Mobile-First
A recommended workflow is to start by designing for the mobile (XS) screen. Changes made on smaller screens are often automatically applied to larger ones. You can then switch to the larger previews to make specific adjustments as needed.
Adjusting Page Height
To add more vertical space and enable scrolling on a specific page, use the Page Height icon [] in the toolbar. This setting is a permanent property of the page for the selected device size and will be reflected in the final application.
Enabling and Disabling Screens
You have full control over which screen sizes you want to actively design for. To enable or disable a specific screen size, right-click its icon in the top bar. If a user opens your app on a device corresponding to a disabled screen size, Heisenware will automatically display the layout from the closest enabled size.
Content Alignment (L & XL Screens)
For large (L) and extra-large (XL) screens, you can set a default alignment for your app's content. Right-click on the L or XL device icon to choose whether the content should be left-aligned or centered. This setting affects the final appearance on wide monitors. This alignment serves as a default starting point when design smaller screens first. You can always override it by manually positioning your widgets for a pixel-perfect layout.
Last updated