Entorno eclipse

Diseño de Interfaces

Aprendiendo a manejar el IDE Eclipse

______________________________________________________________________

______________________________________________________________________

GP

1

4º Sistemas-FISEI

Asignatura Diseño de Interfaces Curso Marzo- Agosto 2013

Tutorial de Eclipse

Figura 1. IDE Eclipse

Índice

� Introducción � Proceso de Instalación � ¿Cómo compilar un programa de Java en el IDE Eclipse? � ¿Cómo ejecutar un programa Java en el IDE Eclipse?

Introducción

Eclipse: Se define como “Un IDE para todo y para nada en particular”. Es un armazón (Workbench) sobre el que se pueden montar herramientas de desarrollo para cualquier

lenguaje, mediante la implementación de los plugins adecuados. El proyecto Eclipse (IDE Eclipse, Figura 1) Es una de las herramientas que se engloban bajo el denominado Proyecto Eclipse. El proyecto Eclipse integra tanto el

desarrollo del IDE Eclipse, como algunos de los plugins más importantes (como el JDT, plugin para el lenguaje Java, o el CDT, para el lenguaje C/C++), etc.

Proceso de Instalación Lo primero que debemos hacer es descargar todo el paquete de herramientas (eclipse,

pugins, JDK, etc.) necesarios para poder trabajar en el entorno Eclipse. El Eclipse con el

plug-in para programación en Java los puede descargar de http://www.eclipse.org/

Basta con descomprimir el .zip, se nos preguntará por un directorio para utilizar,



______________________________________________________________________

______________________________________________________________________

GP

2

elegimos el directorio y procedemos a descomprimir. Acto seguido procedemos a

ejecutar eclipse.

Una vez que iniciamos Eclipse aparece la siguiente ventana (Figura 2):

Figura 2. Elección del workspace del IDE Eclipse

En ella nos permite elegir un espacio de trabajo donde se van a alojar nuestros

proyectos. A continuación hacemos clic en el botón OK y nos despliega la siguiente ventana (Figura 3):

Figura 3. Iniciar IDE por primera vez

