We have just created the grid for our login view in our invoice management system.
Now let's go ahead and add some labels, the password box, the login button and so on.
The first thing that I want to add is a label, and inside that label we want to set the content for
sure, right?
So the content is login and then we want to position it.
So let me just take a look right here.
It should be the well first row, right?
So index one.
And the first column therefore grid dot row equals to run grid dot column equals to one.
So you can see that right here it is pretty dark.
It's black, right?
But it doesn't Well, that's not a problem.
Let's just select our label here.
Let's go to the layout.
Let's set the horizontal alignment here to center and the vertical alignment.
Let's also set that to center.
And then let me close the layout again.
Just resize it a bit.
There we go.
Then open up the text component or the text property.
Let's set the actual font size to 18 and make it bold.
There we go.
Now you can see it a little bit better right here, but we can see it once we start the application.
Great.
So we got the login header, the label, we got that set.
Next up, we want to add another label.
We want to say something like Enter Password.
And a password.
And then we want to go to grid row three.
Yeah, that looks great.
We want to keep the horizontal alignment.
We want to remove the vertical alignment.
I just copied that right.
We want to remove the font weight and the font size to set it to the default values.
Great.
So now we got a little text right here which says Enter password.
You can see that if I hover above it, enter password.
Great.
Now we will create a new well UI element which is a password box.
We want to position it at grid dot column equals to one.
Basically.
We will also always put it in that column, right?
And then in the grid row, the same one as the label, the last label that we have created.
So that will be three.
So now it's quite big, right?
What we want to do here is we want to set the width.
Let's set it to 100 and let's set the height to 30, for example, and then adjust the width and set
it maybe to 300 or something like that.
Right?
So please feel free to create whatever user interface you like.
You can make it dependent on margin padding and all of that, right?
So it's really more about the functionality and how to connect everything together rather than, well,
a user interface design course right here.
Great.
So we got the enter password label and the password box right here.
Always make sure that you will give the user some some.
Well, note any hint on what he has to do inside of your application.
And this is why we added the enter password text so that the user knows.
All right, I have to enter a password right here.
I do not have to enter a username or a birth date or whatever.
Note I have to enter a password.
Always keep that in mind.
It's important for the UX, the user experience.
Right.
Cool.
Now the last one that we have to create.
Is the button.
So let's create a button right here.
We want to position it Grid column one, grid row and five.
That should be five.
There we go.
Same thing as before.
We want to set the height for height.
We could set it to something like 50 and for the width we could set it to something like 200.
And then at the very beginning, I want to set the content and for sure name it login.
Let's take a look at our application, but I will just keep that open for a second so that you can pause
the video and take a look right here.
Label, label, password and button.
So it should look like this for you too.
Awesome.
Let me just start the application and let's take a look if we can see the login view and all of our
created user interface elements.
So there we go.
We created our custom control, right, and set it inside of the constructor and the main window example
to load a new login view.
And there we have it.
Login and the password login.
And I can say let's say one, two, three, four and you can see that the password is hidden and that's
one of the well, nice and sweet benefits when you use the password box over a default text box.
Right?
And we want to create our correct password.
So whatever we have to enter to get to the next window to successfully pass the login barrier, so to
speak, we want to set that in an environment variable.
This is something that you usually do pretty often in real world development for, let's say API keys
for any secret data, right?
So at least to a certain degree, but it's better than hard coding your password into your application.
That's a bad practice.
So this is why we use an environment variable.
Great.
So we got that one.
Once we click on login, we want to show login successful, right?
And then we will see the next window or we would see a pop up which says like, Yeah, that was not
the correct password.
Great.
So now it's getting really interesting.
Let's move on.
See you in the next lecture.