write in front
Previous blog I learned about AppCube without the documentation, and gained a basic understanding of it. As a try , this blog does not rely on documentation, but only relies on my own experience to achieve a small closed loop, this The closed loop is as small as only one field in the model, but we want to implement a closed loop, that is, input data from the foreground, and then read data from the background.
First, we create a blank application, so that we can get an original interface.
At this time, I found out that AppCube turned out to be a SAAS space, and it seemed that I saw a similar slogan in one place. I flipped through the homepage and found that it turned out to be an efficient and easy-to-use low-code aPaaS platform.
object model
After entering the control panel, directly find the Modeldirectory , click on the right, +and add an object model.
Enter the object name, and you can operate the relevant fields in the object. Among them, AppCube has built-in some default fields for us, which are very important in development.
After switching to the custom fields tab, you can create your own fields, and AppCube has prepared prefixes and suffixes very reasonably.
When customizing a field, you can also select the data type of the field. Here, info_namea , and then AppCube formats it according to the camel case naming rules. The standard name is hys__infoName__CST.
Individual properties of object fields can also be configured individually.
write page
Add a [standard page] directly in the Pagedirectory , and then drag a form component to the window, where AppCube will automatically wait for us to select an object and bind it to the form component, as shown in the following figure.
The model of data binding here is 对象because it can be created by the backend object model mapping and supports selection of fields . The backend object model here is the model we created above.
The configuration of other form components is very simple, such as text labels, placeholders, mouse movement display, whether it can be cleared or not, and can be configured based on requirements.
The last step of the input page is the button operation, that is, we need to bind events to the submit button so that it can submit data to the background. After selecting the button, it is found that this step of AppCube has also been considered, and the related events have been initialized.
Click the pencil icon behind [Submit Form] to get the [Built-in Action] editing window, and you can adjust the logic yourself, which is very convenient.
Next, implement the data presentation part
Create a standard page named in the Pagedirectory Showand drag a table directly into the window.
The subsequent steps are basically the same as the above, bind the model, modify and display related fields.
And it is also very easy to add filter conditions, you can operate it directly in the properties panel.
Preview the final effect c
Before previewing, you need to modify the relevant menu. This step is also found after one failure. The page that AppCube opens by default is not the page we created.
The configuration is very simple, and it can be realized directly by referring to the operation area in the figure below.
Save all the above actions, then click APP preview on the left. When the page shown below appears, all the work in this case has been completed.
data entry interface
Data preview interface
Since there was no delete button, I went back to the Showdesign page and added the toolbar so that selection and deletion were enabled.
Finally, open the select column of the table, as shown below.
write on the back
Although this example only involves one field, it is exciting enough that with this small closed-loop implementation, it can be extended, and any form collection and rendering work can be written without code. It really conforms to the magic of the application cube , which is that you can achieve rapid application development and application construction by dragging and dropping it.