Toolbar

In the development interface, there is a toolbar area under the menu structure. The toolbar area contains shortcuts to some function buttons, as well as extra action buttons that are specialized according to the screen active in the development interface and the action performed.

By default, when the development interface is first opened, in the toolbar; New Blank Solution, New Blank Project, Open Solution, Open Project, Save All, Save, Undo, Move Forward, Copy, Past options are available.

• New Empty Solution, New Empty Project, Open Solution, Open Project options appear as active buttons and are shortcuts to the New Project, New Solution, Open Project, Open Solution functions under File in the menu structure.

<div style={{textAlign: 'center'}}>

</div>

• Save All, Save are buttons to save edits made in the authoring interface when the form, flow, or code editor screens are open and any edits are made on one or more of these screens. These are shortcuts to the Save and Save All functions, located under the File heading in the menu structure.

<div style={{textAlign: 'center'}}>

</div>

• Undo, Forward options; The Undo option is an option that when any changes are made to parts of the flow, form, or code, undo the action and return the screen to the step before the change. The Undo Next option is the option used to reapply a change to parts of the flow, form, or code when the change is undone.

<div style={{textAlign: 'center'}}>

</div>

• Copy, Paste options; The Copy option is the option for copying flow or form objects by clicking on them. Paste is the option for pasting copied flow or form objects into the screen.

<div style={{textAlign: 'center'}}>

</div>

When the form screen, flow screen, or code screen is open as the active screen in the development interface, the options that appear in the toolbar vary. The options that appear according to the active screen and their explanations are as follows;

• Import, Export options; The Import option is for importing a package exported in json format. The Export option is the option to export the currently open screen in json format when the flow or form screen is actively open in the interface.

<div style={{textAlign: 'center'}}>

</div>

• The Preview option is an option that appears in the toolbar when the form screen is active in the interface. It offers a feature where the designed form screen can be previewed and how it will look and work before making it available. In addition, in the preview option, the appearance of the form screen on different mobile devices can be controlled. According to the device selection on the preview screen, the form appearance is tested before publishing.

<div style={{textAlign: 'center'}}>

</div>

Preview screen;

<div style={{textAlign: 'center'}}>

</div>

When the Flow screen is active, the option to adjust the screen view settings will appear in the toolbar. In the details of this option; Options such as "Show or hide gridlines", "Show or hide gridlines", "Enable or disable snapping", and "Auto-align to grid" are listed.

• The Show or hide grid lines option allows square lines to appear behind the screen being worked on. The resulting frames can be used for convenience during the design process. These grid lines can be opened or closed at will.
• The Show or hide gridlines option allows gridlines to occur on the left and top edge of the screen being worked on, divided into specific intervals. These gridlines can be used for convenience during the design process.
• Enable or disable snapping is an option for objects that are not intended to be copied and pasted, preventing the corresponding object or objects from being pasted.
• The Auto-align to grid option is used to align objects positioned on the flow screen to grid lines.

<div style={{textAlign: 'center'}}>

</div>

The operation details of the option to align and synchronize the objects that appear in the toolbar are as follows;

• The Align selected objects left option ensures that the selected objects are left-aligned.
• The Right-align selected objects option ensures that the selected objects are right-aligned.
• The Align selected objects below option ensures that the selected objects are bottom aligned.
• The Align selected objects to top option ensures that the selected objects are aligned to the top.
• The Align selected objects vertically option aligns the selected objects vertically.
• The Align selected objects horizontally option aligns the selected objects horizontally.
• The Synchronize vertical spaces option synchronizes vertical spaces between objects.
• The Synchronize horizontal spaces option synchronizes vertical spaces between objects.

<div style={{textAlign: 'center'}}>

</div>

The details of another object view editing option are as follows;

• The Bring to front option is the option used to bring the object behind to the front, in some cases objects may overlap during design.
• Send to back is the option used to send the object in front to the back, in some cases objects may be overlapped during design.

<div style={{textAlign: 'center'}}>

</div>

• The Lock or unlock selected objects option can lock objects with this option in situations where it is not desirable to move the selected objects again, or as a precaution in case the designer accidentally changes the location of the objects. Locked objects cannot be relocated. A locked object that is intended to be relocated can be unlocked by clicking this option again.

<div style={{textAlign: 'center'}}>

</div>

• The flow view adjustment options, which are activated when multiple objects are selected on the flow screen, are as follows;

<div style={{textAlign: 'center'}}>

</div>

• With the code screen open as the active screen, options such as "Class List", "Method List"**, and options appear in the toolbar that show the difference between the code as it was last compiled and the code is now. The Class List option lists all classes used in the code, allowing automatic focus on the selected class name in the code. In the Method List option, all method names used in the code are listed and the selected method is automatically focused in the code.

<div style={{textAlign: 'center'}}>

</div>