Ejemplo #11 Creación de un menú usando objetos de tipo List

Seguimos en este ejemplo viendo más problemas que se resuelven usando la instrucción if. Antes de iniciar con el ejemplo hablemos un poquito de la jerarquía de clases de Java Micro Edition.

La siguiente figura muestra la jerarquía de clases definida por los creadores de Java

Bueno yo la simplifique un poquito, me falto agregar algunas clases que todavía no se han visto en el blog, pero eso es lo de menos por que más adelante serán vistas. En la imagen fácilmente se identifican las clases con las que ya se ha trabajado, ChoiceGroup, TextField, etc. Todas ellas como se observa provienen de la clase Form, o más correcto son subclases de la clase Form.

En el ejemplo #11 vamos a utilizar una clase que esta al mismo nivel que un Form, la clase List. Esta clase esta excelente para crear menú de opciones como se verá más adelante en el ejemplo.

La clase List

Esta clase es muy parecida a la clase ChoiceGroup, nos permite mostrar un grupo de opciones para que el usuario elija una de ellas. La calse List puede ser de tres tipos:


• Implícitas
• Exclusivas
• Múltiples

Listas Implícitas

Este tipo de listas están perfectas para realizar un menú de opciones, ya que por sí mismas al seleccionarse activan un evento, el evento podría ser por ejemplo abrir un formulario (Form) para realizar algún cálculo, voy a repetirlo, este tipo de listas: “generaran un evento” es decir no se requiere ningún okCommand después de seleccionarse.

La figura siguiente muestra la imagen de una lista implícita

Listas Exclusivas y Múltiples

La figura siguiente muestra la imagen de este par de listas al lector se le van a hacer muy conocidas, puesto que si ha seguido el blog ya habrá trabajado con ChoiceGroup pues estos como puede verse en la imagen son idénticos a la lista mostrada enseguida.

No se entrará en detalles sobre este tipo de listas, se manejan igual que los ChoiceGroup, se usa el método getSelectIndex() para identificar que elemento se selecciono en las listas de tipo “exclusive” y el método getSelectFlag() para las listas de tipo múltiple.

Como crear objetos de tipo List desde netBeans

 

El proceso para crear este tipo de listas es bien sencillo solo se arrastran y sueltan en la vista de flujo de NetBeans. En la figura siguiente se muestra lo mencionado en este párrafo.

En la figura se observan tres grandes pasos que se realizan al trabajar con las listas, arrastrar y soltar (1), agregar los elementos necesarios (2) y conectar las acciones (3).

En la figura se observa como el método Started del dispositivo está conectado a la lista (todos los anteriores ejemplos estaban conectados a un Form). La conexión que sale de este método es lo primero que se ejecuta en el celular, en nuestro caso la lista que es la que contendría un hipotético menú de opciones deberiá ser lo primero que se mostraría en la pantalla del celular, esa es la razón de la conexión con el método Started contrario a todos los ejemplos donde se conectaban a un Form.

Por otro lado en la figura se observan dos elementos en la lista, llamados List Element 1 y List Element 2, véase como el primer elemento de la lista se conecta al Form, esto significa que “cuando seleccione el List Element 1 muestramé el Form”. Entonces directamente puedo mandar llamar los Form que sean necesarios.

Bueno basta de teoría, quizá el ejemplo #11 que se muestra enseguida, haga que todas las dudas que han surgido se aclaren, así que pasemos a ver de que trata.

Ejemplo # 11 Menú de opciones

Realizar un programa para el celular que sea capaz de mostrar un menú con las siguientes opciones:


• Área de un círculo.
• Obtener número mayor
• Ecuación cuadrática.
• Salir

El programa deberá ser capaz de realizar la operación seleccionada por el usuario.

Observaciones:

La opción “Área de un circulo”, pide el radio del circulo y calcula su área. La opción de “Obtener número mayor” deberá pedir tres números solamente e indicará cual es el mayor de los tres. Para la opción “Ecuación cuadrática” usar la formula general y tener cuidado porque puede ser que la solución tenga raíces imaginarias.

Solución

Paso 1 Creación del menú

Para esta opción simplemente creamos la lista con las opciones mencionadas, para cada opción se crea un Form y se realizan las conexiones necesarias. La figura siguiente muestra la creación de la lista y se muestran las conexiones para dos opciones nada más.

