Bind the presentation

Change the color to update the readonly field. Presentation attributes can observe data, just like values.

Try both versions. Each result has its own datastore. Reload the page to reset.

Python

Built from Python

Python recipe

from gramlot.page import WebPage


class Page(WebPage):
    """Change the color to update the readonly field. Presentation attributes can observe data, just like values."""

    def main(self, root):
        pane = root.div(datapath="presentation")
        pane.data('.color', '#1643c5')
        pane.textBox(value='^.color', lbl='Text color (CSS)', updateOn='input', lbl_position='TL', width='100%')
        pane.textBox(value='Hello world', lbl='Preview', readonly=True, color='^.color', font_size='28px', lbl_position='TL', width='100%', margin_top='18px')
        pane.p('Try tomato, seagreen or a hexadecimal color.')

JavaScript

Built in the browser

JavaScript recipe

export function build(root) {
  const pane = root.div({datapath: "presentation"});
  pane.data(".color", "#1643c5");
  pane.textBox({"value": "^.color", "lbl": "Text color (CSS)", "updateOn": "input", "lbl_position": "TL", "width": "100%"});
  pane.textBox({"value": "Hello world", "lbl": "Preview", "readonly": true, "color": "^.color", "font_size": "28px", "lbl_position": "TL", "width": "100%", "margin_top": "18px"});
  pane.p("Try tomato, seagreen or a hexadecimal color.");
}

Python builds the recipe before publication. JavaScript builds it in the browser. The same Gramlot runtime renders both. These examples need no application server.