How to Build a Basic Tabs App Okay, let's build a basic tabs app. This will be a simple app that just helps us understand state in our application and how it changes with key presses. So, we've got a bare-bones prompts app here. So, we've got a tabs app that extends prompts. It's got a couple of tabs here, just a tab title and the content. There's a bunch of content here. And then we're just registering the renderer, registering the tabs renderer.

And then we're just registering the renderer, registering the tabs renderer. The tabs renderer just looks like this right now. It's just a basic renderer that returns nothing. So, what do we want this application to do? This application will list the tabs at the top of the screen. And as the user presses the left and right arrow keys, the various content will show up underneath the tabs. That's it, super simple. First things first, we have our tabs here and it's an array of arrays.

That's it, super simple. First things first, we have our tabs here and it's an array of arrays. So, we're going to need to track which tab is selected. So, it seems like we probably need an additional piece of state. public int selectedTab. And we're just going to track this by the index. So, the default tab that is selected will be the first tab or index zero. So, let's set up our key press listeners to handle state changes when the user presses the left and right arrow keys. So, we're going to import keyPressListener from the Chewy package for this.

when the user presses the left and right arrow keys. So, we're going to import keyPressListener from the Chewy package for this. And we are going to listen for quit because that's always a good idea. We want to listen for quit signals. We're going to say onRight, so on the right arrow, we are going to say this.selectedTab is equal to the Math.min(this.selectedTab + 1, this.tabs.length - 1). So, it stays within the bounds of the number of tabs that we have. And we're going to say onLeft,

So, it stays within the bounds of the number of tabs that we have. And we're going to say on the left, we're going to set this selectedTab equal to Math.max(this selectedTab - 1, 0). So, we're just keeping our selectedTab within the bounds of zero and the number of tabs that we have. And then we're going to say, okay, go ahead and listen. And that's it. That's our entire application. All it is is an array of tabs, the selectedTab state,

That's our entire application. All it is is an array of tabs, the selected tab state, and then we're going to listen for various keys and update the selected tab based on that. That's it. That's our entire state. So, let's hop over to our renderer. So, here we have our renderer. And the first thing I like to do is set up the width and height variables because there's a high likelihood that we'll have to use them. We'll say width equals prompt terminal calls.

because there's a high likelihood that we'll have to use them. We'll say width equals prompt terminal calls minus two for a little buffer. And we'll say height equals prompt terminal lines. And in this case, we'll say minus five. And so, we want to list out our tabs. So, we're going to say tabs equals collect(prompt tabs). We are going to pluck the tab out of that array. So, now we have an array of the tab titles. And we want to show which one is selected.

So, now we have an array of the tab titles. And we want to show which one is selected based on the state of the application. So, we are going to map this. We're going to say function tabIndex(). We're going to use prompt. And we're going to say if index equals prompt selectedTab, we're going to return the selectedTab styled. Or we're just going to return the tab. So, how do we want to style this?

Or we're just going to return the tab. So, how do we want to style this? Well, I think each tab should be its own color. So, as it's selected, it changes the background color of the tab. So, our colors are equal to, let's just say, BGRed, BGGreen, BGMagenta, and BGBlue. So, we have four tabs and we'll have four colors. So, let's add this to the use. And so, here, let's say return this colors[index] tab.

So, let's add this to the use. And so, here, let's say return this colors index tab. Okay, that feels pretty good. So, I think we should center this horizontally. So, we'll say use aligns from the Chewy package. And we'll say this center horizontally, our tabs. And based on the width, and then we'll say each this line, we'll just print out those lines. Now, our tabs are currently an array of tabs. So, we actually want them in a line.

Now, our tabs are currently an array of tabs. So, we actually want them in a line. So, let's implode them. And we'll say str_repeat. And we'll say put four spaces between each tab. Okay, so let's just review real quick. We're collecting the tabs, we're plucking the tab title, we're mapping it over, and we're saying if it's the selectedTab, style it with the backgroundColor. Otherwise, just return the tab.

This is just a simple explanation with no code.

We see the different tabs highlighting, which is great. There's a couple stylistic things here that I'd like to fix. I want to add a little padding on the tab. It feels a little tight right now. Let's do that. If we come back in here, before we go to style the selected tab, we're going to add a little padding to the tab title. So, we're going to say function, and we'll just add a space on the other side. And just by doing that, we've added a little bit of padding.