En la figura se remarca que se requieren dos comandos un okCommand encargado de realizar la operación necesaria y un exitCommand que nos regresa al menú principal.

Paso #2 Agregar interfaz de usuario para cada opción

En la vista de flujo se da doble clic para que se abra cada Form y así poder agregar los elementos necesarios para la interfaz, como ya se ha realizado en otros ejemplos. La figura siguiente muestra la interfaz de usuario para la opción “Área de un círculo”

En resumen la interfaz de usuario para cada opción es la siguiente:

Opción 1: Un TextField para ingresar el radio y un StringItem para mostrar el resultado.
Opción 2: Tres TextField para ingresar los tres números y un StringITem para mostrar el resultado.
Opción 3: Tres TextField para ingresar los tres coeficientes de la ecuación y un Stringitem para mostrar el resultado.

Paso #3 Agregar el código en cada form

Cada Form tiene un okCommand para ejecutar la acción que se pide, dando clic derecho se tiene acceso a insertar el código como ya se ha visto en los Ejemplos #8 y #9. Aquí no voy a entrar en detalle del código, en teoría el lector debe tener idea de cómo hacer dicho código, mejor en el video que se muestra más adelante se puede ver el código con exactitud, agrandes rasgos lo que se realiza para cada opción es lo que sigue:

Opción 1: Leer el valor que se ingreso de radio, se aplica la formula y se muestra el resultado.
Opción 2: Leer los tres números y luego hacer tres comparaciones para saber cual es el mayor.
Opción 3: Leer los tres coeficientes, verificar si se puede resolver la ecuación y si es así aplicar la formula y mostrar los resultados y si no enviar mensaje de que tiene raíces imaginarias.

Paso #4 Probar

Pues ya finalmente se prueba el ejemplo y se verifica que no se tengan errores si los hay se corrige el código hasta que quede listo.

Video Tutorial

Todo lo dicho anteriormente se puede ver quizá más fácil desde el siguiente video tutorial que muestra la solución para este ejercicio.

Código Fuente

Dando clic aquí se puede bajar el código fuente, por si te hace falta.

Clic AQUI para leer más...!

Ejemplo #10 Aplicación de los ChoiceGroup

Realizar un programa para el celular que muestre una serie de cuatro preguntas con sus respectivas respuestas para que el usuario elija la correcta, al final el programa deberá mostrar el total de respuestas correctas. Las preguntas son las siguientes:

Pregunta 1: ¿Cuándo inicio la lucha por la independencia de México?

Respuestas:

• 16 de septiembre de 1910
• 16 de septiembre de 1810 -- Correcta
• 20 de noviembre de 1910

Pregunta 2: ¿Quién fue el cura que dio el grito para iniciar la independencia de México?

Respuestas:

• Miguel Hidalgo -- Correcta
• José María Morelos
• Ignacio Allende

Pregunta 3: ¿Cuándo fue consumada la independencia de México?

Respuestas:

• 20 de noviembre de 1910
• 16 de septiembre de 1821
• 27 de septiembre de 1821 -- Correcta

Pregunta 4: ¿Quién estaba al mando cuando fue consumada la independencia de México?

Respuestas:

• Agustín de Iturbide -- Correcta
• Benito Juárez
• Vicente Guerrero

Solución

Paso 1. Crear los Form necesarios (Interfaz de usuario)

Cada pregunta se va a colocar en un Form, en la vista de flujo (flow) de Netbeans agregamos los respectivas Form y Command, si no recuerdas como se hace repasa viendo el ejemplo #6. La figura siguiente muestra como se ven los cinco Form necesarios con sus respectivos Command (un Form para resultados y cuatro para las preguntas).

La idea es la siguiente:

El form es para la pregunta #1.

El form1 es para la pregunta #2.

El form2 es para la pregunta #3.

El form3 es para la pregunta #4.

El form4 es para resultados.

Se puede observar la navegación, cada okCommand va al siguiente Form excepto el form4 que al presionarlo se finaliza la ejecución del programa, también los exitCommand al presionarlos finalizan la ejecución del programa.

Paso #2 Agregar los ChoiceGroup a cada Form (interfaz de usuario)

