CENTRO UNIVERSITARIO UAEM ATLACOMULCO

LICENCIATURA EN:

INGENIERÍA EN COMPUTACIÓN

“Paradigmas de Programación I”

TERCER SEMESTRE

ALUMNO: Sánchez Hernández Gabriel

DOCENTE: Julio Alberto de la Teja López

Grupo: ICO 26

No. Cuenta: 2124687

Periodo Educativo: 2022-B

Atlacomulco de Fabela, 17 de octubre del 2022

General introduction

The following work shows some of the GUI codes that allow us to better understand the subject and how they help
us in our work as programmers day by day since these are implemented at all times within our academic and work
life, GUIs allow us to better manage the system since they are responsible for providing the user with a good
experience when opening programs or executing a task.

The main function of the GUI is that, to simplify the communication that exists between the machine, an operating
system and a user, these three complements serve and improve the GUI since they provide us with various
knowledge and we generate skills that allow us favoring, if the interface is not to the liking of a user, he can leave
and not continue since it is very difficult for him to understand, so something not very complex is needed that
actually calls the intention of who is using it or is visiting him. (GUI, 2020)

We as people who lead a life of hard work every day can create interfaces just by following some important steps
as they are.

• The interface should be easy to understand and use

• It has a good learning function and it is easy to remember its operation
• The main elements are very identifiable
• Facilitate and predict the most common user actions
• The information is properly ordered through menus, icons, bars, etc.
• Operations are fast, intuitive and reversible
• When navigating it is very easy and usability is acceptable

The graphical user interface or GUI (Graphic User Interface) is the visual environment of images and objects through
which a machine and a user interact. In the mid-1970s, GUIs began to replace command line interfaces (CLIs), making
interaction with computers easier and more intuitive.

Something very important to note is that, like any other type of textual or graphic document created by a computer
program, hypertext navigation is carried out through the screen and in the case of a document or a web platform,
for through a reading and viewing program called a browser. The hypertext design is done so that the user can see
all the necessary information on the screen and to operate and interact with it through the mouse, the keyboard
and the menu options. Thus, codes are inserted that are not visible if preferred, but that offer the desired appearance
to be seen on the screen. Here the key word is WYSIWYG ("What you see is what you get"), that is, what you see is
what you get, this way it becomes easier for us to try to understand and handle different things at the same time
since an interface will provide us with that help at all times.

Finally, the practice begins with the visualization of a document where we use this to create the codes as well as the
output screens or execution of each of the codes with everything necessary to be able to generate our own
knowledge and skills at the moment. of carrying out each of the codes, since they are not so complex they take up
a bit of time when observing their operation and since in reality we must use them since there are several interfaces
and several meters to be able to call them, so it is necessary the help of an interface that allows us to create more
interfaces and in this case we use Java as a complement to be able to create the practice as well as GitHub, which
was the platform where each of the codes made were uploaded.
12.2 Entrada y salida simple

Introduction

In this code, what was done was a code that allowed us to give two numbers so that at the end it could add them without
having to struggle within the code so that the two numbers would be added right there, it will also give us a window
where they are entered there the numbers and with the accept button the entered numbers will be added without
suffering errors.

Imágenes de ejecución

Code

package GUI.Suma;
// Fig. 12.2: Sum.java
// Addition program that uses JOptionPane for input and output.
import javax.swing.JOptionPane;

