FluidFrameDev/tutorials/01-hello-fluid-frame.md

tutorials/01-hello-fluid-frame.md ````markdown # 01 — Hello, Fluid Frame Goal: Click a button in your Anvil app → run a server function → get greeted in style.

1. What You’ll Build

A web app that:

• Takes your name
• Sends it to the server
• Returns a personalized greeting
• Shows it in a popup notification

Yes, it’s “Hello, World” — but with a fluid frame.

---

2. Create the App

1. Go to Anvil → New App → Blank App (Material Design).
2. On Form1:
   • Drag a TextBox (ID: text_box_1, placeholder: “Enter your name”).
   • Drag a Button (ID: button_1, text: “Say hi”).
3. Open Code view for Form1.

---

3. Client-Side Code

from anvil import *
import anvil.server

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

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.button_1.enabled = False
    try:
      name = self.text_box_1.text or "World"
      msg = anvil.server.call('hello_server', name)
      Notification(msg, timeout=2).show()
    finally:
      self.button_1.enabled = True

---

4. Server-Side Code

1. In your Anvil app, create a Server Module called ServerModule1.
2. Paste:

import anvil.server

@anvil.server.callable
def hello_server(name):
  return f"Hello from the server, {name} 👋"

---

5. Run It

• Click Run ▶.

• Type a name and click “Say hi”.

• You should see a friendly greeting in the top-right corner.

• If not, check:

  • You spelled the server function name exactly the same.
  • anvil.server.call arguments match.
  • Your internet is not powered by squirrels.

---

6. Bonus: Debug Like a Pro

Add print statements in both client and server code to watch the flow:

print(f"[Client] Sending: {name}")

print(f"[Server] Received: {name}")

Watch the logs when you run the app.

---

7. Assets

• GIF: Record a short (10–15s) clip showing:

  • Typing in name
  • Clicking button
  • Popup greeting

• Save it to /assets/hello-fluid-frame.gif

• Reference in this file:

![Hello Fluid Frame Demo](../assets/hello-fluid-frame.gif)

---

8. Takeaways

• anvil.server.call is your client → server bridge.
• Keep UI responsive: disable buttons while waiting.
• Always match callable names exactly.
• You now have the skeleton for any input/output pattern.

---