Let’s see how you can use the Anvil editor to create a user interface by turning this app into a “hello world” app that says hello to your users.
In the middle of the Anvil IDE is the form editor which is divided into design mode and code mode. To the right of the Anvil Editor, you will find the Toolbox.
You can drag and drop components, such as labels, from the toolbox to build your user interface. This hello world app will also need a TextBox for users to enter their name:
To configure components, you can edit their properties on the right side of the Properties panel. This includes both the information displayed by the component and its styling:
Each component is a Python object, so you can also set component properties in the Code view of the form editor:
All components have events they can trigger. For example, when a user in your application clicks on a Button component, it fires a click event. We can create a Python method in Code view to call when this happens. In your button’s click method, you can call Anvil’s
alert function to display an alert that says hello to your users:
You can now click Run to test your application and its interface. Your users can now enter their name and click on the
say hi button displays the alert:
Using the drag-and-drop designer isn’t your only option for creating user interfaces in Anvil. You can also create and add components to your UI directly in code:
Anvil comes with all the usual UI components – buttons, text boxes, dropdowns, tables, etc. And if that’s not enough, you can create your own custom components and share them with other applications.
To learn more about creating user interfaces with Anvil, why not get started with our 10-minute feedback form tutorial?
Create your own app with Anvil
If you are new here, welcome! Anvil is a platform for building complete web applications with nothing but Python. No need to struggle with JS, HTML, CSS, Python, SQL and all their frameworks – just build everything in Python.
>>> Try the anvil
. . . comments & After!