Create a web application
The visual development tool provides a web application editor that helps you create a web-based control interface quickly and easily, without writing any code.
Procedure
Create a project. For more information, see Standard Project.
On the project Home Page, under Project Development, select Web Application.
Above the application list, click New.
In the New Web Application dialog box, enter an application name and description, and click Confirm.
Parameter
Description
Application Name
The name for the application. It must be up to 30 characters long and start with a letter, number, or Chinese character. Allowed characters include letters, numbers, Chinese characters, underscores (_), hyphens (-), and parentheses (()). Each Chinese character counts as a single character.
Description
An optional description for the application, up to 100 characters long. Each Chinese character counts as a single character.
After you create the application, the web application editor opens automatically. The following sections describe the functional areas of the editor.
Left navigation pane
Feature | Description |
| Pages: A list of navigation layouts and pages in the current application. Navigation layouts:
After you select a page layout, click Configure to enable and configure the application's navigation menu. For more information, see Navigation Menu. In the Pages list, you can select a page to customize its name, or add or delete pages. For more information, see Pages. |
| Components: Displays a list of available components for visual development. Drag a component to the canvas to use it in your application. For more information about component descriptions and configurations, see Components. |
| Device Binding Management: On the Bind Devices to Application page, you can batch bind devices to components that use device data as their data source. For more information, see Batch Bind Devices. |
| Application Settings: On this page, you can update the application name and description, enable account authentication and token-based authentication, view the application's publishing history, and manage domain names bound to the application. For more information, see Account Authentication, Token-based Authentication, and Domain Name Management. |
Canvas
The center of the editor is the canvas.
The toolbar below the canvas provides the following options, from left to right:
Feature | Description |
Ruler | Toggles the display of rulers along the canvas edges, which helps you gauge page dimensions. |
Grid | Toggles a 4x4-pixel grid on the canvas to help you position components. All components on the page automatically snap to the grid for alignment. |
Guide | Toggles red guides that help you align components. |
Fit Canvas | Click the |
Zoom | Zooms the current page in or out. |
Responsive | When selected, the application page automatically adjusts its layout to fit different browser resolutions. You can verify the responsive layout in preview or after publishing. |
icon to fit the entire page within the visible canvas area.Right-side configuration pane
When you select a component on the canvas, its configuration pane appears on the right.
Category | Description |
Style | Controls the visual appearance of the selected component on the page. For more information, see Style Configuration. For the specific style options of a component, see its documentation in the Components directory. |
Configures the component's data source. A component can use multiple data sources of different types. Supported data sources include Device, API, Static Data, and Data Table Resource. For more information, see Device, API, Static Data, and Data Table Resource. | |
Interaction | Configure actions that are triggered by component events, such as click, double-click, value change, focus, blur, mouse enter, and mouse leave. For example, you can configure a click event to send a server-side request. For more information, see Interaction Configuration. |
Top action bar
The top action bar in the web application editor provides buttons for project navigation, page management, undo, redo, preview, and publish.
The following table describes the features of the top action bar, from left to right.
Item | Description |
| Hover over this icon to expand the project overview. Here, you can view and manage applications, products, and devices within the project.
To the right of the icon, the current project and application are displayed as Project Name-Application Name. |
Auto-saved | Displays the time when the application configuration was last auto-saved. |
| Undoes the last action. |
| Redoes an undone action. |
| Previews the application at any time during the editing process. |
| Manually saves the current configuration. The system also saves automatically every minute. |
| Publishes the application to the cloud. |
| Opens a menu to view My Tickets or Create Ticket. |
| Opens the help documentation for visual application development. |