public class Suma {

public static void main (String[] args){

// get user input from JOptionPane's input dialogs

String firstNumber = JOptionPane.showInputDialog("Insert the first number");
String secondNumber = JOptionPane.showInputDialog("Insert the second
number");

//convert the String inputs to int values to use in the calculation

int number1 = Integer.parseInt(firstNumber);
int number2 = Integer.parseInt(secondNumber);

int sume = number1 + number2;

//Display the results in the JOptionPane message dialog

JOptionPane.showMessageDialog(null, "La suma es: "+ sume,
"Suma de dos enteros ", JOptionPane.PLAIN_MESSAGE);
}
}//end class Sum
Comment

This code was very useful to me since it became interesting to me how within a code giving it instructions we can add
two numbers that we want since I only knew the sum of two numbers but already within the code giving it values within
the same code without see a window that adds these numbers and this code does not give as many errors as the previous
ones.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/Suma

12.6 y 12.7 Label frame

Introduction

In this code, what was done was to add an image to the code so that it would show us the image with text boxes both to
the right, below and left of the image, for that with a line of code we call the image with the assigned name to said image
so that within the line of code it would be called and it would not have bruises.

Execution image

Code

package GUI.LabelFrame;
// Fig. 12.6: LabelFrame.java
// Jlabel components with text and icons
import java.awt.FlowLayout; // specifies how components are to be ordered
import javax.swing.JFrame; // provides the basic features of awindow
import javax.swing.JLabel; // display text and images
import javax.swing.SwingConstants; // common constants used with Swing
import javax.swing.Icon; // interface used to manipulate images
import javax.swing.ImageIcon; // load the images

public class LabelFrame extends JFrame {

private JLabel label1; //JLabel with text only
private JLabel label2; //JLabel built with tecto and an icon
private JLabel label3; //JLabel with additional text and icon

// LabelFrame constructor adds JLabel objects to JFrame

public LabelFrame(){
super("Test of JLabel1");
setLayout(new FlowLayout()); // set the frame schema
 label1 = new JLabel("Label whit text");
label1.setToolTipText("This is label1");
add(label1); // add label1 to JFrame

// JLabel constructor with string, Icon, and alignment arguments

Icon insect = new ImageIcon(getClass().getResource("insect.png"));
label2 = new JLabel("Label whit text and icon", insect, SwingConstants.LEFT);
label2.setToolTipText("This is label2");
add(label2); // add label2 to JFrame

label3 = new JLabel(); // JLabel constructor with no arguments

label3.setText("Label whit icon and text in the bottom");
label3.setIcon(insect);
label3.setHorizontalTextPosition(SwingConstants.CENTER);
label3.setVerticalTextPosition(SwingConstants.BOTTOM);
label3.setToolTipText("This us label3");
add(label3); // add label3 to JFrame
}
} // end LabelFrame class

package GUI.LabelFrame;
// Fig. 12.7: TestLabel.java
// LabelFrame test.

import javax.swing.JFrame;

public class TestLabel1 {

public static void main(String[] args) {
LabelFrame labelFrame = new LabelFrame();
labelFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
labelFrame.setSize(260,180);
labelFrame.setVisible(true);
}
} // end class TestLabel

Comement

This code allowed me to understand the operation of how we can call an image with text boxes that is displayed in a
window with what is required, although it is difficult when trying to understand since without a correct library this would
not work and would mark errors within the code and the output screen would not come out in the window

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/LabelFrame
12.9 y 12.10 Campo texto Marco

Introduction

What was done within this code was to create two classes to call a text box that asks us to enter our own text, be it
anything, the next thing is to show a window with what is written in the text box and that same window will give another
message window displaying our text.

Execution image

Code

package GUI.CampoTextoMarco;
// Fig. 12.9: FrameTextField.java
// The JTextField and JPasswordField components.
import java.awt.*;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JPasswordField;
import javax.swing.JOptionPane;

public class FieldTextFrame extends JFrame{

private final JTextField textField1; // text field with fixed size
private final JTextField textField2; // text field with text
private final JTextField textField3; // text field with text and size
private final JPasswordField passwordFiel; // password field with text

// FrameTextField constructor adds JTextField objects to JFrame

public FieldTextFrame(){
super("Test of JTextField and JPasswordField");
setLayout(new FlowLayout());

//Build text field with 10 columns

textField1 = new JTextField(10);
add(textField1);// add textField1 to JFrame

//build text field with default text

textField2 = new JTextField("Write the text here");
add(textField2);// add textField2 to JFrame

//build text field with default text and 21 columns

textField3 = new JTextField("Not editable text field",21);
textField3.setEditable(false);// disable editing
add(textField3); // add textField3 to JFrame
 //build password field with default text
passwordFiel = new JPasswordField("Hidden text");
add(passwordFiel);

// register event handlers

handlerTextField handler = new handlerTextField();
textField1.addActionListener(handler);
textField2.addActionListener(handler);
textField3.addActionListener(handler);
passwordFiel.addActionListener(handler);

}
// private inner class for event handling
private class handlerTextField implements ActionListener{
// process text field events
@Override
public void actionPerformed(ActionEvent event){
String string ="";

//user pressed Enter on JTextField object textField1

if(event.getSource() == textField1)
string = String.format("textField11: %s", event.getActionCommand());

// the user pressed Enter on the JTextField object textField2

else if(event.getSource() == textField2)
string = String.format("textField2: %s", event.getActionCommand());

// the user pressed Enter on the JTextField object textField3

else if(event.getSource() == textField3)
string = String.format("textField3: %s", event.getActionCommand());

// the user pressed Enter on the JTextField object

else if(event.getSource() == passwordFiel)
string = String.format("passwordField: %s", event.getActionCommand());
//display the content of the JTextField object
JOptionPane.showMessageDialog(null, string);
}
} // end of class intern private FieldTextFrame
} // end of class FieldTextFrame

package GUI.CampoTextoMarco;
// Fig. 12.10: TextFieldTest.java
// Test FrameTextField.

import javax.swing.JFrame;

public class TestTextField {

public static void main(String[] args) {

FieldTextFrame fieldTextFrame = new FieldTextFrame();

fieldTextFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fieldTextFrame.setSize(350, 100);
fieldTextFrame.setVisible(true);
}
}// end class TextFieldTest
Comment

I found the code interesting since entering a text that allows us to view it again in a message window is really interesting
since we can add different things, something that I liked about the code is that we can add a password so that the message
box appears. text, having knowledge of these will allow us to visualize some other components.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/CampoTextoMarco

12.15 y 12.16 Marco Botón

Introduction

This code allows us to design a text box with two buttons, one simple and the other elegant, each button contains a
different image and when selecting said button it will show us its image and when clicking it it will show us the button
that we have chosen , it is something quite complex and likewise a code library was called

Execution image

Code

package GUI.MarcoBoton;
// Fig. 12.15: ButtonFrame.java
// Command buttons and action events.
import java.awt.*;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JButton;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JOptionPane;

public class FrameButton<LabelFrameButton> extends JFrame {

private final JButton buttonJButtonSimple; // button with text only
private final JButton buttonJButtonElegant; // button with icons

//ButtonFrame adds JButton objects to JFrame

