How GUIs Work 2: Components

This is the second episode in the "How GUIs Work" series. We talk about UI components, their hierarchical tree structure, and show a couple of example programs that demonstrate this structure. We also, talk about XML-based UI frameworks and mention a few examples of those in the industry.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : one of the biggest reasons for building
00:02 : a framework is because i did try doing
00:05 : this without a ui framework
00:08 : uh
00:08 : the last version of the debugger was
00:11 : written without a ui framework where i
00:14 : literally just
00:15 : drew lines and drew text
00:18 : and then that worked up to a point
00:20 : in complexity
00:22 : and then when i tried to tackle building
00:25 : a tree ui i said wow that's getting too
00:28 : hard i
00:29 : probably want a ui framework at this
00:31 : point i need ui components that can have
00:34 : a parent-child relationship like that's
00:37 : an important aspect of the tree layout
00:41 : is dynamic dynamic layout
00:44 : as in you you can expand and collapse
00:47 : the tree
00:48 : some components can go away or be hidden
00:52 : and then when that happens you need a
00:54 : layout of a particular section to change
00:58 : maybe maybe that that component has
01:01 : another component under it so when the
01:03 : first component disappears the component
01:06 : that's under it should move up
01:09 : to take over the space that used to be
01:12 : there right and and and just this the
01:15 : composability when i say component you
01:18 : know we haven't defined what component
01:20 : means it's just a logical part of the
01:22 : screen sidebar
01:25 : maybe this status over here it is a
01:28 : panel maybe there's a
01:30 : scroll bar here
01:33 : another scroll bar
01:35 : and there's some text here
01:37 : so
01:39 : so each rectangle could conceivably be a
01:42 : component the idea of the component is
01:45 : you can
01:46 : first of all you it can be related to
01:49 : its parent or child how do you define
01:52 : like how do you decide okay this is
01:54 : somebody's parent because yeah you can
01:57 : draw a tree but dad's parent child is
01:59 : reading the tree right
02:01 : you just see a ui you don't
02:04 : have an idea of a tree so what
02:07 : what
02:08 : made you make the decision of hey this
02:10 : is this thing's child
02:13 : okay because in a tree your child is
02:16 : rendered under you
02:18 : right
02:19 : but
02:20 : wonder inside you so that's different
02:22 : like when you see parent-child
02:23 : relationships yes
02:26 : you make the decision uh yep that's a
02:28 : good point i'm mostly stealing from the
02:30 : dom but i know a lot of other frameworks
02:33 : work like that as well so i can probably
02:36 : generalize i made it simpler for myself
02:40 : by saying a child's
02:42 : must be
02:43 : contained by a parent layout life
02:47 : yeah layout wise so so that means
02:50 : you can't have a parent like this and
02:53 : have a child that goes outside the
02:55 : parent that that is not allowed in my
02:57 : framework i know in dom that is allowed
03:00 : like you can use absolute positioning to
03:02 : achieve this
03:04 : but my
03:05 : framework does not allow it and i made
03:08 : that choice to simplify my life
03:11 : when it comes to event handling
03:13 : delivering a mouse event to a component
03:16 : that's probably the main case when it's
03:18 : easier for me to deal with in terms of
03:21 : like a ui tree here's the top level tree
03:25 : i can i can adhere to this rule down
03:28 : here
03:29 : if i lay it out as the first node is
03:33 : that
03:34 : [Music]
03:36 : this inner node is that
03:38 : and
03:40 : that
03:40 : and that
03:43 : and now i have that so you translate the
03:46 : tree parent child relationship to a
03:49 : layout parent child relationship yep
03:52 : you could look at the layout as or maybe
03:54 : the positioning of each component as
03:57 : just a property or an attribute of the
04:00 : components themselves so this guy here
04:03 : can be represented as i could have like
04:07 : a root which is this guy and then
04:11 : child
04:12 : one grandchild so this this is my tree
04:17 : structure i just built some objects that
04:20 : have this this structure here and then
04:22 : this tree of objects can have these
04:25 : corresponding locations on the screen
04:28 : when i when i decide what's going to be
04:31 : the position and size of each node in
04:35 : this tree i can just set it like root
04:38 : that position is blah blah blah two
04:40 : numbers
04:41 : child1.position
04:42 : and they will also have to have a size
04:45 : rootnode.size
04:46 : is this
04:48 : child1.size
04:49 : and
04:50 : once they have a position and a size
04:54 : then they can basically be mapped to to
04:56 : this drawing surface as to where they
04:59 : should show up on the screen we won't
05:01 : talk about layout this time we're
05:03 : running out of time but i'll just show
05:05 : briefly just do this simple example so
05:09 : this is a simple example of a ui built
05:12 : using my ui system so first of all i
05:16 : have a v box vbox is a vertical box that
05:19 : just lays out things
05:22 : vertically uh we're gonna we have some
05:25 : listeners i make a text label and then
05:29 : add it to my v my panel which i call the
05:32 : v box maybe i make it less confusing
05:34 : just call this the v box
05:37 : okay i added i add the label to my v box
05:40 : this is a button even though it's a text
05:42 : i'm using the text as a button because
05:44 : similar to the dom any element can
05:47 : receive event so i don't really care to
05:49 : make a specific button element add that
05:52 : to the v box i have another button added
05:54 : to the v box and at the bottom i have a
05:57 : quit label
05:59 : [Music]
06:02 : this is called simple example if i click
06:04 : here say it's nice you click you click
06:07 : don't click you said it you still click
06:11 : and then you can press q to quit out of
06:14 : the program and now let's go into the
06:16 : debugger
06:24 : okay this is the python module loader
06:28 : okay so this is our code here
06:30 : what i want to show here is how the
06:32 : structure the tree structure is built up
06:35 : here when i make a v box
06:39 : here's the v box
06:42 : at the moment the v box has no size
06:46 : it has no region region is the thing you
06:48 : draw with
06:50 : um and then it also has no children
06:52 : um we we're gonna make a text
06:56 : oh i called it label
06:58 : but where is that
07:00 : that might be a bug i don't see label
07:03 : uh there might be a bug so i might have
07:05 : to look into that but in any case after
07:07 : after i uh added the label to the v box
07:11 : now i have some children inside the v
07:13 : box
07:14 : and that's this label here
07:17 : um and then i add another child and then
07:20 : my vibe got a second child so that now
07:23 : has two children again another one has
07:26 : four children now
07:28 : and one more it has three children so at
07:30 : the end we have a very shallow tree a
07:33 : tree it has one parent and four children
07:35 : so so this is the ui component structure
07:38 : it's just a tree
07:40 : interesting this is sim the the api is
07:42 : similar to the widow called qt
07:46 : qt has like a box and then you can do
07:49 : like add whatever i try out or something
07:52 : like that
07:53 : yeah i'll show you a qt program just to
07:56 : show okay this is a cutie to-do list
07:59 : that i made
08:01 : um
08:08 : i guess i i think i might have
08:11 : inadvertently stole a lot of terms from
08:13 : qt because they also have a hbox and a v
08:16 : box
08:19 : the hbox and vbox are layout objects
08:22 : which are not totally the same as
08:24 : components
08:25 : but that's okay but yeah so they have
08:28 : you make a text field is called a line
08:31 : edit
08:32 : so you make a line edit and then a
08:34 : button is called a push button so you
08:36 : make a button
08:37 : and then you add the buttons to
08:41 : you use the add widget method to add it
08:44 : to a layout
08:46 : if you're using a layout
08:48 : you can not use a layout in which case
08:51 : you're doing absolute positioning
08:54 : but i definitely prefer doing a layout
08:56 : when you do a layout then you have to
08:58 : say
09:00 : set my layout to be this layout
09:03 : so they treat layouts differently from
09:06 : components whereas
09:07 : in mine a layout is just another
09:10 : component that just happens to have
09:12 : child components in it
09:14 : well in this case you can also have
09:16 : layouts within
09:18 : [Music]
09:19 : so what's the why do you think it does
09:21 : not sheet layout as a component
09:24 : i don't know that's just a design
09:25 : decision that they made so basically i
09:28 : have a vertical box and then
09:31 : a i have a horizontal box
09:35 : and then i have a text field
09:37 : and then i have a button over here
09:40 : right so the difference and then i have
09:42 : a list
09:43 : so the difference that qt makes between
09:45 : layout and widget is widget cannot have
09:48 : children i guess
09:49 : no that's not true a widget can have
09:51 : children they just decided that layout
09:54 : is a should be a lighter weight thing
09:57 : maybe
09:58 : than a full widget whereas i decided
10:02 : it's just the same thing but yeah but i
10:04 : just wanted to show you like it's pretty
10:07 : similar to qt in some respects what what
10:10 : do you think uh between like how you
10:13 : build layouts uh like this versus like
10:16 : the dom which has like html as template
10:20 : so basically in html you define this
10:22 : kind of xml
10:24 : format to add children but in here like
10:27 : you add children by like calling a
10:29 : message so what do you think the the
10:32 : advantages of each way
10:35 : in html you would probably say hey
10:39 : vbox
10:41 : or
10:42 : sudo html yeah
10:48 : or this would be xml i guess
10:51 : or like uh
10:52 : or it could be react this this could
10:54 : look like i thought
10:56 : it's just xml format
10:59 : so yeah
11:01 : this is xml format
11:03 : this is a this is a nice feature for
11:07 : frameworks that have this feature this
11:09 : is really nice
11:10 : because
11:11 : this is an outline just visually it's
11:14 : much easier to see the structure of
11:17 : the thing
11:19 : versus this
11:21 : [Music]
11:22 : yeah i think this is just a really nice
11:24 : feature to have
11:26 : it doesn't change what the framework
11:29 : needs to do it's just like a nice little
11:31 : layer on top of what the framework
11:34 : already provides that that you can write
11:36 : code in this way and then have that get
11:39 : translated into this maybe
11:42 : and also like you can actually change
11:45 : this in your code so it's like
11:49 : it's like the logic is kind of separated
11:51 : like okay you have this uh parent-child
11:53 : relationship defined in the html but in
11:57 : the script you can actually just add
12:00 : a component to it if you want to so it's
12:03 : like
12:04 : the html you see might not be what
12:08 : actually there because except is kind of
12:11 : separated
12:12 : you can mutate it and then this is not
12:15 : the truthful
12:17 : picture anymore well i mean you might
12:19 : you might have like if statements
12:22 : like angular
12:25 : yeah ngf
12:27 : and and then this might hide or show
12:30 : so that that captures somewhat captures
12:33 : the dynamic nature but yeah um
12:36 : this this layer is very interesting as
12:39 : well i would say or or any kind of
12:41 : effort to try to make the ui programming
12:45 : more declarative i haven't gone there
12:48 : with mine because
12:50 : that's more of like a
12:52 : nice to have
12:54 : um right now i'm just working on the
12:56 : necessities and and there's our
12:58 : different approaches to achieving this
13:00 : like angular achieves this differently
13:03 : than react then they have the same goal
13:06 : but they have different implementations
13:09 : but outside of the web
13:11 : microsoft has this thing called xaml
13:14 : which is basically the same kind of deal
13:17 : where you write
13:18 : xml to represent yeah this is xaml and i
13:23 : i think the firefox team
13:25 : has a thing called
13:27 : uh
13:29 : is it xul or something oh zul
13:34 : they might have deleted them
13:36 : from everywhere because they
13:39 : oh it's a pendant project that's very
13:42 : much abandoned
13:45 : yes see i know that you can't erase it
13:49 : from history i know it
13:52 : i know
13:54 : mozilla just trying to erase their past
13:57 : you cannot do that on the internet okay
14:00 : i know it exists
14:02 : yeah this is the zuul that this is this
14:05 : is how uh
14:07 : firefox used to be built
14:10 : mm-hmm but they probably have changed it
14:13 : so yes the different people have came up
14:15 : with this concept
14:17 : it's very much prevalent
14:23 : it's peter there is no dana there is
14:26 : only a zoo