Hoy voy a postear la entrada más importante que he escrito desde que empecé el blog, un tutorial de Jigloo, un editor de interfaces Java en Swing. Hace unos días escribí un post sobre cómo instalar Jigloo. Este tutorial es tan sólo una introducción, por lo que es recomendable que, una vez completado, intentéis "cacharrear" con el código e investigar las posibilidades que ofrece Swing y éste plugin en particular. Os recomendaría leer la API de Java, pues es la clave para aprender a utilizar bien el lenguaje. Si detectáis algún error postead un comentario o mandadme un email a admin [_at_] java-spain [_dot_] com. Para ampliar las imágenes, simplemente pinchad sobre ellas.

• En primer lugar, creamos un nuevo proyecto de Java y le asignamos un nombre, por ejemplo Tutorial Jigloo. No hace falta que cambiemos ninguna opción de las que viene seleccionada por defecto.
• A continuación pulsamos con el botón derecho en el proyecto y seleccionamos New → GUI Forms → Swing → JFrame. Pulsamos siguiente y a continuación introducimos el nombre del paquete (gui, por ejemplo) y el nombre de la clase (MainWindow).

• En este momento aparecerá una ventana dividida en dos, o con pestañas, según la configuración elegida. En el caso en que esté dividida, nos encontraremos con la parte gráfica arriba y la parte de código abajo. Hay 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, y que contiene los métodos necesarios para que sea ejecutable (un constructor, un método main y un método inicializador de la interfaz). Estos métodos se podrán adaptar a las necesidades de cada uno, pero para este ejemplo lo dejaremos así.

• Lo que vamos a realizar es un sencillo editor de textos con pestañas, pero de momento sólo la interfaz. Comenzaremos añadiendo un JSplitPane. Para ello seleccionamos el botón JSplitPane que se encuentra en la pestaña de componentes o hacemos clic derecho → Add… → Add containers  → JSplitPane. Podemos dejar las opciones por defecto o cambiar el nombre por alguno que nos guste más.

• A continuación añadiremos, a la izquierda un JScrollPane, y a éste una JList y a la derecha un JTabbedPane, donde colocaremos el editor de textos. Para añadir el JScrollPane, seleccionamos el botón correspondiente en la pestaña de Containers y pinchamos en el JSplitPane. En la ventana que se abre, introducimos el nombre del scroll, desplegamos los Constraints y en el campo position seleccionamos left.

• Para añadir el JTabbedPane, hacemos lo mismo, recordando que se encuentra en la pestaña de Containers. En este caso, en el campo position seleccionaremos right. Colocamos la JList en el JScrollPane izquierdo.
• Añadimos el JEditorPane al JScrollPane derecho. El JEditorPane, es un panel en el que podemos editar texto plano, HTML y RTF. En próximas entregas lo veremos con más profundidad.
• Copiamos el JScrollPane con todos sus elementos, de manera que obtengamos una segunda pestaña. Cambiamos el nombre a los componentes, de forma que sea más intuitivo. Para esto es muy útil la herramienta de refactorización de Eclipse, o hacemos clic derecho en el componente y seleccionamos Rename.
• Ahora podemos cambiar los elementos de la lista, que no es más que un array de Strings. Esto lo realizamos directamente sobre el código. Pondremos el nombre de los archivos.

• Nos falta agregar una barra de menús, lo que haremos seleccionando JMenuBar en la pestaña Menu y pinchando en la ventana. Al crear la barra nos creará también un JMenu. Podremos cambiarle el nombre haciendo doble clic en él. Ahora tenemos que añadir los ítems del menú.
• Seleccionamos JMenuItem y pinchamos sobre el menú Archivo. Nos aparecerá una ventana donde introduciremos el nombre del componente y el texto. Podemos incluir los siguientes ítems: Nuevo, Abrir, Cerrar, Guardar, Guardar Como… y Salir. Agregamos también algún JSeparator debajo de Cerrar y Guardar Como…
• Completamos los menús:
  • Edición → Copiar, Pegar
  • Ayuda → Acerca de.., Ayuda
• Por último, falta la barra de título. Esto se realiza en la pestaña GUI Properties, en el campo title. Más fácil imposible. En esta misma pestaña podemos cambiar el tamaño conservando, eso sí, el formato [ancho, alto].

Segunda parte del tutorial: Cómo añadir eventos en Swing con Jigloo