Forms are the pages of your Anvil app. They have a visual design that describes how they look, and a Python class that describes how they behave.
The Form with the symbol next to it is the startup Form. This is the first page displayed when your Anvil app is opened.
The Anvil Editor shows a list of Forms in the App Browser. You can click on each Form and view it in either Design view or Code view:
In Design view, you can move components around on your Form and drop components into it.
In Code view, you can see that each Form is represented by a Python class. Its attributes and methods define how the app behaves. You can create and manipulate components in code as well.
The following code is auto-generated by the Anvil Editor when you add a new Form to your app:
from ._anvil_designer import Form1Template from anvil import * class Form1(Form1Template): def __init__(self, **properties): # Set Form properties and Data Bindings. self.init_components(**properties) # Any code you write here will run when the form opens.
To add a new component to your page, go to Design view and drag its icon from the Toolbox into the Form Editor. The highlighted line shows you where your new component will be created:
You can pick up an existing component and move it around in the same way.
Click on a component to select it. You’ll see it outlined in the Form Editor.
Use the Properties Panel to change properties of the selected component. For example, changing a Button’s
text property changes the text on the button:
The Properties Panel is grouped into sections, and you can click the “More” link to see more properties:
Each component has a name (e.g.
self.button_1). This lets you refer to this component as an instance attribute in your Form class.
Components are typically placed inside containers. You can set container properties that configure how the component is displayed in its container. For example, if a component is placed inside an
XYPanel, the container properties set the X and Y coordinates of the component within the
When you select some components, you will see draggable handles that let you adjust the size of the component. (For example, there is a handle to set the height of an
Image component.) This is a visual way of editing the value of a property (e.g. the
height property of an
Components placed side by side on the same row are separated by a draggable blue column separator. This column separator is visible when a component from that row is selected or when the ColumnPanel containing those componets is selected. Holding
ctrl while dragging the separator allows for fine control. Double-clicking on the separator will reset all column widths from that row back to the default equal spacing.
If you scroll to the bottom of the Properties Panel, you can find a list of events that the selected component can raise.
Next to each event, you can enter the name of a Python method. That method will be called when the event occurs.
Click the blue arrow button to go to the method that runs when the event occurs. If an appropriate method doesn’t exist already, it will be created. (If there is no method name in the box, an appropriate name will be chosen using the name of the component and the event: e.g.
Components are laid out from top to bottom on a page. A component’s width is determined by the layout you have set up in its container. A component’s height is determined by its own properties.
Everything that you can do in Design view of the Form Editor can also be done by writing some Python code in Code View. This is because each component that you drag-and-drop onto your Form is represented as a Python object that you can interact with directly.
For example, you can add components to your Form or change a component’s properties by writing code in your Form’s
We’ll explore this in more detail in the coming sections, but here are some examples:
- You can add a component by creating an instance of the component class (e.g. calling
Button()), and then calling
add_component()on a container to add it to your page. For example:
self.button_1 = Button(text="Click me") self.content_panel.add_component(self.button_1)
- You can set (or read) properties of a component as attributes on the component object. For example:
self.button_1.text = "Click me"
- You can set container properties of a component when adding it to a container, by passing them to
my_button = Button(text="Click me!") self.xy_panel_1.add_component(my_button, x=40, y=150)
- You can bind events on a component by calling its
my_button = Button(text="Click me!") my_button.add_event_handler('click', self.my_button_click)