Creating a nested set of panels

Anvil Q&A
1

** I’m trying to create a nested panel like the figure below. **

image
image674×598 10 KB

I think I want a GridPanel as the main container then 3 ColumnPanels as the nested containers.
I want to make the left component to hide and the right panel to expand when the button is clicked.

The containers align left to right. What am I doing wrong?

Code Sample:

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)
    # make a GridPanel container
    # gp = GridPanel(background='yellow', role='grid-panel')
    # gp.border = "1px" 
    # gp.add_component(Label(text="Label 1", background='blue', foreground="white"), row=0, col_xs=0, width_xs=2)
    # gp.add_component(TextBox(text="Some text"), row=0, col_xs=2, width_xs=6)
    # gp.add_component(Button(text="Submit", background='red'), row=45, col_xs=0, width_xs=12)
    # self.add_component(gp)
    self.grid_panel = GridPanel(background='green')
    # add it to the form template
    self.add_component(self.grid_panel)
    # make a ColumnPanel
    self.navbar2 = ColumnPanel(role='navbar2', background="lightblue")
    # add it to the GridPanel, this will be the top row and span 2 columns
    self.grid_panel.add_component(self.navbar2, row=0, col_xs=2, full_width_row=True, )

    # populate the ColumnPanel
    self.hamburger_button_new = Button(text='Hamburger2', icon='fa-bars')
    self.navbar2.add_component(self.hamburger_button_new)
    self.navbar2.add_component(Label(text='Home'))
    self.navbar2.add_component(Label(text='About'))
    self.navbar2.add_component(Label(text='Help'))
    self.navbar2.add_component(Label(text='Account'))

    #create a left ColumnPanel window    
    self.left_panel2 = ColumnPanel(role='left-panel2', background="yellow")
    # add it to row 1, column 0
    self.grid_panel.add_component(self.left_panel2, row=1, col_xs=0, full_width_row=False,)
    self.left_panel2.add_component(Label(text='Left Panel'))
    #create a right window    
    self.right_panel2 = ColumnPanel(role='left-panel2', background="red")
    # add it to row 1, column 1
    self.grid_panel.add_component(self.right_panel2, row=1, col_xs=1, full_width_row=False,)
    self.right_panel2.add_component(Label(text='Right Panel'))

Clone link:
share a copy of your app

2

Have you tried with a column panel containing another column panel above and a justified flow panel below?

3 Likes
3

Yes I’ve tried numerous combinations: ColumnPanel, FlowPanel, GridPanel, LinearPanel.

Hopefully someone can just give me an answer instead of me just trying to reverse engineer the API.

This seems like such a basic feature that it seem like a show stopper for me. I love the idea and intent but the execution seems lacking.

Looking at the generated Python code it seems clear that the implementors aren’t familiar with the PEP coding recommendations. For example PEP 8 recommends 4 spaces for indents. The tool creates 2 spaces. PEP 420 makes the _init_.py file optional but the tool places the entire code base in the _init_ module.

Thanks in advance for any help anyone can provide. I would really love to use the tool if it works.

4

If this is what you are looking for:
7-22-2024 (10-30-55)

You can do it with this:
image

The only properties I changed were align = justify in flow_panel_1 and expand = True in column_panel_3, then added this code:
image

Press Alt+Shift+F to format according to pyproject.toml. There is a default implementation that (I assume) agrees with PEP 8, but you can change it (see here and here)

Optional doesn’t need forbidden :slight_smile:

__init__.py does not contain “the entire code base”. It only contains the event handlers for that specific form, plus you are free to add whatever you want to add. It’s up to you. I don’t add anything to the form code beside the event handlers. All my client side logic goes into other modules.

2 Likes
5

Can you paste the actual code? That would help tremendously.
This looks encouraging.

6

Here is a clone link:

I had deleted that little test, so I created a new app, and realized that the flow panel doesn’t need to have align = justify. The expand = True on the second column panel is enough.

7

Thanks so much for building that app.

Unfortunately it doesn’t have any Python code that builds the UI.
Am I missing something?

from ._anvil_designer import Form1Template
from anvil import *

class Form1(Form1Template):
def init(self, **properties):
self.init_components(**properties)

def check_box_1_change(self, **event_args):
    self.column_panel_3.visible = self.check_box_1.checked

I’m looking for a pure python code set that implements the features you built in Anvil editor.
I also dont see where you put the expand = True setting.

image
image1373×798 79.2 KB

8

Perhaps you are missing that this is Anvil and you don’t need any code to build the UI :slight_smile:?

If it takes you longer than 1 minute to build that form, then you are not using Anvil the right way.

That’s inside the container section of the properties:
image

2 Likes
9

Welcome to the Forum!

With features like Layouts, Data Grids, and RepeatingPanels, creating components via code is rarely needed.

But it’s certainly possible. Check the documentation for the user interface object model (which objects contain which other objects). You can find many additional details in the API Reference.

There is a middle ground: Build high-level composites (as Forms or Layouts) in the IDE, with most of their details preset, then instantiate, customize, and connect them at run-time. This uses a lot less code than creating every detail from scratch.

1 Like