 All right, I think we're we got it to work is green Perfect. Is that set that's Seth? How you doing man? I there's so many buttons here. I don't even know what to push Good grief Hey, did you say a blade last night for any reason I I did a little I I Know I went to sleep I went to sleep early, but I woke up at 3 a.m. Boston time to go to go buy this stuff I went I went to bed at 12. I stayed up until 12 o'clock one You know, but I don't know Did you did you did you happen to purchase what you needed to purchase? I believe I did because they I actually Pre went on there and then got everything set up and like I was good to go So the iPhone fairy came by last night. Yeah, are you can use your mic closer? My mic's over here. Hey, Miguel. How's it going? It's Javier Hello, Javier. How's it going good? So which which size did you did you get the code? Did you go for the 512 or did you Keep it reasonable No 512 X says like an Apple watch for LTE Cheap in closing Nice Yeah, I looked at my because I have the I have the 10 and I'm not even using half of the memory that I have and I'm just like You know what? I Don't need the big one. So I got the iPhone Xs Max Something like I don't did one of our marketing guys go over to Apple and start naming things over there Yep, I agree. I agree that it happened. No, I did I did the same thing that you did I looked at my storage and the problem is that I have 256 Right, but I only have 20 gigs left free space. Oh You may well reach my limit. I've reached my limit fan fantastic. All right, so I Want to get into what you're talking about today because I saw this project. I don't know you told me I don't remember when I saw you but you were like in my copious amounts of free time. I decided oh, sorry I'm too loud. Someone's like their ears. I know I know I'm so loud. I'm sorry. How do we turn me down? Mike number two. I'll move away. I'll move away. Thank you Okay, so you said in your copious amounts of time That am I too loud? Oh, they sound way too loud. Gosh. You guys know me, right? Yeah You said in your copious amounts of time you spend some time building something and that's what you're talking about today. Is that right? It's one of the things I'm gonna I'm gonna talk about five things and that's gonna be one of them So can we turn his audio up to and turn my audio down? Okay, he's figuring it out. Okay. Okay Yeah, I'm not yelling. This is my normal voice Like you've never seen me on the television before I was on cops once Javier but my face was blurred out and I was in the back of the car. I was yelling at that time Thank you. Yeah, so I'll I'll I'll go a little bit less loud But we're gonna turn the time over to Miguel to talk a little about retro.net You're up, buddy All right Hello, everybody. My name is Miguel de casa and and today I'm gonna be talking about retro.net, which is a collection of Of schools that help you build great local applications So some of you might not know this Are we live? Yeah, we're still going buddy We can still see you. No, we are we are you can see us. Oh, yeah But this is being broadcast that's a question Yes, you are still being broadcast everyone's loving what you're doing Okay, so anyways, I want to talk to you about retro.net and you know as I've spent a lot of my life working on on unix and And even even despite the fact that I worked on the linux desktop and I work on mobile applications The console is still the place where I do most of my work And and over the years I had to write a lot of little apps On the console and you know, I keep working on the console. This is my file manager. What you see in the screen This is still the way that I that I work every day so Uh, let me tell you let me show you. Let me tell you what I wanted. So Today I want to cover a couple of libraries that I built Or that my team has built that helped you build good Developer experiences and I also want to tell you how you can practice applications into To something that you can use as a tool in your system. So let me start there. So first off I want to talk about three three components Like I said, there's three pillars. The first one is writing tools that that integrate with the environment There's the windows or unix and And that starts parsing command line arguments. That's the first piece The second piece is going to be once you have one of the tools sometimes Active tool, uh, not a full best, but you're not not full application, but something Like a shell. So we'll talk about that I talked about building GUI applications or terminal history spaces on the console. So let's get started with command line parsing so, uh, this is my go-to library that I use for, uh, Building command line applications and the idea is you write a line tool You want one of the most common tasks is parsing the arguments The arguments that are passed as the string array art to your main And uh, you want to integrate properly with the environment and that means, uh, you know These days the convention on unix is dash And a letter short option and space and an optional parameter Or dash dash for a long option Name equals and the value and any other very thing. So instead of having everybody And this over and over for this little library called mono.options It is not linked to mono. You can use it on on dotnet framework dotnet core, uh, mono and uh, and it's available as a new Yet, but also Something that is very interesting. This is a library that is implemented in a single file So you don't need to use it. If you don't want to you can just also Use your file That's a couple of things that this ever does. Um, so this is uh, this is uh, I extracted this out of a little that I wrote recently Which is a implementation of netgap. It's just a little program that takes its standard input and sends it over the net Or can get data out of the network and send it to snap out And uh, and in this particular case, um This is how you define the option. So let's walk through a couple of samples. Uh, the first line says that Finds option four that means that you can pass the option dash four to your application and And you can invoke this little method in particular in this lambda here and all this does at this point Is set the variable this building value ipv4 to true Right, so these are the way that you define what happens This option will pass so you can do any arbitrary thing there Let's go to the fourth line on the fourth line You see that there's uh, there's a little l and then the pipe operator and then listener What these does is it defines two possible ways of equipping this up Either with a short right with a single grammar dash l or passing dash dash listener, right? So in this case, it would accept those two options Uh, you can also notice here that all of these options This is a string that will be used You need to get help right so when you vote it and then you request some help we automatically generate that list of options Now the next line that is also interesting I want you to look at it it has this syntax And and then the pipe operator port equals and what this means is it's telling mono options is parameter This this option takes a parameter, right the way that I described it before so And and the rest are just other things that are just Right, uh, but these are effectively the ways that define Now there's a lot more power but And this is an actual invocation of the application and you can see how this is used Uh, this particular case, right? You see the dash six short option dash p and then a space 3000 again a short option Uh, then you see dash dash psk equals secret. This is the the format they use for a long option dash t that meant please use tls and then you have these additional strings www.microsoft.com htps Are not linked to any options. So those are we'll get to that in a second Those are past those are returned from the parsing library to your application The second line shows a different way of invoking something very similar Again, it shows the use of a long The long options dash dash port equals 3000 which is equivalent to dash p And dash dash tls which is equivalent to dash t So uh, now i'm going to show you, um, how this works So what you do is you call the parse method on the options and you pass the arguments that you received in the command line And the return is an i innumerable Springs and and this is the uh And this is everything that was not parsed as an option Uh, and in this case, I just happened to have implemented the convention that The first parameter is the hostname and second parameter support Uh, I am choosing in this particular case to default the user does not provide a The second parameter I make the default the http. That's what you see in case one Uh, and if you don't provide those two arguments, which are kind of mandatory I show the help right then we'll get that in a second Um, but this is basically the way that you build this command line So when you run this thing, um, if you want to show the help you invoke this method write option descriptions You pass a a Output value right in this case. In this case. I want to send it to the console dot here And this is what it looks like so when you invoke this, uh, when you invoke The the command with no arguments essentially we say hey, this is an error So we display to the user a list of possible options That they can use Right, um, and this is a you know, it's generated from the data definition that you saw now one thing that has happened One thing that has happened in the last few years, uh, for example, is things like the git command. Let me go here um So the git command, uh, it's now kind of a collection of commands, right? So if I say it commit it's sexual or It's a module You see that it's actually a family of command And uh, and there's a couple of interesting elements here. This is the This is the sub command the the main command and then you have the sub commands add status in it in it Uh, there are flags that apply to everything Right is one to go before and there are flags and parameters that apply to other So, uh, one of the options has full support for these nested commands. Uh, we call them commands command set and When you create, uh structure, not only you can pass actual definitions of of Of uh, of your commands, but you can also pass string So those come out of the standard output, right? So, um, so for example, you see that if I just defined the string these gets Uh, the standard output as usage, right? So you say usage git version, etc. You can see that out there So this is a nice way of formatting Versions and getting an automatic display of the things that you have Um, but what is more interesting here is that you can you can nest them, right? So you can have two commands that sub module and again, you can get its own help Invent the help with your command definition And then the commands that you want to invoke in this case it had removed Uh, with the same patterns that you saw before Right. So, um, and another thing that we also recently added Or this, uh, for any commands or sub commands to actually have faces in their names So if it just happens that User experience you desire to have a space in the middle you can certainly do So you could say sub module or subspace module if that's what you want So now so that's command line options parsing Very interesting should go use it today now The second piece is a lot of the tools that I write for tools that I uh, today basis have to do are Are interactive user on the command line, so for example like the shell So let me go back to my terminal here. I should make this a little bit bigger so you can get uh, so you can get us So you can uh, so it's better For example, I'm gonna, uh, I'm gonna use this to interact the C-sharp interpreter here. I can I can you know issue C-sharp commands rock and get the result But what is interesting is that I can I can use the arrow keys here to go back and hit it You know the command line and maybe it makes some changes Um, but also, um, I would like to get good completion on the shell So if I press dot I would like to get my uh, I would like to get completion the way that you expected Something that you can't really get with uh So, uh, this is the second library that I want to see about this is called, uh, uh monoterminal terminal edit But before we get there, I want to give you a sense of the kind of challenges that we need to go over building this console applications So, um, you know When you're interacting Console applications, you don't really know Very well as on the other end now most people and most simulations are based on the on the vt 100, uh Uh, sort of escape sequences and and the protocol Many of the terminal emulators that you use, uh Edit terminal emulators are essentially supersets of the vt 100 and You know, there's a big evolution of these things, but what happened at the vt 100, uh, was a terminal that only did black and white Uh, did black and white and the idioms you use and the idioms that were used at the time Uh, include things like fonts things like reversed, uh settings, which basically swap white to be Black white, right? So it was kind of limited to what it could do linking, right? And you still need to support this because not every time the later that will connect to your application There on the cloud or server or something else like that will support the full spectrum of colors Right. So nowadays you have true color on windows. You have true color on axel So things have changed a lot But you need to keep in mind that when you're building terminal applications Your application needs to work in this different set of environment Well, um, the thing that it's uh, uh, one of the things that is interesting is that the Is that over the years we've added new ability Actually the vt 100 core and uh, they're typically identified as And uh, it's a super set of the vt 100 set of sq sequences, but they support mouse events So that means that you can they they click they can reach the double clicks Uh, uh, they can track the mouse position Some of them contain colors. Let's talk about that for a second and uh And um And some of them can even do more interesting things It's like full unicode text. You gotta get that so now You know, it's really not a problem of dealing with the console on on windows You have the console api, but on unix is a little bit trickier Uh, the way that a console application knows what it's building. It doesn't really know what's on the other And the way that attributes and capabilities are determined Are based on the term environment variable. So there's an environment variable called term and based on this Uh applications tend to look up into a system database called term info What kind of capabilities are there? So i'm gonna show you what this list of capabilities Uh, so, uh, so this is my term now It's just in an x term dash 256 colors And if I run the command info compound unix this will dump All the set of the database of capabilities of this term So this is everything that we know about this And uh, some of them are attributes like for example the number of colors the terminal supports the number of columns that it supports The number of lines we'll get to that in a second Because you see that my terminal is actually a much larger. It's actually 190 by 29 and here it says 80 by 24 So we'll talk about this in a second There's this concept of pairs and we'll return to this later for 2000 pairs um And uh, some of these are escape sequences that are used for particular things like clearing the screen or Moving first or the particular position And some of the others declare things like what kind of escape sequence is sent when the user presses one of these keys like for example Uh, he say you piece arrow some of the function keys right when you press function key You get an escape followed by an open space the income until that right? So this is the database now. I can show you uh, the database for the v100 by changing the environment variable It's a lot more than you know, it fits on the screen, right? Um So it's a lot and so applications actually rely on this now Uh, together capabilities now there are other a couple of other uh items In particular this one you can see right now that the variable lines equal to nine overwrite the Overwrite the information like from database the database says hey for lines. Well, the reality happened with nine And not only is this information available on environment there is also Um, you're also this uh, io control operation that you can query certain terminals So sometimes a kernel the operating system has this information. So typically the way that it works is that the most that Will try the io operation if that fails they'll fall back to Lines and columns if that fails it falls back So the io control operation really doesn't work over serial lines, but it works over super terminals ssh emulated environment now Like i mentioned before one of the challenges that you have in this space Is not only that you're dealing with old You know very old terminals that barely anybody uses But that a lot of the people that have written terminal emulators Have really limited themselves due to the original Right. So these are the operations that you have blink ball Then some people Added eight colors, right? So you got eight colors for your foreground eight colors for the background Some other people added 16 colors And that really means that they added another Highlighted, you know the bold version High intensity colors for the foreground uh Other folks like the terminal right now based 256 color palette and uh, and lastly the thing that Most everybody, you know is moving to these days is supporting 24 bit colors, right? Now the the challenge with some of the we have a couple of challenges here Which is that some of these concepts did not exist when determining for database was shipped And the libraries that consume these database Have not been updated on many of the operating systems to connect to so So for example, while the end versus library It's uh, it's it's a library is a total library that people use To talk to your terminal and it's actively maintained Uh have all kinds of new capabilities The problem is that many systems that you connect to just an old version of incurses And the api has not remained The api of this library actually Is a term that compile time which means that Uh, which means that two systems might have an incurses They have different avis, right? So there's there's different ways that you have solved I'm not going to get into that But one of the challenges that you face when you're building these applications is that the system libraries might not be updated Right, so some people have taken the approach that they just read the term for database directly circumventing these dependencies all right now When you're building these applications, I think that the first thing that that you want to do is uh, you know If you have very basic needs You're not a man of big desires You can just use a system console api The good news is that we we support this on dotnet framework dotnet for a mono It does the basics reading writing And it has a limited Interactivity capability through the read the api Uh, you ask read key to either echo the character or not take the character lighter being kind of the Approach that you use for making nice and interactive applications Uh, it is limited in that it only supports Um, it does some cursor positioning Uh, but beyond that it has a lot of limitations and we'll talk about those later, but Uh, but in particular it's it's an api that doesn't doesn't even serve all the capabilities of the windows console So it's really a it's really a something of the thing That you want to do in a modern console app And like I said, also the other problem is that it's really an api for unix. It doesn't really work well with unix You know in windows there's this concept that you can draw to each other position on the screen and The display gets refreshed At one point in in unix actually if you want to update a piece of the screen to most First and then it's a sequence that moves the cursor to that position and think you're right your tech So this is a little bit challenging because it's not very efficient when a constant change the cursor position To write character you want to accumulate all the data and then hush operation that optimizes Just how much techs you send Right and and really the big problem is that there's really Reasoning at higher levels about this, right? You're really uh, you really have to roll your own So we'll talk about some of the things that you can do today Everything so interactive line editing. This is the demo that I just showed a second ago Is how do you write applications that are a little bit better in read line, right? If you if you write an app Let me show you if you write an app day Uh, just calls uh You don't really get a good experience, right? So I'm writing hello world here. Hello world and I tried to use the arrow keys It doesn't move Right and I can't really do much. I cannot really edit this thing. I'm pressing the arrow key. Nothing is happening This is this is the kind of experience that you get with read line. It's not great Um, so what you can do in this in this particular case is you want to use a library that can replace this We have the monodot line edit library Uh gives you the uh editing of your input Cursor keys. Uh, it also has emacs key binding And you know that's because uh, we're you next You know, I wrote it. I'm a unix person. It also uses most of the windows So, you know the home cursor and you know home key and key left right You know control left or right all that stuff works But most importantly in unix where some of these mapping are available in every terminal Um, we use the emacs key bindings, right And the other capability is that it also has a feature that can save the history of all of your commands So it really it's it's very close to the to the libraries that have been used in unix for many years Uh, so we save the history. Uh, the library saved the history and can restore the history Next time that you started you provide an identifier for where you want the history to come from And also it has uh, uh, it had searched the history, right? And like I showed before it has optional completion So, uh, this is how you use it Uh, create an instance of the line editor class, right? You provide IE for the history, right? And how big on the history to be right in the case that I want to keep 300 300 items in the history and the and the history labels maybe my history Right, and then you just call the editor dot edit that return value of the spring, right and uses the prompt that you Now, let me uh, let me show you Write the history next, right? So if I invoke the c-sharp library or the c-sharp command again, I'm just press the up arrow You can see that I could go through my history of things that I've done I don't even know what I'm doing here. Look at this. Yes, a few days ago. I was testing some uh, bog iOS But uh, you can just go through the history here. Now. The other thing that is interesting Is that it has searched so if I press the ctrl r key When you press ctrl r it enables reverse uh, incremental search. So as I type right a S right it goes through history and find the match Or uh, or I was looking for this case assembly or I could try for example C not so Or again, I tried to find the three History like keep pressing ctrl r and it will keep going through all the matches in history Right, so So that's a history search that I just show you I should have waited for this thing, but you know, I have a nice Cheat sheet that you can use later to remember Um, now the completion I show you, uh, I show you a couple of things Go that when you press the dot on the c-sharp command you actually get a list of Valid options that you can use. Um, I'm going to show you how you wire up The way that you wire this is a set of this Uh, this delegate you hook it up to the auto event and this delegate gets That's a string because the full input at this point that the user that So it's really whatever you want to show and the position where the cursor is inside Right, um in this case implementation is super. I just happened to call the the c-sharp Uh compiler and I said please give you the completions for for this at this particular point, right? So In this case, I extract the The complete string there. I just I cut the input string I only interested in everything up to the cursor is and then I'll tell the compiler. Please give me a list of completion And your job Inside the delegate is to return right an object of you know instance of the completion object That provides both the prefects, right and yeah You know that that that essentially gives you all the elements that were identical And an array of the completion and that's all you have to do Then you get your completion. The one thing that you have to keep in mind here is You see the line here at the top the second heuristics modes equals c-sharp the default The default behavior of the line editor is to provide completion when you press the tap This is very similar to what Uh, what you would get on a shell, right? You want to get the completion? You press the tap key and then it takes the other complete event The heuristics mode all it does to enable c-sharp is that it also triggers automatic completion when you have a dot So if you press a dot it automatically triggers it and in this particular case, it's smart for the string So it doesn't it doesn't trigger it inside that string So you can remove the heuristics mode and you would get the default Actually Now let's move on to the most exciting piece Which is text user interfaces So this is a library that I that I label off, you know, the other two libraries Have this unit for many years or in the document for maybe eight years or more This is a library that I I try building some Maybe six years ago. I can't remember six seven years ago right years ago and uh head of abandon at the time Because silver light was happening and silver light was a hot thing at the time And now now that the the cloud is egg Ssh is back in bog. I decided to That that's why the party was called Few I took it used to be implemented in a single file These days I put it up on many one, right? So the project is called terminal to gooey And uh, and it's that it's essentially a toolkit for building these kind of applications, right? So what you see here is a is one of these apps, uh, and it shows just a collection of ui elements, right? labels like login and password entry lines, uh for entering your again or your Checkboxes radio buttons. You can see them inches between personal company Um buttons like in cancel a menu bar at the top Right, so this is the kind of thing that wanted to build and I wanted to create a lot of these applications, right? Then you don't want to please yourself. You don't want to eat every element You want to a quick riddle of these things handle hotkeys out sediments and so on so it's really you have to think about terminal as a as a ui framework similar in spirit to what you use for your building that's the pops or But for a console apps Right, so, uh, the the code that you see on the left is implemented roughly with the code that you see on the right Uh, let me walk you through a couple of interesting elements here. The first one is, uh, you know, you bring the terminal dot The second one is that before you get started you need to call application in it and that That determines, uh Which drive to use we'll talk about that later in the terms of colors are available which styles are available which, uh attributes you can use, uh If your application for running then, um Here I just the next line are topical applications. It's just like convenience. I want to be able to come in Top level view the application. I will talk about using a second Then I create a I create a I created this type of rectangle We'll talk more about that in a second, but essentially I create a window Uh, that doesn't cover the first line. So if they give me they give me a frame that covers everything And I give it a little name, uh, then I add the is all right Kind of window I add that Window Then I the menu bar and I add the midbar to the top again Uh, a couple of items here to look for the underscore is in front of the ladder highlights, uh The pattern why and also makes it a hotkey. So if user presses that letter Uh, he activates that entry and then uh, you can see how I created a bunch of the elements in why Just by creating instances of these views and adding them all to the window and finally a call application that run triggers the main loop so uh so, um Some of the things that go it does we've covered some of the elements in this slide but some of the things that are worth keeping in mind is the library takes some of theitations that existed in terminal today for example, um, some alternatives are later back to the map of the Alt key, right? It deals also with the challenge of terminals half and some of them don't have So at the start of the setup, I set up a set of styles that you can use and you can reliably use on your app So that it looks correct and works properly Uh on systems that support it we automatic handle Library automatically handles resize of the terminal Uh, it takes care of input events and running your main As you use the api you'll see that i've taken any ideas from, uh, the ios uik designs So if you uikid you'll be familiar with a lot of the concepts And uh, and you see that i've borrowed extensively Which you can win those as well Now application dot run is uh, it is the thing that makes your application tick, right? It's uh, it provides a main loop Um, what this means is the application that run is in charge Fetching input events and that can be Uh input or mouse input it also handles timer So if you want to have an application that the methods that get triggered every You know 10 seconds or every minute or every something you can uh, you can go there You can also have a method be invoked, uh Application is called when there's nothing else to do so you can have a method that Invoked, uh, when there's nothing pending to do On uik systems we can also monitor, uh, file descriptors. Uh, this is not possible on windows today, but uh, We can monitor whether a socket is ready for reading or writing or file is ready for reading or writing Which makes it very convenient for building event applications, right? So you want to say hey notify me what the socket is ready You forget about this and you don't want to create a thread you can do it here, right? Um, we all the library also handles, uh as meant for unix suspending So in unix when you press control z your application is supposed to reset the terminal to a same state Uh get get you back to shell and then when you press fg it's supposed to bring you back to the application, right? So let me see if I uh So Like this right I have an application if I press control z it suspends the app right the app is suspended And if I press fg for a ground it brings back to life, right? So, um, so the framework takes care of this The other thing that application run does is that it's in charge of Managing the focus growing the focus controlling the focus and sending events to the proper views of the screen As well as redrawing effective Now a common idiom in unix Is uh, uh, it's to press the control l key. So sometimes you're dealing with a terminal Either because noise on the line or background processes writing stuff to your screen like for example, uh, I could write something like a while true do echo Right, so this thing is just going to keep spamming my terminal every three seconds right actually let me make it faster uh Get better right so every every second right So sometimes you have an application like this one and there's a background process that is spamming your so right and So a common idiom on unix is that you press the control l and control l should always refresh the right so, uh, so this takes care of The application framework already care of this for you. Control l is already hardwired for you so, uh Keyboard input on windows everything and your works expected. There's really not much to do there But on unix like I said, we're dealing with us like spectrum Uh, and some of the challenges that you have with the keyboard input is sometimes there are no function keys Right, there are no function keys, but you want to your user to use function keys Um, and it's not obvious how to map them And uh, some terminals do not have a uh a notion of Out keys or keys or there are misconfigured right or sometimes people don't know how to configure these things So who we don't see as those two things for you first it maps the sequence escape plus a number Right, so pressing the escape e plus a number is mapped to function key Right, so if you don't have an f1 keyboard, or you don't know how to get better. You're in an iphone Uh, or ssh something and you don't know how to send the f function key press escape and a number Actually, it's a good point if you're using an s client on the iphone Some of the clients do not have or android do not have uh fe's Uh, the other one is i'll come in right if you want to set alt x or you know alt s or anything else Press escape plus a letter is mapped also Later and this for those of you that use emacs, you'll know that Uh, and this is interesting because in dialogue boxes you want to you know in the dos era You use alt plus the letter To automatically focus or activate that particular control, right? So everything that has a hot spot right hot spot or things like, uh, you know The hotspots are any anything that has a different colors, for example It totals the hotspot is else if I press l the focus goes there or if I press e it takes me over there, right? So those are the hotspots um Now The system is built on this concept of views, right? And this is the very same concept that you have an ui view And these views have a frame and the frame Defines the whole region that the view will cover on the screen And and you can assign it in two ways Uh, you can set the absolute frame. So when you create your object, you pass a rect object, right? And and this sets an absolute position You can create a rect if you pass a rect parameter. It will set an option position Or you can set the x y width and height property These are not integers. These are magical. So we'll talk about the magic between behind x y width and height in a second right, uh, another thing to to know is that x direction moves, uh left to right and the y top to ball right Now, uh one notion that came directly from Mario that views can have nested views and those in turn can have views So it's a composable model. Uh, when you build a come a compound user interface You just can compose these by adding views inside each other and the focus system works by navigating tricks So it's the visual is a visual appearance that the user will see So what we we walk the tree hierarchy Well, not the users it sees but we walk the tree hierarchy And try to give the focus to the next view in the hierarchy and if there is no view No more can they for example in this case This these two orange ones inside the green one inside the white the yellow one inside the orange one If one of those if the last one was focused on a present app button to move to the next focused item It would try to focus maybe the the green element top if that element is not focusable, right? Oh, no, no, it will go to the next logical one in this case. Since this is the last one It will go to the green on top Right, so it tries to follow the well it follows or in which you created the views inside each one of these Now not all the views are focusable. This is something you can control Um, so the so we'll get that in a second Now some things to keep in mind. These are some of the core types of the framework There's three structures one defined the rectangle another finds a point and another finds a size and you use this um In a bunch of places. So for example the frame object is of type wreck and it represents the absolute position That the object currently has right that the view currently has So let's look at layout Uh, like I said, you can pass a wrecked object and that will be an absolute Two of your, uh, you know the absolute position that you want to give your view Uh, and the problem with this is that once you do that you're on your own If the user changed the terminal size if uh, you know View changes its size for other reasons. You have to annually change the frame of every new You know Like a caveman, right? So and you have to do it by overriding the layout substitute method the view that May the poor decision of making them absolute The other thing that you can do and this is something that I struggle I figure do I want to have a layout system that use that measures the objects? Or you know and each object does the whole protocol What is your desired size? How big can you see right? What is your entire size and your minimum size and maximum size and then and stacked views and Stats and boxes and tables and I felt that that was too complicated I felt I wanted to do something simpler and I came up with this idea The x and y properties are a type called pause p.o s That stands for position and the width and height are of a type called And uh, the other nice thing is that any integer values are implicitly convertible So if you really want to just set the x position So you just say x equals zero and that will anchor the value of x to zero, right? There's no there's no there's no interesting stuff going But you can do a lot of really clever stuff if you use the pause and in position So let's look at let's let's take a look at pause. There's a number of There's a number of uh static methods in pause that you can call So if you call for example pause dot percent That number right it will give a percentage People it will return a percentage within the container Right, so you can use these to position elements at a percentage inside your container view Or you can say anchor and which will essentially give you a position That is computing from the right side of the view, right? You say anchor and zero It could give you the right value right versus zero, which is always the left right So you don't really need anchor start Because it's essentially just setting the x to an absolute position But you can use center to get the center within the painter of this view And the interesting thing here is that the operator pause and minus are overcoded So it lets you do things like for example center minus 10 right or left minus four right and And so on now the four necks that come left top right and bottom These let you poke at the left side the left side of the specified view It could be the container view it can be one of your peer views, right? And uh, we do a topological sword here Library we do a topological sword to identify to compute To compute this thing and if you have cycles, of course, you're going to get an error, but but essentially You can say I want to get I want to The position that I'm going to set is going to be relative to the left the top the right of the bottom of these other view That's why I have to compute this thing, right? Uh And I mentioned it's very similar You have like phil right that will perform a phil based on top two, right And uh, or you can set uh And you can also do the same operation. So let me give you a taste of what it looks like But for example in this scenario, I'm saying I want to log in. I want the x position to be centered One the my my my column to be centered in my container the y position to be six Now the password, uh, you know, it's a table that really should come, uh, you know be well, right? It should be a lot for the first one. So what I'm saying is, you know, give them a Left side of the Right, but I wonder why to be just Uh, so you say give me the bottom of the login and then add one space, right? Um, and you can see how this works, you know, uh, on login text, uh, I actually want to say well Give me the right right most position of password and give me the top position of the login That's how I configured it and I said, uh, I heard go the way And you can see how this is used right on past the right the the element my exposition is is Relative to the login text my top position is my password. That's how I align it, right? And so One last example just shows, you know, just do the whole screen. Give me one space back Right. Um, so this is the kind of this is the layout that the layout Have and it it's simpler to and or simpler Than uh cooler systems That ios informs have where you can For a particular point and you have to pass all these flags in my mind This is a simpler thing about and I'm quite proud of this thing quite proud of this Um, now let's talk about another. Um, so I reckon there's a special kind of view for the top level and uh, they're only special because they participate In uh model and handling this is important when you pop up a dialogue and you want to just to And and you want to capture all events. You don't want to want to put other elements in the ui So, uh, when you pop up a model view, you don't want the mouse to click outside of Of this particular top level and the event going to the one behind this, right? Um So you need to pass a top level view to application If you want to run one of this, right, uh, there's two kinds of top level really Uh, uh, the top level which is just an empty top level or the window which is just the top level with a nice decoration title And and dialogues which are so classic, right? Now the views like I said every view that you fall, uh, that means whether It can be uh has a focus or whether it can be focused Some of them are good, right labels, for example, uh, write this method and say does matter for the set method and Can never focus, right? Um, some of them you can control whether you want to focus or not Exactly if you disable an entry, you don't want it to be focused just that Right And then at the core of all these views, there's these four methods Uh, every time that there's a just the system first goes through all the views in Order, right and it says hey, do you want to process these as a Hotkey This is when you say escape letter first you give a chance ready to respond to hotkey If nobody responds to the hotkey, then you process it as a regular key Right, and if nobody responded or one of the key, then you say hey I have a cold key about the the throw away. Are you interested in this? And finally the last event is a mouse event And it happens with the mouse and and the mouse event structure contains information clicking or moving or stuff like that Now let's talk about color because this is a challenging topic Uh, you don't really use colors in without direct although some classes surface You really want to think in terms of In an attribute uh, and an attribute abstracts over both the foreground color for the cell and the background color of the cell Uh, or you know the black and white description and this is why it's important because When you build your application you want your app to work both in color for terminals that support it and terminals that don't support right, um At startup I create a bunch of these for you. So out of the box. There's already a set of styles I've only defined one styles. I would love if somebody else contributes more styles, but uh, But it's important that you build your app like this because you want your app Right the the one on the left as you can see you can still use it if you know, I forced in the left side The terminal to be 5100 and you can still use it if you have a you know, uh A limited emulator like the one built to emacs for example Um on the one on the right you have a more capable terminal. So you can use all the colors So as far as you've used concerned, we're actually just dealing with attributes and we're dealing with them Um in a in a couple of ways Um, but before we talk about this about about how they deal with them Uh, I want to look at one particular Set of views here because you'll notice that you actually need a bunch of different colors for this UI to work. Um So, uh, for example, remember me right right now, it's not focused And there's both a hotkey. They are and then there's a regular case So you really need two separate attributes You need one attribute for the hotkey one attribute for the regular text And you can see that the second lane is focused I you want to give the user an indication that this is where the focus The focus is shown in two ways the cursor is shown in the position the view But also the label is painted differently and you see here again the For the hot different than the attribute for that text. So we're really talking about four colors So this is what I call the normal Normal color This one is called the hot normal color right, but hotkey applied to uh to the normal text This is the focus color and this is the hot focus color right those are four colors that you use And I call these things color schemes Um, and by default the the set styles that you have you want to use uh Today have four different styles. You can see three of them on the screen right now Uh, the base scheme of colors. So all the users use a scheme and And they inherit their scheme from their top level container. So when you when you look at everything that is blue And you see the it's a screenshot that I showed you a few times already Where you have the login and password and so on that one is still using the base style Now, uh, the pop-up that you see there that's quit them. Are you sure you want to quit this demo? That one is using the dialogue style right then you essentially all the viewers behave the same because Posing inside this uh in a dialogue The text is different, right? And the idea is that it's highlighted and even if you run it on a On a on a vt 100 you'll get this in first And then we have a different style for the menu. You don't see here the arrow But usually it's on black and white is like a strident ball and and on color. It's red, right You want to use the styles for your application Now there's a bunch of views, you know, it's not as comprehensive as i us or wpf in terms of views that are Built into this, but you know, I want to contribute now. I'll take your patches. Um There's a kind of thing that you expect from here My tool is, uh, you know buttons entries checkboxes progress Text field is a one line editor The text view is a full screen editor. Let me show you that I don't even know if I have it in this machine That would be a problem Of course Oh, well, uh, it's not there If it doesn't I might not have this here. Oh Look at that Well, all right, never mind. I didn't test on this machine. I have it in the open But anyways, it's a full screen text to your editor if I have time at the end I'll build it with the visuals and I'll show you It's a full screen editor Um and scroll views are interesting because these are concepts of my yo A scroll view essentially lets you Uh, you can add views there and you can control what is the scroll position And when the view is coming to display, they'll be shown. Otherwise, it will be right So you can you can completely embed it to the entire view and able to use menus frankly, of course because uh Because i'm a software engineer. There's an x view that that gives you an x a decimal dump that you can use Then uh, like I said, those are the views now. Let's talk about the dialogues I have a handful of dialogues that are useful The dialogue is just a window and you can pass a couple of buttons So the dialogue is just a window with buttons and then you can run Uh, and and it will be mobile and when it completes running either because you press escape Or you manually request it to stop the execution it will return control So this application run does not return control until user is The message box is a variation of dialogue all it does very common scenarios I don't want a set of buttons. I don't want to check their set of handlers As the user yes or no question, right? It will return to you Uh, which is the index of the option that was selected or minus one the user Can't right and there's a variation for showing errors as well All this changes the style There's the file open dialogue, right? If you want to open uh files or save files You can use open dialogue file dialogue save dialogue The capabilities of these ones I borrow those from us So it is the kind of apis that you find in this open panel and in a safe final So it basically the same often as and I kind of copied the The capabilities from there, um, have file paths there Whether you can choose the directories or laws multiple selection at once So borrow there One thing that you want to see here, uh, when you look at the cancel open buttons, uh, the open Has this the open button has this additional Less than a bigger than signs and that is that is the default action So if you press the return key, uh in Even if you're not focused if you're not focused open button, it will trigger the open action So if you press return at any point It will just trigger the open option and that gives you the the capability Essentially picking something the cursor pressing return and it does what you Now It's thread aware, but it's not thread safe So one thing that happens some of my users go and use uh goo.cs And they go and start threads and then they start poking at the goo.cs And they say he doesn't not working right sometimes it crashes if you're lucky But most often it doesn't work the way that they expect And the reason is that like like almost every ui toolkit in the world gooey.cs is not thread aware It's too difficult to make a gooey toolkit thread safe, but it's thread aware What that means is first of all, I do provide a sync context And what that means is that you can just use a sync in a way to your heart content and the right thing will happen So just use a sync in a way the way that you would do it without windforms or public pf app and the right thing will happen Now some of you don't use Cast or a sync or await or you already have a background thread If you really have a background thread then use use this method application main loop dot invoke And you pass an action and what that will do is essentially is it will cue the action to be executed on the main thread So when the framework is in a good place to listen to you Right and typically and all this does behind the scenes really add an idle handler for you A one-shot idle handler that runs your action and that's Now, uh, there's a couple of drivers today Do you hear us? Okay. Uh, I have a driver that uses the anchors as library The system console driver that uses uh, what dot net provides out of the box, but like I said, it's very limiting So this is how I started to test on windows, but it has just too many problems So I implemented a native windows driver that that has all the capabilities that you need and the proper mouse processing and all of that stuff Um in the future in my copies per time I will implement. Uh, I'm going to get rid of incurses because incurses is For example, a macOS is shipped With fewer capabilities that I need so it limits the the spectrum of colors that you can use So I'm going to be building a new driver for this Now if you don't like my api and my view design and all of this stuff, I have good news for you The amazing Javier Suarez, uh, has built a xamarin forms backend. So, uh, this was supposed to be animated That is very sad. I don't know how to animate this Hey, Miguel. Oh, well Miguel I'll publish the powerpoint. You can see them But if you go to this website, you can see the animations of these things and this is effects. Oh, is this animating? No, hey, Miguel we're running a little bit long But uh, this is essentially, uh, this is the live preview of your xamar, right? The thing on the right side is actually live Uh preview or so when you press the preview button, it actually shows the preview on the right side of your UI So this is just xamarin forms the xamarin forms that you love on mobile on mac and windows uh, Javier, uh wrote a xamarin forms backend for the console and uh, and if you want If that's your cup of tea then you can use xamarin forms and build a UI for the console Now let's get to creating commands. So you've done all the work. You've done your amazing command line Parsing you've done your line editing it for you some kind of apps or you built an amazing GUI app now You want to actually uh use this in your system without having to type dot net wrong or you know going to the directory Hey, Miguel, can you can you hear us? or type a long command line So, um, what you need to do is you take your console app, right? You take your console app that you just You need to do the following things you need to give it a package id Not all of these are necessary, but just just all my I know it's good You flag it as is still true pack is still true And then you give it a name right my package name is the name that you can use to publish this to nougé um to the nougé repository Uh, but the command that you want to type as a user you typically want it to be lowercase Right, uh, so in this particular case give it the name that you want to use in this case It's my tool and once you've made these changes through your csproj file You just take dot net pack and that will generate your package right that that will go compile and generate the package And and then you install it with this command dot net tool install And then you pass dash dash global Right and then in this case, I didn't want to add a source So you just say add source being debug directory in the package name and that installs the package into the system And then you can just use the my tool command by your perks content. Um, if you don't want this to be global You can pass the the tool path So this is the way that you take your your your amazing app and make your system tool This is similar to what people do with npm Right, so now you have no excuse to not use dot net if your excuse was but npm has hg Well, now you have this thing here. So you can actually write the App in a decent language Finally In the modern world, we also have this concept of single contained by executable So instead of having to to have the dot net time installed because this this this requires you to install the dot net sometime um So we made it so that you could take occasion and uh and generate a single executable No dependent is everything is embedded into a big path executable One of your dependencies and in particular in this case if this is a ball one, this is actually using mac api Uh, so in this case i'm linking with absolutely all the mac api And uh and shipping the result right this is my instant short command. So all you have to do is call mk bundle That's that's simple and you're executable dash o the name If it's your command now the two secondary libraries are have to do the fact that this is a A library that is using native api. So it's actually it's a complicated command line. So So this is using the xamarin mac api and You can see that it embeds and produces this fat big fat Uh executable, which is uh almost 10 megabytes big. You can see it at the end Uh, but what is nice is that this is a Self-contained executable you can copy this file and give it to your friends family Spouses or kids and they don't need to install mono. They don't need to install dot net This is a self-contained executable. Now we're taking this to the next step and we said, well, what if you have an act but You know, uh, your daughter has a raspberry pi. Well, if you're not I have a solution uh mk bundle can also Right, so, uh, uh, you can cross with support a ton of libraries And I can sit, uh, you know, if you look at the right side on the screen should there's a little dot That's because I have to cut the output. Uh, there's not enough screen space to list all the target platforms So I just based at the last last piece which is more about And all the the the target platform and target from uh, again I couldn't fit everything on the screen. So you get what you get And so what you have to do is is first of all the system currently has two targets the default right so build which is what you saw in the previous screen or Demo was something I was testing or all the targets that are available for download from our server. So what you do is Uh, I'm sure you the first line says hey, tell me what operating system i'm on. Hey, you're on It's an iMac and it's running. Uh, it's an x86 or machine fine So the second line I say hey go get me the target and I tell you the name of the target that I got from the previous screen So in this case I want I want a mono runtime for ubuntu 18.04 for arm 64 And then again, I say hey give me the list of targets and it shows that I have it now installed and then I just say hey Uh, create me a cross compiler for my command, right? So build me a native executable for that platform Right, so that's what the the the fourth command does and finally, uh, you know, it generates this a dot out executable That's what it's saying. That's the default output name in unix And then I say hey, tell me what this a dot out executable is right? So remember the first line is telling me you're on a mac an x86 64 platform The last line is saying hey, this is a native executable for an arm 64, right? Using the l file format 64 bit architecture for the new linux. As you know, we get Miguel to respond. So we're gonna do we're gonna roll into our commercial break and get Thanks situators here. So thank you so much and we'll get this kind of And we'll go from there. Thank you