Lecture 07: Swing Basics. Object-Oriented Programming and GUI. PJAIT

Summary

Highlights

• Java's AWT and Swing libraries allow for building GUI applications, with Swing being more modern. 🎨
• Components in Swing are classes derived from JComponent, extending functionality with additional features. ✨
• Layout managers like BorderLayout and FlowLayout organize components for intuitive design. 🏗️
• Action listeners make buttons interactive, providing a responsive GUI experience. 🖱️
• Thread management is key; Swing utilities help in proper GUI rendering and interaction handling. 🧵

Key Takeaways

• Graphical User Interface (GUI) programming in Java starts with understanding AWT and Swing libraries. 🚀
• Swing extends AWT, allowing for platform-independent applications, although it may run a bit slower. 🐢
• Components like windows, panels, and buttons are built using Java's class-based structure. 📚
• Learn about different layout managers to effectively manage GUI components: BorderLayout, FlowLayout, and GridLayout. 📐
• Using action listeners in Swing allows buttons to perform actions, adding interactivity to GUIs. 🎮
• Thread safety in GUI programming is crucial; Swing components should be accessed in the event dispatching thread. 🔄
• Experimentation and practice with GUI programming concepts are essential for better understanding and fun learning. 🎉

Overview

Lecture 07: Swing Basics. Object-Oriented Programming and GUI. PJAIT Transcription

