The Mobi Application Designer provides a visual interface for building application features, such as UI design, business logic, data binding, and data integration. The following table describes the function of each section in the designer interface.
Label |
Feature Name |
Usage notes |
1 |
Logo |
Return to the console |
2 |
Page and layout list |
Quickly switch between pages or layouts |
3 |
Page & Layout |
Create or delete pages or layouts |
4 |
Add Component |
A list of available components. Use it to add components to the canvas. |
5 |
Outline & Component Tree |
Displays the outline and component structure of the current page |
6 |
Code |
Manage code for the current page and global scope. This includes variables, computed properties, frontend functions, and integration operations. |
7 |
State |
Displays the real-time state of the current page and global code |
8 |
Operation History |
Records all operations in the Application Designer. Provides undo and redo functions. |
9 |
Version Control |
Contains commit and publish histories. Supports rolling back commits. |
10 |
Application Settings |
Provides general application settings, JavaScript (JS) preloading, and third-party library configurations. |
11 |
Application Canvas |
Demo area |
12 |
Editing Panel Area |
Write code logic. This includes variables, computed properties, frontend functions, and integration operations. |
13 |
Preview |
Enable or disable the application's preview mode |
14 |
Commit and Publish |
Commit or publish the application |
15 |
Property Settings Area |
Set the properties for components, layouts, or pages |
16 |
Error Check |
Displays and locates errors in the application |
17 |
Editing Panel |
Open or close the editing panel |
18 |
Undo and Redo |
Undo or redo operations in the Application Designer |
19 |
Common Keyboard Shortcut Tips |
Shows common keyboard shortcuts for different states |
20 |
Help |
Get help and support for the application |