Antes de comenzar a ver como realizar esta mini aplicación, les comento que para el ejemplo, utilizo el IDE (Integrated Developer Environment) Netbeans 6.9.1 con el jdk1.6.0_21 sobre Ubuntu 10.10, pero no deberían tener ningún problema si utilizar cualquier otro Sistema Operativo, o versión del IDE o del JDK. Si utilizar otro IDE posiblemente no se realice de la misma manera, aunque el ejemplo te podrá aclarar algunas cosas. Por otra parte, esta vez instale netBeans en Inglés, pero está en Español también. Usá aquel con el que te sientas mas cómodo.
Comencemos! Con nuestro IDE abierto hacemos File -> New Project. Elegimos en la lista de categorías Java y en la lista de proyectos Java Desktop Application.
En la siguiente pantalla, elegimos un nombre para la aplicación. Lo demás lo dejamos como está.
Le damos al botón Finish y, luego de crear el proyecto veremos algo similar a lo siguiente:
Bien! Ya tenemos una aplicación que tiene dos menúes, el Help que contiene el comando About y el File que contiene el comando para salir de la aplicación.
Añadimos un Panel (jPanel) a la aplicación (lo seleccionamos en la menú lateral Palette)
La extendemos a un tamaño adecuado y luego, en sus propiedades, le establecemos algún tipo de borde para poder "verla" (podemos cambiar esto luego).
Una vez hecho esto, y viendo los límites del panel, agregamos un jTextField y otro jPanel, y le establecemos el layout del primer panel en BoxLayout (Básicamente un Layout le da un formato a los contenedores). Esto nos acomodará los elementos que están adentro (el jTextFiled y el jPanel) uno al lado del otro ocupando la totalidad del panel. Luego en propiedades del layout hacemos Axis -> Page Axis
De esta manera nos va a quedar el jTextField arriba, ocupando el ancho del panel, y el jPanel superior ocupando el resto del espacio. Esto es una buena práctica para que no se produzcan deformaciones al cambiar el tamaño de la aplicación, o cuando la ejecutar sobre distintos sistemas operativos.
Vea que en el recuadro de la izquierda inferior se visualiza la estructura jerárquica del Form (Formulario) en el que estamos trabajando. En este caso, solo hay uno, el principal.
A continuación, incorporamos dos panel más (uno para los números y otro para las operaciones) e incorporamos los botones (jButton), quedando algo así:
Como verán, me salté varios pasos. Esto es porque son muchos, y todos ellos iguales y repetitivos: Elegimos en el menú Palette un jButton y lo agregamos arrastrándolo. Podemos cambiarle el texto del botón apretando F2 o la propiedad text del botón. Necesitamos 10 botones para los números, y 6 para las Operaciones. La distribución y tamaño de estos botones queda a discreción de cada uno.
Tip: Si necesitás que dos o más botones tengan siempre el mismo tamaño, seleccionas cada botón (manteniendo apretada la tecla Ctrl y señalando con el mouse cada botón), y en el menú conceptual elegimos Same Size -> Same Width (Mismo tamaño -> Mismo Ancho).
Noten que he dejado en blanco el jTextField y que le he desactivado la propiedad editable, ya que este jTextField se llenara con la acción de los botones (no le permitimos la edición e la fórmula por simplicidad).
Otra cuestión a tener en cuenta son los nombres de los objetos que tenemos en la interfaz. Deben ser nombre que describen cual componente del formulario es. En el caso del jTextField le cambie el nombre "jTextField1" por "visor", los botones de los números (jButton#) por b# (siendo # el comodín utilizado para representar los números [0-9]), y los nombres de los botones de las operaciones por algo como "opMas", "opMenos" y similares. Lo importante es ser organizado y recordar como comienzan los nombres de los componentes (digo "como comienzan" porque netBeans tiene autocompletado :-) ) sobre todo cuando la aplicación empieza a crecer.
Bueno, ya tenemos la interfaz configurada. En la próxima entrada le daremos funcionalidad a los botones.
Suerte!
