WEBVTT

00:00:00.600 --> 00:00:04.237
In this lesson, we will make our welcome
page react to Data.

00:00:04.417 --> 00:00:09.379
We will replace fixed text with a pointer,
then use inputs to change the message and

00:00:09.379 --> 00:00:10.029
its colour.

00:00:10.209 --> 00:00:15.157
Finally, we will arrange the page in a
border container and add name, email and

00:00:15.157 --> 00:00:16.159
quantity fields.

00:00:16.339 --> 00:00:20.888
We will write each change, save it, and
refresh the browser before trying it.

00:00:22.680 --> 00:00:27.839
Open the orientation example project from
the lesson download in your activated

00:00:27.839 --> 00:00:29.079
Python environment.

00:00:29.259 --> 00:00:33.601
Its host already registers the published
layout components we will use.

00:00:33.781 --> 00:00:36.781
The Page is the welcome greeting from lesson
one.

00:00:36.961 --> 00:00:41.120
Start Uvicorn with app colon application and
dash dash reload.

00:00:41.300 --> 00:00:43.671
Open its local address in the browser.

00:00:43.851 --> 00:00:46.457
We will keep this server running throughout
the lesson.

00:00:48.240 --> 00:00:50.674
First, give the message a place in Data.

00:00:54.569 --> 00:00:59.560
Type data Setter with the literal path demo
dot message and its initial value.

00:00:59.740 --> 00:01:03.803
In the heading, replace the fixed greeting
with caret demo dot message.

00:01:03.983 --> 00:01:07.790
The caret makes this a reactive pointer to
the value at that path.

00:01:07.970 --> 00:01:11.340
We have only edited the file; the browser
has not changed.

00:01:11.520 --> 00:01:15.556
Save, wait for Uvicorn to reload, then
refresh the browser.

00:01:18.953 --> 00:01:22.986
The greeting looks the same, but its
declaration now follows Data.

00:01:24.800 --> 00:01:28.002
Add a label containing a text input below
the heading.

00:01:28.613 --> 00:01:33.488
Bind its value to the same caret demo dot
message, and enable live editing.

00:01:33.668 --> 00:01:36.453
The label gives the field its visible name.

00:01:36.633 --> 00:01:40.920
Save the file and refresh the browser after
automatic server reload.

00:01:43.624 --> 00:01:46.313
Now type Hello, Ada in the Message field.

00:01:46.493 --> 00:01:50.345
Each keystroke changes Data, and the heading
follows immediately.

00:01:50.525 --> 00:01:55.227
No file save or browser reload is needed
when editing a live input.

00:01:55.407 --> 00:01:58.077
Both elements follow the same Data value.

00:01:59.880 --> 00:02:03.199
Now add a Data value for colour, starting
with steelblue.

00:02:09.506 --> 00:02:14.383
Bind the heading colour attribute to caret
demo dot color, and add a Colour input

00:02:14.383 --> 00:02:15.767
using the same pointer.

00:02:15.947 --> 00:02:19.582
Save, wait for server reload, and refresh
the browser.

00:02:22.902 --> 00:02:24.878
Type crimson in the Colour field.

00:02:25.058 --> 00:02:28.132
The title changes colour while its text
stays the same.

00:02:28.312 --> 00:02:32.771
Type Hello, Ada in the Message field, then
change the colour to seagreen.

00:02:32.951 --> 00:02:37.206
A pointer can drive the content of an
element or one of its attributes.

00:02:37.386 --> 00:02:40.979
The Python file has not changed during these
input edits.

00:02:42.760 --> 00:02:47.144
Keep the Data declarations and arrange the
interface in a border container.

00:03:04.812 --> 00:03:08.503
Give it a fixed height, then add a top
content pane for the heading.

00:03:08.683 --> 00:03:13.415
Put the two existing inputs in a left
content pane, and add a centre pane for the

00:03:13.415 --> 00:03:13.707
form.

00:03:13.887 --> 00:03:16.141
Their pointers stay exactly the same.

00:03:16.321 --> 00:03:20.105
Save, wait for automatic reload, and refresh
the browser.

00:03:22.685 --> 00:03:27.176
Now the heading is at the top, settings are
on the left, and the centre has space

00:03:27.176 --> 00:03:28.008
for our fields.

00:03:28.188 --> 00:03:31.067
Move the divider to resize the settings
area.

00:03:31.247 --> 00:03:35.982
The container organizes space; the pointers
still connect controls to Data.

00:03:37.800 --> 00:03:42.015
Initialize three more Data values: name,
email and quantity.

00:04:01.883 --> 00:04:07.066
Add a labelled input for each value in the
centre pane, using explicit paths in the

00:04:07.066 --> 00:04:07.940
person branch.

00:04:08.120 --> 00:04:10.266
The quantity input has type number.

00:04:10.446 --> 00:04:14.105
Save the file and refresh after automatic
server reload.

00:04:23.478 --> 00:04:28.893
Change the name to Grace, the email to grace
at example dot com, and the quantity to

00:04:28.893 --> 00:04:29.280
three.

00:04:29.460 --> 00:04:33.481
Then change the message to Welcome, Grace
and the colour to crimson.

00:04:35.580 --> 00:04:38.823
The original bindings still work inside the
new layout.

00:04:39.003 --> 00:04:42.953
We now have a small workspace with
independent values in Data.

00:04:44.760 --> 00:04:50.042
We initialized Data with data Setter and
connected declarations to it with reactive

00:04:50.042 --> 00:04:50.615
pointers.

00:04:50.795 --> 00:04:55.267
We changed text and colour through live
inputs, without manually updating the

00:04:55.267 --> 00:04:55.732
heading.

00:04:55.912 --> 00:05:00.855
Then we arranged the controls in a border
container and added fields with their own

00:05:00.855 --> 00:05:01.212
paths.

00:05:01.392 --> 00:05:06.683
Source edits required saving and refreshing;
input edits changed Data immediately.

00:05:06.863 --> 00:05:11.525
In the next lesson, the Inspector will let
us explore Data and Source directly.