Design vs Code (e.g. components, instances, etc)

Hello, I am new to Anvil and I have a question that may have an obvious answer (apologies if it does!)
When I select and drag components to the form in the Design view and I then switch to the code view, I was expecting to see the component methods and properties appear in my code view, but they don’t … where does the component code go?
Also, in code view, I see a Form class defined, but I don’t see the class instantiated…
am I missing something?
Thanks!
Rui

Hi Rui,

You should be able to find the component styling in the theme.css. If you want to add some styles use roles:

.anvil-role-newrole {
# properties;
}

Then in roles (where the colour pallette lives) add your role by its name, e.g. newrole and you can apply using the role dropdown in your design view wheb you have a component selected.

Then, when you want to add an event to a component it’s at the bottom of the properties panel.

1 Like

Welcome to the forum!

When you add a component to a form, you get access to an instance of the component (maybe more than one if you added multiple buttons, for example). But the actual code for the components is in another class.

To use the components, you access their methods using e.g. self.button_1.methodname()

Classes get instantiated when you call open_form to open a particular form (or by default, the startup form gets instantiated automatically).

You might want to go through some of the tutorials, which cover these sorts of topics: Anvil | Tutorials

A description of each instance, including IDE-settable properties, is written into a hierarchical .yaml file. This file exists behind the scenes, and is used by the IDE to render the form in the Design view.

At run-time, Anvil reads this description to generate a base class (…Template) for the entire Form. You can see this base class referenced near the top of your Form’s Python code.

The base-class code is generated on-the-fly, so it is not accessible. The .yaml file is accessible via Git, but editing it is really a last resort, as it is extremely easy to screw it up that way.

1 Like

Thank you for taking the time to respond! I will try to understand your great answers!

I have the same question still can’t find the answer anywhere. I have recently been moving off of the Design view and moving towards using code for everything, but I have existing forms that I created in Design view. For example, if I were to programmatically create a button, I’d create this in the init statement:

self.button_1 = Button(text=“Submit”)
self.add_component(self.button_1)

If I added a button in Design view, that code does not show up in the init statement of my code. Is that code written somewhere else?

That was answered a couple of messages up by @p.colbert .

Ah ok, my mistake. So the code is written into a YAML file that is not accessible unless I clone the repo locally.