SlideShare una empresa de Scribd logo
1 de 22
Interfaces gráficas en Java
ICI 341 -Principios de Lenguajes de
Programación -2013
¿Que es un frame?
• Mas conocido como
“ventana”, es un contenedor
que guarda componentes y
les da un sentido grafico.
• Este frame tiene propiedades
tales como tamaño, posición,
título, etc.
• Este frame contiene
componentes los cuales
brindan interactividad a ésta
(botones, interruptores, etc).
WindowBuilder Pro
• Plug-In de Eclipse
para construir
frames en Java.
• Permite edición de
frames tanto
gráficamente como
en código.
• Se instala
directamente por
Eclipse vía el menú
Install New
Software.
Dentro del menú pegar el siguiente link (Eclipse Juno)... Puedes buscarlo en Google también:
http://download.eclipse.org/windowbuilder/WB/release/R201209281200/4.2/
Creación de un frame.
• En un proyecto, hacer click en New -> Other.
• Elegir WindowBuilder/Swing Designer/New Jframe.
Para este caso, llamaremos a nuestro Frame como “Hola”
• Una vez terminado, generará un código básico
para generar una ventana vacía.
Abajo se puede intercambiar en modo Codigo (Source) y en Modo Gráfico (Design).
Un vistazo rápido al código
• Se ignora el método main generado ( al menos que desees que el programa
empiece desde aquí.) Para evitar problemas extraños, es recomendado borrarlo.
• La frame creada consiste en una clase extendida de Jframe. Contiene un atributo
del tipo Jpanel.
Un vistazo rápido al código
• Se puede además apreciar el constructor de nuestra clase Frame que hemos
creado.
• Este código se regenera automáticamente mientras uno agregue componentes al
Frame.
Editor gráfico
• Editor del tipo Drag&Drop. (Arrastrar y soltar).
• A la izquierda inferior (Properties) se pueden encontrar diferentes
opciones para los componentes que tengas seleccionados.
• Al centro (Palette) en la carpeta Components se encuentra el set de
componentes que se le pueden añadir a la ventana.
• Layout: Maneras predefinidas de acomodar
controles o componentes visuales en formas o
ventanas visuales.
• Para una programación mas fácil, se usara
Absolute Layout.
• Buscar Absolute Layout en Palette y arrastrarla a la ventana.
Llamar a un frame desde código.
Recordando que nuestra clase frame se llamaba “Hola”.
• Simplemente creamos la clase Hola en el programa, y
llamamos a su constructor para que se haga visible.
• ... O bien, como alternativa, simplemente usar los Main que
generan las mismas ventanas.
NOTA: Una ventana correrá “en paralelo” al código que lo llamó. Tener en cuenta
esto, para no tener problemas extraños.
• Quizá sea necesario pasar a la ventana
algún parámetro (como alguna clase, u
otro dato en particular).
• En ese caso, se debe modificar el
constructor.
Destruir un Frame.
• Para destruir una Frame se debe llamar a alguno
de estos 2 métodos (destructores de clase).
• Si se destruyen todas las ventanas y no hay
proceso detrás, el programa terminará.
Algunos componentes básicos.
JLabel
• Simplemente texto.
• Puedes editar lo que
dice en la casilla Text
(en Properties).
• O bien puedes editar
este valor en código y
añadirle alguna
variable como valor.
En el editor gráfico
quedará como
Dynamic.
JButton
• Un botón que al ser presionado, reaccionará de alguna forma.
• Para que reaccione al hacer click tendremos que crear un
Evento.
• Simplemente hacemos doble click en el botón ya creado.
Automáticamente se creará el código que se ejecutará al
presionar el botón.
NOTA: En Show Events hay más tipos de Eventos que actuar al hacer clicks.
• Aquí puedes llamar a algún método que haga lo
que tenga que hacer cuando se haga click en él.
(También puedes añadir código directamente).
JTextField
• Una entrada de texto.
(String).
• Puedes leer su valor desde
código ( por ejemplo al
presionar un botón).
Siendo textField el nombre de la variable en cual contiene tu JTextField. Si tienes dudas
sobre cual es tu variable, puedes revisar en el código de la ventana.
JCheckBox
• Una pequeña caja el cual
puedes activarla o dejarla
desactivada.
• Puedes leer su valor desde
código ( por ejemplo al
presionar un botón).
Siendo chckbxNewCheckBox el nombre de la variable en cual contiene tu JCheckBox.
JComboBox
• Una pestaña el cual puedes elegir
distintas opciones.
• Para llenarla con alternativas
puedes usar este código después
de crearlo.
setModel pide un arreglo de Strings. En este caso se ha resumido de la manera mostrada.
• Puedes leer su valor desde código ( por
ejemplo al presionar un botón). Puede ser
cualquiera de estas 2 formas.
La primera obtiene el indice de la opción seleccionada.
La segunda obtiene el Item seleccionado que se le dio al rellenar.
En este caso es String (ojo, hay que castearlo).
NOTA: Jlist (listado) funciona exactamente igual que JComboBox.
Otros métodos útiles de
Interfaces graficas.
• Mostrar un mensaje de aviso.
• Preguntar algo (Si, No) mediante un aviso.
• Un aviso donde el cual se ingrese texto.
NOTA: Pueden llamarse desde cualquier punto del programa, hayan ventanas o no.
Interfaces gráficas en Java
ICI 341 -Principios de Lenguajes de
Programación -2013