 public FrameButton(){
super("Test of buttons");
setLayout(new FlowLayout());

buttonJButtonSimple = new JButton("Simple button"); // button with text

add(buttonJButtonSimple); // add buttonJButtonSimple to JFrame

Icon insect1 = new ImageIcon(getClass().getResource("Insect1.gif"));

Icon insect2 = new ImageIcon(getClass().getResource("Insect2.gif"));
buttonJButtonElegant = new JButton("Elegant button", insect1);// set the image
buttonJButtonElegant.setRolloverIcon(insect2);// set the replacement image
add(buttonJButtonElegant);// add fancyButtonJButton to JFrame

// create new ButtonHandler to handle button events

HandlerButton handler = new HandlerButton();
buttonJButtonElegant.addActionListener(handler);
buttonJButtonSimple.addActionListener(handler);
}
// inner class to handle button events
private class HandlerButton implements ActionListener {
// handle button event
@Override
public void actionPerformed(ActionEvent event) {
JOptionPane.showMessageDialog(FrameButton.this, String.format("You oppressed: %s"
,
event.getActionCommand()));

}
}
}// end the class FrameButton

package GUI.MarcoBoton;
// Fig. 12.16: TestButton.java
// ButtonFrame test.
import javax.swing.JFrame;

public class TestButton {

public static void main(String[] args) {
FrameButton frameButton = new FrameButton();
frameButton.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameButton.setSize(275, 110);
frameButton.setVisible(true);

}
}// end class TestButton
Comment

With this code we realize that it is possible to select a button that shows us an image, but in the same way within this we
must call the image so that the code executes it correctly, it seems to me an easier way to learn to design something that
we know we will be able to occupy in the future.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoBoton

12.17 y 12.18 Marco casilla verificación

Introduction

This code shows the change of letter that can be made to a text, showing it in a text window with some buttons that allow
the selection of the type of letter that you want to show, in this way the text will change with the selected button, said
code shows no complications when executing

Execution image

Code

package GUI.MarcoCasillaVerificacion;
// Fig. 12.17: CheckBoxFrame.java
// JcheckBox buttons and element events.
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.event.ItemListener;
import java.awt.event.ItemEvent;
import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JCheckBox;

public class FrameCheckBox<changeable> extends JFrame {

private JTextField TextField; // display the text in fonts changeable

private JCheckBox boldJCheckBox; //to select/deselect bold
private JCheckBox italicsJCheckBox; //to select/unselect italics

//The constructor of CheckBoxFrame adds JCheckBox objects to JFrame

public FrameCheckBox() {
super("JCheckBox test");
setLayout(new FlowLayout());

// set JTextField and its font

 TextField = new JTextField("Notice how the type style changes letter", 25);
TextField.setFont(new Font("Serif", Font.PLAIN, 14));
add(TextField); // add TextField to JFrame

boldJCheckBox = new JCheckBox("Bold");

italicsJCheckBox = new JCheckBox("Italic");
add(boldJCheckBox);//add "bold" checkbox to JFrame
add(italicsJCheckBox); //add "italic" checkbox to JFrame

//register listener components for JCheckBox objects

CheckBoxHandler handler = new CheckBoxHandler();
boldJCheckBox.addItemListener(handler);
italicsJCheckBox.addItemListener(handler);
}

//private inner class for handling ItemListener events

private class CheckBoxHandler implements ItemListener {
@Override
public void itemStateChanged(ItemEvent event) {
Font lettertype = null; // store the new Font object

// determine which CheckBox objects are selected and create the Font object
if (boldJCheckBox.isSelected() && italicsJCheckBox.isSelected())
lettertype = new Font("Serif", Font.BOLD + Font.ITALIC, 14);
else if (boldJCheckBox.isSelected())
lettertype = new Font("Serif", Font.BOLD, 14);
else if (italicsJCheckBox.isSelected())
lettertype = new Font("Serif", Font.ITALIC, 14);
else
lettertype = new Font("Serif", Font.PLAIN, 14);

TextField.setFont(lettertype);

}
}
}// end class CheckBoxFrame

package GUI.MarcoCasillaVerificacion;
// Fig. 12.18: CheckBoxTest.java
// CheckBoxFrame test.
import javax.swing.JFrame;

public class TestCheckBox {

public static void main(String[] args) {

FrameCheckBox frameCheckBox = new FrameCheckBox();
frameCheckBox.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameCheckBox.setSize(550,150);
frameCheckBox.setVisible(true);
}
}// end class CheckBoxTest

Comment

It seems to me a fascinating idea that from a code we can change some type of font and that it changes it without
problems, although I would like that instead of the text being already inside the Code.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoCasillaVerificacion
12.19 y 12.20 Marco botón opción

Introduction

In this code, what we want to show are text windows with some buttons that allow us to change the font, this one before
the other has four buttons, so it has more font changes, with the buttons we will select the type of font that we Like it
more, said code already has inside the text that you want to see with the change of letter.

Execution image

Code

package GUI.MarcoBotonOpcion;
// Fig. 12.19: OptionButtonFrame.java
// Create radio buttons, using ButtonGroup and JRadioButton.
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.event.ItemListener;
import java.awt.event.ItemEvent;
import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JRadioButton;
import javax.swing.ButtonGroup;

public class OptionButtonFrame extends JFrame{

private final JTextField TextField; // used to show changes in font

private final Font TypeLetterSimple; //font for simple text
private final Font TypeLetterBold; //font for bold text
private final Font TypeLetterItalic; //font for text in italics
private final Font TypeLetterBoldItalic; //bold and italic italic font

private final JRadioButton simpleJRadioButton; //select simple text

 private final JRadioButton boldJRadioButton; //select bold text
private final JRadioButton italicsJRadioButton; //select italic text
private final JRadioButton boldItalicJRadioButton; // bold and italic
private final ButtonGroup optiongroup; // contains the option buttons

//The constructor of OptionButtonFrame adds the JRadioButton objects to the JFrame

public OptionButtonFrame() {
super("Test RadioButton");
setLayout(new FlowLayout());

TextField = new JTextField("Notice the change in the style of the type letter",25);
add(TextField); // add TextField to JFrame

//create radio buttons

simpleJRadioButton = new JRadioButton("Simple",true);
boldJRadioButton = new JRadioButton("Bold",false);
italicsJRadioButton = new JRadioButton("Italic",false);
boldItalicJRadioButton = new JRadioButton("Bold/Italic",false);
add(simpleJRadioButton);//add simple button to JFrame
add(boldJRadioButton);//adds bold button to JFrame
add(italicsJRadioButton);//add italics button to JFrame
add(boldItalicJRadioButton); // add bold and italic button

//create a logical relationship between the JRadioButton objects

optiongroup= new ButtonGroup(); //create ButtonGroup
optiongroup.add(simpleJRadioButton);//create ButtonGroup
optiongroup.add(boldJRadioButton);//adds bold to the group
optiongroup.add(italicsJRadioButton); // add italics to the group
optiongroup.add(boldItalicJRadioButton);//add bold and italic

//create font objects

TypeLetterSimple= new Font("Serif",Font.PLAIN,14);
TypeLetterBold= new Font("Serif",Font.BOLD,14);
TypeLetterItalic = new Font("Serif",Font.ITALIC,14);
TypeLetterBoldItalic= new Font("Serif",Font.BOLD+Font.ITALIC,14);
TextField.setFont(TypeLetterSimple);

//register events for JRadioButton objects

simpleJRadioButton.addItemListener(new OptionButtonHandler(TypeLetterSimple));
boldJRadioButton.addItemListener(new OptionButtonHandler(TypeLetterBold));
italicsJRadioButton.addItemListener(new OptionButtonHandler(TypeLetterBoldItalic));
boldItalicJRadioButton.addItemListener(new
OptionButtonHandler(TypeLetterBoldItalic));
}
//private inner class to handle radio button events
private class OptionButtonHandler implements ItemListener{
private Font typeLetter; //font associated with this listener component
public OptionButtonHandler(Font f){
typeLetter = f;
}
//handle radio button events
@Override
public void itemStateChanged(ItemEvent event){
TextField.setFont(typeLetter);
}
}
}// end class OptionButtonFrame
package GUI.MarcoBotonOpcion;
// Fig. 12.20: OptionButtonTest.java
// OptionButtonFrame test....
import javax.swing.JFrame;

public class TestButtonOpcion {

