How to link my code to the visual part of the gui

Anvil Q&A
2

Welcome to the Forum, @lefterismylonakis !

We all started as noobs! There are no stupid questions here.

Looking at your app, you’ve made great progress. There are a few wrinkles to iron out. I’ll outline the worst of them.

  1. Variable lifetimes. In
  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.
    
    price1 = 0
    price2 = 0
    price3 = 0

the last 3 variables are local variables. They are created on the spot, but they, and their values, will live only as long as function __init__ is running. After that they will be destroyed. I suspect you want those variables created at the start of text_box_2_pressed_enter instead.

  1. Indentation. You intend function text_box_2_pressed_enter to include all of the code below:
  def text_box_2_pressed_enter(self, **event_args):
    """This method is called when the user presses Enter in this text box"""
    item_num = int(input)
  if item_num <= 5:
      price1 = float(item_num * 0.5)
  
  
  elif item_num > 5 and item_num <= 50:
      price2 = float((item_num-5)*0.3 + (5*0.5))
  
  
  else:
      item_num > 50 and item_num <= 10000
      price3 = float((item_num-51)*0.25 + (46*0.3) + (5*0.5))

But Python is very sensitive to indentation (leading spaces). Because of this, your function ends immediately before the first if. To put the remaining lines inside the function, you need to shift the if, elif and else lines to the right, so that they line up with item_num.

  1. In your function text_box_2_pressed_enter, you are using input to represent the value that the user has typed into the TextBox named self.item_num. That value actually has a name: self.item_num.text.

Once you have those things straightened out, you should be able to extend your function text_box_2_pressed_enter to compute your desired total, and assign it to self.total.text.

The link between your code and the visual part of the GUI lies in two Python objects: the ones that you named self.item_num and self.total. Each of these objects has an attribute named text, that represents the value seen on the screen. That attribute is the link you’re looking for.

Behind the scenes, Anvil’s (hidden) code performs some hidden work on your behalf:

  • when you assign a value to that attribute, Anvil passes that value onto the screen, where the end-user can see it in their browser.
  • when you use that attribute’s value, Anvil fetches it from the display, and hands it to your code.

Similar “magic” occurs all throughout Anvil’s supporting structure. It’s not really “magic”. You can build similar abstractions, by creating your own Python classes (and instances of those classes). But it sure is useful!

2 Likes