WEBVTT

00:00:00.600 --> 00:00:05.368
In this lesson, we will ask Python for a
value and display the returned Data.

00:00:05.548 --> 00:00:09.558
Then we will ask Python to build a detail
panel and return Source.

00:00:09.738 --> 00:00:14.414
We will compare a button click with a
reactive selection, watching the real
requests

00:00:14.414 --> 00:00:15.305
in the terminal.

00:00:17.120 --> 00:00:21.760
We start from the downloaded project, with a
simple Page and one price field.

00:00:21.940 --> 00:00:27.187
The data context is demo, and data Setter
initializes dot price to one hundred.

00:00:27.367 --> 00:00:31.911
The input uses a reactive pointer to that
value, just as in lesson two.

00:00:32.091 --> 00:00:35.111
Run Uvicorn with automatic reload enabled.

00:00:35.291 --> 00:00:37.843
Now open the local address in the browser.

00:00:38.023 --> 00:00:42.141
The price appears, but this page does not
call any calculation yet.

00:00:43.960 --> 00:00:48.859
Add the endpoint import, the button
declaration, a result display, and the
Python

00:00:48.859 --> 00:00:49.283
method.

00:00:55.259 --> 00:01:00.112
The endpoint decorator exposes with tax as a
method that returns Data.

00:01:00.292 --> 00:01:05.689
For this demonstration it multiplies the
supplied price by one point two two and

00:01:05.689 --> 00:01:07.376
returns a rounded number.

00:01:07.556 --> 00:01:13.210
The button declares data RPC, naming that
method and dot gross as the result path.

00:01:13.390 --> 00:01:18.447
The equals pointer reads the current price
when the call runs, without turning every

00:01:18.447 --> 00:01:20.012
input edit into a request.

00:01:20.192 --> 00:01:23.841
The heading reads dot gross through a normal
reactive pointer.

00:01:24.021 --> 00:01:28.917
We initialize that result to Not requested
yet, so the waiting state is explicit.

00:01:29.097 --> 00:01:33.822
Save the file, wait for automatic server
reload, then refresh the browser.

00:01:34.077 --> 00:01:38.652
The button and result heading are now
present, and no calculation has been

00:01:38.652 --> 00:01:39.270
requested.

00:01:41.080 --> 00:01:44.537
Keep the terminal visible and click
Calculate on the server.

00:01:44.717 --> 00:01:49.481
The server receives a request, returns one
hundred twenty-two, and the heading

00:01:49.481 --> 00:01:51.191
displays the new Data value.

00:01:51.371 --> 00:01:54.605
Change the price to two hundred without
clicking the button.

00:01:54.785 --> 00:01:59.924
The result remains one hundred twenty-two,
and no new calculation request appears.

00:02:00.104 --> 00:02:02.325
Click Calculate on the server again.

00:02:02.505 --> 00:02:07.107
The second response is two hundred forty-
four, read from the same Data path.

00:02:07.287 --> 00:02:11.393
The Python file has not changed, and we have
not reloaded the browser.

00:02:13.200 --> 00:02:17.829
Now add a product selector, a details
container, and a Python source method.

00:02:33.355 --> 00:02:36.832
The selection is stored at dot product,
starting with lamp.

00:02:37.012 --> 00:02:41.865
The details container calls dot remote with
product details as the method name.

00:02:42.045 --> 00:02:46.949
Its product parameter uses a caret pointer,
so a changed selection can request

00:02:46.949 --> 00:02:48.018
another fragment.

00:02:48.198 --> 00:02:53.188
The source decorator exposes a method that
receives a root for building interface

00:02:53.188 --> 00:02:53.742
elements.

00:02:53.922 --> 00:02:58.093
The lamp branch creates a heading and a
stock paragraph, while the other branch

00:02:58.093 --> 00:02:59.308
describes the notebook.

00:02:59.488 --> 00:03:04.233
This response is Source for the details
container, rather than a number written to a

00:03:04.233 --> 00:03:04.911
result path.

00:03:05.091 --> 00:03:09.262
Save the file, wait for automatic reload,
and refresh the browser.

00:03:10.290 --> 00:03:14.375
The initial lamp selection loads the Desk
lamp panel from Python.

00:03:16.160 --> 00:03:21.068
First click Calculate on the server to
restore a visible result of one hundred

00:03:21.068 --> 00:03:21.760
twenty-two.

00:03:21.940 --> 00:03:25.395
Now select Notebook and watch the request in
the terminal.

00:03:25.575 --> 00:03:30.456
The server returns new Source, and the
details panel shows Notebook with twelve in

00:03:30.456 --> 00:03:30.813
stock.

00:03:30.993 --> 00:03:34.980
The price, calculation button and returned
Data remain in place.

00:03:35.160 --> 00:03:36.773
Select Desk lamp again.

00:03:36.953 --> 00:03:41.155
The same container now shows the lamp
heading and three lamps in stock.

00:03:41.335 --> 00:03:46.452
Only the remote fragment changed; the Python
file and the rest of the page stayed in

00:03:46.452 --> 00:03:46.817
place.

00:03:48.600 --> 00:03:53.136
We used data RPC to receive a value and
store it at a Data path.

00:03:53.316 --> 00:03:57.775
We used dot remote to receive Source and
populate an interface container.

00:03:57.955 --> 00:04:02.475
The sampled price was read on a button
click, while the reactive product selection

00:04:02.475 --> 00:04:03.853
triggered a new fragment.

00:04:04.033 --> 00:04:08.963
These examples need the running Python
server; the exposed endpoint and source

00:04:08.963 --> 00:04:11.745
methods are part of that server application.

00:04:11.925 --> 00:04:16.866
This completes the five orientation lessons;
continue with the full course to

00:04:16.866 --> 00:04:18.984
develop these ideas step by step.