Building UI

To design a usability and structured interface, AppMaster Web Designer provides an extensive array of atomic UI components. These components can be combined and grouped in various ways to align with your objectives and goals.

AppMaster offers the following UI components:

• Containers: Fundamental elements for structuring and grouping other components logically.
• Modals and Drawers: Interactive components for displaying additional information or actions without leaving the current screen.
• Dynamic Value Output Components: Includes Lists, Grids, and Tables for presenting data dynamically.
• Basic UI Elements: Such as Buttons, Text, and Icons, essential for basic interface interactions.
• Navigation Components: Including Vertical and Horizontal Menus, Tabs, and similar navigational tools.
• Form Elements: Various inputs and controls for user interaction and data collection.

Regular updates to the component library enhance your ability to develop web applications more efficiently.

Let's construct a UI for our simple calculator application to demonstrate the possibilities of an AppMaster drag-and-drop website builder. This app will display the result of various mathematical operations based on input values.

Flex Container

With Flex Container, you can easily manage alignment and stacking management for all child elements within a container.

Flex Container is a base component to build the structure of your web page. Flex Container in AppMaster web app designer allows users to arrange child elements (widgets or containers) flexibly. It supports both horizontal and vertical alignments, enabling developers to create complex layouts that adapt to different screen sizes.

Adding Containers

We'll use two main containers: one for data entry and the other for displaying calculation results wrapped in one common container.

First, add Flex Container to the canvas to house all other elements.

In the Appearance panel, you can explore a range of settings:

• Element ID: A unique identifier for referencing the container in business processes.
• Common Group: Settings to define the component's default state, like visibility and cursor style.
• Flex Child Group: Determines how the element behaves within a flex-parent component.
• Layout: Settings for arranging child items within the container.
• Sizes: To specify the elements's dimensions.
• Spacing: Adjusts space inside and around the element.
• Background: Options for background colors and layers.
• Corner Radius, Borders, Shadow: Customization for elements edges, borders, and shadow effects.
• Tooltip: Adds a tooltip for hover or focus actions.

Customize your main container. For example, let's set Direction to horizontal and adjust the Gap, Padding, Corner radius, and Borders.

Next, add another Flex container inside your main one for the form to input values. Set it to full width to fill the available space in the parent container.

Duplicate this Container (using CTRL/⌘+D) to create a separate block for displaying the results. Set the Width property to 30%.

Adding UI Elements

To continue building your application, it's time to add the necessary UI elements.

Add Form

Our business process requires the user to input two numbers, both of Float type. To make this possible, add two Float Inputs and a Button to initiate the calculation process.

Switch the left side Flex Container Direction to the Vertical and add a Gap for the nested elements to have a little space between them. Add inside this Flex container an Input Float for the first value, which we'll label as 'X':

• Drag and drop the Input Float element to the left side container.
• In the Appearance Panel, personalize the field by adding a Label and Placeholder.
• Fine-tune the field's appearance to suit your application's design.

Select the added field on the canvas and duplicate it using CTRL/⌘+D. Modify the duplicated field's Label and Placeholder to represent the second value, 'Y'.

Now drag and drop a Button element below the added fields. In the Appearance panel, adjust the Button to span the full width. This can be achieved by setting the Align property in the Flex Child group to Stretch.

Input a Label for the Button, and optionally, add an Icon to enhance its visual appeal.

After adding these elements, it's a good practice to rename them for clarity and ease of identification. This makes it easier to refer to them in your business processes, enhancing understandability and speeding up the development process.

Add Results Block

On the right side of the parent container, we will configure a space to display the results after executing our business process. First, set the Direction property of this container to Vertical and add a small Gap to keep elements spaced neatly. Change its Width to 30%.

Within this right container, insert a new Horizontal Flex container and add inside it an Icon element representing the operation, a Text Block with an Equal symbol, and Text Block where the result of the operation will be displayed. Duplicate this container four times, updating each for our defined mathematical operations.

Customize each element as you want with the Appearance Panel.

Add Hint Block

To enhance the interface's usability, we make a placeholder that will display until results are getting. For this, add an additional Flex Container, mirroring the right container's width (30%), and place a Text Block inside with a descriptive hint.

A key feature of the container with results is its initial visibility status. By default, set the Visible switch off, initially making it invisible.

Hide Element

We will make this container visible and update data only after the business process is executed and the result is obtained. It's important to assign Text Block names, ensuring easy identification during the creation of business processes and writing results to display.

🎉 Good job! We made the perfect UI for our application and are ready to add interactivity to our elements.