WEBVTT

1
00:00:00.000 --> 00:00:01.477
In this walkthrough,

2
00:00:01.477 --> 00:00:04.135
we’ll inspect Fruitful’s components,

3
00:00:04.135 --> 00:00:07.457
follow their data back to a captured website,

4
00:00:07.457 --> 00:00:10.263
and explore the catalog behind the UI.

5
00:00:10.278 --> 00:00:14.641
First, enable Developer mode in Settings, under Account.

6
00:00:14.641 --> 00:00:17.523
This preference stays on your device.

7
00:00:19.137 --> 00:00:23.582
Back in the Inbox, open DevTools and choose the picker.

8
00:00:23.582 --> 00:00:26.087
Let’s inspect these 131 points.

9
00:00:26.087 --> 00:00:28.512
We can see the Text component,

10
00:00:28.512 --> 00:00:31.583
its layout, and the data path it uses.

11
00:00:33.035 --> 00:00:36.882
The Inbox and Source details use the same View value.

12
00:00:36.882 --> 00:00:38.479
When both are visible,

13
00:00:38.479 --> 00:00:41.673
DevTools highlights both uses for this item.

14
00:00:42.690 --> 00:00:47.430
Inspect View value shows the original data and its Lexicon

15
00:00:47.430 --> 00:00:50.046
definition: an optional integer,

16
00:00:50.046 --> 00:00:51.926
with a minimum of zero.

17
00:00:51.926 --> 00:00:56.993
Validation uses the exact Lexicon version locked to this item.

18
00:00:57.486 --> 00:01:02.167
Open Source to follow that value into the saved capture.

19
00:01:02.167 --> 00:01:05.511
The entry and its score are highlighted.

20
00:01:05.511 --> 00:01:08.604
The package turned the captured text,

21
00:01:08.604 --> 00:01:11.279
131 points, into the number 131.

22
00:01:11.789 --> 00:01:15.927
Once we’re on an item, its captured fields are right here.

23
00:01:15.927 --> 00:01:19.352
Choose the title, or pick a field in the replay.

24
00:01:19.352 --> 00:01:22.563
Its View consumers connect us back to the UI.

25
00:01:24.017 --> 00:01:27.446
The arrows browse other entries in this capture.

26
00:01:27.446 --> 00:01:32.162
The Inbox follows a different item only when you explicitly choose

27
00:01:32.162 --> 00:01:34.234
its associated Activity item.

28
00:01:35.702 --> 00:01:38.923
To explore the components behind this UI,

29
00:01:38.923 --> 00:01:42.616
return to Inspect and open Text in the catalog.

30
00:01:42.616 --> 00:01:47.173
Composer opens a full workspace, without creating a draft.

31
00:01:48.164 --> 00:01:50.750
Each component has a live example,

32
00:01:50.750 --> 00:01:55.009
usage JSON and a property table from Fruitful’s catalog.

33
00:01:55.009 --> 00:01:59.269
Select Row to see how it arranges children horizontally,

34
00:01:59.269 --> 00:02:02.235
and which alignment options it accepts.

35
00:02:02.728 --> 00:02:05.478
Column arranges children vertically.

36
00:02:05.478 --> 00:02:10.137
These examples use the same catalog and renderer as Fruitful.

37
00:02:10.137 --> 00:02:14.567
Try inspecting an item and exploring its components in the

38
00:02:14.567 --> 00:02:16.706
interactive workspace below.