Designing Your App Visually
This is a picture of the Anvil editor, with the most important parts labelled:
The parts of the Anvil editor
The Form Editor displays what your user interface will look like, and lets you drag and drop elements around.
The Toolbox is where you pick new components to add to your UI.
The Properties panel lets you configure the component you have selected in the Form Editor. (You can select components by clicking on them.)
- The App Browser lets you select which part of your app your are editing. Your app can contain:
- Forms (user interfaces and Python code, runs in the web browser)
- Modules (Python code, runs in the web browser or on the server)
- Server Modules (Python code runs on the server)
- Services (Pre-built libraries and integrations like Data Tables, User management, etc)
The App menu (aka the gear menu) is where you configure your application.
- The Output panel shows you everything that was
print()ed when you last ran your app.
Creating a component
To add a new component to your page, drag its icon from the Toolbox into the Form Designer. 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.
Configuring a component
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:
Properties are grouped into sections, and you can click the “More” link to expand a section and see more properties:
Each component has a name (eg
self.button_1). This lets you refer to this component as an instance attribute in your form class.
Each component lies inside a container. Depending on what container it is in, you can set container properties that configure how the component is displayed in its container. For example, if a component is contained in an
XYPanel, the container properties set the X and Y coordinates of the component.
When you select some components, you will see draggable handles that let you adjust 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 (eg the
height property of an
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 method on the form class. That method will be called when the event occurs.
Click the arrow button to go to the code for that event. 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: eg
Component visual layout
Components are laid out from top to bottom on a page. A component’s width is determined by its container. A component’s height is determined by itself.
Everything is Code
Everything that you can do in the visual designer is equivalent to writing some Python code in your form’s
__init__ method. 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 (eg 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.set_event_handler('click', self.my_button_click)