adminitradores de esquemas, parte 2

Como ya dijimos en la entrada anterior, existen diversos administradores de esquemas con los cuales podemos ordenar nuestros componentes dentro un contenedor, ventana si se quiere así.  A continuación veremos que hacer en caso de que queramos tener control total sobre los componentes, es decir, especificar tanto su tamaño como su posición sin depender de ningún administrador. Recuerda que no vasta no especificar un tipo de administrador a un contenedor para que quede como null, me refiero a que si no especificamos mediante el método setLayout() ningún administrador, este contenedor quedara por defecto como FlowLayout, Que es el administrador de esquemas por defecto.

Comenzaremos creando una ventana sencilla y aprovechare de mostrarte un nuevo componente, JCheckbox, ademas le agregaremos una pequeña imagen a un boton y como fondo de un contenedor. *Por ahora nuestros botones no realizan ninguna accion, esto lo veremos en la sgte entrada "manejadores de eventos"*

Veamos linea por linea:

linea 7, creamos dos objetos de la clase JButton del paquete javax.swing, JButton nos permite utilizar un boton que puede ser personalizado ya sea en su contenido, forma o estilo.

linea 8, creamos un objeto ImageIcon, que nos permitira utlizar una imagen (jpg,gif, bmp... ) en algun componente compatible de swing o awt.

Como ya sabemos lo que hacen las lineas de la 10 a la 15 nos saltamos ok.

linea 16, establecemos el administrador de esquemas en null, con lo que tendremos pleno control del componente que agreguemos al panel o ventana, es importante establecer tanto las coordenadas como el tamaño, de lo contrario no se mostrara correctamente.

linea 18, creamos un botón y le pasamos como parámetro el String "simple" para que aparezca al
interior del botón.

linea 19, con la instancia que acabamos de crear de JButton, osea en palabras mas simples, con el botón que acabamos de crear al cual llamamos bSimple. invocamos al método SetBounds(x,y,x,y); que es inherente de los componentes avanzados de Swing. El método setBounds nos permite establecer tanto posición como tamaño, para ello el método recibe cuatro argumentos de tipo int. los primeros dos indican la posición x e y respectivamente en pixeles, los otros dos indican ancho y alto. Como se menciono en anteriores tutoriales los objetos se crean a partir del punto superior izquierdo. en Este caso es de 100 de ancho y 30 de alto.

linea 20, agregamos el botón a JFrame, recordemos que nuestra clase extiende de JFrame por lo que tiene todas sus características y una de ellas es el método add. de igual manera podríamos utilizar add sin el this, pero lo hice para evitar alguna confusión..

linea 22, creamos una instancia de ImageIcon a partir del objeto que ya habíamos declarado. Como parámetro le pasamos la URL (ubicación de la imagen) que utiliza para cargar la imagen en memoria, en este caso, la imagen esta en la misma ubicación que el archivo .java, en el directorio del proyecto, con lo que solo se coloca el nombre completo del archivo, incluye el tipo. con esto ya tenemos nuestro ImageIcon de nombre "imagen" cargado en memoria.

linea 24, creamos el nuevo botón y como parámetro le pasamos el objeto "imagen" con esto la imagen se añade automáticamente al interior del botón. tal cual hicimos con el botón anterior le damos posición y tamaño a través del metodo setBound(x,y,x,y);y lo añadimos a la imagen, en este caso el segundo botón es mas cuadrado, fíjate en los atributos de tamaño (60 y 50)

lineas 29 a 32, creamos el método main e instanciamos en su interior nuestra clase para poder ejecutarla con normalidad.

...... pendiente

Administradores de Esquemas 1 (FlowLayout y BorderLayout)

Para la creación de una interfaz gráfica es de vital importancia el orden que tengan dentro de la misma los diversos componentes, esto es, ordenar correctamente los botones, barras, campos de texto, etc...
para ello en java contamos con los Administradores de Esquemas que proporcionan diferentes maneras de ordenar los elementos. Dentro de estos existen algunos básicos y otros mas avanzados: Todos estos Layout implementan(ya veremos que es exactamente implementar) de la interfaz LayoutManager que les proporciona los atributos básicos para la administración de gráficos en pantalla. Para agregar un layout a una "ventana" debemos agregarlo a través del método setLayout( );  que es implementado en la clase Container. como ya supondrás, todas las clases que heredan de Container también poseen este método, como por ejemplo JFrame y JPanel.
La administración de esquemas supone un par de cosas que debemos recordar:

1- El administrador de esquema dispone de control -relativo- sobre el tamaño y orden de los componentes.
2- cada administrador cuenta con propiedades especificas. por eso es necesario tomar una buena decisión sobre cual ocuparemos, ya que a mas básico el administrador, menor control tendremos.