Más contenido relacionado

La actualidad más candente

Tópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y libreriasTópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y libreriasJosé Antonio Sandoval Acosta
 
Estructura de Datos: Pila
Estructura de Datos: PilaEstructura de Datos: Pila
Estructura de Datos: PilaEmerson Garay
 
Estructura de Datos - Unidad 4 Estructuras no lineales
Estructura de Datos - Unidad 4 Estructuras no linealesEstructura de Datos - Unidad 4 Estructuras no lineales
Estructura de Datos - Unidad 4 Estructuras no linealesJosé Antonio Sandoval Acosta
 
Modelo de 5 estados para sistemas operativos
Modelo de 5 estados para sistemas operativosModelo de 5 estados para sistemas operativos
Modelo de 5 estados para sistemas operativosLuis Dario Gomez
 
Funciones C++ modificado
Funciones C++ modificadoFunciones C++ modificado
Funciones C++ modificadocompumet sac
 
Introducción a Swing
Introducción a SwingIntroducción a Swing
Introducción a Swingmrojas_unitec
 
Cuestionario
CuestionarioCuestionario
Cuestionariojpauly4
 
Curso Java Inicial 5 Relaciones Entre Objetos
Curso Java Inicial   5 Relaciones Entre ObjetosCurso Java Inicial   5 Relaciones Entre Objetos
Curso Java Inicial 5 Relaciones Entre ObjetosEmilio Aviles Avila
 
Modelo de prototipos
Modelo de prototiposModelo de prototipos
Modelo de prototiposjuriberuiz
 
Cuadro comparativo de herramientas de programacion eclipse, java
Cuadro comparativo de herramientas de programacion eclipse, javaCuadro comparativo de herramientas de programacion eclipse, java
Cuadro comparativo de herramientas de programacion eclipse, javaCCCRiis
 
Patrones estructurales
Patrones estructuralesPatrones estructurales
Patrones estructuralesJuan Camilo
 
Características Java
Características JavaCaracterísticas Java
Características JavaIsabel Gómez
 
Modelo Entidad Relación
Modelo Entidad RelaciónModelo Entidad Relación
Modelo Entidad RelaciónDamelys Bracho
 
5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formulariosLaura Folgado Galache
 

La actualidad más candente (20)

Programacion de Cadenas
Programacion de CadenasProgramacion de Cadenas
Programacion de Cadenas
 
Tópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y libreriasTópicos Avanzados de Programación - Unidad 2 componentes y librerias
Tópicos Avanzados de Programación - Unidad 2 componentes y librerias
 
PRESENTACIÓN RUP
PRESENTACIÓN RUPPRESENTACIÓN RUP
PRESENTACIÓN RUP
 
Estructura de Datos: Pila
Estructura de Datos: PilaEstructura de Datos: Pila
Estructura de Datos: Pila
 
Estructura de Datos - Unidad 4 Estructuras no lineales
Estructura de Datos - Unidad 4 Estructuras no linealesEstructura de Datos - Unidad 4 Estructuras no lineales
Estructura de Datos - Unidad 4 Estructuras no lineales
 
Modelo de 5 estados para sistemas operativos
Modelo de 5 estados para sistemas operativosModelo de 5 estados para sistemas operativos
Modelo de 5 estados para sistemas operativos
 