A continuación presionamos el icono seleccionado por la flecha (Una vez hacemos clic

en dicho botón nos muestra la siguiente ventana (Figura 4:



______________________________________________________________________

______________________________________________________________________

GP

3

Figura 4. Vistas IDE Eclipse

Como se puede observar la interfaz está compuesta de varias vistas ( views) que conforman el entorno Eclipse. Cada vista tiene una pestaña que muestra el título de la

vista, permite moverla y cerrarla.

En el entorno de desarrollo Eclipse todo archivo se almacena dentro de un proyecto.

Esto quiere decir que todo documento, carpeta, archivo de código fuente de Java

(.java ) y código compilado (.class ) tiene que estar contenido dentro de un

proyecto. De tal manera que, el primer paso antes de usar Eclipse para programar en

Java es comprender la estructura de proyectos de Eclipse (Figura 5).

Para crear un nuevo proyecto, seleccione en las opciones de menús principal "File > New > Project ...". También es posible seleccionar "New > Project..." haciendo clic

derecho en cualquier parte de la vista de Eclipse Package Explorer . Aparecerá el

siguiente cuadro de diálogo:



______________________________________________________________________

______________________________________________________________________

GP

4

Figura 5.

Una vez seleccionada la opción Java Project , presionamos el botón de Next>. Aparecerá la siguiente ventana (Figura 6):

Figura 6

Tecleamos el nombre del proyecto y a continuación hacemos clic en el botón Finish (finalizar). Ver Figura 7.



______________________________________________________________________

______________________________________________________________________

GP

5

Figura 7.

A continuación basta con empezar a crear las Clases (.java) a nuestro proyecto. Para

ello seleccionamos el icono del proyecto y presionamos el botón derecho del ratón.

Seleccionamos New > Class... , tal como se puede observar en la siguiente figura

(Figura 8):

Figura 8.

Aparecerá la siguiente ventana. Le damos el nombre a la clase y elegimos el método

main. Ver Figura 9.



______________________________________________________________________

______________________________________________________________________

GP

6

Figura 9.

A continuación presionamos “Finish”.

Una vez hecho los anteriores pasos, aparecerá la ventan que se muestra en la siguiente

figura y que corresponde al entorno de Eclipse, junto con todas sus vistas. Para empezar

a utilizar dicho entorno, basta con escribir el código en el editor y guardar (Figura 10).

Figura 10

¿Cómo compilar un programa de Java en el IDE Eclipse?

Vista Outline. Muestra la

estructura de la lista de

elementos del archivo

actual

El árbol de

directorios

de los

proyectos

El editor. Aquí

se escribe el

código

Agenda de tareas pendientes,

que pueden ser introducidas

por el usuario, de forma

directa, o por Eclipse, en

función de determinados

eventos.

Barra de Herramientas Barra de

Perspectivas

Ventana

Consola



______________________________________________________________________

______________________________________________________________________

GP

7

Los ficheros se compilan automáticamente al ser guardados. Un fichero se guarda

pulsando en la opción de menú File> Save o mediante la opción guardar de la

barra de herramientas. Si existen errores de compilación, se mostrarán en el código

fuente subrayados en rojo. En la vista Console aparecerá el informe del compilador.

Ver Figura 11.

Figura 11.

¿Cómo ejecutar un programa Java en el IDE Eclipse?

La mejor forma de ejecutar un programa en Java desde Eclipse consiste en seleccionar

el fichero .java en la vista Project Explorer y dando al botón derecho

seleccionar la opción Run /Java Application . Ver Figura 12.

Figura 12

Figura 12.

Prácticamente todas las opciones de ejecución se pueden manejar desde el botón Run de la barra de herramientas principal. También puede hacerlo desde la opción Run As. Run As, permite ejecutar directamente la clase que se está mostrando en la



______________________________________________________________________

______________________________________________________________________

GP

8

ventana del editor activo, utilizando la configuración de ejecución por defecto. Por otro

lado, la opción Run, permitirá elegir nuevas configuraciones de ejecución.

Pero, antes de empezar a crear interfaces gráficas, recordemos algunas cosas básicas de

POO. Algunas notas más importantes son:

¿Cómo resolver una duda sobre un método?

Objeto1.metodoX(param1, param2)

Sobrecarga de métodos

System.out.println(“Hola”); System.out.println(37);

• Identificar la clase a partir de la cual se instancia el objeto

• Encontrar la API (documentación) de la clase en cuestión.

• Encontrar el método y su explicación detallada.

¿tipo de retorno? ¿? ¿?



______________________________________________________________________

______________________________________________________________________

GP

9

Programación estructurada

Estructura:

class claseX{ void println (String X){ } void println (Integer X){ } }

Métodos con el mismo nombre, pero que admiten diferentes tipos de parámetros

String nombrePersona = "Pepe" ;

Tipo de la variable

Nombre de la variable

Valor

Int EdadPersona = “37“ ;

Tipo de la variable


Valor

String horaActual = “10:40“ ;

Tipo de la variable


Valor

Variable / Tipo



______________________________________________________________________

______________________________________________________________________

GP

10

Programación Orientada a Objetos (Java)

Persona

nombre

Edad

Hora

horas minutos segundos separador

Tipos

básicos

complejos

…

clase Interfaz

int char boolean

enumerados

string Persona boxWidget

tipo Persona { String nombre; int edad; }

tipo Hora { int horas; int minutos; int segundos; char separador; }

Clases Estructuras atributos ≈ atributos Métodos métodos



______________________________________________________________________

______________________________________________________________________

GP

11

Objetos : Instancias de la clase Variables de clase + IMPORTANTES Variables locales al método

SE USAN CON FINES AUXILIARES class Persona { string nombre; }

class Persona public void comer(){ int variableX; }

trabajar()

comer()

string nombre;

int edad;

Persona

trabajar()

comer()

string nombre;

int edad;

Persona Nombre de la clase

(variables ‘de clase’ ó atributos)

Si su tipo es básico entonces es una variable “normal”

Si su tipo es una clase entonces son también objetos

Si su tipo es básico entonces es una variable “normal”

Si su tipo es una clase entonces son también objetos

string color;

int capacidad DD;

Ordenador

string color;

int capacidad DD;

Ordenador Ord1: OrdenadorOrd1: Ordenador

Ord2: OrdenadorOrd2: Ordenador

nombre

Persona

nombre

Persona Cuenta BancoCuenta Banco



______________________________________________________________________

______________________________________________________________________

GP

12

Herencia entre clases (Inheritance = Herencia)

W i n d o wW i n d o w

F r a m eF r a m e

J F ra m eJ F ra m e

OBJECTOBJECT

Nombre

Estado civil

Persona

Nombre

Estado civil

Persona

int salario;

string seg_social;

Empleado

int salario;

string seg_social;

Empleado

DirectivoDirectivoString [] lenguaje_Prog;

Técnico

String [] lenguaje_Prog;

Técnico

int ventas;

Comercial

int ventas;

Comercial

Casa Casa

ChaletChalet

Clase Padre

(superclase)

Clase Hija

(subclase)



______________________________________________________________________

______________________________________________________________________

GP

13

Paquete lógico Paquete físico Es un fichero empaquetado (ZIP, JAR, WAR, EAR, …)

Mi primera Aplicación grafica

Vamos a crear nuestro primer proyecto java en el IDE eclipse. Para crear un proyecto

visual (grafico) similar al que muestra la siguiente figura (Figura 13), se tiene que seguir

una serie de pasos básicos.

Figura 13.

Pasos básicos para la creación de un entorno gráfico

javax.swing

JFrameJFrame

package javax.swing; import javax.swing.*;



______________________________________________________________________

______________________________________________________________________

GP

14

Swing nos proporciona un conjunto de componentes, para construir una interfaz de

usuario sencilla. Vamos a mostrar como construir los elementos gráficos.

El interfaz gráfico a construir estará formado por una ventana, y dentro de ésta van a

aparecer un botón, una etiqueta y un cuadro de texto. Los pasos a seguir son los

siguientes:

• Crear una ventana de aplicación.

• Crear los componentes que se muestran en dicha ventana.

• Crear un contenedor.

• Asociar los componentes al contenedor para que, al hacerse visible, muestre

en su interior dichos componentes.

• Asociar el contenedor a la ventana de aplicación para que, al hacerse visible,

muestre en su interior el contenedor y, por tanto, los componentes asociados.

Es decir, que la jerarquía de los contenedores de una interfaz gráfico simple será el

mostrado en la Figura 14.

Ventana de Aplicación

Contenedor

Botón Etiqueta Campo de texto

Figura 14.

NOTA: Cuando en un gráfico vayamos a indicar que un componente se va a pintar dentro de un

determinado contenedor, se especifica con una línea terminada en un círculo del contenedor al

componente.

1. Crear la ventana de aplicación

Para crear una ventana de aplicación hay que instanciar un objeto de la clase JFrame .

Algunos métodos de esta clase relacionados con el aspecto gráfico de la ventana son:

• public JFrame() – Construye una ventana inicialmente invisible.

• public JFrame(String titulo) – Construye una ventana inicialmente

invisible con el título indicado.



______________________________________________________________________

______________________________________________________________________

GP

15

• public void setTitle(String titulo) – Establece el título de la

ventana.

• public void setSize(int width, int height) – Establece el tamaño

en píxeles de la ventana.

public void setDefaultCloseOperation(int operation) – Establece la

operación que se ha de hacer cuando el usuario cierra la ventana. Los valores permitidos

vienen determinados por las siguientes constantes:

• Javax.swing.JFrame.EXIT_ON_CLOSE - Salir del programa.

• Javax.swing.WindowConstants.DO_NOTHING_ON_CLOSE - No hacer nada.

• Javax.swing.WindowConstants.HIDE_ON_CLOSE - Ocultar la ventana (por

defecto).

• Javax.swing.WindowConstants.DISPOSE_ON_CLOSE – Liberar los recursos

de la ventana, pero no salir del programa.

public void setResizable(boolean resizable) – Establece si el usuario puede

cambiar el tamaño de la ventana. Por defecto es true.

public void setExtendedState(int state) – Establece el estado de la ventana.

Puede no funcionar en algunas plataformas. Los valores permitidos vienen dados por las

constantes:

• Java.awt.Frame.NORMAL – No se encuentra ni minimizada ni maximizada.

• Java.awt.Frame.ICONIFIED – Minimizada.

• Java.awt.Frame.MAXIMIZED_BOTH - Maximizada.

• Java.awt.Frame.MAXIMIZED_HORIZ – Maximizada horizontalmente.

• Java.awt.Frame.MAXIMIZED_VERT – Maximizada verticalmente.

public void setLocation(int x, int y) – Establece la posición de la esquina

superior izquierda de la ventana.

public void setVisible(boolean visible) – Muestra u oculta la ventana.

2. Crear los componentes

Para crear un componente, basta crear una instancia de la clase determinada y

configurar ese objeto para que se adapte a nuestras necesidades. Algunos métodos de

los aspectos gráficos de algunos de estos componentes son:

JButton public JButton(String texto) - Crea un botón con el texto indicado.

JLabel

public JLabel(String texto) - Crea una etiqueta con el texto indicado. public String getText() - Devuelve el texto de la etiqueta. public void setText(String texto) - Pone el texto indicado en la etiqueta.



______________________________________________________________________

______________________________________________________________________

GP

16

JTextField

public JTextField(int columnas) - Crea un Campo de Texto sencillo con el número de columnas especificado.

public String getText() - Devuelve el texto del campo de texto.

3. Crear un contenedor

En Swing existen muchos tipos de contenedores, dependiendo de la forma que manejen

los componentes que tienen dentro. Por ejemplo, existe un contenedor con pestañas y en

cada pestaña va un componente, es el JTabbedPane . También existe otro contenedor

dividido en dos partes para dos componentes, y la separación puede cambiar de

posición, es el JSplitPane . El que nosotros vamos a usar, para construir nuestro

sencillo interfaz, es el JPanel , el más sencillo de todos, que muestra todos los

componentes a la vez distribuidos en su interior. Más adelante veremos como podemos

configurar la forma de distribuir los componentes.

El método constructor de la clase JPanel es:

public JPanel() – Crea un contenedor simple

4. Asociar los componentes al contenedor para que los muestre al hacerse visible

Para asociar componentes a un contenedor, de forma que se muestren dentro cuando el

contenedor se muestre por pantalla, usamos el siguiente método de la clase JPanel :

public void add(JComponent componente ) – Asocia el componente al contenedor, de forma que se muestre el componente al mostrarse el contenedor.

NOTA: Por motivos de compatibilidad la cabecera real del método es public void add(Component comp). Puesto que vamos a trabajar con Swing podemos

considerar que la cabecera es la indicada.

5. Asociar el contenedor a la ventana para que le muestre al hacerse visible

Para asociar un contenedor a la ventana de aplicación, de forma que se muestre dentro

cuando la ventana se muestre por pantalla, usaremos el siguiente método de la clase

JFrame :

public void setContentPane(JComponent panelDeContenido) – Establece el componente pasado como parámetro como contenido de la ventana.



______________________________________________________________________

______________________________________________________________________

GP

17

NOTA: Por motivos de compatibilidad la cabecera real del método es public void setContentPane(Container contentPane). Puesto que vamos a trabajar con Swing

podemos considerar que la cabecera es la indicada.

En la figura 13 se muestra la imagen de este ejemplo completo que muestra los cinco

pasos básicos para construir una GUI simple y su código fuente completo se puede ver

en la Figura 15.

Import java.awt.event.ActionEvent; import java.awt.event.ActionListener;

public class InterfazConEventos implements ActionListener { private JTextField campoTexto ; private JLabel etiquetaGC ; private JButton botonConvertir ; private JLabel etiquetaGF ; /** * @param args */ //creamos un nuevo frame public InterfazConEventos () { //creamos la GUI //este metodo es llamado desde dentro del construct or para inicializar el formulario JFrame miVentana = new JFrame( "Conversion Grados C a F" ); miVentana.setSize(300, 200); miVentana.setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE); // creamos componentes etiquetaGC = new JLabel(); etiquetaGF = new JLabel( " Grados Fahrenheit" ); campoTexto = new JTextField(20); botonConvertir = new JButton ( "Convertir" ); //creamos el paanel de contenido JPanel panelContenido = new JPanel(); //Container panelConenido;

import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JTextField;

Todo esto se reemplazaría con el único: import javax.swing.*;



______________________________________________________________________

______________________________________________________________________

GP

18

panelContenido.add( etiquetaGC ); panelContenido.add( etiquetaGF ); panelContenido.add( campoTexto ); panelContenido.add( botonConvertir ); //configurar la ventana para mostrar el panel miVentana.setContentPane(panelContenido); //ASOCIACION DEL CODIGO DE MANEJO DE EVENTOS botonConvertir .addActionListener( this ); //HACEMOS VISIBLE LA VENTANA miVentana.setVisible( true ); } public static void main(String[] args) { new InterfazConEventos(); } public void actionPerformed (ActionEvent e){ //definimos codigo manejo eventos try { double GradosF = (Double. parseDouble( campoTexto .getText())* 1.8 + 32); // TODO Auto-generated method stub etiquetaGF .setText(GradosF + " Grados Farhenheit " ); } catch (NumberFormatException e2) { etiquetaGF .setText( "En el campo de texto no hay ningun numero" ); } } }

Figura 15.

Documents

Entorno eclipse