Making a Terminal-Based UI Framework

I am making a terminal-based UI framework for the time-traveling debugger project. Here I share what I did so far with Huiqi.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : so i have this gui um
00:04 : that if i run it it creates a navigator
00:07 : class
00:07 : and it uses the navigator
00:11 : okay to say hey navigator can you do the
00:15 : step
00:15 : over for me can you do this step over
00:17 : backward for me and the navigator will
00:19 : do it
00:20 : um and and basically you can see the
00:22 : step over
00:23 : it's kind of complicated it does one
00:25 : query and if that doesn't work it does
00:27 : another query and if that doesn't work
00:29 : it does another query
00:30 : just in order to step over the step over
00:33 : backward is even more complicated
00:36 : and um i i wish it wasn't
00:39 : complicated but i this is the best idea
00:42 : i have so far
00:44 : um okay so so yeah you could potentially
00:48 : wire these up to your ui's you can do
00:50 : step
00:51 : uh over that way nice
00:54 : um okay but anyway the point of
00:58 : what i wanted to show you is i got some
01:00 : of the way there
01:01 : with this ui basically redoing what i
01:04 : did in javascript more or less
01:07 : but but also using the new data schema
01:10 : um i decided okay now i want to tackle
01:14 : the
01:15 : the tree display and also some other
01:19 : features
01:19 : like i want i want the source code i
01:22 : want to be able to
01:24 : click on a variable in the source code
01:27 : and then be able to show the value of
01:29 : that
01:30 : of the variable right either via like a
01:35 : little pop-up thing or just just in the
01:38 : other panel
01:39 : just jump to that variable so
01:42 : so that it's easy to um easy to navigate
01:46 : that way
01:47 : but that kind of requires more
01:50 : sophisticated
01:51 : ui elements and and
01:54 : like the tree thing i looked at your
01:56 : tree thing
01:59 : but i felt like it's it
02:02 : like it's not very it's very specific
02:08 : that use case and
02:11 : i felt like there was a better way to do
02:13 : it okay
02:14 : and i think you kind of have to
02:17 : go about it in a complicated way because
02:20 : we didn't have a ui framework
02:22 : that is true yes um so
02:25 : i uh and this is kind of the thing i've
02:27 : been thinking about
02:28 : and i didn't do it because
02:32 : i knew the ui framework can get
02:34 : complicated
02:36 : uh so i would been deferring it but i
02:38 : think maybe this is the time to do it so
02:40 : i
02:41 : i started on it on monday
02:45 : so oh i'll just show you a couple of
02:47 : example and i
02:48 : i was building this without access to
02:51 : the time traveling debugger
02:53 : unfortunately because at the current
02:56 : state it doesn't work
02:57 : i kind of broke it in the in all of this
03:00 : reconstruction work it's actually been
03:04 : very painful debugging some of these
03:06 : things
03:08 : uh but but okay this is a very simple
03:10 : example
03:11 : i have a label and a couple of buttons
03:15 : click on the button and then it changes
03:17 : the label
03:18 : nice why is it changing over oh i have i
03:23 : i have a log to help me debug so when
03:27 : when things happens it may spit out a
03:29 : log
03:30 : message over here in the other window
03:34 : the tree was kind of hard to build uh
03:37 : partly because things were hard to debug
03:42 : another example is this so in terms of
03:45 : layout so there's a so the way to
03:48 : do this kind of layout this concept that
03:51 : i
03:51 : implement is the concept of stretch
03:54 : i can give an element stretch
03:58 : at a property of stretch and you can
04:01 : stretch in the x direction or stretch
04:04 : in the y direction and that'll hold the
04:07 : framework
04:08 : or not the framework actually this is
04:11 : this is handled by the vertical panel
04:13 : and the horizontal panel
04:15 : okay let that perform layout so like
04:19 : so like this the first example here
04:23 : what we have so here
04:28 : this is a vertical
04:32 : vertical box okay
04:35 : and then but this this is a horizontal
04:38 : block
04:39 : a vertical panel and horizontal panel
04:41 : actually
04:42 : so a horizontal panel in vertical panel
04:45 : but right now the these
04:48 : elements do not have stretch so that
04:51 : it so it's like the amount of space
04:54 : given to the button
04:56 : is based on what the button thinks it
04:59 : needs
05:00 : okay based on the text that's on the
05:03 : button
05:04 : let's talk about render first um okay
05:07 : there's a lot of
05:08 : like building a ui framework is kind of
05:10 : complicated um i
05:11 : i tried this a couple of times and it
05:14 : usually gets to a level of
05:16 : complication that like ah there's a lot
05:19 : of problems here
05:20 : um okay and and then i forget about that
05:23 : project for a while
05:25 : but i have i still have a bunch of
05:27 : prototypes lying around
05:28 : one very difficult part is negotiate
05:32 : negotiation of sizes of things first of
05:35 : all
05:36 : your ui is composed of a tree so in this
05:39 : case
05:39 : is i have a v panel
05:43 : which contains a h panel
05:47 : which contains a i think this tree i put
05:51 : it in a v
05:52 : panel okay interesting reasons
05:56 : there's a tree and then the there's a
05:59 : tree and the tree has a label in it
06:03 : which has the string a in it
06:06 : and then and that the tree has children
06:14 : the tree has three child trees uh and
06:17 : then each each of the child trees have
06:19 : a label and so forth so basically it's a
06:23 : at the top level is structured as a tree
06:26 : very much like the dom and i imagine
06:29 : most
06:30 : most of the ui frameworks are done this
06:32 : way and then this
06:34 : d has more children inside it okay
06:37 : that says a couple more trees
06:40 : yeah and then the question is how do we
06:43 : figure out what
06:47 : what uh coordinates what dimensions
06:51 : each of these uh elements
06:54 : are gonna occupy on the screen
06:58 : that's the question that's the question
07:00 : right like how do i figure out that
07:03 : so it's the question like whether the
07:05 : parent has to
07:07 : figure out where how large they should
07:09 : be depend on the children
07:11 : or the children have to figure out how
07:13 : large they should be depending on the
07:15 : parent
07:16 : both right it's a negotiation process
07:19 : and that's the part quite difficult
07:22 : because
07:23 : don't click okay so this is more or less
07:26 : the ui tree i have you can think of it
07:29 : like a dom tree it's
07:30 : more or less the same thing it's really
07:33 : the same thing
07:34 : yeah um and
07:37 : but but now like in your browser your
07:41 : css engine or your rendering engine it
07:43 : has to figure this out
07:45 : but because i'm making this framework i
07:47 : have to write code to figure this out
07:50 : um right and the way i decided to do it
07:53 : is i have two separate phases
07:56 : i have the placement phase and then
07:59 : the draw phase the drawing okay
08:03 : uh the placement phase will
08:06 : walk the tree and figure out
08:09 : where each element should be on the
08:12 : screen
08:13 : and then the draw is walk the tree one
08:16 : more time
08:17 : tell each element to draw itself
08:20 : okay based on where we have already
08:23 : decided it is on the screen
08:25 : okay that makes sense and one of the
08:27 : things that makes the placement very
08:29 : difficult
08:30 : is because there's this two-way
08:34 : two-way negotiation that has to happen
08:38 : like for example these two buttons
08:41 : they know what size they want to be
08:45 : based on the amount of text they have
08:48 : right i'm sizing the button based on the
08:51 : text
08:52 : here right yep um so that means
08:56 : the the parent can't really tell
08:59 : the child what size it should be until
09:03 : consulting the child right
09:07 : so so how do you do that this but but
09:09 : then
09:10 : but then after the child after the
09:12 : parent consults the child
09:14 : what size it should be the parent
09:18 : also has to apparent sometimes the
09:21 : parent wants to override that
09:23 : maybe um in some cases maybe like the
09:26 : parent wants to say well actually i want
09:28 : you
09:29 : even though you say you only need this
09:32 : much
09:33 : i actually prefer you to stretch all the
09:35 : way out maybe
09:36 : oh right maybe the parent wants to say
09:39 : that
09:40 : and how do you do that each of my ui
09:43 : components
09:44 : or ui elements have to abide by
09:48 : this protocol uh that
09:51 : and one of the protocols is uh
09:55 : place that there's this place method
09:58 : each component
09:59 : is expected to have okay
10:02 : um so the framework is gonna call into
10:06 : your place method
10:07 : and then it's gonna tell you i want to
10:10 : place you
10:11 : here these x y coordinates
10:15 : and you can at most take up that
10:18 : much space and based on max width and
10:21 : max height
10:22 : okay i when i implemented stretch i
10:26 : added that as a parameter
10:28 : uh and the stretch tells you
10:31 : hey i want you to stretch to
10:34 : as much space as is allowed so
10:38 : when i want you to stretch and stretch
10:40 : can either be
10:41 : in the x direction the y direction or
10:44 : both
10:45 : okay yeah so this is the stretch
10:48 : so if you're stretching then i want you
10:51 : to take up
10:52 : sort of all of this space here
10:55 : okay that makes sense um
10:59 : and then um oh and also after the
11:02 : placement
11:03 : phase after i have called place on you
11:07 : i'm expecting this is part of the
11:10 : protocol
11:11 : you should have set your own x y
11:15 : width and height attributes like now now
11:18 : you should you should have these set
11:20 : correctly
11:22 : okay and then and then later on i can
11:25 : expect these to be present
11:28 : um in order to know where you are
11:31 : on the screen
11:34 : gotcha okay and this is a
11:38 : recursive method so if if your component
11:41 : has children
11:43 : then i expect you to recursively call
11:46 : place
11:47 : on your children where it makes sense to
11:49 : do so
11:51 : okay so how does so the max width
11:54 : and the max height has to do with
11:57 : the pair so the parent will provide you
11:59 : the max width and the max height
12:01 : yeah right okay at the very top level
12:05 : the the the framework is
12:08 : going to call into the root element and
12:11 : call place on it
12:13 : right and tell it your max width and max
12:16 : height
12:17 : is that is the screen's max the screen's
12:20 : width and height
12:22 : right so the structure is like we're
12:25 : gonna call
12:26 : we're gonna call place on this guy with
12:29 : the maximum
12:30 : space with the size of the screen and
12:33 : then i'm gonna expect this guy to call
12:35 : place
12:36 : on this and this guy is going to call
12:38 : plays on this
12:39 : et cetera and it goes through the entire
12:41 : tree
12:43 : if it's a very simple component like a
12:45 : label the place
12:47 : method for label it's saying
12:51 : okay whatever you say is the x y
12:54 : i'll set myself to that x y most of the
12:57 : time that is the case
12:59 : i can't think of a case where you just
13:01 : don't accept the x
13:03 : and y that you're given if i'm told to
13:06 : stretch
13:07 : as if i'm supposed to be stretching in
13:09 : the x direction
13:11 : then i'm just my width is just going to
13:13 : be the max width
13:15 : but if i'm not stretching then my width
13:18 : is the minimum
13:20 : between the max width and the length of
13:22 : my text
13:23 : okay gotcha yeah so if i
13:26 : that's that's why these buttons are that
13:30 : small
13:30 : it just fits to its text perfectly
13:33 : because is using that the length of my
13:36 : text
13:37 : and then here it's just saying yeah if
13:39 : i'm stretching
13:41 : in the y direction i'll take all of it
13:43 : but otherwise it's just one
13:45 : i'm just i'm not doing multi-line text
13:48 : yet
13:48 : the label is just okay so it's just
13:53 : and then and then this is a border so
13:56 : this border is like used for the border
13:59 : on this button
14:02 : so this border is saying uh well i have
14:05 : a content that's inside of me i'm gonna
14:08 : add that as my child
14:10 : okay um and then when
14:14 : i'm being placed i'm gonna say okay i'll
14:16 : just take the x
14:17 : and y as given and then i'll call place
14:20 : on my child my my content okay
14:23 : but i'm gonna give it a max width that's
14:26 : two less than my max width
14:28 : because i need to leave space for my
14:30 : border
14:31 : okay that makes sense and then this is
14:33 : same for the height
14:34 : so it's just gives its child less space
14:37 : than
14:38 : it has itself so it's there's space to
14:41 : draw the border
14:42 : and then uh and then my width is my
14:45 : contents with
14:46 : plus two yeah so these these are the
14:48 : simple cases
14:51 : and then the button uses um button
14:54 : uses the border actually the border is
14:57 : basically
14:58 : like a panel with a border yes
15:01 : i wanted it to be composable so
15:04 : that's the thing that's a style that i
15:06 : kind of like
15:07 : but i don't know if it ends up being
15:10 : practical or not
15:11 : yeah because if the other way is like oh
15:14 : a border panel will inherit from like a
15:17 : basic panel
15:18 : if you want to do it with inheritance
15:20 : yeah
15:22 : if you i think if you make a different
15:24 : panel
15:25 : um you just swap it in
15:29 : to yeah to where you're calling the pen
15:31 : calling the border
15:33 : if you make a different border you just
15:34 : swap in that one
15:36 : yeah yeah i think this is
15:40 : suitable for the composition because if
15:43 : you
15:43 : because your mind is like oh this ui is
15:45 : just a
15:46 : different uh combination of the blocks
15:50 : so you put the block so it's like very
15:53 : i guess straightforward in that sense to
15:55 : do the composition
15:57 : yeah yeah there i had some design goals
16:00 : in mind
16:00 : i would say my design goals are um i i
16:03 : decided to call this oui
16:05 : which in french it's we
16:09 : i thought that was cute um
16:13 : for sure but um one is yeah composition
16:17 : so so i i sort of
16:18 : implicitly banned inheritance
16:22 : okay i i just at one point in my career
16:25 : i decided because
16:26 : i hear things from the gang of war book
16:29 : and
16:29 : other and other people and also from my
16:32 : own experience
16:33 : of working with code based that
16:37 : are sort of in bad shape partially
16:40 : because of
16:41 : inheritance um at one point in my career
16:45 : i just decided to hey whenever i
16:47 : feel like using inheritance i'm gonna
16:49 : try to not do it
16:50 : like sort of take a take a diet from
16:53 : inheritance and i i think
16:57 : like at this point i feel like that's
16:59 : the right way to do it
17:00 : that's that's the good way to go so
17:04 : i'm just not going to use inheritance um
17:07 : however i've i've just seen most of the
17:11 : ui frameworks um
17:15 : probably exclude angular and react from
17:17 : that i think
17:18 : those are different but most of the
17:21 : desktop-based ui frameworks that i've
17:23 : seen use
17:24 : inheritance very pervasively
17:28 : so that's something i want to really
17:32 : avoid um another design goal is
17:36 : i want a small core like it's
17:40 : a simple small core i don't know if i
17:43 : can
17:43 : i can achieve that or not but so far
17:47 : is still small but i only been working
17:49 : on it for a couple days
17:51 : i want it to be like easy to
17:54 : understand like for that
17:58 : goes along with the simple small core i
18:00 : think so maybe these are the only two
18:03 : um so i don't know if
18:07 : i have achieved that or not some some of
18:10 : the
18:12 : some of the things about ui frameworks
18:14 : are
18:15 : just kind of hairy and and i haven't
18:18 : even gotten into
18:20 : like cursor focus and text input like
18:24 : typing in like you have text fields and
18:26 : you
18:28 : you can focus on the text field and type
18:30 : into them
18:31 : and maybe have a tab to go through the
18:34 : text fields
18:34 : i haven't gotten to that stuff yet that
18:37 : could get
18:38 : kind of complex um
18:41 : one of the one of the complex things
18:43 : i've done
18:44 : so far is the tree
18:47 : stuff and when oh yeah when you click on
18:51 : a tree
18:54 : um how to how to notify
18:58 : the screen to update and currently
19:01 : what i do is when you click on first oh
19:05 : there's the events there's the
19:09 : might not have time to keep going i have
19:12 : to go okay
19:13 : yeah but i guess like it's good that we
19:16 : have
19:17 : layouts covered maybe we can talk about
19:19 : event next time
19:21 : okay yeah let's do that