Glen Davis · Transcript · · Updated
OOP - POS 2.3 - UI - embedded JList - TaxCategory -List / -EditPanels, TaxRateEditPanel – Transcript
Video by Glen Davis · Watch the original on YouTube
Summary
AI-generated from the transcript. Verify details against the source video.
- The tax category list panel utilizes a JList component to list all tax categories, providing options to edit, add, or delete them.
- The tax category edit panel allows changing the category name and manages associated tax rates with an embedded JList.
- The new tax rate edit panel includes fields for entering a tax percentage and an effective date, along with save and cancel buttons.
Use this video with Pro
Reading, copying and transcript downloads are free. Create saved AI results for this video with a signed-in Pro account ($9/month).
Transcript
Search ignores accents. All transcript text stays visible.
This is object-oriented programming project two part 2.3 the user interface for the point of sales system. Now we're going to implement the JList component from the swing user interface library and we will implement it using the uh text category list panel and the text category edit panel. So on the right of the screen is our system design
document. This is a picture of the tax category list panel. The J list is this square in the middle that lists all the tax categories. And for any list panel, we'll have the option to edit, add or delete.
And then if we decide to add or edit, it will go to a subsequent edit panel where we can change the name. And then in this particular case for tax category, we can add tax rates. And that's going to be an embedded JL list on an edit panel with which we'll demonstrate another technique for uh going to a subsequent edit panel and coming back and
maintaining the objects that we're working on. So uh we've already been through a simple edit panel with the store edit. So let's look at this J list. I'm going to go ahead and use this uh POS user interface 3 uh because uh just starting with things that are brand new.
And if you'll remember where we left it, I need to start this from my uh start class. So POS start we'll run it and I believe it is uh
this is what we did before with the store edit. So we know that one we're going to do text categories now. So right now it's not doing anything but I do have the uh action listener and event handler hooked up. So, we'll hook into this and uh implement from there.
Actually, let me show you a side by side real quick just to remind you what it's supposed to look like. So, if we go to tax category, we have the tax category list panel and we can select one of these and choose to edit. Then we see food and we have a rate and we can add a rate here. Say that was 7% before. We'll say this one's 8% and we'll say it's going to go into effect in January of
2026. So, we hit save. We'll see that it's there. So, uh then we can hit save here and we go back and we're back at the list panel again. So, we went from a list panel to edit. And actually, let's cancel this and let's do an add. We'll say we have a new category of candy and
we'll add a rate for it of 5% with a uh let's say 06-01-2024 effective date. And then we'll save that. And notice that we'll have to do some checking. So when I select food or beverage, we cannot delete it because they're being used. But candy I just now
ordered and it's not being used by any items yet. It's not associated with any items yet. So we can delete that one if we want to, but not these. And then of course we could edit it if we wanted to. So if I select candy, I can delete, but I cannot delete those there. And then if we select nothing, we should this uh edit button should be disabled. So that needs to be fixed on this. Looks like when nothing's selected, edit should be
unselected. So, if we come in fresh, it is, but once we unselect something, it should check that. So, we'll fix that while we're in here. But, we're going to start with a new one. So, I'm going to close this. And notice I'm I'm running these side by side. When I close one, it closes both of these. So, so let's get into this. So, we're in the start. Our start from, if you remember before, runs
POS frame three, which runs this home panel. And so, uh, POS frame 3 is the one we're using. We go to the design view. We go to the maintenance screen, text categories. I've already added an event handler. So, if I do a rightclick, action performed, it's already at line 97 right now. It's just printing out something. So, here we want to go to a tax category list panel. And as you can
see in our list, we don't have that. And notice too, let me mention this. uh when we are on this start screen uh it's going to run this main and it's called frame three but I could also preface that if I go up here and look at my imports frame three comes from this possi3 if those were named the same thing we could still differentiate them by
putting the package name in front of them also so if I search for that and go down to to wherever that was found. If I wanted to, I could put the package name in front of it and it would tell me all the panels and frames that are in that.
So, that's the one we're using. So, you could do it that way, too. If for some reason they had the same name, uh you can different differentiate them by the packages. And that's what we're getting ready to do here. When I create this new text category list panel, I'm just going to call it text category list panel, but I'll differentiate it from the existing one that is uh here by putting this package name in front of it. So, let's
go to our user interface package, the new one that we're using. And uh I'm going to close that. I'm not going to save it. So, we're working right here.
We want to go to a new tax category list panel. So, we have to create one first. So, with the correct package selected, I go to my swing uh menu. I'm going to choose J panel. I'm going to call it tax category list panel. So, I'm going to look at a list of tax categories. So, it's going to end in list panel. Anything that we see a list of will be list panel. And in
this case, it's going to be tax category. Finish. There brings me here. And remember that for all of our panels, we're going to feed in the frame and the store to start with. And there'll be other arguments that some of the additional panels uh will need. But we know we're going to need a J frame. And we're going to call it current frame because we're going to use it to switch back out of this to some other frame
when we leave here. And we're always going to pass in the store. And I'm going to call mine the store. It can be anything you want. And so I hover over JFrame and it says, "Do you want me to import that from the swing library?" Yes. Store. Do you want me to import that from the POS problem domain? Yes.
So we have that. And then let's go. I'm do a control shift S to save everything. Let me click my design view. Remember, the very first thing we do when we come into a a panel is do an absolute layout.
So, I click absolute and it has it. When I drop it on here, it unselects it. So, I'm going to go ahead and collapse that. Then, I want to put uh a label on here. And I'll just bring it to the top. And I'm going to call this label the tax category edit panel.
And I'm going to select that. I'm going to change the justification on it to centered. Let me make the I've been bumping all these uh panel titles to 14. I'll go ahead and do that. I'll make this a little bit bigger. And then I'll select this and bring it to the top.
Then I'll center that horizontally. We should be good to go. Then let's check our uh system design document. So, we need a JLEST uh com uh component and then with any JLS we need the options to add, edit or delete. So, we'll have three buttons on there.
So, let's add our Jlist. So, let me collapse that. Uh here, excuse me. Should be in here's the J list here. So, I click that and you see it's selected and it's ready to drop. I'm not dragging. I'm just hovering. I'm going to push down in a minute. So, I'm going to click down. And now I'm dragging. And I'll make it about yay big. Doesn't have
to be very big. Actually, I think I'll just do it kind of small. And drop it there. And then I need three buttons. So, uh, this, notice it defaults to list. There's only one list on this panel, so I'm going to leave it at that.
Uh, there's nothing else to go with it. But now I need three buttons for add, edit, and delete. So I'm grab a J button, pop it on there. Grab another J button, pop it on there. Grab a third J button, pop it on there. Select the first one. I'm going to rename it to button add. I always do it add, edit, and delete in that order. I know that's a little different from what was on the system design document, but uh I think
on other screens on the system design document, it's in this order here. This is what we usually see. Then I'm going select this button. I'm going to rename the variable name for it to button edit and then rename its label. Change the text on its label to edit. And then I'm going to select the third button,
rename its variable name to button delete, and change the text on its label to delete. And then while we're here, let's go ahead and hook up some uh event listeners. So we want to do a select the add button, do a right click, add event
handler action. action performed and we were here and I'll just do a system.out.print line. I always do this first thing just so I can test and make sure this that I'm good to go th this far before I add a bunch of other stuff in here. And I'll say this was the add
button clicked. I'm going to copy that line because I'm going to reuse it. Let me shorten this up. I'll leave that. Go back to our design view. Click on edit button. Do a right click. Add event handler action action performed. And for the edit button, this is button edit with the edit label. I'm going to copy that line in here. And I'll change this