Funciones C++ modificado
Funciones C++ modificadoFunciones C++ modificado
Funciones C++ modificado
 
Introducción a Swing
Introducción a SwingIntroducción a Swing
Introducción a Swing
 
Cuestionario
CuestionarioCuestionario
Cuestionario
 
Recursividad
RecursividadRecursividad
Recursividad
 
Curso Java Inicial 5 Relaciones Entre Objetos
Curso Java Inicial   5 Relaciones Entre ObjetosCurso Java Inicial   5 Relaciones Entre Objetos
Curso Java Inicial 5 Relaciones Entre Objetos
 
Modelo de prototipos
Modelo de prototiposModelo de prototipos
Modelo de prototipos
 
Cuadro comparativo de herramientas de programacion eclipse, java
Cuadro comparativo de herramientas de programacion eclipse, javaCuadro comparativo de herramientas de programacion eclipse, java
Cuadro comparativo de herramientas de programacion eclipse, java
 
Patrones estructurales
Patrones estructuralesPatrones estructurales
Patrones estructurales
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
Características Java
Características JavaCaracterísticas Java
Características Java
 
Modelo Entidad Relación
Modelo Entidad RelaciónModelo Entidad Relación
Modelo Entidad Relación
 
5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios
 
Algoritmos de Ordenamiento externo
Algoritmos de Ordenamiento externoAlgoritmos de Ordenamiento externo
Algoritmos de Ordenamiento externo
 
Valores y prácticas XP
Valores y prácticas XPValores y prácticas XP
Valores y prácticas XP
 

Destacado

Ciclos de reloj del procesador
Ciclos de reloj del procesadorCiclos de reloj del procesador
Ciclos de reloj del procesadorAlejandro Escobedo
 
Patron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorPatron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorHenry Vargas
 
Calculadora Gráfica Java implementando el Patrón MVC
Calculadora Gráfica Java implementando el Patrón MVCCalculadora Gráfica Java implementando el Patrón MVC
Calculadora Gráfica Java implementando el Patrón MVCIgnacio Aular Reyes
 
TRABAJO Y ENERGÍA (FÍSICA)
TRABAJO Y ENERGÍA (FÍSICA)TRABAJO Y ENERGÍA (FÍSICA)
TRABAJO Y ENERGÍA (FÍSICA)Axel Mac
 
Circuitos Electricos
Circuitos ElectricosCircuitos Electricos
Circuitos Electricosmrtic
 

Destacado (6)

Ciclos de reloj del procesador
Ciclos de reloj del procesadorCiclos de reloj del procesador
Ciclos de reloj del procesador
 
Patron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorPatron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista Controlador
 
Herramientas Java
Herramientas JavaHerramientas Java
Herramientas Java
 
Calculadora Gráfica Java implementando el Patrón MVC
Calculadora Gráfica Java implementando el Patrón MVCCalculadora Gráfica Java implementando el Patrón MVC
Calculadora Gráfica Java implementando el Patrón MVC
 
TRABAJO Y ENERGÍA (FÍSICA)
TRABAJO Y ENERGÍA (FÍSICA)TRABAJO Y ENERGÍA (FÍSICA)
TRABAJO Y ENERGÍA (FÍSICA)
 
Circuitos Electricos
Circuitos ElectricosCircuitos Electricos
Circuitos Electricos
 

Similar a Java - Tutorial Ventanas

tutorial de eclipse
tutorial de eclipsetutorial de eclipse
tutorial de eclipseTania Tellez
 
Manual codeblocks luis_ocampo
Manual codeblocks luis_ocampoManual codeblocks luis_ocampo
Manual codeblocks luis_ocampoluis_ocampo27
 
01 Makecode introduccion a las placas microbit.pdf
01 Makecode introduccion a las placas microbit.pdf01 Makecode introduccion a las placas microbit.pdf
01 Makecode introduccion a las placas microbit.pdfDiegoCal4
 
Tutorial netbeans
Tutorial netbeansTutorial netbeans
Tutorial netbeansjorgeadelmo
 
Manual para visual_c_luis_ocampo
Manual para visual_c_luis_ocampoManual para visual_c_luis_ocampo
Manual para visual_c_luis_ocampoluis_ocampo27
 