and we'll just add a space on the other side. And just by doing that, we've added a little bit of padding to the left and right of the tab. Let's check it out. Yeah, much better. Okay, great. Let's handle the content. So, first of all, I think our contentWidth is 75% of the width available to us in the screen. I think that would look nice on the screen. So, we'll say contentWidth is equal to int of the floor of our width times 0.75.

So, we'll say contentWidth is equal to intval of the floor of our width times 0.75. Let's put a little divider line between our tabs and the content below so that there's a little division between those two areas. This center horizontally. And we'll do a little dim divider line. str_repeat. And we'll get a little divider. And we want that to be the contentWidth. And we're going to add a little padding on each side too.

And we want that to be the content width. And we're going to add a little padding on each side too. So, two characters of padding on each side. So, that means plus four. And we're going to center that within the width. And we'll say each this line. Okay, let's see what that looks like real quick. Excellent. So, our tabs are still working. We've got a little divider line there. Let's put the content in.

We've got a little divider line there. Let's put the content in. Let's add a new line so that there's a little bit of padding beneath the divider line and before the content. And now our content is long. We need to word wrap it to the contentWidth variable. content equals wordWrap(prompt, tabs, selectedTab, content); And the width is our contentWidth.

selected tab, content. And the width is our content width. And we're going to cut long words so that they wrap automatically. Great. So, now we have our string wrapped to the width available of the content width. Let's center that horizontally. This center horizontally. content width. Let's print out those lines.

Content width. Let's print out those lines. Great. Let's see what that looks like. Okay. If we run the script, we've got our About Me content. The AboutMe tab is selected, so that works. If we switch over to Skills, we get the content for the Skills. We switch over to Projects, we get Projects. Contact, we get Contact. So, this is looking pretty good. The last thing I'd like to do and I always like to do

So, this is looking pretty good. The last thing I'd like to do and I always like to do is add the hotkeys to the screen so the user knows how they can interact with the app. So, Chewy has this great method called pinToBottom within the Aligns trait. And we can specify the height. And anything within this callback will get pinned to the bottom regardless of the height of the content.

will get pinned to the bottom regardless of the height of the content. So, it'll stay at the bottom of the screen. So, we're going to add a new line for a little bit of buffer. And then we're going to specify our hotkeys. So, let's import the DrawsHotkeys trait. UseDrawsHotkeys. This will help us draw out our hotkeys at the bottom of the screen. So, we're going to say this hotkey,

at the bottom of the screen. So, we're going to say this hotkey, left arrow, previous tab. And this hotkey is only active when the prompt selected tab is greater than zero. So, it'll gray out if the prompt selected tab equals zero. Now, we need to use prompt so that we have access to that variable. Our next hotkey is going to be the next tab hotkey. So, we'll say this hotkey, next tab.

Our next hotkey is going to be the next tab hotkey. So, we'll say this hotkey, next tab. And this one's only active when the prompt selected tab is less than the count, the prompt tabs minus one. So, it'll gray out if the selected tab is greater than that. Last but not least, let's tell them how to quit. And then we want to center the hotkeys horizontally at the bottom of the screen. So, this center horizontally, this hotkeys,

at the bottom of the screen. So, this center horizontally, this hotkeys, the hotkeys formatted as a line, the width that we specified, and then let's print that out. And let's add width to our use. Let's check it out. Awesome. Awesome. So, as we navigate, we can see the hotkeys

Awesome. So, as we navigate, we can see the hotkeys and you can see it's grayed out now for next tab because we can't go to the next tab. And if we go back to the first tab, you see this grays out. So, this is looking pretty good. I always like to create these in an alternate screen. So, let's just add that real quick and we should be all set. Back in our Application class, let's import use creates an alt screen from Chewy.

Back in our application class, let's import use creates an alt screen from Chewy. And here, we'll just say this create alt screen. And this allows just for a more immersive experience. So, you'll see the difference here. It's a more full screen immersive experience. And we can go left and right and it all works. This looks good. So, this is a good example of how state changes within these apps in a really simple way.

So, this is a good example of how state changes within these apps in a really simple way. I hope you had fun.