gramlot.

Course · Lesson 02 of 20

Read and compose Source

Build a small page from nested declarations and distinguish structure from application state.

Reading · Practice2 sectionsPrerequisites: Create your first project
Course contents
Orientation
  1. 01 Install Gramlot and create Hello world
  2. 02 Connect text and colour to Data
  3. 03 Explore Data and Source with the inspector
  4. 04 Use relative and symbolic paths, then dataFormula
  5. 05 Call the server with dataRpc and .remote
Start a project
  1. 01 Create your first project
  2. 02 Read and compose Source
  3. 03 Initialize structured Data
  4. 04 Connect fields and values
Build a form
  1. 05 Accept values, preserve drafts
  2. 06 Declare a calculation
  3. 07 Run an action at the right time
  4. 08 Name behavior and understand lifecycle
Compose an interface
  1. 09 Arrange an application with containers
  2. 10 Style the page you own
  3. 11 Publish messages and ask before acting
  4. 12 Format values without changing Data
Connect services
  1. 13 Call an endpoint
  2. 14 Load a Source fragment
  3. 15 Load Data when it is read
  4. 16 Save, restore and send Data deliberately
Deliver your work
  1. 17 Organize pages and choose a host
  2. 18 Read the JavaScript edition
  3. 19 Deliver the JavaScript edition offline
  4. 20 Explain and change a complete form

Every call adds a node

A builder call adds a typed node to Source and returns that node. Calling another builder method on it creates a child. Indentation and local variables make the hierarchy readable; they do not create a separate rendering system.

The following is the authoring example from the current guide. It belongs in a Page module served by an adapter; it is not a standalone server program.

Python · complete Page from the authoring guide
from gramlot import Page as BasePage

class Page(BasePage):
    title = "People"

    def main(self, root):
        panel = root.div("People", id="people")
        panel.p("Choose a person")

Keep structure and values separate

The text above is literal. Later, a pointer will connect a node to a Data value. Source can also change at runtime: inserting or removing a node updates its rendered branch. The framework owns that translation.

Plain helper methods can organize a larger Page. Keep the declarations and their literal bindings visible so the reader can follow a section without decoding a second recipe language.

Your turn

Try it yourself

  1. Read Hello World in the gallery, then locate its heading in Source.
  2. In your local project, add a literal paragraph below an existing heading.
  3. Save, restart and reload; inspect the parent and child nodes.

Check your understanding

Does adding a paragraph require a new Data value?

Show the answer and expected result

No. Literal page structure and text can be declared directly in Source. Introduce Data when a value needs to be shared, edited or observed. A helper method can group declarations without changing this distinction.

Working examples and reference