Ejemplos de pseudocódigo
Ejemplos de pseudocódigoEjemplos de pseudocódigo
Ejemplos de pseudocódigoLiliana Nieto
 
Code bloks tutorial_terminado
Code bloks tutorial_terminadoCode bloks tutorial_terminado
Code bloks tutorial_terminadoLEFR202
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaverangimelli
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaverangimelli
 
APRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdfAPRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdfJavierCastilloPrez
 
APRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdfAPRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdfJavierCastilloPrez
 
04 practica lenguaje programacion - componentes
04   practica lenguaje programacion - componentes04   practica lenguaje programacion - componentes
04 practica lenguaje programacion - componentessimonquispeluza
 
Instructivo para utilizar_c_
Instructivo para utilizar_c_Instructivo para utilizar_c_
Instructivo para utilizar_c_LuisCetis109
 
Instructivo para utilizar_c++
Instructivo para utilizar_c++Instructivo para utilizar_c++
Instructivo para utilizar_c++heidiromero11
 

Similar a Java - Tutorial Ventanas (20)

tutorial de eclipse
tutorial de eclipsetutorial de eclipse
tutorial de eclipse
 
Manual codeblocks luis_ocampo
Manual codeblocks luis_ocampoManual codeblocks luis_ocampo
Manual codeblocks luis_ocampo
 
Manual del uso de codeblocks
Manual del uso de codeblocksManual del uso de codeblocks
Manual del uso de codeblocks
 
01 Makecode introduccion a las placas microbit.pdf
01 Makecode introduccion a las placas microbit.pdf01 Makecode introduccion a las placas microbit.pdf
01 Makecode introduccion a las placas microbit.pdf
 
Tutorial netbeans
Tutorial netbeansTutorial netbeans
Tutorial netbeans
 
Manual para visual_c_luis_ocampo
Manual para visual_c_luis_ocampoManual para visual_c_luis_ocampo
Manual para visual_c_luis_ocampo
 
Ejemplos de pseudocódigo
Ejemplos de pseudocódigoEjemplos de pseudocódigo
Ejemplos de pseudocódigo
 
Introduccion de-aplicaciones-visuales
Introduccion de-aplicaciones-visualesIntroduccion de-aplicaciones-visuales
Introduccion de-aplicaciones-visuales
 
Josi22
Josi22Josi22
Josi22
 
Tutorial java fx_8_espanol
Tutorial java fx_8_espanolTutorial java fx_8_espanol
Tutorial java fx_8_espanol
 
Code bloks tutorial_terminado
Code bloks tutorial_terminadoCode bloks tutorial_terminado
Code bloks tutorial_terminado
 
Code bloks tutorial_terminado
Code bloks tutorial_terminadoCode bloks tutorial_terminado
Code bloks tutorial_terminado
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
APRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdfAPRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdf
 
APRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdfAPRENDER-M_22965542_1641718269400.pdf
APRENDER-M_22965542_1641718269400.pdf
 
04 practica lenguaje programacion - componentes
04   practica lenguaje programacion - componentes04   practica lenguaje programacion - componentes
04 practica lenguaje programacion - componentes
 
Instructivo para utilizar_c_
Instructivo para utilizar_c_Instructivo para utilizar_c_
Instructivo para utilizar_c_
 
Instructivo para utilizar_c++
Instructivo para utilizar_c++Instructivo para utilizar_c++
Instructivo para utilizar_c++
 

