Follow the recorded example
The video uses the runnable Pages in the orientation examples download. Each stage is included, together with setup instructions and the optional published Inspector. Recordings use Gramlot 0.3.8, Python adapter 0.2.12 and JavaScript adapters 0.2.15.
The recording starts from the orientation example project in the download. Its host registers the published layout components used later in this lesson. Each visible label contains its input, giving the field an accessible name without introducing extra identifiers.
Give the greeting a value in Data
Start with the welcome page from lesson 01. Its greeting is currently literal text in Source. Introduce a Data value for the message and replace the literal greeting with a reactive pointer to that value. In the recorded release, dataSetter initializes each value. We show the Python declaration, save it, wait for Uvicorn to reload automatically, and explicitly refresh the browser.
For this first example, use explicit paths such as demo.message and demo.color. A pointer such as ^demo.message reads the value at that Data path and follows changes. The declaration keeps the pointer; Data holds the current message.
from gramlot import Page as BasePage
class Page(BasePage):
title = "Welcome to Gramlot"
def main(self, root):
page = root.main(padding="16px", font_family="system-ui")
page.dataSetter("demo.message", "Welcome to Gramlot")
page.h1("^demo.message")Change the text and colour through inputs
Bind a text input to the same message path as the heading. With live=True, each keystroke changes Data and the heading follows its pointer immediately. These input edits do not save the Python file or reload the browser.
Initialize demo.color with steelblue and bind the heading colour attribute to ^demo.color. A second text input edits that path: type crimson or seagreen and watch the heading change colour. The Colour field accepts CSS colour names. There is no event handler manually updating the heading.
Give the page a border layout
Introduce a borderContainer with top, left and center contentPane regions. Move the heading into the top pane and the existing message and colour controls into the left pane. Keep their literal pointers unchanged, then save and refresh. Drag the divider to resize the settings area.
Add a few explicit fields, such as name, email and quantity, with their own literal Data paths. Put the message and colour controls in the side area. The container organizes space; each binding still identifies the value the control reads or edits. Relative and symbolic paths are introduced in lesson 04.
What we have learned
We initialized Data, bound content and attributes with pointers, and edited the values through live inputs. We then organized top, left and centre regions and added name, email and quantity fields. Source edits require saving and refreshing; live input edits update Data immediately. The next lesson explores Data and Source in the Inspector.
Your turn
Try it yourself
- Replace the literal greeting with a pointer to demo.message and bind a text input to the same path.
- Add a colour input and connect the heading colour to demo.color.
- Place the heading, settings and several fields into a border layout; check that the original bindings still work.
Check your understanding
When typing changes the greeting, did the Python file change?
Show the answer and expected result
No. The input changed the value in Data. The heading’s Source declaration still contains its pointer, and the runtime updates the display from that value. Editing the page file is a separate authoring action.