Interfaz_Grafica_POO

Programaciń Orientada a Objetos
o
Interfaz Gr´fica
a

Federico Raue
fraue@cti.espol.edu.ec

Facultad de Ingenier´ en Electricidad y Computaciń
ıa o

11 de Enero del 2010

Federico Rauefraue@cti.espol.edu.ec (FIEC) POO 11 de Enero del 2010 1 / 46

Contenido

1 Map

2 Componentes Gr´ﬁcos
a

3 JAVA GUI API

4 Frame

5 Layout Managers

6 Paneles


Map

Contenido

1 Map

a

3 JAVA GUI API

4 Frame

5 Layout Managers

6 Paneles


Map

Una colecci´n almacena elementos en un set o una list
o
Map: Mapea llaves o claves a los elementos
Las claves son los ´
ındices
List: los ´
ındices son enteros
Map: los ´
ındices pueden ser cualquie objeto


Map


Map

TestMap.java(1/2)
1 import java.util.∗;
2
3 public class TestMap {
4 public static void main(String[] args) {
5 // Create a HashMap
6 Map<String, Integer> hashMap = new HashMap<String, Integer>();
7 hashMap.put(”Smith”, 30);
8 hashMap.put(”Anderson”, 31);
9 hashMap.put(”Lewis”, 29);
10 hashMap.put(”Cook”, 29);
11
12 System.out.println(”Display entries in HashMap”);
13 System.out.println(hashMap);
14
15 // Create a TreeMap from the previous HashMap
16 Map<String, Integer> treeMap =
17 new TreeMap<String, Integer>(hashMap);
18 System.out.println(”nDisplay entries in ascending order of key”);

Map

TestMap.java(2/2)

19 System.out.println(treeMap);
20
21 // Create a LinkedHashMap
22 Map<String, Integer> linkedHashMap =
23 new LinkedHashMap<String, Integer>(16, 0.75f, true);
24 linkedHashMap.put(”Smith”, 30);
25 linkedHashMap.put(”Anderson”, 31);
26 linkedHashMap.put(”Lewis”, 29);
27 linkedHashMap.put(”Cook”, 29);
28
29 // Display the age for Lewis
30 System.out.println(”The age for ” + ”Lewis is ” +
31 linkedHashMap.get(”Lewis”).intValue());
32 System.out.println(”nDisplay entries in LinkedHashMap”);
33 System.out.println(linkedHashMap);
34 }
35 }


Map


Map

Ejemplo

Desarollar un programa que muestre en pantalla el n´mero de veces que se repite
u
una palabra


Map

CountOccurrenceOfWords.java(1/2)
1 import java.util.∗;
2
3 public class CountOccurrenceOfWords {
5 // Text in a string
6 String text = ”Have a good day. Have a good class. ” +
7 ”Have a good visit. Have fun!”;
8
9 // Create a hash map to hold words as key and count as value
10 Map<String, Integer> hashMap = new HashMap<String, Integer>();
11
12 String[] words = text.split(”[ .!?]”);
13 for (int i = 0; i < words.length; i++) {
14 if (words[i].length() > 1) {
15 if (hashMap.get(words[i]) != null) {
16 int value = hashMap.get(words[i]).intValue();
17 value++;
18 hashMap.put(words[i], value);
19 }

Map

CountOccurrenceOfWords.java(2/2)

20 else
21 hashMap.put(words[i], 1);
22 }
23 }
24
25 // Create a tree map from the hash map
26 Map<String, Integer> treeMap =
27 new TreeMap<String, Integer>(hashMap);
28
29 // Display mappings
30 System.out.println(”Display words and their count in ” +
31 ”ascending order of the words”);
32 System.out.print(treeMap);
33 }
34 }


Map


Componentes Gr´ﬁcos
a

Contenido

1 Map

a

3 JAVA GUI API

4 Frame

5 Layout Managers

6 Paneles


a

Hasta ahora s´lo han usado la consola
o
GUI – Interfaz Gr´fico
a
Objetos de GUI: buttons, labels, text fields, check boxes, radio buttons,
combo boxes
JButton, JLabel, JTextField, JCheckBox, JRadioButton, JComboBox
Ejemplos
Create a button with text OK
JButton jbtOK = new JButton(“OK”);
Create a label with text “Enter your name: ”
JLabel jlblName = new JLabel(“Enter your name: ”);
Create a text field with text “Type Name Here”
JTextField jtfName = new JTextField(“Type Name Here”);
Create a check box with text bold
JCheckBox jchkBold = new JCheckBox(“Bold”);
Create a radio button with text red
JRadioButton jrbRed = new JRadioButton(“Red“);
Create a combo box with choices red, green, and blue
JComboBox jcboColor = new JComboBox(new String[]”Red“, ”Green“,
”Blue“);

