Ya hemos visto como instalar este plugin tan útil que ayuda a crear una interfaz gráfica de la forma “drag and drop”  sin tener que programar los componentes.

En este tutorial vamos a explicar cómo se utiliza esta herramienta.

Versión Eclipse usada para este ejemplo: GALILEO

Primer Paso: Iniciar

1)Ejecuta el Eclipse.exe

2)File>New>Java Project

3)Se abrirá una ventana, presta atención a la parte superior, y donde dice project name escribe el nombre de tu proyecto, en nuestro caso al proyecto lo nombramos “PrimerJigloo”

Segundo Paso: Creación del JFrame

1)Sobre el proyecto recién creado, haz click con el botón derecho del mouse, elige  New>other y aparecerá la siguiente pantalla

Pantalla para crear el frame en jiglooComo ya nos adelantamos en la pantalla, debes elegir: GUI Forms>Swing>JFrame

Damos siguiente y nos aparecerá la siguiente pantalla:

PantallaNuevoFrameJigloo

En package puedes darle un nombre al paquete (si quieres puedes dejarlo en blanco, y quedará en default package)

En class name introduce el nombre que le quieres dar a la clase, nosotros le pusimos Nuevo Frame.

Haz click en finish,  aparecerá una ventana dividida en 3: la parte gráfica arriba, la parte de código en el medio y una tercera parte donde podemos editar fácilmente las propiedades de cada elemento.   Al crear el JFrame mediante el asistente, nos ha generado una ventana de 400 x 300 pixeles, que contiene los métodos necesarios para que sea ejecutable (un constructor, un método main y un método inicializador de la interfaz). Si quieres puedes cambiarlo así se adapta a tus preferencias.

jiglooframecreado

Presta atención a la parte gráfica dónde están las pestañas, si vas una por una, te darás cuenta la cantidad de cosas que puedes hacer con jigloo.  Echémosle un vistazo

componentesjigloo

Contenedores: JScrollPane,JDesktopPane,JInternalFrame,JSplitPane,JTabbedPane,JToolBar,JPanel,JWindows,etc
Componentes: JButtons,JRadioButtons,ButtonGroup,JCheckbox,etc
Mas componentes: JPasswordField,JSlider,JOptionPane,etc
Menu: JMenuBar,JMenu,JMenuItem,
Custom: para agregar una capa personalizada
Layout: Absolute layout,Anchor Layout,Border Layout, Card Layout,etc

Se dan cuenta? Con jigloo puedes hacer de todo.

En nuestro ejemplo vamos a hacer la típica pantalla principal de un sistema, con menu e imágenes.

Tercer paso:  Personalizar nuestro JFrame

Vayamos a la pestaña “menu” y elijamos el primero: JMenuBar así ponemos todos los items  como Archivo, Edición,etc ahí adentro

Hacemos click sobre el ícono y luego otro click sobre el frame (en la ubicación que quieras el menu)

Se te va a abrir una nueva ventana para que escribas el nombre del nuevo componente creado, nosotros le pusimos:barramenu

A medida que vas agregando componentes al frame, se genera código automáticamente.  En nuestro caso, fijensé que al agregar el menubar está escrito  “jMenu1″ .    Eso fue automático, si quieren sacarlo vayan a la parte de código y borren la siguiente línea de código:  jMenu1.setText(“jMenu1″);

barramenu

Ahora vamos a ponerle menués, seleccionando JMenu.   Se te abrirá una ventana donde te pedirá el nombre del componente y el texto que le quieres dar al menú.

jmenujigloo

Ahora por cada menú, agregaremos items.  Para esto elige JMenuItem, posicionate sobre el menu donde quieres agregar items y hazle click como mostramos en la figura.

seleccionarmenu

Yo fui agregando items, a Archivo como por ejemplo: nuevo, abrir, guardar y salir.  Pero he agregado un detalle… una barra que está entre salir y guardar.  Fijensé la figura

barrasalir

Te gustó? Es súper sencillo.  Selecciona el menu donde lo quieres.  Seguramente se te desplegarán los items de este menú.  Selecciona el componente JSeparator y clickea en la ubicación donde desees poner la barra.  Es hora de que veas como está quedando este menu ve a Run/Run Project y elige el nombre de tu proyecto.

Ahora decoraremos un poco la pantalla de menu. Selecciona todo el frame, ve a propiedades(es la 3 sección debajo del código) y en iconImage ponle el icono que quieres que vaya en la parte superior izquierda (donde esta la taza de cafe tipica de java).

Si quieres agregar componentes en el frame, primero elige el tipo de layout que quieres para la ubicación de los mismos.  Haz click con el botón derecho> setLayout y elige el que mas se adecúe a lo que necesitas.

Ahora agreguemos un JLabel en la pantalla principal, se abrirá una pantalla, donde tiene  un “Component name”, “text” y en imagen, puedes agregarle una clickeando en browse.

No te gusta como se ve la pantalla? Hacé click sobre el frame con el boton derecho del mouse, selecciona  set look and feel, y selecciona el que mas te guste.  Mira a mi me quedó así

pantallaprincipal

Te gusta? Espero que sí! Bueno ya sabes hacer tu primer pantalla con Jigloo, si tienes dudas comenta este post.