 public static void main ( String [] args ) {
OptionButtonFrame optionButtonFrame = new OptionButtonFrame();
optionButtonFrame.setDefaultCloseOperation(JFrame .EXIT_ON_CLOSE );
optionButtonFrame.setSize( 600 , 100 );
optionButtonFrame.setVisible( true );
}
}// end class OptionButtonTest

Comment

It seems perfect to me that now more fonts can be chosen, although there are only two, but their structure changes, with
the buttons ready to receive instructions it is easy to control the code, in execution only the text window is shown with
the buttons for letter change so it's ok as the code is executed.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoBotonOpcion

12.21 y 12.22 Marco cuadro combinado

Introduction

The following code shows four images with different names assigned for their possible execution, each image can be
displayed with the change or selection of a button, if it were a list it was only that here we can search for the one we want
just by selecting the name of these.

Execution image

Code

package GUI.MarcoCuadroCombinado;
// Fig. 12.21: ComboBoxFrame.java
// JComboBox object that displays a list of image names.
import java.awt.FlowLayout;
import java.awt.event.ItemListener;
import java.awt.event.ItemEvent;
import javax.swing.JFrame;
 import javax.swing.JLabel;
import javax.swing.JComboBox;
import javax.swing.Icon;
import javax.swing.ImageIcon;

public class ComboBoxFrame extends JFrame {

private final JComboBox<String> imagesJComboBox; // Contains the names of the icons
private final JLabel label; //Show the selected icon

private static final String

names[]={"ins1.gif","ins2.gif","instravel.gif","insanim.gif"};
private final Icon[] icons = {
new ImageIcon(getClass().getResource(names[0])),
new ImageIcon(getClass().getResource(names[1])),
new ImageIcon(getClass().getResource(names[2])),
new ImageIcon(getClass().getResource(names[3]))};

//The FrameCombined Frame constructor adds a JComboBox object to JFrame

public ComboBoxFrame(){
super("JComboBoxTest");
setLayout(new FlowLayout());// sets the framework schema

imagesJComboBox = new JComboBox<String>(names);// sets JComboBox

imagesJComboBox.setMaximumRowCount(3);//shows three rows

imagesJComboBox.addItemListener(
new ItemListener() { // anonymous inner class
// handle JComboBox event
@Override
public void itemStateChanged(ItemEvent event) {
if(event.getStateChange() == ItemEvent.SELECTED)
label.setIcon(icons[
imagesJComboBox.getSelectedIndex()]);
}
} // end anonymous inner class
); // end addItemListener call

add(imagesJComboBox); //adds combo box to JFrame

label = new JLabel(icons[0]);// displays the first icon
add(label);// adds tag to JFrame
}
}// end of the Frame class Combined Frame

package GUI.MarcoCuadroCombinado;
// Fig. 12.22: ComboBoxTest.java
// ComboBoxFrame test.
import javax.swing.JFrame;

public class TestComboBox {

public static void main(String[] args) {
ComboBoxFrame comboBoxFrame= new ComboBoxFrame();
comboBoxFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
comboBoxFrame.setSize(400,400);
comboBoxFrame.setVisible(true);
}
}// end class CombinationBoxTest
Comment

I found the operation of this code very interesting since with the selection of the combo box it is fun to identify an image
that we found in the code previously, this also generates extra learning since if we know how to use the corresponding
extensions it works quickly.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoCuadroCombinado

12.23 y 12.24 Marco Lista

Introduction

In the following code, a list will be shown where it contains several colors, each color is linked to a library, so they can be
viewed without any problem, the list has several colors, to be able to select the colors, just click on the button you want
to display and the panel will change to the color you selected.

Execution image

Code

package GUI.MarcoLista;
// Fig. 12.23: ListFrame.java
// JList object that displays a list of colors.
import java.awt.FlowLayout;
import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.JList;
import javax.swing.JScrollPane;
import javax.swing.event.ListSelectionListener;
import javax.swing.event.ListSelectionEvent;
import javax.swing.ListSelectionModel;

public class ListFrame extends JFrame {

private final JList<String> listJListColors; //ready to show colors
private static final String[] nameColors ={"Black","Blue","Cyan","Dark Gray",
"Gray","Green","Light gray","Magenta","Orange","Pink","Red","White","Yellow"};
private static final Color[] colors={Color.BLACK,Color.BLUE,Color.CYAN,
Color.DARK_GRAY,Color.GRAY,Color.GREEN,Color.LIGHT_GRAY,
Color.MAGENTA,Color.ORANGE,Color.PINK,
Color.RED,Color.WHITE,Color.YELLOW};

//The constructor of ListFrame adds to the JFrame the JScrollPane that contains a
//JList
public ListFrame(){
super("JList test");
setLayout(new FlowLayout());

listJListColors = new JList<String>(nameColors);//list of names colors

listJListColors.setVisibleRowCount(5);//show five rows at a time

//does not allow multiple selections

listJListColors.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
//adds a JScrollPane object containing a JList to the frame
add(new JScrollPane(listJListColors));

listJListColors.addListSelectionListener(
new ListSelectionListener() {
//handle list selection events
@Override
public void valueChanged(ListSelectionEvent event) {

getContentPane().setBackground(colors[listJListColors.getSelectedIndex()]);
}
}
);
}
}//end of class ListFrame

package GUI.MarcoLista;
// Fig. 12.24: TestList.java
// Select colors from a JList object
import javax.swing.JFrame;

public class TestList {

public static void main(String[] args) {
ListFrame listFrame= new ListFrame();//create ListFrame object
listFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
listFrame.setSize(800,600);
listFrame.setVisible(true);
}
} //end of class TestList

Comment

This code allowed me to understand more how we can generate a list where it shows us some colors, it leaves me
wondering if we can use it for something else like showing some objects that we enter and put it behind the selected
one, although that could Investigate like this I would have self-learning and it would be easier for me to understand
how the code works in the same way
Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoLista

12.25 y 12.26 Marco selección múltiple

Introduction

The following code shows how we can create a list of the same colors that we already have inside the code, but we will
select these and only five of the colors present in the first list can be selected, it is quite easy since we have the copy
button that allows you to select the code and pass it to the corresponding list.

Execution image

Code

package GUI.MarcoSeleccionMultiple;
// Fig. 12.25: MultipleSelectionFrame.java
// JList object that allows multiple selections.
import java.awt.FlowLayout;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JList;
import javax.swing.JButton;
import javax.swing.JScrollPane;
import javax.swing.ListSelectionModel;

// JList object that allows multiple selections.

public class MultipleSelectionFrame extends JFrame {
private final JList<String> listJListColors;// list to store names of the colors
private final JList<String> listJListCopy;// list to copy to the names of the colors
private JButton buttonJButtonCopy;// button to copy selected names
private static final String[] colorsName = {"Black", "Blue", "Cyan",
"Dark gray", "Gray", "Green", "Light gray", "Magenta",
"Orange", "Pink", "Red", "White", "Yellow"};

// Multiple Selection Frame Constructor

public MultipleSelectionFrame() {
super("Multiple choice lists");
setLayout(new FlowLayout());
listJListColors = new JList<String>(colorsName);// List of names of colors
listJListColors.setVisibleRowCount(5);// show five rows
listJListColors.setSelectionMode(
ListSelectionModel.MULTIPLE_INTERVAL_SELECTION);
add(new JScrollPane(listJListColors));// add list with panel displacement
buttonJButtonCopy = new JButton("Copy >>>");
buttonJButtonCopy.addActionListener(new ActionListener() {// anonymous inner class
// handle button event
@Override
public void actionPerformed(ActionEvent event) {
 // put the selected values in listJListCopy

listJListCopy.setListData(listJListColors.getSelectedValuesList().toArray(new String[0]));
}
}
);
add(buttonJButtonCopy);// add copy button to JFrame
listJListCopy = new JList<String>();// list to store names of copied colors
listJListCopy.setVisibleRowCount(5);// show 5 rows
listJListCopy.setFixedCellWidth(100);// set the width
listJListCopy.setFixedCellHeight(15);// set the height
listJListCopy.setSelectionMode(ListSelectionModel.SINGLE_INTERVAL_SELECTION);
add(new JScrollPane(listJListCopy));// add list with panel displacement
}
}// end class MultiSelectionFrame

package GUI.MarcoSeleccionMultiple;
// Fig. 12.26: MultipleSelectionTest.java
// MultipleSelectionFrame test.
import javax.swing.JFrame;

public class MultipleChoiceQuiz {

public static void main(String[] args) {
MultipleSelectionFrame multipleSelectionFrame = new MultipleSelectionFrame();
multipleSelectionFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
multipleSelectionFrame.setSize(350,140);
multipleSelectionFrame.setVisible(true);
}
}// end of class Test Multiple Selection

Comment

In this code I had some complications since it only allows me to select one color when there should be several, but after
seeing what was wrong is that I did not execute the program well, that's why I only got to copy one color and not
several as they should be

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoSeleccionMultiple

12.28 y 12.29 Marco rastreador botón

Introduction

In the following code, what is intended to demonstrate is the movement of the cursor or mouse when being inside the
panel created by the code together with the extension that we made, it will show different actions that we can do with
said mouse, we can occupy it as many times as they are necessary to prove that it really works

Execution image
Code

package GUI.MarcoRastreadorRaton;
// Fig. 12.28: MouseTrackerFrame.java
// Mouse event handling.
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.event.MouseEvent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class MouseTrackerFrame extends JFrame{

private final JPanel panelMause;//panel in which mouse events will occur
private final JLabel barStatus; //displays event information

//The MarcoRastreadorRaton constructor sets the GUI and registers the mouse event
handlers
public MouseTrackerFrame(){
super("Mouse Events Demo");

panelMause = new JPanel();

panelMause.setBackground(Color.WHITE);
add(panelMause,BorderLayout.CENTER);//adds tag to JFrame

barStatus = new JLabel("Mouse out of JPanel");

add(barStatus, BorderLayout.SOUTH);//adds tag to JFrame

//creates and registers a listening component for mouse events

//and its movement
MouseHandler driver = new MouseHandler();
panelMause.addMouseListener(driver);
panelMause.addMouseMotionListener(driver);
}
private class MouseHandler implements MouseListener, MouseMotionListener{
// MouseListener event handlers
// handle the event when the mouse is released right after pressing
//the button
@Override
public void mouseClicked(MouseEvent event){
barStatus.setText(String.format("Clicked [%d, %d]",
event.getX(),event.getY()));
}
// handles event when mouse is pressed
@Override
public void mousePressed(MouseEvent event){
 barStatus.setText(String.format("Oppressed in [%d, %d]",
event.getX(),event.getY()));
}

@Override
public void mouseReleased(MouseEvent event) {
barStatus.setText(String.format("It was released in [%d,%d]",
event.getX(),event.getY()));
}

// handles event when the mouse button is released

@Override
public void mouseEntered(MouseEvent event){
barStatus.setText(String.format("Mouse entered [%d, %d]",
event.getX(),event.getY()));
panelMause.setBackground(Color.GREEN);
}
// handles event when mouse exits area
@Override
public void mouseExited(MouseEvent event){
barStatus.setText("Mouse out of JPanel");
panelMause.setBackground(Color.WHITE);
}
//MouseMotionListener event handlers handle the event when the use
// r drags the mouse with the button pressed
@Override
public void mouseDragged(MouseEvent event){
barStatus.setText(String.format("It is dragged in [%d, %d]",event.getX(),
event.getY()));
}
// handles event when user moves mouse
@Override
public void mouseMoved(MouseEvent event){
barStatus.setText(String.format("Moved by [%d, %d]",
event.getX(),event.getY()));
}
} // end inner class MouseHandler
} // end MouseTrackerFrame class

package GUI.MarcoRastreadorRaton;
// Fig. 12.29: MouseTrackerFrame.java
// Test of MouseTrackerFrame.
import javax.swing.JFrame;

public class MouseTracker {

public static void main(String[] args) {
MouseTrackerFrame mouseTrackerFrame = new MouseTrackerFrame();
mouseTrackerFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
mouseTrackerFrame.setSize(300, 100);
mouseTrackerFrame.setVisible(true);
}
}// end class TrackerMouse

Comment

This code allowed me to be able to carry out a practice where with the help of the mouse the handling was possible, in
this way with the panel we interact and generate different types of actions such as being outside the panel, clicking inside
the panel so it is perfect for practicing the motion of some particular object.
Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoRastreadorRaton

12.31 y 12.32 Marco detalles ratón

Introduction

The code below shows us the clicks we make on the parts of our mouse, as well as the left side, the right side or the
middle button that some of the mice have, for that within our panel we perform these actions that allow us identify
which part of our mouse we are using

Execution image

Code

package GUI.MarcoDetallesRaton;
// Fig. 12.31: MouseDetailFrame.java
// Demonstration of mouse clicks and how to differentiate between mouse buttons.
import java.awt.BorderLayout;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import javax.swing.JFrame;
import javax.swing.JLabel;

public class MouseDetailsFrame extends JFrame{

private String details;//String shown in StatusBar
private final JLabel statusBar;//JLabel that appears at the bottom of the window

//constructor sets String of title bar and registers mouse listener component
public MouseDetailsFrame() {
super("Click and Mouse Buttons");

statusBar = new JLabel("Click the mouse");

add(statusBar, BorderLayout.SOUTH);
addMouseListener(new MouseClickHandler()); // add the handler
}

//inner class to handle mouse events