a


JAVA GUI API

Contenido

1 Map

a

3 JAVA GUI API

4 Frame

5 Layout Managers

6 Paneles


JAVA GUI API


Frame

Contenido

1 Map

a

3 JAVA GUI API

4 Frame

5 Layout Managers

6 Paneles


Frame

Frame
Contenedor de los componentes gr´ﬁcos
a


Frame

MyFrame.java

1 import javax.swing.∗;
2
3 public class MyFrame {
5 JFrame frame = new JFrame(”MyFrame”); // Create a frame
6 frame.setSize(400, 300); // Set the frame size
7 frame.setLocationRelativeTo(null); // New since JDK 1.4
8 frame.setDefaultCloseOperation(JFrame.EXIT ON CLOSE);
9 frame.setVisible(true); // Display the frame
10 }
11 }


Frame


Frame

MyFrameWithComponents.java

2
3 public class MyFrameWithComponents {
5 JFrame frame = new JFrame(”MyFrameWithComponents”);
6
7 // Add a button into the frame
8 JButton jbtOK = new JButton(”OK”);
9 frame.add(jbtOK);
10
11 frame.setSize(400, 300);
13 frame.setLocationRelativeTo(null); // Center the frame
14 frame.setVisible(true);
15 }
16 }


Layout Managers

Contenido

1 Map

a

3 JAVA GUI API

4 Frame

5 Layout Managers

6 Paneles


Layout Managers

Algunos sistemas basados en ventanas ubican la posiciń de los componentes
o
usando coordenadas
Ejemplo: colocar el botń en (40,50)
o
Son dependientes del Sistema Operativo
JAVA maneja una manera mas abstracta para ubicar los componentes
(LayoutManager)
Autom´ticamente mapea los componentes con su ubicaciń
a o
Ejemplo: No decimos donde ubicar donde poner un botń pero JAVA sabe
o
donde ubicarlo por el Layout Manager
Un Layout Manayer se asigna a un contenedor usando el m´todo
e
setLayout(LayoutManager).
Ejemplo:LayoutManager layoutManager = new XLayout();
container.setLayout(layoutManager);


Layout Managers

FlowLayout
Mas fćil entre todos los layout manager.
a
Los componentes son ordenados de izquierda a derecha en el orden
como estń aãdiendose
a n
Cuando una fila est´ llena entonces se crea una nueva l´
a ınea
Alinear los componentes usando una de estas TRES CONSTANTES:
FlowLayout.RIGHT, FlowLayout.CENTER, FlowLayout.LEFT
Especificar la distancia entre los componentes (pixeles)


Layout Managers


Layout Managers

ShowFlowLayout.java(1/2)
1 import javax.swing.JLabel;
2 import javax.swing.JTextField;
3 import javax.swing.JFrame;
4 import java.awt.FlowLayout;
5
6 public class ShowFlowLayout extends JFrame {
7 public ShowFlowLayout() {
8 // Set FlowLayout, aligned left with horizontal gap 10
9 // and vertical gap 20 between components
10 setLayout (new FlowLayout(FlowLayout.LEFT, 10, 20));
11
12 // Add labels and text ﬁelds to the frame
13 add(new JLabel(”First Name”));
14 add(new JTextField(8));
15 add(new JLabel(”MI”));
17 add(new JLabel(”Last Name”));
19 }

Layout Managers

ShowFlowLayout.java(2/2)

20
21 /∗∗ Main method ∗/
23 ShowFlowLayout frame = new ShowFlowLayout();
24 frame.setTitle(”ShowFlowLayout”);
29 }
30 }


Layout Managers

Estilo para la creaciń de GUI
o
Poner los componentes en el constructor del frame
Crear una aplicaciń significa crear un Frame
o
Puede extenderse (aãdir nuevos componentes o funciones
n
Una clase es fćilmente reusable
a


Layout Managers

GridLayout

Componentes en una malla formado por el n´mero de filas y columnas
u
Componentes se aãden de izquierda a derecha en la primera fila y luego en
n
la segunda fila, ....


Layout Managers

Reglas para el n´mero de filas y columnas
u

El n´mero de filas o columnas puede ser cero pero no ambos. Si la fila es
u
cero y la columna es diferente de cero, entonces la dimensiń de la columna
o
estar´ fija mientras que la dimensiń de la fila se determinar´ din´micamente.
a o a a
Ejemplo: Si la dimensiń de la fila es cero, la dimensiń de la columna es
o o
igual a tres y quiere aãdir 10 componentes. Entonces, GridLayout crear
n
din´micamente tres columnas y cuatro filas
a
Si las dos dimensiones son diferentes a cero entonces el par´metro dominante
a
es la dimensiń de filas
o


Layout Managers


Layout Managers

ShowGridLayout.java(1/2)
1 import javax.swing.JLabel;
2 import javax.swing.JTextField;
4 import java.awt.GridLayout;
5
6 public class ShowGridLayout extends JFrame {
7 public ShowGridLayout() {
8 // Set GridLayout, 3 rows, 2 columns, and gaps 5 between
9 // components horizontally and vertically
10 setLayout(new GridLayout(3, 2, 5, 5));
11
12 // Add labels and text ﬁelds to the frame
13 add(new JLabel(”First Name”));
15 add(new JLabel(”MI”));
17 add(new JLabel(”Last Name”));
19 }

Layout Managers

ShowGridLayout.java(2/2)

20
23 ShowGridLayout frame = new ShowGridLayout();
24 frame.setTitle(”ShowGridLayout”);
29 }
30 }