También esta parte ya se vio en el ejemplo # 4, si no recuerdas como se hace, no dudes en repasar el ejemplo. La figura siguiente muestra al NetBeans con uno de los Form con su respectivo ChoiceGroup, para la pregunta 1.

Se procede de igual manera, agregando el ChoiceGroup a cada Form con su respectiva pregunta y sus respectivas respuestas.

Paso #3 Agregando el código de selección del ChoiceGroup a los form

En la vista de flujo, del programa se observa que el okCommand del form al presionarse, hace que se muestre el form1, y el okCommand1 del form1 hace que se muestre el Form2 y así sucesivamente, es posible como ya se vio en el ejemplo #8 y en el ejemplo #9 como agregar código al presionarse el okCommand, para hacerlo, como se vio en varios ejemplos, basta colocar el mouse en el OkCommand y dar clic derecho y en el menú contextual “Go To Source” dar clic tal y como se observa en la figura siguiente.

Al hacer lo anterior se abre la ventana de código, intutivamente NetBeans nos lleva al código que se ejecuta cuando se presiona el okCommand que está en el form la figura siguiente muestra este código.

Ahí hay un recuadro negro, ese es el if que me identifica que se presiono el okCommand, tiene código generado por NetBeans como se observa, ahí se muestra el método

switchDisplayable(null, getForm1());