También podemos definir el argumento del método setLayout() como null. Con esto obtendremos control total sobre los elementos, especificando manualmente tanto su posición como su tamaño mediante métodos que comparten todos los componentes como por ejemplo setBounds() que recibe 4 argumentos, los primeros dos sobre la posición del componente, y los otros dos sobre el tamaño.

FlowLayout

FlowLayout nos permite agregar componentes que se irán posicionando a medida que se vayan agregando al panel o ventana, los componentes se crean con el tamaño necesario y se irán posicionando en la siguiente linea de la ventana.

 

(no se hablara sobre lineas que ya hemos explicado antes, como la creación de la ventana)

lineas 1-4 se realizan las importaciones respectivas, en este caso utilizaremos botones, para lo cual lo traemos a través de  de JButton (clase que pertenece al paquete javax.swing), también importamos un campo de texto mediante JTextField, el cual es utilizado para campos de datos específicos, como nombres, apellidos, contraseñas, etc... También se realiza la importación de FlowLayout que es el administrador de esquema que utilizaremos en esta ocasión.

8 - se crean dos botones, osea, objetos de la clase JButton.

9 - se crea un campo de texto.

11- se crea el constructor y en lineas posteriores se crea la ventana.

17- se realiza una llamada al método setLayout(new FlowLayout); con lo que establecemos FlowLayout administrador de esquemas de nuestra ventana. En esta ocasión estamos agregando los componentes directo al JFrame pero seria lo mismo si los estuviésemos posicionando en un JPanel (en cuyo caso deberíamos llamar al setLayout del panel y no de la ventana)

18-20 - olvidémonos de estas lineas por un momento.

23 y 28 - un método JButton que inicializa (crea) el primer botón. si te fijas he puesto un String como argumento en la creación del elemento, esto es porque el constructor de JButton lo permite. este String será el titulo mostrado en el botón. puedes revisar todas las opciones del constructor de JButton en la API de java.

34- al igual que con los otros métodos, se inicializa el JTextField y se le agrega un String para que lo muestre dentro del campo al crearse el componente, este texto puede cambiarse. JTextField tiene diversos métodos para manejar los String en su interior.

37 - método main.

ahora si.

18-20 se agregan los métodos, por ende los objetos (dos JButton y un JTextArea), recuerden que el método add() añade los componentes a la ventana y como estamos utilizando el FlowLayout estos se agregaran en el orden en que los pasemos a la ventana, en este caso, boton1, boton2 y campo, respectivamente.

el resultado es así:

*si no te aparece el JTextArea cambia el tamaño de la ventana, en vez de 100, pone 120.

Ahora prueba cambiando el orden en que agregas los componentes y ve los resultados.

*Mas adelante haremos que los botones generen acciones.

BORDERLAYOUT()

Este administrador de esquema, te deja posicionar un elemento entre 5 posiciones diferentes,CENTER, SOUTH, NORTH, WEST, EAST.  expandiendo el componente donde no encuentre otro. por ejemplo ponemos un botón con orientación CENTER, al no encontrar ningún otro componente el botón ocuparía toda la ventana.

para probar este administrador solo debemos modificar un poco del codigo anterior.

- A los import, solo agregamos un java.awt.BorderLayout();

- en el método setLayout() agregamos a BorderLayout(), esos dos argumentos que reciben, son medidas en pixeles de la separación en ancho y alto de los componentes, No es obligación que le demos valores.

en las siguientes lineas al añadir los componentes mediante el método add() especificamos en que parte de la ventana queremos que este nuestro objeto.

este seria el resultado:

Como puedes ver el boton del centro al no encontrar otros componentes a su izquiera y derecha, relleno todo el espacio.

ahora cambiemos los valores del contructor de BorderLayout y pongamos le (4, 40)

como vez a cambiado el margen vertical entre los componentes, si añades otros botones o campos (en posiciones WEST y EAST) puedes también modificar el margen horizontal y ver los resultados.

Interfaz Grafica de Usuario - Figuras

Ya vimos como crear una ventana y como utilizar JPanel para dibujar atraves de objetos Graphics. A continuación profundizaremos en el uso de Graphics para crear figuras complejas, Antes, te presento a la clase Color del paquete java.awt. Color nos permite "crear" o mejor dicho especificar un color para algún objeto o componente. La clase color cuenta con Objetos finales para utilizar colores predefinidos como: Color.red Color.blue Color.white etc... Es posible, tan bien, especificar muchos mas colores a traves de valores RGB, dichos valores pueden ser de 0.0 a 255 o de 0 a 1.0, poniendo estos valores en el constructor de Color al crear el objejo. ej:                         Color cPersonal = new Color(255,128,0); //en este caso creamos el color naranja acá tienes una pagina con valores RBG que puedes utilizar en la creación de colores personalizados. http://www.december.com/html/spec/colordec.html También se puede agregar color a una figura directamente a través de su método "setColor" propio de objetos gráficos. a continuación veremos esto.

