13.11 Controls

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Hello, now that we’ve seen the layouts that we can use to create our user interface, let’s take a look at other user interface controls that we can add to those layouts. Now JAVAFX has a wide variety of controls, and you are already familiar with two of them, namely the button and the label. So we’ll start with those two and then move on to other controls. First of all, what we’re going to do is create a new project, I’m already creating. And once you’ve created that, what we’re going to do is make some changes. So at first, we’ll just increase the size of our scene. So I’m going to come here in the main code, and where we currently have a size of 320 by 240. Let’s make it much bigger, we’ll put 800 x 500. And in the fxml file, we’ll add a button. So we will keep the GridPane as is but we will add a button. We will make the tag "button". GridPane. rowIndex = 0 GridPane.columnIndex = 0 and text = click me Now let’s run the program. And there is a very simple window that works and obviously the buttons are in the middle and if you click on them, for the moment, nothing happens. And the reason is that we have to associate an event. We’ll look at the events later, we’re not going to do it now because we’re going to focus on the controls. The button can also have an image so either in addition to the text, or alone. And Java has an icon repository that’s pretty old now and shouldn’t be used in real applications but we will actually use it for our applications because the icons are free and we have permission to use them. So, to get the icon package, I will go on the internet and I will type in the Java Graphics Repository search bar and click the first link. Then we’ll download this one and then we’ll decompress it. And so I’ll go back to the project. I’ll put it in my file. Now that it is in my folder, I will right click here, then choose "module settings". And I’m going to click on the "+" and then choose "javaRs or directories" and the file that is in my folder Now, we have so " toolbar button graphics " and there is a general folder, we have all these different images here, but the one we’re going to look at is the "TipOftheDay24". If I just click on it, we can see what it is, we can put it on our buttons. We will therefore add a graphic child element to the button element. So, we’re going to create the graphic tag And then inside that, we have to add an image. So an ImageView tag. And then we actually specify our image. So, inside the imageView, we will create an Image tag and a url = Now, if we execute it So we have our With Image button. And we will do the same for the label. We will copy the "graphic" of the paste button into the label, then we just change the text and the image. In the image instead of "TipOfTheDay". We’ll put "Information" right here. We relaunch the program And you can see that it works well, we have our label and also an image on the left side. That’s all for this video, in the next video we’ll see the "ChekBox" and "Radio button". I’ll tell you next time!