Académique Documents
Professionnel Documents
Culture Documents
Programas necesarios
Para poder llevar a cabo lo descrito en este manual slo ser necesario bajarse NetBeans de la siguiente pgina: http://netbeans.org/index.html En la fecha de creacin de este documento, la ltima versin disponible es la 6.8, aunque segn la propia pgina de descarga se pueden conseguir los mismos resultados desde la 6.5.
3. Rellenamos con los datos deseados el formulario, pero dejando marcadas las casillas Create Main Class y Set as Main project. Pulsamos Finish.
5. Rellenamos el formulario ponindole el nombre que deseemos y el paquete que contendr la interfaz. Pulsamos Finish.
6. Se nos debera abrir el archivo que hemos creado, mostrando la interfaz del GUI Builder.
Zona de diseo
Esta es la zona que est contenida en el cuadrado rojo y que en un comienzo tan slo contendr un rectngulo vaco. Sirve para colocar los distintos elementos de la interfaz que estemos creando, cambiando sus parmetros (color, tamao, etc) y, en definitiva, amoldndolos a los que queramos conseguir. En la parte superior tiene una barra de herramientas con diferentes elementos: 1. Source Design: estos dos botones nos permiten cambiar entre modo de vista de cdigo y grfico. En el Grfico podremos aadir los distintos elementos de la interfaz, mientras que en el de vista de cdigo les daremos funcionalidad. Ntese que en la parte de cdigo aparecern zonas sombreadas de azul, lo que significar que ese trozo de cdigo slo puede ser editado mediante el GUI Builder y no de forma manual. 2. En esta parte tenemos 3 botones muy tiles. a. Modo Seleccin: nos permite seleccionar los elementos de la interfaz y moverlos o cambiar su tamao. b. Modo Conexin: nos deja definir la relacin entre dos elementos de la interfaz, sin tener que entrar en la vista de cdigo. c. Vista previa: aparece una interfaz preliminar para que podamos evaluar su funcionalidad antes de compilar. 3. Botones de autoajuste: con ellos podemos alinear los elementos de la interfaz de forma automtica. 4. Pautas de autoredimensionamiento: indican si al ampliar la ventana principal de la interfaz los elementos que contenga se redimensionan con ella o no.
Propiedades de elementos
Es la parte que est en el recuadro azul. Aqu se mostrarn las propiedades del elemento que tengamos seleccionado en ese momento, permitiendo a su vez su alteracin.
Inspector
A parte de las zonas anteriores, existe una zona ms, en la esquina inferior izquierda, llamada Inspector. Es aqu donde encontramos un resumen en forma de rbol de todos los elementos que hemos ido aadiendo a la interfaz, pudiendo adems seleccionarlos directamente o cambiar sus propiedades pinchando en opcin adecuada al hacer clic con el botn derecho del ratn sobre ellos, sin necesidad de buscarlos en la propia interfaz.
Aadir un elemento
Basta con seleccionar el que queramos y arrstralo hasta la zona de diseo. En un principio suele ser mejor insertar primero los elementos contenedores, tales como paneles o mens, para luego ir aadiendo los dems. En el ejemplo hemos aadido 2 paneles:
*Nota: ahora mismo se ven ambos paneles porque estn seleccionados, pero de no ser as no se vera nada, pues los paneles por defecto no traen borde.
Modificar atributos
Lo primero que debemos hacer es redimensionarlos hasta estar conformes con el resultado. Despus, seleccionamos el que queramos y en la zona de propiedades los modificamos a nuestro gusto. En este caso, hemos aadido un borde con titulo a las paletas, y de camino unos cuando elementos ms, como botones o eqtiquetas:
Anclaje
EL anclaje se refiere a la capacidad de un elemento de adaptarse al tamao de la ventana o del objeto que la contiene (algo as como una interfaz dinmica en cuanto a tamao). Se puede realizar de forma automtica si acercamos un el elemento hasta el borde de la tabla de diseo o del contenedor, cuando aparece una lnea punteada (imagen anterior). Para hacerlo de forma manual simplemente basta con seleccionar o deseleccionar las opciones que vimos en la zona de diseo nmero 4, y que relacionan contenedor con contenido en ancho, alto, o ambos a la vez. Vase la diferencia en la siguiente imagen:
Se puede comprobar cmo el Panel 1 tiene definida la propiedad de autorredimensionarse con el ancho de la ventana, mientras que el Panel 2 queda intacto sea cual sea. Del mismo modo, jTectField1 est relacionado con Panel 1, puesto que si no lo estuviera ocurrira lo que se en la siguiente imagen.
Otro tipo de anclaje es el que se da entre un elemento y otro al mismo nivel (ninguno contiene al otro), que hace que se conserve la posicin relativa entre ambos(como pasa con el Botn del ejemplo, que conserva la posicin con respecto al borde). Esto se consigue usando las guas que aparecen mientras se arrastra un objeto: si lo ponemos a la distancia de una de las lneas que aparecen en otro elemento, esa distancia no se alterar nunca:
3. Seleccionamos la etiqueta que pusimos y elegimos Properties de las opciones que aparecen al pulsar con el botn secundario del ratn. Dentro de las propiedades, le damos a la parte del la propiedad icon:
4. Seleccionamos Import to Project, en donde buscamos la imagen que deseamos y despus en donde queremos guardarla, tras lo cual la imagen aparece en el mismo recuadro que la etiqueta:
10
5. Slo queda modificar el nombre de la etiqueta para que ste no aparezca, si es lo que deseamos.
6. Ya tenemos una imagen dentro del formulario, la cual quedar guardada en el .jar resultante. Qu bien, eh?
11
Manual de creacin de Interfaces de Usuario en 2010 Netbeans Crear una interfaz que interacte con una BD
Creacin del proyecto
Para crear una interfaz que sea capaz de visualizar y modificar campos de una base de datos existente, necesitamos seguir los siguientes pasos: 1. Pulsamos File>New Project. 2. En el wizard que aparece, expandimos Java, y dentro de l seleccionamos Java Desktop Application. Pulsamos Next. 3. En esta ventana, debemos seleccionar rellenar los campos con el nombre y el directorio del proyecto, pero adems es necesario seleccionar la opcin Database Application y marcar Set as Main Project. Tras ello, pulsamos Next. 4. En este nuevo formulario, tenderemos que seleccionar la BD a la que nos conectaremos. Si es la primera vez, tendremos que elegir New Database Conection y rellenar los datos de la conexin. En el ejemplo que se ve, se han usado los datos para conectares a una de las bases de datos que Xammp trae por defecto en MySQL.
12
5. Por ltimo aparecer otro formulario que nos preguntar cmo queremos visualizar las columnas de las tablas. Elegimos la opcin que queramos y finalizamos. Llegados a este punto, debera haberse creado una interfaz con un formulario que realiza las tareas ms sencillas sobre nuestra BD: consultar, aadir y borrar. A partir de aqu, le podemos aadir la funcionalidad y el formato que deseemos, como barras deslizantes para dar valor a los campos.
13
Ahora lo que hacemos es aadir un nuevo botn al formulario y entrar en sus propiedades, para modificar los siguientes campos del mismo modo en el que aadamos una imagen a una etiqueta en el apartado anterior: Icon: en donde metemos la imagen del botn en estado normal. Pressed Icon: aqu pondremos la imagen del botn presionado
Text: borramos lo que ponga (jButton por defecto). Border: seleccionamos No Border. Content Area Filled: desmarcamos esta opcin. Cursor: si deseamos que al poner el cursor encima, ste cambie, seleccionaremos el cursor que deseemos que aparezca en esta parte. FocusPainted: desmarcamos esta opcin tambin.
Haciendo todo esto, obtendremos los resultados que se observan en la pgina siguiente.
14
15
Manual de creacin de Interfaces de Usuario en 2010 Netbeans Navegar entre JFrames mostrando nicamente un JFrame
Si tenemos una aplicacin compuesta por varios JFrames, por ejemplo un JFrame inicial que represente un men, y varios JFrames para cada una de las opciones del men, lo ms lgico es que solo se muestre un JFrame al usuario, en lugar de ir acumulando JFrames cada vez que se seleccione un opcin. Para ello utilizaremos la funcin setVisible de la clase JFrame. As supongamos que tenemos el siguiente JFrame al que llamaremos Inicio:
Dentro del JFrame inicio se debe crear un JFrame por cada posible opcin, supongamos que el JFrame que se mostrar si seleccionamos la opcin Consultar Stock de Bebidas se llama Bebida. Lo que debemos hacer es colocar el siguiente cdigo dentro de la accin asignada al botn Consultar Stock de Bebidas: this.setVisible(false); Bebida.setVisible(true); En primer lugar indicamos que se deje de mostrar el JFrame inicio y que se muestre el JFrame Bebida. Tras esto puede surgir una pregunta Cmo podemos volver a mostrar el men inicial desde el segundo JFrame? Una forma muy sencilla de hacer esto es crear dentro del JFrame Bebida una variable que almacene el JFrame padre, en este caso Inicio. De esta forma lo nico que
16
Observer
public void update( Observableobs,Object obj )
Llamada cuando se produce un cambio en el estado de un objeto Observable que est siendo observado.
Observable
public void addObserver( Observer obs )
Comprueba el flag interno para ver si el Observable ha cambiado de estado y lo notifica a todos los observadores
17
18
Unidades de Persistencia
Conceptos Bsicos
Cuando se trabaja con bases de datos, debemos antes conocer 3 conceptos bsicos: Unidades de Persistencia: Las unidades de persistencia contienen los datos necesarios para realizar una conexin con la BD, y estn descritas en un fichero xml, dentro del paquete llamado META-INF. Entity Manager: Para poder modificar la base de datos con la que conectamos, se hace necesario el uso de EntityManagers, un tipo especial de clase que nos permite consultar y cambiar la BD a travs de nuestras propias entidades. Entidad: Son clases marcadas con @Entity. Las entidades son necesarias para trabajar con los datos que se obtienen de los EntityManager, pues se corresponden con las tablas que se almacenan en la BD, y cada nueva instancia de una entidad es una fila de la tabla a la que representa. Tendremos que tener una entidad para cada tabla que queramos poder consultar o modificar.
Una vez visto esto, lo siguiente que debemos saber es el modo de configurar la conexin y cmo trabajar con ella, temas que se tratarn en los siguientes apartados.
19
2. Se nos pedir despus que rellenemos un formulario con el nombre de la unidad, la librera de persistencia a usar (nosotros elegiremos toplink) y la conexin de la BD, que se realiza de forma similar a como se explic en el punto Crear una interfaz que interacte con una Base de Datos.
3. Una vez hecho esto, pulsamos finalizar, y vemos que aparecer una nueva carpeta llamada META-INF:
20
Para despus inicializarla como sigue: entityManagerDePrueba = java.beans.Beans.isDesignTime() ? null : javax.persistence.Persistence.createEntityManagerFactory("UnidadDePrue ba").createEntityManager(); De forma visual, simplemente arrastraremos desde la paleta del Gui Builder el icono Entity Manager (en la parte de Java Persistence) hasta el interior de la interfaz. En la propia interfaz no aparecer nada, pero si nos fijamos, en el Inspector tendremos un nuevo elemento, al cual le podemos cambiar el nombre y modificar sus propiedades para que se conecte a la unidad de persistencia (o sase, a la BD) que deseemos.
Ahora ya tenemos un nexo de unin entre nuestras entidades y las tablas de la base de datos, pero espera un momento, no tenemos entidades!
21
2. Aparecer una ventana, en donde elegiremos la conexin de la DB que deseemos. Tras ello, se llenar el campo blanco de la izquierda con las tablas de la BD, dejndonos seleccionar las que queramos aadir como entidades al proyecto.
3. Por ltimo, pulsando en next y cambiando las opciones que deseemos (las que vienen por defecto no dan ningn tipo de problema), las tablas sern aadidas como nuevas entidades. (*nota: por algn motivo, cuando se seleccionan ms de una tabla a la vez para ser aadida, no crea bien las entidades, sino que las deja en blanco. Por ello es mejor aadirlas de una en una).
22
23
24