• 00:00 - 00:30 [Music] [Music] and today we are going to start talking about uh graphical user interface programming so let's start with the basics from today's classes uh will
• 00:30 - 01:00 start creating applications with a graphical user interface at the beginning without much interaction but you will get to know it gradually the two main Graphics uh you libraries built into Java are the obsolute uh awt it's abstract window toolkit it's a really really old library and and also swing
• 01:00 - 01:30 which uh which is still used in business applications the differences uh between awt and swing in the natur are how the controls are made in the first case they are created on the basics uh basis of components built into the system swing extends awt and is based on built in components drawn by the
• 01:30 - 02:00 applications thanks to this this and the application is independent of the platform and native elements of our operation system this allows also and the uh appearance of the application to be standardized regardless of the platform on which this application is running of course due to the uh due to the use of components independent of the
• 02:00 - 02:30 Swing system uh of the operation system it works a bit slower however compared to the speed of modern computers the difference between awt and swing is in cific as we mentioned before both Technologies are based on a component system this means that our application
• 02:30 - 03:00 uh will be composed of uh some kind of braks such a window in which will place uh panels on which will embed and other components such as uh text boxes buttons and Etc components are classes that that inherit from the J component class and uh what's uh worth nothing and think that a huge number of components
• 03:00 - 03:30 are available and in swing framework classes are mostly preceded by a capital letter J so for example this J component in the uh during the next class we will cover the basic components and uh I will show you how to use it today let's create the first window and let's uh let's try to understand
• 03:30 - 04:00 it uh in this window we'll put a panel on which something will be displayed to us the panel can be uh TP of uh as a container for other components so let's create uh this first window how to do it in our in our uh in our for inell idea we can of
• 04:00 - 04:30 course uh we need to of course firstly create a main method uh in main class so let's create it okay and to create our our window we can simply create new class call it for example my window first
• 04:30 - 05:00 and in this my window first if we say that this class will be extended by J frame then this class is in this moment uh represents In This Moment a window and to show it in a Constructor of this class we can say now multiple uh multiple methods so as you
• 05:00 - 05:30 can see here we have possibility here to add many many uh methods to to call many many methods so for example we can say set visible true which means show our window to run it that's at the beginning uh uh call my
• 05:30 - 06:00 window one and if we run it in that way you will see that uh that in the left upper corner we already have a very very small window created let's make it bigger and move it so in this moment we have this window already created
• 06:00 - 06:30 and how to uh how to do something more with this window because in this moment it's really really small and it's in the left upper corner of course we can also change the size of this window so we can say set visible uh not say visible but set size and for example uh in that with and high in
• 06:30 - 07:00 pixels what more we can also say uh we can also say that we want to uh show it in the center of our window not in the left upper corner to do that we have also a method called set location relative to and if we say set location relative two and if we
• 07:00 - 07:30 uh don't specify nothing so if we give a null because here we can we can say that set locational is to for example another window but if we don't have another window and if we want to uh show our window in the center of our screen then we can say no which means Center our window our window in our screen and now if we run something like
• 07:30 - 08:00 that then this window will show in a center with a particular given size but we have still one more thing to do there because okay we have this window but if we close it then this application still still running so how to uh how to interrupt it to do that in this moment we need to
• 08:00 - 08:30 stop it manually but how to make it uh uh make it to stop automatically after closing the window we have also method called called set default close operation and here we can specify one uh one of possible uh one of four possible values
• 08:30 - 09:00 so we can for example say hide on close which means which means hide this uh uh hide this window but but this window in the background will still exist this POS on close it means close window but also release uh any resources that is used by this window do nothing on close is a default value as you can see this window is uh
• 09:00 - 09:30 uh disappear but application still running and exit in un close is exactly that what we want so after uh closing this window the whole application is also closed as you can see now we have a process finished with exit Code Zero after closing this window so so these four methods are the basics uh to create our our window in a
• 09:30 - 10:00 properly way okay but let's uh try to do something more in this window because uh in this moment this Windows is empty let's use um very small part of awt in on a basic of a swing let's create a window that will display us squares uh renting out a Ross the
• 10:00 - 10:30 window and so so we can for example add a panel into our into our window panel is represented by J panel method um J Panel class and to add this uh panel into our into our window we can say add and this component if we run run something like
• 10:30 - 11:00 that is something changed no because jpanel is a really really transparent uh component we can use it as a container for other components so uh so in it it don't have any color of course we can change color of this J panel but in this a def way it's a transparent here we don't need to do anything more
• 11:00 - 11:30 but this how this panel looks like is uh uh is is said using a paint component method and we can using Anonymous
• 11:30 - 12:00 internal classes here we can overwrite uh this paint component method and uh what we can say here okay this paint component takes a graphics object and this Graphics is is a kind of a pen uh using which we can draw something this super paint component it
• 12:00 - 12:30 means okay print this p panel uh as usual but also we can add something and what we can add here if we uh if we want to print this squares or rectangles rather what we can say we can use this Graphics uh component and we can say as you can as
• 12:30 - 13:00 you can see for example draw re draw freir Arc bite charts image so we have we can draw here many possible things even draw strings we can but here we can draw we want to draw rectangle and the left upper and here we need to specify four values first vales are coordinate of the L the left upper
• 13:00 - 13:30 corner of this rectangle third value is a width of this uh rectangle and fourth is the high of this rectangle so for example here we can create a for Loop in which we will start for example from 10 until I is less than the size of this window is uh uh okay divided by 2 and I + = 10 to
• 13:30 - 14:00 uh to move every 10th pixel and here in this for Loop we can say draw from I I it's s coordinates of left upper corner and we a width and high decreased by I multiplied by two because uh want to make a space uh on the left
• 14:00 - 14:30 and right but also in the upper and down so also here I multiply by two okay and if we Define something like that how it should Works let's run it and let's look it okay now we have this uh Square this rectangles uh printed here and as you can see uh we have multiple rectangles in every
• 14:30 - 15:00 10 pixels so uh okay now we have something like that but how to draw this rectangles dynamically when we change the size of the window because now we we can change this size but we still have only this part how to change
• 15:00 - 15:30 on the base of uh our uh our jpanel but about any component we have also a method called get with and get high of our component so we can for example write into some variable our our wave so get wave and here we need to decrease it by
• 15:30 - 16:00 one exactly as we need to do it in the kind of uh list or aray because here we start indexing pixels also from zero and also uh let's start a high so get high minus one here we can change printing from W and high and
• 16:00 - 16:30 also here uh we need to find into this uh condition in a for Loop the minimum value between wi and high and how to find it we can use a ma library and mean method between with and
• 16:30 - 17:00 high and if we if we run something like that then we will have exactly that what we want so if we change the size of this uh of this uh window you can see that this rectangles appears or this appears depends on what we already doing so now we have uh
• 17:00 - 17:30 dynamically we can we dynamically display this uh this uh rectangles here okay so so here we create this basic component of course on this uh Graphics we can also change color for example and here for example we can say that this this uh uh this pen should be
• 17:30 - 18:00 blue and then we will have this rectangles sprinted by uh using a blue color not uh default black color okay but let's return to running this application because here we create only this object of my window but in this way we cannot running our Windows because we need to run it using
• 18:00 - 18:30 a swing utilities and invocator method in which we will Define our runnable and now here inside this runnable we should call this my window of course we can also shorten it using Lambda Expressions so here we can have of course uh new my window so we can have also something like that if you want to make
• 18:30 - 19:00 it in a shorter way but what what is the swing U class and the invoke later static method why we need to use it this is a kind of a protection against Deadlocks of threads and against incorrect displaying of the window content when this window is changed in this uh very simple method in this very simple window we don't see any
• 19:00 - 19:30 problems but to prevent Deadlocks the programmer should pay special attention to the fact that the swing components and swing models are need to be created modified and accessed only from inside the special thread called EDT event dispatching thread and uh we can see we can ex uh sent command for execution by this
• 19:30 - 20:00 special thread by calling the invocator method thanks to this we have also the ability to edit components while our application is running without it our changes uh in the application might not be displayed correctly or not at all so we need to use this swing utility invoke later method
• 20:00 - 20:30 to print our application properly and to have a possibility to change our application to change uh uh components to show something new during execution of our application so so here we need to do it in that way okay after uh we have created this first example in which we use this very small part of
• 20:30 - 21:00 awt uh and overwriting this paint component method let's try to do something more let's uh create a new window so for example let's copy and paste this my window one to my window 2 let's remove this uh panel so so we'll have only this uh this window created here here and let's add here a text field to
• 21:00 - 21:30 this window on which we will try to change some characteristics such a background color font color its size style and type and uh component which is uh which represent represented text uh text area in swing is a j text area
• 21:30 - 22:00 class so here we can create this jxt area object and of course we can add it uh add it into our window so add J text area if we if we uh add only these two lines and if we call it also in a uh in a main method
• 22:00 - 22:30 you can see that now we have uh uh we have a white background in our window and here we can start writing something but how we can change it because for example uh in this moment this uh font size is really small how to change it to change it we can uh we need to
• 22:30 - 23:00 use uh building methods on this JX area so here we need to say unfortunately we don't have a method uh called set phone size or something like that Al so as you can see here we have get preferred size set TP size get size at minimum maximum size but uh here we don't have anything called about font size to change a font size we need to
• 23:00 - 23:30 set a font object into our jxt area and here also we have a possibility to change uh the font style and type so for example here we need to provide a new font object in which we can specify three things the font style at the beginning so for example we can say that we want
• 23:30 - 24:00 to have a s font like times nuran next we can uh specific the specify the font type so for example uh we want to have a font italic but also if we want to merge italic and Bol then we can use a bitwise operation and say also Bold And as a third argument we can specify the size of this phone so
• 24:00 - 24:30 for example 30 and if we run something like that now we have in this moment uh a serf italic bolt phone on a size 30 so now it now it works really really good okay but how to change also the background color and font color to change a background color we have very
• 24:30 - 25:00 simple we have very simple thing because we have met set background and here we can for example say yellow but to change the font color let's look set color do we have a matter set font color unfortunately no we have a set current color set selection color this disabl text color and selected text
• 25:00 - 25:30 color but we don't have set text color or or S set font color so how to do it if we don't have uh method as we want as we think that it should be here then we need to look into a documentation and in the documentation we can uh we can uh see that to change a color of font we need
• 25:30 - 26:00 to use a method set foreground and here for example we can say that we want to have this forr as uh in red color and now as you can see we have exactly this background as a yellow seted and foreground as a red already so so here as you can see if we work with some components uh we don't have always a very logic
• 26:00 - 26:30 names of this uh methods because here this set foreground is uh less logic than a set font color but we need to remember that if we don't find this particular method then we need to look into the documentations okay the next uh part about what I want to
• 26:30 - 27:00 say is uh layout manager what is it layout managers are simply tools that allows us to arrange our components in a certain way uh I will send in this moment in a in our chat the link to the uh to the layout managers and also I will show you now
• 27:00 - 27:30 it and in Java we have a few default layout managers available and for example as you can see we have here a border layout box layout cart layout flow layout grd B layout grd layout group layout and spring layout and uh the the most important for us is a border layout in which as you can see we have this upper bottom left
• 27:30 - 28:00 right uh sections and also Center section also uh most common to used is a flow layout in which you have this components added one by one so we have button 1 2 3 4 5 and also GD layout when we where we can specify the number of rows and uh and columns and we will add this buttons one by one into this grid
• 28:00 - 28:30 lay of course in the grid lay we can also specify the the particular position or of every but so so here we have many possible border layouts and let's try to implement one of the uh one of it let's uh take for example this border layout at the beginning because you will use it most often so let's copy and paste this my
• 28:30 - 29:00 window 2 to my window 3 here we will not okay one more thing I forgot about in this my window 2 about one thing because in this moment if we run something like that and if we start writing something really long then you can see that we write something but we don't see it also we cannot move move into the rest of
• 29:00 - 29:30 text uh we can see it only expanding the size of our window but how to add um uh how to add uh how to add uh how to add Scrolls here to add Scrolls here uh we have a specific panel and we need to add create it we
• 29:30 - 30:00 create here we canate something called J scroll pane which means that inside this uh pane we should uh we should add we should put the thing that could be bigger than our window so here we can create this jcr Pane and in a in a construct of this JS scroll pane we can say Okay I want to pack this J
• 30:00 - 30:30 text area into this jcr Pane and into window we don't want to add in this moment directly this JX area but we want to add this J scroll Pane and if we run something like that now if we start writing something really long then we we can have uh horizontal Scrolls but also vertically
• 30:30 - 31:00 if we need to move through this entire content so as you can here here we can we can make it in a really simple way using only this J scroll Pane and just this J scroll pane we can use not only in a kind of JX area but also any lists which which will uh print in our window but also tables and any component that will be bigger than our
• 31:00 - 31:30 window okay and let's back to this uh to this uh layout managers so how to how to cre how to use this uh this border layout manager here of course uh here let's create a panel new J panel and on this J panel we can say say that here we we want to use
• 31:30 - 32:00 a layout called border layout here we can create the object of this border layout directly here because we will not have a reference to it anymore we can create here also some buttons so objects of class J button in which we will uh will write for example page start and let's make five of
• 32:00 - 32:30 them so we have page start page end line start line end and center and we can add this buttons into our J panel but here we need to remember that if we write something like that it will be not enough because in default
• 32:30 - 33:00 when we have it set it as a border layout if we Define only the component here this components should be put in a center section So In This Moment here this uh first button will be placed in the center this button second also will be placed into the center and will overwrite this button first and Etc so if we want to specify the specific
• 33:00 - 33:30 section where we want to place this button we need to say border layout as in a second parameter the the information where when we want to put it for example here border layout page start here border layout uh page end here border layout line start here border layout line end and here we don't need to specify
• 33:30 - 34:00 anything because here all of course this this last button we want to add into a center but also we can write here A Center but it's a optional because in default we will put this button into a center section and of course if we if we add this J panel into our window and if we if we uh run this window here in the main
• 34:00 - 34:30 method we will have this uh this uh this uh border layout printed properly so as you can see we have this uh this north south east west and Center sections of course if we don't want to use every of this section we don't need to do that for example let's comment page start and line start and In This
• 34:30 - 35:00 Moment we'll have only three sections where we have a center line and tun pagent and of course if we change the size of this uh of this uh window the center section will will fill uh the entire rest of our window but in the situations when we when uh when this uh for example s section this page end
• 35:00 - 35:30 section will need to have uh store more space because in this moment it's uh uh it's high is really really small if we put another component which uh needs to be bigger then of course this section will be set bigger not uh not only in this uh very low high space okay but also inside this uh inside this
• 35:30 - 36:00 uh panel with border layout manager we can add more components with a different layout in one of the parts for example so how to do it for example let's say that in this page start we don't want to add only this one button but we want to add something more how to do it we can use uh another
• 36:00 - 36:30 panel J uh maybe let's call it as a uh page start panel new J panel and here let's say that this part page start panel will have a layout another for example flow layout and into this panel let's add this first button and also let's add a new J button with
• 36:30 - 37:00 some a AA text and into this J panel this maining panel we can say that we don't want to add only button one but we want to add the whole another p uh panel so here as you can see we can stack these panels as many as we want and if we run something like that now then you can see that in this uh
• 37:00 - 37:30 Nerf panel we have already this page start and AAA button and it's used as a flow layout in uh in a default flow layouts uh implementation we have this uh buttons placed in here in this in the order as we add it into this panel and also it's uh centralized in the whole panel so here this page start panel is
• 37:30 - 38:00 fill entire this space and inside this space we add this two simple buttles the last thing uh for today is uh getting our button to do something for this purpose we'll use the action listener interface and the add action listener method what is uh ws and how it works exactly
• 38:00 - 38:30 you will learn about it during the lecture with Professor Verner when we we will when we will take it talk about delegation model of events uh we'll also talk about that during uh classes but uh uh but uh we'll slow down with the material because uh uh during lecture you don't still have uh a
• 38:30 - 39:00 graphical user interface so we wait for a for one class or more uh with a new things uh but uh here I want you to show how to add some uh some uh some action to our buttles because in this moment okay we have these buttons but if we click it nothing happened but what if we want to do something
• 39:00 - 39:30 more uh from the implementation side the this delegation model of events is a very very simple mechanism because it consists in creating class that implements the appropriate interface type which should then be added to the component to which we want to add The Listener object and for example here we can add on a
• 39:30 - 40:00 button five the action listener using add action listener method and what does it mean we will add a listener to this method uh to this to this component to this button in this case uh when the action of clicking on this button will be triggered this listener uh this action
• 40:00 - 40:30 listener which we can add it using Anonymous internal classes and in which we need to specify the this action performed method so if uh the action of clicking on a backton is triggered this action performed method will be called which determines what is to happen when an event is triggered so for example here we can say that we want to uh
• 40:30 - 41:00 print uh B5 clicked but we can also for example change the text displayed on this button to clicked so we we write only this this part of course this on this action links in there we can also shorten using Lambda Expressions but if we run something like that
• 41:00 - 41:30 here you can see that okay now we have this s this center button if we click on it we have now clicked text here but also on a console the five clicked appears if we click more times then also we have something down here so so as uh you can see In This Moment everything works as we planned and uh uh to and adding some
• 41:30 - 42:00 action to our buttons it's really really simple in this moment you don't need to understand exactly how it works but here I want I want to show you this very simple possibility uh this concludes uh this introduction to the swing uh uh Basics
• 42:00 - 42:30 into the first window application you will learn more interesting swing components during the next classes uh but I would like to encourage you to learn more more about swing and to make your own experiments with this uh graphical user interface programming at basic just learned level but this experiments uh should uh should give you fun from
• 42:30 - 43:00 today's classes I would like you to have exactly this fun with what we are talking about to try to make something interesting using this components second project will be a game and I hope you will enjoy it uh all the more I encourage you to familiarize yourself with the with the another Al also with the another layout
• 43:00 - 43:30 managers that uh we that we presented today because in this moment I show you the Border layout and flow layout in a default in a default implementation but all also please look how this grid layout looks like and how this grid layout works because because this you also should use but but
• 43:30 - 44:00 um but you'll use this border layout uh very very often and it it will be your uh your basic layout manager but this another layouts uh will be very helpful tools [Music]