View
24
Download
1
Category
Tags:
Preview:
DESCRIPTION
Descripcion del enterno eclipse
Citation preview
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,
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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:
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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:
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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? ¿? ¿?
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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
Nombre de la variable
Valor
String horaActual = “10:40“ ;
Tipo de la variable
Nombre de la variable
Valor
Variable / Tipo
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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)
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.*;
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.*;
Diseño de Interfaces
Aprendiendo a manejar el IDE Eclipse
______________________________________________________________________
______________________________________________________________________
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.
Recommended