Layout Managers

BordeLayout
Divide la ventana en 5 secciones: East, South, West, North, y Center
Componentes son a˜adidos usando el m´todo add(Componente, ´
n e ındice)
donde el ´ındice es BorderLayout.EAST, BorderLayout.SOUTH,
Border-Layout.WEST, BorderLayout.NORTH, o BorderLayout.CENTER
Los componentes en las posiciones North y South pueden estirarse
horizontalmente
Los componentes en las posiciones East y West pueden estirarse verticalmente
Los componentes en la posici´n Center puede estirarse horizontalmente y
o
verticalmente


Layout Managers


Layout Managers

ShowBorderLayout.java(1/2)

1 import javax.swing.JButton;
3 import java.awt.BorderLayout;
4
5 public class ShowBorderLayout extends JFrame {
6 public ShowBorderLayout() {
7 // Set BorderLayout with horizontal gap 5 and vertical gap 10
8 setLayout(new BorderLayout(5, 10));
9
10 // Add buttons to the frame
11 add(new JButton(”East”), BorderLayout.EAST);
12 add(new JButton(”South”), BorderLayout.SOUTH);
13 add(new JButton(”West”), BorderLayout.WEST);
14 add(new JButton(”North”), BorderLayout.NORTH);
15 add(new JButton(”Center”), BorderLayout.CENTER);
16 }


Layout Managers

ShowBorderLayout.java(2/2)

20 ShowBorderLayout frame = new ShowBorderLayout();
21 frame.setTitle(”ShowBorderLayout”);
26 }
27 }


Layout Managers

Propiedades

FlowLayout
alignment, setAlignment
hgap, setHgap
vgap, setVgap
GridLayout
rows, setRows
columns, setColumns
hgap, setHgap
vgap, setVgap
BorderLayout
hgap, setHgap
vgap, setVgap


Paneles

Contenido

1 Map

a

3 JAVA GUI API

4 Frame

5 Layout Managers

6 Paneles


Paneles

Escenario: Desea ingresar 10 botones y un campo de texto en un frame.


Paneles

Escenario: Desea ingresar 10 botones y un campo de texto en un frame. Pero,
los botones tienen que estar en formaciń de cuadr´
o ıcula y el campo de texto
en una fila diferente.
Dividir en paneles (subcontenderores)
Agrupa componentes
Ejemplo: un botń es aãdido a un panel y el panel es aãdido al frame
o n n
Dos constructores
JPanel() crea un panel con FlowLayout
JPanel(LayoutManager) crea un panel con un layout especificado


Paneles


Paneles

TestPanels.java(1/3)

1 import java.awt.∗;
3
4 public class TestPanels extends JFrame {
5 public TestPanels() {
6 // Create panel p1 for the buttons and set GridLayout
7 JPanel p1 = new JPanel();
8 p1.setLayout(new GridLayout(4, 3));
9
10 // Add buttons to the panel
11 for (int i = 1; i <= 9; i++) {
12 p1.add(new JButton(”” + i));
13 }
14
15 p1.add(new JButton(”” + 0));
16 p1.add(new JButton(”Start”));
17 p1.add(new JButton(”Stop”));


Paneles


19 // Create panel p2 to hold a text ﬁeld and p1
20 JPanel p2 = new JPanel(new BorderLayout());
21 p2.add (new JTextField(”Time to be displayed here”),
22 BorderLayout.NORTH);
23 p2.add (p1, BorderLayout.CENTER);
24
25 // add contents into the frame
26 add(p2, BorderLayout.EAST);
27 add(new JButton(”Food to be placed here”),
28 }


Paneles


32 TestPanels frame = new TestPanels();
33 frame.setTitle(”The Front View of a Microwave Oven”);
38 }
39 }


Interfaz_Grafica_POO

More Related Content

Viewers also liked

More from Velmuz Buzz

Interfaz_Grafica_POO