Creación de ovalos rellenos.

linea 1 - package especifica el paquete en el que he creado mis clases. no creo que haga falta explicar esto.

lineas 3 a 6 - las importaciones necesarias para poder dibujar y crear el contenedor tal cual hicimos en la entrada anterior. solo se ha añadido la clase Random. con la cual podemos generar números al azar entre un determinado conjunto.

la linea 10 - hacemos la sobre-escritura OBLIGATORIA del método paintComponent() para poder dibujar en el contenedor. si te fijas aparece un mensaje de advertencia del IDE (de color amarillo) este mensaje se debe a que el el método paintComponent() esta siendo sobrescrito. puedes dejarlo tal cual (el mensaje) o si te posicionas sobre el mismo te dará la opción de poner una anotación "@Override" con lo que se saldrá la advertencia. esto es solo para identificar los métodos sobrescritos. 

linea 14 - creamos un objeto Random para poder crear colores y especificar posiciones al azar.

linea 15 - creamos un for que itere 4 veces, para crear 4 óvalos.

linea 17 - mediante el parámetro de Graphics g creamos un nuevo color con valores RGB al azar mediante

numeros al azar entre 0 y 255. Para esto es necesario poner un    new Color dentro del parámetro de setColor(). y especificar tres valores numéricos. En este caso los tres valores son al azar.

linea 18 - utilizamos fillOval() método que nos permite crear un ovalo relleno del color previamente especificado.

     El metodo fillOval( ); recibe 4 argumentos; los primeros dos indican las posiciones X e Y          respectivamente y los otros dos indican el largo en X y el alto en Y.  En realidad lo que se crea es un

 cuadrado y el ovalo  se crea al dibujarlo dentro del cuadrado tocando cada centro de las rectas. de la siguiente manera : (los valores de las coordenadas son de la esquina superior derecha del cuadrado imaginario, esto se aplica a cualquier figura que creemos.)

Si te fijas, en el ejemplo puse los primeros dos argumentos como objetos Random que pueden

ser de 0 a 230, puse esos valores para que cuando se cree el ovalo no se salga de la ventana que es de ancho 300.

esta clase es igual que la que creamos en la entrada pasada. creamos una clase que herede de JFrame y especificamos los atributos básicos de la ventana. seguimos añadiendo setLotationRealativeTo(null); para que la ventana aparezca en el medio de la pantalla. también especificamos a serResizable(null) para que no pueda ser dimensionada. En el main instanciamos el objeto JFrame.y le añadimos nuestra clase Dibujos para que muestre nuestros dibujos en la ventana.

Como las `posiciones y colores de los óvalos son al azar, cada vez que ejecutemos nuestra clase tendrá resultados diferentes.

Ahora para probar un curioso y atractivo efecto, haz lo siguiente. Pon después de la llave de cierre del for una llamada al método repaint( ); el efecto te agradara.

Otros métodos de Graphics 

- fillRoundRect (int x, int y, int anchura, int altura, int anchuraArco, int alturaArco);

     Dibuja un rectángulo relleno con esquinas redondeadas, en el color que este especificado, con el ancho y      la altura especificados. los valores de anchuraArco y alturaArco determinan el grado de redondez de las        esquinas.

- draw3DRect (int x, int y, int anchura, int altura, boolean b);

    Dibuja un rectángulo tridimensional relleno en caso de que el argumento booleano sea true, 

- clearRect();

   Dibuja un rectángulo relleno con el color de fondo actual. lo que permite eliminar (mejor dicho cubrir) áreas especificas de una  imagen.

Esta es otra aplicación que utiliza figuras para crear un "smile", solo se ha modificado la clase Dibujos.

-nota que el color se ha añadido mediante el metodo setColor y se ha especificado colores solidos (declarados como finales en la clase Color.).

-Para la boca se utilizaron dos ovalos, primero uno negro y luego uno amarillo levemente mas arriba para cubrir la mayor parte del negro dejando asi solo una linea como sonrisa.

nota que los métodos fill y en general cualquiera que pueda utilizar colores toma el color que se haya especificado antes, hasta que se indique otro.

Ejercicio propuesto:::

Crea la siguiente figura utilizando solo drawLine();

Como ayuda, te sirve tener el alto y el ancho mediante los metodos getWidth(); getHeight(); y de alli comenzar a restarle a los lados.

Tambien puedes crear unas lineas centrales para guiarte y después quitarlas.