Este método se encarga de mostrar el form1 (la pregunta #2), recuerde cuando se presiona el okCommand, del form (la pregunta #1) el programa tiene que mostrar el form1 (pregunta #2). bueno pues esa es la instrucción que lo hace, al ejecutarse esa instrucción se observará en el celular el form1 (con la pregunta #2).

No es la intención de este post explicar todavía estos métodos y todo el código generado por NetBeans, aun no es tiempo de explicarlo quizá más adelante, ahora me interesa que se entienda lo otro, el if, los ChoiceGroup, para así poder realizar aplicaciones como esta del cuestionario.

Bueno, analicemos el código un poquito, justo en la imagen anterior en el recuadro negro se puede observar dos cosas, al iniciar el if dice en ingles “//write pre-action user code here” después viene la instrucción switchDisplayable y finalmente viene “//write post action code here” vea la figura anterior para más claridad, los enunciados yo los visualizo así: “escriba el código antes de que aparezca el form1 “ y el otro enunciado es “escriba el código después de que ya apareció el form1”.

Entonces ¿Dónde debo colocar el código para saber cuál fue la respuesta del usuario para la pregunta #1? ¿Antes o después de la instrucción switchDisplayable?.

La respuesta es sencilla, para saber cúal fue la respuesta seleccionada para la pregunta #1 que esta en el form hay que colocar el código antes de que aparezca la pregunta #2 (por que esta pregunta esta en el form1) es decir antes del switchDisplayable().

El código para saber si se selecciona un choiceGroup es el siguiente y ya fue analizado en el post anterior a este un código similar.

indice = choiceGroup.getSelectedIndex();
if (indice == 1)
total++;

Vemos varias cosas, primero vea el código anterior, se supone que se ha declarado la variable índice de tipo int, para poder saber que elemento del ChoiceGroup fue seleccionado usando el método getSelectIndex(), que regresa un valor entero, bueno pues la siguiente figura muestra exactamente donde se declara la variable índice.

Se recomienda la declaración de variables justo al iniciar el método, el método fue generado por NetBeans y sirve para procesar todos lo okCommand y los exitCommand.

Por cierto este tipo de variables declaradas dentro de un método, se llaman variables locales, solo se usan en ese método y no se pueden usar en otro lado del código.

Ahora veamos otra vez el código para saber cuando un ChoiceGroup esta seleccionado

 indice = choiceGroup.getSelectedIndex();
if (indice == 1)
total++;

Notese como la variable índice se compara solo con el valor de 1 ¿Por qué? Sencillo por que el índice 1 contiene la respuesta correcta para la pregunta #1. Las respuestas incorrectas no nos interesan por eso no se comparan con nada.

Por otro lado hay una instrucción que no se había manejado nunca en el blog:

total++;

la palabra total es una variable que va almacenando el total de respuestas correctas que va acumulando el usuario, el operador ++ significa incremento, es decir total inicia con 0 y si se obtiene una respuesta buena se incrementa una unidad, si se elige la respuesta correcta para la pregunta #1 la variable total almacena ahora el 1.

La variable se declara casi al iniciar el código de todo el programa, se debe recorrer todo el código generado por NetBeans para colocar la declaración de esta variable como se observa en la figura:

Las variables declaradas ahí se les llama variables globales y mantienen el valor que se va almacenando desde el inicio y hasta el final del programa, esto es contrario a las variables locales, ya que estas, cada que inicia el método donde son declaradas se reinicia el valor a 0, este es el caso de la variable índice, cada vez que se va navegando entre los form, y se presiona un okCommand, esta variable se reinicia a 0, y si se desea acumular el total de respuestas correctas no funcionaria si la variable total se declara como variable local, ese es la razón del por que se declara la variable global.

De igual manera que lo explicado en pasos anteriores se agrega casi el mismo código a los form1, form2 y form3 para las preguntas 2, 3 y 4 respectivamente, simplemente hay que comparar el índice con la respuesta correcta e incrementar la variable total.

Al final se deben mostrar los resultados en en el form4, recuerde que cuando se presiona el okCommand del form 3 nos muestre el form4, pues justo ahi despues de la instrucción switchDisplayable() hay que colocar el código para mostrar los resultados obtenidos, simplemente basta con agregar al stringItem una sentencia como la siguiente:

stringItem.setText(“Usted tuvo “ + total + “aciertos de 4 posibles”);

Si la variable total tiene 2, escribiría el programa en el form4 así “Usted tuvo 2 aciertos de 4 posibles”.

Video-Tutorial

Espero que me haya explicado siento que fue mucha la información pero el siguiente video muestra la solución exacta del ejemplo #10, analícelo y compleméntelo con lo que se ha expuesto aquí y quizá le quede más claro todo.

Código Fuente

Dando clic aquí puedes bajar el código fuente completo para el ejemplo #10, esta comprimido es la carpeta que genera el NetBeans.

Clic AQUI para leer más...!

Como saber que elemento de un ChoiceGroup se ha seleccionado

En el post del viernes 12 de junio al cual puedes acceder dando clic aquí se mostro como usar la clase ChoiceGroup, se mostraron también los tres tipos de ChoiceGroup que hay en Java Micro Edition y finalmente se mostro un ejemplo completo para crear una interfaz de usuario que hace uso de los tres tipos de elementos de la clase ChoiceGroup, con ese post y ahora que ya conocemos las instrucciones de condición podemos saber que elemento del ChoiceGroup se ha seleccionado, como se verá a lo largo de este post.

La figura siguiente muestra la interfaz de usuario creada para un ChoiceGroup tipo “exclusive”, que nos servirá para explicar esta lección.

Por otro lado en el post del martes 23 de junio el cual puedes ver desde aquí se mostró como acceder a la ayuda de Java, para ver los métodos de la clase TextField, ahora nos interesa la clase ChoiceGroup, siguiendo las instrucciones de ese post se puede llegar a la clase ChoiceGroup y a sus métodos como se ve en la figura siguiente (puedes dar clic en la figura para verla un poquito más grande):

De todos los métodos vemos cuál nos puede servir para saber que elemento del ChoiceGroup está seleccionado, el método que nos sirve para ello, es llamado getSelectIndex() el cual es remarcado en la figura, dando clic se puede acceder a más información del método, como se muestra en la imagen siguiente (da clic en la figura si lo deseas para verla más grande).


El método regresa el número de índice del elemento que ha sido seleccionado, este método se usa para los ChoiceGroup Exclusive y Popup, solamente, para los ChoiceGroup tipo múltiple se usa el método getSelectedFlags(), el cual no vamos a ver en este post hasta una entrada futura puesto que requiere de instrucciones especiales (arreglos) que no se han visto en el blog.

La figura siguiente muestra como Java ordena los elementos del ChoiceGroup de acuerdo a un número de índice.

Siempre Java los ordena así, eso es automático, el primer elemento tiene el índice 0 el segundo el 1 y así sucesivamente, así que para la figura anterior, donde se selecciona la opción mostrada (San Miguel de Allende) el resultado de la instrucción siguiente:

choiceGroup.getSelectIndex();

Regresa como valor un 0.

Si se selecciona la opción 3 (Celaya) el valor que regresa la sentencia es un 2 como ya imaginará el lector.El valor que se regresa se debe almacenar en una variable para después simplemente compararlo.

Para declarar la variable y obtener el valor del elemento elegido se hace con las sentencias siguientes:

int indice;
indice = choiceGroup.getSelectIndex();

Para realizar la comparación simplemente se usa la instrucción if, por ejemplo puede ser así, suponiendo que el Form tiene un StringItem:

If (índice == 0)
stringItem.setText(“ Respuesta incorrecta, inténtalo de nuevo “);
If (índice == 1)
stringItem.setText(“ Respuesta correcta, felicidades “);
If (índice == 2)
stringItem.setText(“ Respuesta incorrecta, inténtalo de nuevo “);

Bueno hasta aquí dejamos este post, queda pendiente un ejemplo completo de lo visto en esta entrada, mañana mismo espero que salga ese post.

Clic AQUI para leer más...!

Instrucciones de Condición Anidadas

Ups, perdón por este pequeño receso, pero ya estoy listo para la siguiente lección vamos a hablar más de las instrucciones condicionales, específicamente de instrucciones de condición anidadas.

Una instrucción de condición anidada es cuando una instrucción condicional tiene en su rama del verdadero o falso otra instrucción condicional. No todo se puede arreglar con un solo if, existen una gran infinidad de programas que requieren de estructuras anidadas. Veamos algunos ejemplos de estos tipos de problemas, solo se muestra el código de la parte del if en la solución de los ejemplos.

Ejemplo 1

Realizar un programa que lea un número y que indique si es positivo y además mayor que 10.

Solución

Con una comparación con 0 descubrimos si es positivo o no, si lo es, basta con agregar otro if para compararlo con 10 e indicar si es positivo y mayor que 10 este es el código:

if ( Numero >= 0 ) {
if (Numero > 10) {
stringItem.setText("El Número es positivo y mayor a 10");
}
else {
stringItem.setText("El Número es positivo y menor a 10");
}
}
else
stringItem.setText("El Número es negativo");

En el ejemplo se puede observar claramente como en la rama del verdadero del primer if se agrega otro if, lo anterior es lo que conocemos como if anidados, un if dentro de otro if.

Algo importante es la sangría (el espacio que se deja al iniciar las sentencias), se utiliza para ir agrupando claramente los if, y no confundirse, es altamente recomendable agregar la sangría a los if.

Ejemplo #2

Realizar un programa para ingresar la longitud de tres lados de un triangulo (L1, L2 y L3) y que el programa indique si el triangulo leído es equilátero (los tres lados iguales), o si es isósceles (solo dos lados son iguales) y finalmente que indique si es escaleno (los tres lados diferentes).

Solución

Otra vez se requiere varias comparaciones, varios if anidados, por ejemplo para saber si el triangulo es equilátero, se comparan los lados para saber si son iguales, como se observa en el código siguiente:

if ( L1 == L2 ) {
if ( L2 == L3)
stringItem.setText("El triangulo es equilatero");
}

Para saber si es el triangulo es isósceles se requieren varias comparaciones para comprobar las tres opciones posibles, para saber si hay dos lados iguales de la siguiente forma:

if ( L1 == L2 ) { //Opción 1: cuando L1 es igual a L2 pero diferente a L3
if ( L3 != L1)
stringItem.setText("El triangulo es isósceles");
}
else {
if ( L1 == L3 ) { //Opción 2: cuando L1 es igual a L3 pero diferente a L2
if ( L2 != L1)
stringItem.setText("El triangulo es isósceles");
}
else {
if ( L3 == L2 ) {//Opción 3: cuando L3 es igual a L2 pero diferente a L1
if ( L1 != L2)
stringItem.setText("El triangulo es isósceles");
}
}
}

No lo había mencionado en el blog pero // en Java significa un comentario y se agrega para explicar el código, hay que tener cuidado con las { } por eso precisamente se recomienda ampliamente el uso de sangría para identificar claramente los grupos de instrucciones que van en el if o en el else y cerrar adecuadamente las llaves.

Finalmente para saber si el triangulo es escaleno pues se compararan los lados para saber si son diferentes algo como el caso del triangulo equilátero, este es el código.

if ( L1 != L2 ) {
if ( L2 != L3)
if ( L1 != L3)
stringItem.setText("El triangulo es escaleno");
}

La animación siguiente muestra el código completo para este ejemplo, además se observa la ejecución del programa como la hace el procesador línea por línea para que el lector vea los caminos que se siguen con las diferentes combinaciones que hay.

Basta con introducir los valores de los lados del triangulo en los campos de texto y dar clic en el botón de iniciar la animación, al hacerlo aparece una línea azul que indica las comparaciones que hace el procesador hasta encontrar la solución.

Operadores Lógicos

Afortunadamente en java existen los llamados operadores lógicos que me permiten cambiar los if’s anidados en un solo if. Los operadores lógicos que veremos son los siguientes:

Operador AND ( Y )

La sintaxis del operador es así: &&

Su tabla de verdad nos muestra cuando dos variables unidas por un AND son verdaderas o falsas:

Operador 1	Operador 2	Operador 1 AND Operador 2
F	F	F
F	V	F
V	F	F
V	V	V

Véase la tabla de verdad, solo hay una opción para que el operador AND sea verdadero: cuando sus dos operadores sean verdaderos.

Con este operador se puede saber si el triangulo es equilátero con un solo if así:

if (( L1 == L2 ) && ( L2 == L3)) {
stringItem.setText("El triangulo es equilátero");
}

Haciendo una analogía con la tabla de verdad, el operador 1 es (L1 == L2), el operador AND es && y el operador 2 es (L2 == L3) así que, podríamos decir con el if que “Si L1 es igual que L2 y L2 igual que L3 entonces el triangulo es equilátero”.

Recuerde la sintaxis el operador AND es && y siempre debe haber ( ) que encierran toda la expresión y de preferencia cada operador por ejemplo (L1 == L2) también hay que encerrarlo entre ( ).

Para saber si el triangulo es escaleno también se pude usar este operador de la siguiente forma:

if (( L1 != L2 ) && ( L2 != L3) && ( L1 != L3 )) {
stringItem.setText("El triangulo es escaleno");
}

¡¡Que tal, tres if’s los cambiamos por uno solo!!

El operador AND funciona con los operadores que sean, siempre recordando que para que la expresión sea verdadera a fuerzas cada operando tiene que ser verdadero.

Operador OR ( O )

La sintaxis del operador es así: ||

Su tabla de verdad nos muestra cuando dos variables unidas por un OR son verdaderas o falsas:

Operador 1	Operador 2	Operador 1 OR Operador 2
F	F	F
F	V	V
V	F	V
V	V	V

Con este operador basta con que un operador sea verdadero para que la expresión total sea verdadera.

Por ejemplo para saber si el triangulo es isósceles, se tienen tres opciones que podemos agrupar con el operador AND.

Opción 1: cuando L1 y L2 son iguales pero L3 es diferente

if (( L1 == L2 ) && ( L3 != L1)) {

}

Opción 2: cuando L1 y L3 son iguales pero L2 es diferente

if (( L1 == L3 ) && ( L2 != L1)) {

}

Opción 3: cuando L2 y L3 son iguales pero L1 es diferente

if (( L2 == L3 ) && ( L1 != L2)) {

}

Ahora bien las tres opciones se pueden agrupar con un OR, porque basta con que una de las opciones sea verdadera para que el triangulo sea isósceles, el código final para saber si el triangulo es isósceles queda con un solo if así:

if ((( L1 == L2 ) && ( L3 != L1)) || (( L1 == L3 ) && ( L2 != L1)) || (( L2 == L3 ) && ( L1 != L2))) { 

stringItem.setText("El triangulo es isósceles"); 
} 

En conclusión, los operadores lógicos pueden facilitarnos el trabajo cuando se trata de muchas instrucciones condicionales y más si son anidadas, como se vio en este ejemplo del triangulo, que se realizaba con más de 10 if’s y con los operadores lógicos se redujo a solamente 3. Hasta aquí vamos a dejar este post, recuerda practicar es la clave del éxito.

Clic AQUI para leer más...!