WEBVTT

00:00:00.600 --> 00:00:04.291
In this lesson we will explore the running
page with the Inspector.

00:00:04.471 --> 00:00:09.282
First, we will distinguish Data from Source,
and a node value from its attributes.

00:00:09.462 --> 00:00:13.748
Then we will create an element, drag it to
another container, and change its

00:00:13.748 --> 00:00:14.368
appearance.

00:00:14.548 --> 00:00:18.942
Every change will appear alongside the
Inspector, in the actual browser.

00:00:20.760 --> 00:00:25.348
We continue with the border container and
fields from lesson two, using the

00:00:25.348 --> 00:00:27.245
downloadable Inspector example.

00:00:27.425 --> 00:00:32.495
It adds a notes section and readable Source
labels, so we can identify the elements

00:00:32.495 --> 00:00:33.228
in the tree.

00:00:33.408 --> 00:00:38.669
The optional Inspector is installed in the
tools folder; the downloaded development

00:00:38.669 --> 00:00:41.141
host provides an Open Inspector button.

00:00:41.321 --> 00:00:43.640
Start Uvicorn with automatic reload.

00:00:43.820 --> 00:00:46.073
Open the local address in the browser.

00:00:46.721 --> 00:00:48.548
Now click Open Inspector.

00:00:48.728 --> 00:00:53.347
The Inspector is enlarged on the left, while
the same running page stays on the

00:00:53.347 --> 00:00:53.698
right.

00:00:55.480 --> 00:00:59.043
Select the Data tab, expand demo, and select
message.

00:00:59.223 --> 00:01:03.724
This node has a value, Welcome to Gramlot,
and a named attribute, note.

00:01:03.904 --> 00:01:08.106
The value supplies the heading and the
message input, through their pointers.

00:01:08.286 --> 00:01:12.189
Type Hello from Inspector in Value, then
press Enter to confirm.

00:01:13.306 --> 00:01:18.350
The heading and input now show the new
value, without saving Python or reloading
the

00:01:18.350 --> 00:01:18.831
browser.

00:01:20.640 --> 00:01:22.798
Keep the same Data node selected.

00:01:22.978 --> 00:01:27.894
The note field is an attribute attached to
this node, not another copy of its value.

00:01:28.074 --> 00:01:32.209
Change that attribute to Metadata, not the
greeting, and press Enter.

00:01:32.952 --> 00:01:36.877
The note has changed, but the heading still
says Hello from Inspector.

00:01:37.057 --> 00:01:41.088
Our heading reads the node value; it does
not read the note attribute.

00:01:42.880 --> 00:01:44.136
Switch to Source.

00:01:44.316 --> 00:01:48.218
Expand main, page, layout, and header; then
select greeting.

00:01:48.398 --> 00:01:53.391
The value here is the pointer, caret demo
dot message, rather than the text it

00:01:53.391 --> 00:01:54.159
resolves to.

00:01:54.339 --> 00:01:59.085
The attributes describe the element: its
tag, colour binding, and margin.

00:01:59.265 --> 00:02:04.257
Data supplies the changing values, while
Source describes the interface that uses

00:02:04.257 --> 00:02:04.565
them.

00:02:06.360 --> 00:02:09.029
Select page and use Add child element.

00:02:09.209 --> 00:02:12.462
Choose the HTML tag p and confirm Add.

00:02:12.642 --> 00:02:16.908
Select the new paragraph and set its value
to Created in the Inspector.

00:02:17.088 --> 00:02:18.155
Press Enter.

00:02:18.335 --> 00:02:20.651
The paragraph appears in the running page.

00:02:20.831 --> 00:02:25.597
We changed Source, and the renderer created
the element without a browser refresh.

00:02:27.673 --> 00:02:30.632
Drag the paragraph node onto notes in the
Source tree.

00:02:31.641 --> 00:02:34.823
The paragraph is now inside the green Notes
section.

00:02:35.003 --> 00:02:39.492
Its position in the Source tree determines
where it belongs in the interface.

00:02:39.672 --> 00:02:43.021
We moved the declaration, and the rendered
element followed.

00:02:44.840 --> 00:02:48.136
Select the moved paragraph and choose Add
attribute.

00:02:48.316 --> 00:02:50.046
Name the attribute style.

00:02:50.226 --> 00:02:55.710
Enter color, colon, crimson, semicolon, font
weight, colon, bold, then press Enter.

00:02:55.890 --> 00:02:58.687
The same paragraph is now crimson and bold.

00:02:58.867 --> 00:03:03.666
Its value still supplies the text; the style
attribute changes its appearance.

00:03:05.480 --> 00:03:10.278
We have explored Data and Source, and
distinguished node values from attributes.

00:03:10.458 --> 00:03:14.452
We have changed a greeting, created an
element, moved it, and changed its

00:03:14.452 --> 00:03:15.054
appearance.

00:03:15.234 --> 00:03:19.757
The interface follows Source, with reactive
pointers connecting it to Data.

00:03:19.937 --> 00:03:24.331
These edits changed the running stores; they
did not rewrite the Python file.

00:03:24.511 --> 00:03:29.695
To keep the result after a reload, put the
corresponding declarations into the saved

00:03:29.695 --> 00:03:30.003
Page.