Java - Tutorial Ventanas

  • 1. Interfaces gráficas en Java ICI 341 -Principios de Lenguajes de Programación -2013
  • 2. ¿Que es un frame? • Mas conocido como “ventana”, es un contenedor que guarda componentes y les da un sentido grafico. • Este frame tiene propiedades tales como tamaño, posición, título, etc. • Este frame contiene componentes los cuales brindan interactividad a ésta (botones, interruptores, etc).
  • 3. WindowBuilder Pro • Plug-In de Eclipse para construir frames en Java. • Permite edición de frames tanto gráficamente como en código. • Se instala directamente por Eclipse vía el menú Install New Software. Dentro del menú pegar el siguiente link (Eclipse Juno)... Puedes buscarlo en Google también: http://download.eclipse.org/windowbuilder/WB/release/R201209281200/4.2/
  • 4. Creación de un frame. • En un proyecto, hacer click en New -> Other. • Elegir WindowBuilder/Swing Designer/New Jframe. Para este caso, llamaremos a nuestro Frame como “Hola”
  • 5. • Una vez terminado, generará un código básico para generar una ventana vacía. Abajo se puede intercambiar en modo Codigo (Source) y en Modo Gráfico (Design).
  • 6. Un vistazo rápido al código • Se ignora el método main generado ( al menos que desees que el programa empiece desde aquí.) Para evitar problemas extraños, es recomendado borrarlo. • La frame creada consiste en una clase extendida de Jframe. Contiene un atributo del tipo Jpanel.
  • 7. Un vistazo rápido al código • Se puede además apreciar el constructor de nuestra clase Frame que hemos creado. • Este código se regenera automáticamente mientras uno agregue componentes al Frame.
  • 8. Editor gráfico • Editor del tipo Drag&Drop. (Arrastrar y soltar). • A la izquierda inferior (Properties) se pueden encontrar diferentes opciones para los componentes que tengas seleccionados. • Al centro (Palette) en la carpeta Components se encuentra el set de componentes que se le pueden añadir a la ventana.
  • 9. • Layout: Maneras predefinidas de acomodar controles o componentes visuales en formas o ventanas visuales. • Para una programación mas fácil, se usara Absolute Layout. • Buscar Absolute Layout en Palette y arrastrarla a la ventana.
  • 10. Llamar a un frame desde código. Recordando que nuestra clase frame se llamaba “Hola”. • Simplemente creamos la clase Hola en el programa, y llamamos a su constructor para que se haga visible. • ... O bien, como alternativa, simplemente usar los Main que generan las mismas ventanas. NOTA: Una ventana correrá “en paralelo” al código que lo llamó. Tener en cuenta esto, para no tener problemas extraños.
  • 11. • Quizá sea necesario pasar a la ventana algún parámetro (como alguna clase, u otro dato en particular). • En ese caso, se debe modificar el constructor.
  • 12. Destruir un Frame. • Para destruir una Frame se debe llamar a alguno de estos 2 métodos (destructores de clase). • Si se destruyen todas las ventanas y no hay proceso detrás, el programa terminará.
  • 14. JLabel • Simplemente texto. • Puedes editar lo que dice en la casilla Text (en Properties). • O bien puedes editar este valor en código y añadirle alguna variable como valor. En el editor gráfico quedará como Dynamic.
  • 15. JButton • Un botón que al ser presionado, reaccionará de alguna forma. • Para que reaccione al hacer click tendremos que crear un Evento. • Simplemente hacemos doble click en el botón ya creado. Automáticamente se creará el código que se ejecutará al presionar el botón. NOTA: En Show Events hay más tipos de Eventos que actuar al hacer clicks.
  • 16. • Aquí puedes llamar a algún método que haga lo que tenga que hacer cuando se haga click en él. (También puedes añadir código directamente).
  • 17. JTextField • Una entrada de texto. (String). • Puedes leer su valor desde código ( por ejemplo al presionar un botón). Siendo textField el nombre de la variable en cual contiene tu JTextField. Si tienes dudas sobre cual es tu variable, puedes revisar en el código de la ventana.
  • 18. JCheckBox • Una pequeña caja el cual puedes activarla o dejarla desactivada. • Puedes leer su valor desde código ( por ejemplo al presionar un botón). Siendo chckbxNewCheckBox el nombre de la variable en cual contiene tu JCheckBox.
  • 19. JComboBox • Una pestaña el cual puedes elegir distintas opciones. • Para llenarla con alternativas puedes usar este código después de crearlo. setModel pide un arreglo de Strings. En este caso se ha resumido de la manera mostrada.
  • 20. • Puedes leer su valor desde código ( por ejemplo al presionar un botón). Puede ser cualquiera de estas 2 formas. La primera obtiene el indice de la opción seleccionada. La segunda obtiene el Item seleccionado que se le dio al rellenar. En este caso es String (ojo, hay que castearlo). NOTA: Jlist (listado) funciona exactamente igual que JComboBox.
  • 21. Otros métodos útiles de Interfaces graficas. • Mostrar un mensaje de aviso. • Preguntar algo (Si, No) mediante un aviso. • Un aviso donde el cual se ingrese texto. NOTA: Pueden llamarse desde cualquier punto del programa, hayan ventanas o no.
  • 22. Interfaces gráficas en Java ICI 341 -Principios de Lenguajes de Programación -2013