Java and User Interfaces | Anthony Goubard | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (28m)
    • 1. Introduction to this Java UI class

    • 2. Main Window with JFrame

    • 3. Add Components with Panels and Layouts

    • 4. UI Components

    • 5. Show Images in your User Interface

    • 6. Exercice

    • 7. Summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, we will see how to create graphical user interfaces (UI / GUI) with Java and the Swing library.

The lessons include:

  • The main window (JFrame)
  • Put components in the main window (Panel & Layout)
  • The main UI components (Button, Checkbox, ...)
  • How to add images

Each lesson contains theory with slides and then we will see the code in a working program.

We will finish with an exercice and a summary.

Meet Your Teacher

Teacher Profile Image

Anthony Goubard

Senior Java Developer


Hello, I'm Anthony.

I've been a Java developer since 1995 and Java 1.0 alpha. I am now for more than 10 years working as a freelance senior Java developer.

I've developed on server side, many desktop applications and many (published) Android applications.

Here are some screenshots:

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction to this Java UI class: Hello and welcome to seize Java desktop user interface class. My name is Antoni Cuba as static developing in Java in 1995 with a one dot 0 alpha version of Java. Since then, at developed many user interfaces application for PC, Mac, and Linux. Someone's n, you can see as the example here in the screenshot. So today we're gonna see how to create such application, at least the bases of it. So first, let me talk about the structure of this class. I will first start with a presentation and you will learn a beta theory from which class are using and which method. Zan, we're gonna move to the practice. And when am I going to show you in real code from a desi fluke and not that the code is already written, so I won't be typings of God and already commented. You will be able to download it as resource. Then, where we'll do some Zn, we're gonna do some exercise. And there will be also some summary for this class. So what are the requirements for you? So you need to have completed introduction to Java class that I'm giving. So you need to know as a basis of Java and also to have completed to Java programming language so that you know, or the Java features. Things that we won't do in this class is good to advance in developing complex user interface or looking at a different class. So we're just going to goal. So the goal for this class is basically to write simple user interface so that you know which method to use Clausius, we're going to use the swing libraries that is included in Java and expand. We won't explore so complex components or we're just going to focus on a simple user interface. So citizens, we felt going to seize your class so different, which is used to show a window. Then we will see the concept of panel and layout in Java. And we'll see some of the main components that are used for user interface. Then we'll see how to endl images in Java. And then we'll end up with an exercise for you. And summary. 2. Main Window with JFrame: So let's start with Jeff friend, Jeff families to represent to you a window. And it will be mussel down. Use fossa men window of your application. So you have different methods you can use when you create it you want to puzzle. So the title of your application, for example. And then you have metadata mostly used for Jeff frame, pack. And pack is basically to place the component inside your window, adds location you want it to. So it will compute all the different constraint and the size of your window to pleasure components at the correct size and place. Then you have set location relative to when you pass a parameter. Java will automatically compute what is the center of your main screen. And we'll put your window at dislocation. Then you want also to show your window. Then you do it with doing a set visible, true. You can also provide to your window menu bar, and that's with the method set J mu nu bar in there. And I will show you we see examples. So for the purpose of this lesson, and I've created a class called a GUI demo. You will be able to download it into resources with this lesson. So the first method of this window is to show a window where you provide the title and chaired panels that we'll see a bit later into Cezanne and what basically is the content of your window. So you just create a new object, G frame. Because of frame as several layers. For example, it has one neighbor for your menu. And you can also add. Also they use over there than does a concept of a cotton pain, which is a panels that will show the main content. Beatles mu nu. In this case. Here you just do add content and you want to specify what should window do when you click on the cross button to close the window? Sometime you just want to hide to window. In this case, we just want to exit the application. So we just says a default close operation will be exit on cruise. Now when it's done, we set to pack. So windows, so it will resize to fit also components. So it will compute the size of the Japan URL and then it would resize your window to fit your content. Then we sent us a window on the screen. And then we show the window. So when I'm running it, so here is my window and the title was GUI demo, and this is the content, all of this. And then it was just Center in the main screen. And then intellectual. And if I click on this cross here, because I say exit on clothes, and it will just exit my program. 3. Add Components with Panels and Layouts: Now as you can see, we need to provide some content via domain windows. So this is done with panel and it's called jet norm, which is often used when using swing. And in XML you need to provide the layout. So a layout is a concept in Java where you can define how the component would be placed relative to each other. So you have, for example, bada layout, GridLayout, foia out. So I will fall says it's better to trust either Google it or lookings or documentation from which layout you need to use. So here is the Javadoc, for example, of bada layout. As you can see, you can put the component up there. So here you need to just ignore it and it's not true. So you can put this one on the north east where the cold wet south and to Santa place. So you have 12345 location when you can put a component. And here it is the example that was shown with five different location. When you use the Bardo Lao-Tzu, you just create your panel. Then you send it out for your panel and you add it to the correct place. So then you have the flow layout. So the folio twill muscle place the component from left to right or from right to left, or at a different place, but it would just add one after each other. So here is an example of the application. Whereas the layout is based from, in this case centered, but also from left to right. So you can provide an alignment and you provide the Orissa Tang gap and a vertical gap if you want. So another one that is often used is a grid layout, which is basically you create a grid. You just provides a number of rows and the number of colon. And then it will add them one by one. And I Kinsey's case. Here again, number of rows, number of columns. We can provide an optional horizontal gap and an optional deathly conduct policies. Not that each component will always have the same size when you're using a grid layout. So yourself, if you don't have enough, if you have more layouts, including in Java, if it's still not enough, I would advise you to use an external library, cola make layout, which is pretty easy to use. And that can do everything on the auto-layout in Java, do, and probably even more. So now let's see an example with a code. So here is my program. So I want it to have some texts for there, then some fields and two buttons. So he will show you our layout works basically I can just resize and Senate plays a component wherever I specified to be. So fuzzies, that idea too. Because I wanted to win a resizing, to have this bat to be resizing and not the text over there. I created here a bottleneck node. And this is the center in this case. And then in the House of the bada layout accurately to new panel. And this panel is a flow layout that where I, the center on the left, were added one to three components. We'll now show you the same plot in the Java code. So here is, when I create this content panel is a text bundle. So here I'll just creates a different object. So I will see you as they are in the next lesson. And I will, once I've created that, I need to place them as locations that I want it. So fossa fest create my new panel that contains a bada layout. And I create one for the bottom where you can enter the text. And that would be the input panel. And this one, we have a flow layout. Then I had the different path for the bottom panels. So, uh, text input to my, you can enter the text and you had to change button. Let me show it to you again. So you would have hears the texts, the texts input, then you have the change buttons and you add the load image button. Then these these panels that contains those three elements is input panel. I would add it to the last part of my brother layout and the text, or you can see here tied to text below. And two, it will be added to the center part of it. And this is, and then I return my main panel, which was a Texts Panel of the border layout. 4. UI Components: So Java come with a lot of components, but you can look again at the documentation if you want to even use more components. But these are the most common one for desktop and for the swing library. So it has a J label that actually I can tell you because I use it here. So the type you taste PEDOT is a j label. This one is a text field, and these two ones are J, J button. So that your slab, if you wanted to toggle button there took both re-double turn. Text field, text area. If you want to have multiple lines, will have released. You have tables, you have tree, even things like cars that bang, where you can have multiple taps or soon after scrolling Peng or you have a scroll bar on the right side or below. It. Can also split panel where you have a divider between two panel that you can slide. I'm also a window like a file chooser, a color chooser and auction pain option pen would be used to show, for example, a warning message, popup. Color chooser is a dialogue that will ask you to choose a color and a file chooser is when you open, for example, of files and you have a dialog or you can browse directory and static files. Java como saw with some demos. One of them is called swing set T2, which is a demo of the different components are tau available in swing. Then you can bruise, for example, Hey Officer buttons. And it takes a turn at different kind of a regular button. Aol on Ysaye Q1. And you can play with them. Have regular button, cannot checkbox releasing edge. And if you want to see how everything is done, then you can click here on source code. And you can see as he's been all this was done. Again, adding Nation and the color chooser. Drop-down. You have the J file chooser. Yet the J Eddie top-end, You want me to show some complex text J list. Then you acid to auction pain, Mrs. case to show basic dialogue. And here you have a progress bar. You can say you have a structure is called pain or you can scroll from path. And that's this one is called a j slider. Prepaying JS pit paying. We're also paying. You cannot do that. Then you have, again, here is a table for this case, which is quite ovens table in Java. You have to take in this case. And here is a tree to show some tree in Java. Swing or swell. So concept of look and feel, where you can check the skin of your application. You can see that now it has a phase and the travel you can feel or members look and feel. So you can easily also changed the skins if you want some libraries. So let me show you how Estonians are codon or so now. So as I mentioned, it was done in the first part of my create text panel. So here I'll create. First, I create a new label that you could see insure you against the program. Here. And a two is with a doctor takes below, then defines a font that I wanted to I wanted to be your phone than the corrosion current ones. So I just multiplies the current font size. The bold by two. Then I provide with our creates also a text field of 20-20 columns for this one. And create a new button change. So for a button you also need to add the listener. So listener alpha events. In this case, whenever you click on the button, I will put the text label, which is this one. And I will change it takes two. It takes input, which is a x field from the, from the text. And then I have a load image button. And when this one is clicker, we'll call it a separate method. It's so let me show you for example, first, we're changing the text. If I do change, you see that it will change the text. So yourself, so as you, as we trust, so you have a concept of reserves, whereas that is used to enable user events. The menus is fog and port four button scholar action listener. Then you can also use for mouse and at the MouseListener, which we listen to mouse clicks, you have mouse motion is center that would listen to when the mouse is moved for I feel dragging some object. You can have a Focus listener. So you have listener for lots of different kinds of events. These lisa nematodes are interfaces that you need to implement. And it will give you as parameter, an event where you can get details. For example, if you have a mouseclick event, you can get the location or where the mouse is click with a mouse event. And because sometimes also listener, I've a lot of methods and you just want to implement one of the methods. You also have class helper class that are called adaptor, that topologically class that implements the interface but has no implementation. So if you extend the adequate adapter, you just need to override some method that you are looking for. 5. Show Images in your User Interface: So now you can also have an image in Java. You have different ways to show or manipulate images. The most common way to show an image would also use j rebel. So just like we are using for text, you can also do provide an image to a chair label. The image can be, for example, an image icon object. And if you want to manipulate a bigger image, lack of photos, I would recommend you to use a buffer image class. So this also three main class that you would use in Java to show an image. So let's show an example in my class. So here's the same demo, clicked on the load image and as dictate an image. And now you sees annexed, this is sin my cheddar balls that you see here in the center. You see is that befalls text that was here. X, t are also provide an image to this big now label. Now let's look also in the code that does this loop. So here is the image method. So in this case I provide the using the GIF file chooser. And then I said to set all files, I shows a dialogue to choose a file and then click on approve, then address USA J-Pal 2L dot gets elected file in this case. And then I use the image IO to read it. This one will return a buffer image. Is buffer image. I can put it inside the image icon because this is what the label accept data Bourdieu cannot provide a buffer image, so you need to wrap it, wrap up, sorry, the image inside Image icon. And then you can cause, uh, takes three double dot set icon method. And that would put the image in the JD ball. Because I'm doing some IO manipulation than also may catch the exception in, I guess you could not read the foul. And in this case I'm using j option pane to show a message dialogue which says in varied fall. For example, if you choose a file which is not an image, and it will dress shoe, that would imbedded files. And then I remove any previously made chat to us, insert J libor, just providing set Econ of neuron. 6. Exercice: So now it's your turn to create the application using Java. So I've decided fuzzy says a size. You get main window by you show your name. And then also at the button to this mango. And whenever you click on the button, it will change the color of the text where you show your name. So then I will leave it for you. The choice. If you click on the button, you can decide that or you just want to and put the name in a random color. Or you can have, for example, a list of predefined colors. And when clicking on the button into inches, switch from one color to the next one. Or you can use a color chooser. So a dialogue where you can set a color for you. If you think that this exercise was to AC off you want event to learn more, you can, as optional to this exercise, you can also provide a slider than when you drag the slider from left to right, for example, it visual so chances size of the text. Now we'll provide the tips processing cell size. So if you don't, we first want to try with up the database by interests. It posts on this video. And otherwise I will provide you with just a few tips. So tip number one, you may want to use a bada layout and a flow layout like I did in my project. Id number two. To show some texts, I would advise you to use a label for it. Not deep Number three. So color of some texts is called foreground. So if you look for in terrible, for foreground, you may find the method that is used to change some color of text. Keep number four. To change the font size. You need to use a size which is of a float. Again, cannot provide a number like 123. You need to provide integer or you need to provide the numbers that is a float. 7. Summary: So in this lessons about desktop user interface, we saw few new vocabulary that you've learned. And this as the main that you may want to remember. First one is a library called Swing. And to create your main window, you use a new object called differing. Then to lay your components inside your application, you want to use different DJ panel and each panel to provide a layout for each panel from how you want to components to be dispose in your panel relative to each other. And just look at the documentation on how to do it. And then you also need to have listeners and events on each component, or most of the components, at least, to react to the user clicks and any interaction from the user. And if you want to use images. So the image is one of the main class that is used to represent any image in Java. As a summary, Java main UI library is called swing and would advise you to use it if you want to develop for desktop application. Refrain is used for the main window. At juveniles to layout components in your window. All UI should be done in the event dispatch thread. And if you're looking to do something and you can find out why I would advise you to go to Stack Overflow website and to search for any answers. So before you ask any question, first, always search. Because if you have like a beginner questions, the probabilities as is already an unskillful rate is really high. Thank you for watching. I'm really looking forward to 12 Fudan posture project in this slide. And also, yes, subscribe and look at my profile because I'll have many Java lessons. So just look over there and good luck. Bye.