 private class MouseClickHandler extends MouseAdapter {
//handle mouse click event and determine which button was pressed
@Override
public void mouseClicked(MouseEvent event) {
int xPos = event.getX(); // Get the x position of the mouse
int yPos = event.getY();//Gets the y position of the mouse

details = String.format("Clicked %d time(s)",

event.getClickCount());

if (event.isMetaDown())//right mouse button

details += "with the right mouse button";
else if (event.isAltDown())//middle mouse button
details += "with the middle mouse button";
else // left mouse button
details += "with the left mouse button";

statusBar.setText(details);//shows the message in statusbar

}
}
}// end class MouseDetailFrame

package GUI.MarcoDetallesRaton;
// Fig. 12.32: MouseDetails.java
// MouseDetailFrame test.
import javax.swing.JFrame;

public class DetailsMouse {

public static void main(String[] args) {
MouseDetailsFrame mouseDetailFrame = new MouseDetailsFrame();
mouseDetailFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
mouseDetailFrame.setSize(400,150);
mouseDetailFrame.setVisible(true);
}
}// end class MouseDetails

Comment

This code was much easier for me when it came to doing it since I had prior knowledge of how it would be done thanks
to a previous code that I had seen and with the help of information it made it easier for me to understand it, only that
when using the click of in the middle I didn't know what part of the mouse it was until I searched the internet and I was
able to successfully complete the execution of the program

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoDetallesRaton

12.34 y 12.35 Panel dibujo

Introduction

The following code shows the execution of a drawing panel together with the mouse since with these we can make a
drawing whatever it was, with the help of an extension it may be possible to make the panel and the drawings within East.
Execution image

Code

package GUI.PanelDibujo;
// Fig. 12.34: PanelDrawing.java
// DrawPanel test.
import java.awt.Point;
import java.awt.Graphics;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;
import java.util.ArrayList;
import javax.swing.JPanel;

public class DrawingPanel extends JPanel {

// list of Point references
private final ArrayList<Point> points = new ArrayList<>();

// set the GUI and register the mouse event handler

public DrawingPanel() {
// handle mouse move event on frame
addMouseMotionListener(
new MouseMotionAdapter() {
// store drag coordinates and redraw
@Override
public void mouseDragged(MouseEvent event) {
points.add(event.getPoint());
repaint();
}
}
);
}
// draw ovals in a 4 x 4 bounding box, at specified locations in the window
@Override
public void paintComponent(Graphics g) {
super.paintComponent(g); // clear the drawing area

// draw all points

for (Point point : points) {
g.fillOval(point.x, point.y, 4, 4);
}
}
}// end class DrawingPanel

package GUI.PanelDibujo;
// Fig. 12.35: Painter.java
// DrawPanel test.
import java.awt.BorderLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;

public class Painter {

public static void main(String[] args) {
// create JFrame object
JFrame application = new JFrame("A simple drawing program");

DrawingPanel drawingPanel = new DrawingPanel();

application.add(drawingPanel, BorderLayout.CENTER);

// create a label and place it in the SOUTH region of the BorderLayout

application.add(new JLabel("Drag mouse to draw"), BorderLayout.SOUTH);

application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
application.setSize(400, 200);
application.setVisible(true);
}
}

Comment

This was the code in which I liked working since creating a panel like Paint where you can make some drawings is quite
entertaining and I would like there to be the option of adding several colors so that it is not so ugly only in black, but it
still leaves a lot to think about since the imagination is a limit here

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/PanelDibujo

12.36 y 12.37 Marco demo teclas

Introduction

The following code shows us that when pressing a key where these can be keys that do some action and others that do
not, we can identify it in the window that we have where when clicking on a key it will be put on the panel with some
instructions that they say whether or not it is an action key.

Execution image

Code

package GUI.MarcoDemoTeclas;
// Fig. 12.36: KeyDemoFrame.java
// Handling key events.
import java.awt.Color;
import java.awt.event.KeyListener;
import java.awt.event.KeyEvent;
import javax.swing.JFrame;
import javax.swing.JTextArea;
public class FrameworkDemoKeys extends JFrame implements KeyListener {
private String line1 = ""; // first line of the textarea
private String line2 = ""; // second line of the textarea
private String line3 = ""; // third line of the textarea
private JTextArea TextArea; // textarea to display the output

public FrameworkDemoKeys() {
super("Demonstration of key press events");

TextArea = new JTextArea(10, 15); // set the JTextArea object

TextArea.setText("Press any key on the keyboard...");
TextArea.setEnabled(false);
TextArea.setDisabledTextColor(Color.BLACK);
add(TextArea); // add the textarea to JFrame

addKeyListener(this); // allows the framework to process key events

}

// handle the event of pressing any key

@Override
public void keyPressed(KeyEvent event) {
line1 = String.format("Key pressed: %s", KeyEvent.getKeyText(event.getKeyCode()));
// show the key pressed
setLines2and3(event); // set output lines two and three
}

// handle the event of releasing any key

@Override
public void keyReleased(KeyEvent event) {
line1 = String.format("Key released: %s", KeyEvent.getKeyText(event.getKeyCode()));
// show the released key
setLines2and3(event); // set output lines two and three
}

@Override
public void keyTyped(KeyEvent event) {
line1 = String.format("Key pressed: %s", event.getKeyChar());
setLines2and3(event); // set output lines two and three
}

// set output lines two and three

private void setLines2and3(KeyEvent event) {
line2 = String.format("This key %s is an action key", (event.isActionKey() ? "" :
"no "));

String temp = KeyEvent.getKeyModifiersText(event.getModifiers());

line3 = String.format("Modifier keys pressed: %s", (temp.equals("") ? "none" :

temp)); // print modifiers

TextArea.setText(String.format("%s\n%s\n%s\n", line1, line2, line3)); // print three

lines of text
}
}// end class KeyDemoFrame

package GUI.MarcoDemoTeclas;
// Fig. 12.37: KeyDemo.java
// KeyDemoFrame test.
import javax.swing.JFrame;

public class DemoKeys {

public static void main(String[] args) {
 FrameworkDemoKeys frameworkDemoKeys= new FrameworkDemoKeys();
frameworkDemoKeys.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameworkDemoKeys.setSize(350, 100);
frameworkDemoKeys.setVisible(true);
}
}// end of KeyDemo class

Comment

This code was useful in some aspects since it allowed me to identify which keys are the ones that allow or generate an
action within the computer keyboard and which ones only do not generate anything, such as the letters that we mostly
use to write, so this code was very useful as a practice.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoDemoTeclas

12.39 y 12.40 Marco Flow Layout

Introduction

In the following code, what was done was to create a panel that shows us three buttons and when selecting one with the
indicated name it will move to that position or side, it has three different positions which allows us to make it easier to
handle of the panel where these buttons are shown

Execution image

Code

package GUI.MarcoFlowLayout;
// Fig. 12.39: FrameworkFlowLayout.java
// FlowLayout allows components to flow across multiple lines.
import java.awt.FlowLayout;
import java.awt.Container;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JButton;

public class FrameFlowLayout extends JFrame {

private final JButton buttonJButtonLeft; // button to set left alignment
private final JButton buttonJButtonCenter; // button to set the alignment to center
private final JButton buttonJButtonRight; // button to set the alignment to the right
private final FlowLayout scheme; // schema object
private final Container container; // container to set the schema

// set up the GUI and register the button listeners

public FrameFlowLayout() {
super("FlowLayout Demo");

scheme = new FlowLayout();

container = getContentPane(); // get container for schema
setLayout(scheme);
// set buttonJButtonLeft and register listener component
buttonJButtonLeft = new JButton("Left");
add(buttonJButtonLeft); // add Left button to frame
buttonJButtonLeft.addActionListener(
new ActionListener() { // anonymous inner class
// process event of buttonJButtonIzquierda
@Override
public void actionPerformed(ActionEvent event) {
scheme.setAlignment(FlowLayout.LEFT);

// realign attached components

scheme.layoutContainer(container);
}
}
);

// set buttonJButtonCenter and register listener component

buttonJButtonCenter = new JButton("Center");
add(buttonJButtonCenter); // add Center button to frame
buttonJButtonCenter.addActionListener(
new ActionListener() { // anonymous inner class
// process event of buttonJButtonCentro
@Override
public void actionPerformed(ActionEvent event) {
scheme.setAlignment(FlowLayout.CENTER);

// realign attached components

scheme.layoutContainer(container);
}
}
);

// set RightButtonJButton and register listener

buttonJButtonRight = new JButton("Right");
add(buttonJButtonRight); // add Right button to frame
buttonJButtonRight.addActionListener(
new ActionListener() { // anonymous inner class

// process event of buttonJButtonRight

@Override
public void actionPerformed(ActionEvent event) {
scheme.setAlignment(FlowLayout.RIGHT);

// realign attached components

 scheme.layoutContainer(container);
}
}
);
} // end FrameFlowLayout constructor
} // end FrameFlowLayout class

package GUI.MarcoFlowLayout;
// Fig. 12.40: DemoFlowLayout.java
// Test FrameworkFlowLayout.
import javax.swing.JFrame;

public class DemoFlowLayout {

public static void main(String[] args) {
FrameFlowLayout frameFlowLayout = new FrameFlowLayout();
frameFlowLayout.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameFlowLayout.setSize(600, 150);
frameFlowLayout.setVisible(true);
}
}// end class DemoFlowLayout

Comment

This code was simple when I was executing it but it was a bit complicated for me since I had exchanged the buttons and
they went to different sides so I just fixed it, it was quite good to learn in a different way than the previous ones, since
we went from doing lists to just handle code with some buttons and knowledge

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoFlowLayout

12.41 y 12.42 Marco boder layout

Introduction

In the following code, several buttons will be displayed inside the text box or panel, each one is in a different position and
when selecting a button, it will be removed from the box and the central buttons will start as they will take a different size
and so with the other buttons each one can take different forms so that is the interesting thing about this code.

Execution image
Code

package GUI.MarcoBorderLayout;
// Fig. 12.41: FrameBorderLayout.java
// BorderLayout containing five buttons.
import java.awt.BorderLayout;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JButton;

public class BorderLayoutFramework extends JFrame implements ActionListener{

private final JButton buttons[]; // arrangement of buttons to hide portions
private static final String names[] = {"Hide North", "Hide South", "Hide East", "Hide
West", "Hide Center"};
private final BorderLayout schema;

// establishes the GUI and event handling

public BorderLayoutFramework() {
super("BorderLayout Demo");

schema = new BorderLayout(5, 5); // 5 pixel spacing

setLayout(schema);
buttons = new JButton[names.length];

// creates JButton objects and registers listener components for them

for (int count = 0; count < names.length; count++) {
buttons[count] = new JButton(names[count]);
buttons[count].addActionListener(this);
}

add(buttons[0], BorderLayout.NORTH);
add(buttons[1], BorderLayout.SOUTH);
add(buttons[2], BorderLayout.EAST);
add(buttons[3], BorderLayout.WEST);
add(buttons[4], BorderLayout.CENTER);
}
// handles button events
@Override
public void actionPerformed(ActionEvent event) {
 // checks the source of the event and distributes the content pane accordingly
for (JButton button : buttons) {
if (event.getSource() == button) {
button.setVisible(false); // hides the pressed button
} else {
button.setVisible(true); // shows the other buttons
}
}

schema.layoutContainer(getContentPane()); // distributes the content panel

}
}// end BorderLayoutFrame class

package GUI.MarcoBorderLayout;
// Fig. 12.42: DemoBorderLayout.java
// Test of FrameBorderLayout.
import javax.swing.JFrame;

public class DemoBorderLayout {

public static void main(String[] args) {
BorderLayoutFramework borderLayoutFramework= new BorderLayoutFramework();
borderLayoutFramework.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
borderLayoutFramework.setSize(300, 200);
borderLayoutFramework.setVisible(true);
}
} // end of DemoBorderLayout class

Comment

This code allows me to understand the positions of some buttons and how each one can work if several instructions are
given to it, as well as to see how they can change within the place where they are without any problem occurring since it
is defined and what they should do do so in this way there is no error of it.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoBorderLayout

12.43 y 12.44 Marco grid layout

Introduction

The following code demonstrates the use of GridLayout along with some implements within the code that allow us to see
the columns and rows when selecting a button, since they change if we press each one, they show us different sizes, so
to speak, having each button the same height and width without any problem.

Execution image
Code

package GUI.MarcoGridLayout;
// Fig. 12.43: FrameGridLayout.java
// GridLayout containing six buttons.
import java.awt.GridLayout;
import java.awt.Container;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JButton;

public class FrameGridLayout extends JFrame implements ActionListener{

private final JButton[] buttons; // buttonarrangement
private static final String[] names = {"one", "two", "three", "four", "five", "six"};
private boolean toggle = true; // alternates between two schemes
private Container container; // frame container
private GridLayout grid1; // first GridLayout object
private GridLayout grid2; // second GridLayout object

// constructor without arguments

public FrameGridLayout() {
super("GridLayout Demo");
grid1 = new GridLayout(2, 3, 5, 5); // 2 by 3; spaces of 5
grid2 = new GridLayout(3, 2); // 3 by 2; no spaces
container = getContentPane();
setLayout(grid1);
buttons = new JButton[names.length];

for (int count = 0; count < names.length; count++) {

buttons[count] = new JButton(names[count]);
buttons[count].addActionListener(this); // records listening component
add(buttons[count]); // add button to JFrame object
}
}

// handles button events, toggling between the following schemes

@Override
public void actionPerformed(ActionEvent event) {
if (toggle) // establishes a scheme based on alternating
{
container.setLayout(grid2);
} else {
container.setLayout(grid1);
}

toggle = !toggle;
container.validate(); // redistributes the container
}
}// end the FrameGridLayout class

package GUI.MarcoGridLayout;
// Fig. 12.44: DemoGridLayout.java
// MarcoGridLayout test.
import javax.swing.JFrame;

public class DemoGridLayout {

public static void main(String[] args) {
FrameGridLayout frameGridLayout = new FrameGridLayout();
frameGridLayout.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameGridLayout.setSize(300, 200);
 frameGridLayout.setVisible(true);
}
} // end of DemoGridLayout class

Comment

In the previous code we can realize that we can occupy the width of some figures for the buttons and that these change
as we want but giving them a specific instruction, each button shows the change that can be made in the window where
it is they find and how these are ordered with some numbers so that there is no confection..

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoGridLayout

12.45 y 12.46 Marco panel

Introduction

In the following code we can see the creation of a panel with some buttons, the buttons do not do anything in particular,
we can only see how we can create it through the already established code, so we realize more about the operation of
the buttons and the panel where they are shown.

Execution image

Code

package GUI.MarcoPanel;
// Fig. 12.45: FramePanel.java
// Use of a JPanel object to help layout components.
import java.awt.GridLayout;
import java.awt.BorderLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;

public class FramePanel extends JFrame{

private final JPanel buttonPanel ; // Panel containing the buttons
private final JButton[] buttons;

// Constructor with no arguments

public FramePanel() {
super( "Demo Panel" );
buttons = new JButton[ 5 ];
buttonPanel = new JPanel();
buttonPanel.setLayout(new GridLayout ( 1 , buttons . length ));

// Create and add buttons

 for ( int count = 0 ; count < buttons . length ; count ++) {
buttons [ count ] = new JButton ( "Button" + ( count + 1 ));
buttonPanel.add(buttons[count]); // Add the button to the panel
}
add(buttonPanel, BorderLayout .SOUTH ); // Add panel to JFrame
}
} // end the FramePanel class

package GUI.MarcoPanel;
// Fig. 12.46: DemoPanel.java
// MarcoPanel test.
import javax.swing.JFrame;

public class DemoPanel {

public static void main(String[] args)
{
FramePanel framePanel = new FramePanel();
framePanel.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
framePanel.setSize(450, 200);
framePanel.setVisible(true);
}
} // end of DemoPanel class

Comment

This code, as mentioned before, allows us to see how the use of the buttons really works in the windows that are
displayed when executing the code, in this way we learn more because it would be the basis for the creation and use of
the buttons. within the codes.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoPanel

12.47 y 12.48 Marco área Texto

Introduction

In the following code we can see how a text box can be copied with a button and only copy what we find selected
without the need to write everything again to the right side of the panel executed by the code, we can also delete what
the code shows by default and write our own texts.

Execution image
Code

package GUI.MarcoAreaTexto;
// Fig. 12.47: TextAreaFrame.java
// Copy the selected text from one JText area to another.
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.Box;
import javax.swing.JFrame;
import javax.swing.JTextArea;
import javax.swing.JButton;
import javax.swing.JScrollPane;

public class FrameAreaText extends JFrame {

private final JTextArea TextArea1; // sample demonstration chain

private final JTextArea TextArea2; // the highlighted text is copied here
private final JButton copyButton; // starts copying text

// constructor without arguments

public FrameAreaText() {
super("JTextArea Demo");
Box box = Box.createHorizontalBox(); // create a picture
String demo = "This is a demo string for\n"
+ "illustrate how to copy text\n from a text area to \n"
+ "another, using an\nexternal event\n";

TextArea1 = new JTextArea(demo, 10, 15);

box.add(new JScrollPane(TextArea1)); // adds scrolling panel

copyButton = new JButton("Copy >>>"); // create copy button

box.add(copyButton); // add copy button to the box
copyButton.addActionListener(new ActionListener() {// anonymous internal class
// sets the text in areaText2 with the text selected from areaText1
@Override
public void actionPerformed(ActionEvent event){
TextArea2.setText(TextArea1.getSelectedText());
}
}
);
TextArea2 = new JTextArea(10, 15);
TextArea2.setEditable(false);
box.add(new JScrollPane(TextArea2)); // adds scrolling panel

add(box); // add frame to frame

}
} // end of class TextAreaFrame

package GUI.MarcoAreaTexto;
// Fig. 12.48: TextAreaDemo.java
// TextAreaFrame test.
import javax.swing.JFrame;

public class DemoTextArea {

public static void main(String[] args) {
FrameAreaText frameAreaText = new FrameAreaText();
frameAreaText.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frameAreaText.setSize(425, 200);
frameAreaText.setVisible(true);
}
}// end class DemoAreaText

Comment

This code was very interesting to me because if we use it well it can be used as a work tool within the school when
making a note or things like that since it would be easy to put main ideas without the need to get lost or stir ideas so
this code is pretty good for learning.

Link to GitHub

https://github.com/GabrielSh33/EjerciciosClase/tree/master/src/GUI/MarcoAreaTexto

General comment
With this practice we realize that it is important to know the graphical interfaces since in one's life as a programmer
they are always present when carrying out a task, so it is necessary to know everything about it, we can create
interfaces with the help of several methods that allow us to better understand what we are doing and how we are
doing it so that aspects to follow during the creation of the interfaces are not complicated.

For a website or something that we are creating to be effective and successful, it must ensure that one as a user
can access it without problems, we can easily manage the page and all its components and feel permanently
comfortable. Nowadays it is necessary and important that the interfaces that are designed are to the liking of the
user, since if it is quite complex to use, it will end up discarding the interface, so it is necessary to put yourself in the
shoes of a user and see what we really need now. which must be something simple and easy to handle, so we must
opt for the user and not for us.

Finally, I think that this practice designs in us a new vision and how we should focus on the creation of codes so that
we are not complicating ourselves so much, this also teaches us the proper use of libraries and extensions that allow
us to be able to execute codes necessary to carry out our work

Bibliography
¿Qué es la interfaz gráfica de usuario GUI? (2020, Marzo 16). Glosario - Workana, Conceptos Fundamentales Del Marketing
Y Los Negocios. https://i.workana.com/glosario/que-es-la-interfaz-grafica-de-usuario-gui/

Chusa Lamarca Lapuente, & Lamarca, J. (2018). La interfaz grafica. Hipertexto.info.

https://doi.org/http://www.hipertexto.info/documentos/interfaz.htm

Deitel, P. (s.f.). Java Como Programar. Pearson. Obtenido de Componentes de la GUI. Obtenido de: M12_DEITEL_COMO-
PROGRAMAR-EN-JAVA_SE_10ED_C1_473-554_XXXX-X.pdf