Heyyyyyyyyyyyyyyy

Aprende a programar microcontroladores en C... http://tecdigitaldelbajio.com/software-tarjeta.html
Mostrando entradas con la etiqueta netbeans. Mostrar todas las entradas
Mostrando entradas con la etiqueta netbeans. Mostrar todas las entradas

jueves, 18 de junio de 2009

Ejemplo #6 Como usar objetos de tipo Command



Introducción

En entradas anteriores del blog se menciono que un Form sirve para agregar componentes dentro de el, se observo en el ejemplo #2 como se agregan elementos StringItem en el Form, en el ejemplo #3 se agregaron TextField al Form, etc. Debido a lo reducido de la pantalla y para programas complejos es recomendable dividir la interfaz de usuario en varias pantallas, que se van mostrando cada que se necesiten o bien cada que se programen.
Efectivamente se divide el programa en una serie de pantallas de las cuales en un instante solo una se puede mostrar, como se observa en la figura siguiente:



La figura muestra tres objetos de la clase Form, llamados Form 1, Form 2 y Form 3, la pregunta que quizá se hagan es ¿Cómo agrego más Form’s a mi programa para después mandarlos llamar y que aparezcan cuando yo lo desee?. La respuesta es se divide en dos partes:

1. Agregar los objetos Form necesarios, en la pantalla de flujo (flow) del netBeans
2. Agregar un objeto Command para cambiar de una pantalla a otra.

Vemos a detalle estos dos pasos.

Agregando Form’s

La figura siguiente muestra donde está ubicado el elemento Form en el NetBeans

Primero se elige la vista “Flow” (flujo), después se da clic en la paleta de componentes, justo donde se indica en la figura en los elementos “Displayables”, se identifica el Form y se arrastra y suelta en la vista de flujo, con esos es suficiente para que NetBeans cree la instancia llamada form1.

Al hacer lo anterior se tienen ya dos instancias de la clase Form, una llamada form que se crea solita, cuando creamos el proyecto y la otra llamada form1 que se crea al arrastrar y soltar un elemento Form, así puedo continuar para poder crear más instancias.

Dando doble clic en los objetos form o form1 se abre la vista “Screen” donde podemos agregar y soltar elementos para crear la interfaz de usuario, el video tutorial mostrará esto en detalle, un poco más adelante. Antes hay que ver cómo podemos cambiar de un form a otro.

Agregando objetos Command

Command es una clase, las instancias de esta clase mantienen información sobre un evento, podemos pensar que son como un botón de Windows, se usan cuando el usuario quiere ejecutar una acción. La figura siguiente muestra donde están ubicados los elementos Command en NetBeans:

Existen varios tipos de objetos command, solo para fines de nuestro ejemplo (el cual veremos más abajo) solo mostraremos dos tipos de objetos Command por ahora como se observa en la tabla siguiente:

  1. Tipo: Exit
    Descripción: Petición para salir de la aplicación
  2. Tipo: Ok
    Descripción: Aceptación de una acción por parte del usuario

Quizás sin saberlo, pero en nuestros programas anteriores ya hemos usado un comando, el comando para salir (ExitCommand). Al crear el proyecto el NetBeans agrega automáticamente este comando. La figura siguiente muestra la imagen del emulador cuando se ejecuta el ejemplo #1, el programa Hola Mundo, ahí se observa claramente el comando exit.

Tal y como se menciono el objeto Command aparece en el celular como un botón para ejecutar una acción, que en este caso es la de salir del programa.

Para agregar objetos Command basta con arrastrar y soltar, la figura siguiente muestra que al form se le agrego un OkCommand y al form1 un exitCommand y un OkCommand.


Solo falta una cosa definir las acciones para cada botón, usando NetBeans las cosas se simplifican muchísimo, Basta con dar clic en el okCommand y arrastrarlo a la forma que deseamos que se muestre en la pantalla, al hacerlo se agrega automáticamente una flecha que indica la conexión, la figura siguiente muestra las acciones para los okCommands.


Se observa lo que se decía arriba, el okCommand del form se conecta al form1 y el okCommand del form1 se conecta al form. En otras palabras lo anterior significa que: “cuando de clic al botón OK del form muéstrame en la pantalla el form1”, y “cuando de clic en el botón OK del form1 muestra en pantalla el form” ¿me explique?. Quizá todo se vea más claro con un ejemplo como el siguiente.

Ejemplo #6

Realizar un programa en el teléfono celular que:

  • Muestre una imagen en la pantalla
  • Muestre la interfaz de usuario para capturar los siguientes datos de un alumno:
    o Nombre
    o Escuela
    o País
  • Muestre la interfaz de usuario para elegir una carrera (las carreras disponibles son: electrónica, sistemas computacionales y mecatrónica)

Solución

Se divide el programa deseado en tres form, uno para cada opción que se indica, se agregan los objetos Item y finalmente se agregan los objetos Commands, bueno el video siguiente muestra lo anterior para que quede bien claro lo que se menciona en este post.

Con este ejemplo se pueden observar algunas de las capacidades de NetBeans, podemos crear interfaces de usuario de una forma rapidísima y sin que nosotros agreguemos una sola línea de código, ¡¡¡NetBeans lo hace por nosotros!!!.

Pero hasta que punto es correcto lo que se hizo en este ejemplo y en los anteriores: hacer interfaces de usuario sin, siquiera una línea de código como se menciona en el párrafo anterior.

La mayoría de los libros y tutoriales que hay por la red referentes a Java micro Edition no hacen esto, ellos enseñan primero con código, te dicen que código crea un objeto, que código lo agrega al Form, que código agrega un comando etc. muestran grandes cantidades de código para realizar simples interfaces, ellos se concentran en el código primero, yo no pienso así.

Cada quien sabe que conviene y muchos dirán que mi razonamiento es erróneo, que el usuario debe aprender código primero para saber “de donde sale todo”, en mi opinión se debe hacer uso de las herramientas más potentes, que nos faciliten el trabajo, como en este caso, las herramientas visuales de NetBeans, tarde o temprano hay que aprender código eso ni duda cabe, pero si están al alcance de nuestra mano estas herramientas poderosas, si se puede hacer todo más fácil, ¿por que no usarlas para nuestro beneficio?.

Yo solo muestro otra opción de aprender a programar celulares, pero cada quien valora que es bueno, que le conviene y que no, para su aprendizaje, en este fascinante mundo de la programación.




Clic AQUI para leer más...!

martes, 9 de junio de 2009

Ejemplo #3 Como usar un "TextField"



Introducción

Un TextField es un campo de texto, con el que un usuario puede interactuar. Con él podemos ingresar valores, para después hacer algo con esos valores.
La figura siguiente muestra dos TextField en el NetBeans, se observan desde la pantalla del diseñador visual.


En la imagen se observan un TextField para capturar el nombre de usuario (usuario) y otro para capturar la contraseña (password), estos nombres son agregados usando la propiedad Label.
Recuerde todo en Java son clases, los TextField no son la excepción, todos los objetos o instancias que se agregan provienen de la clase TextField.

La siguiente figura muestra como se ven esos TextField directamente en el emulador del teléfono celular:

En la figura se observan los dos TextField, de inicio se selecciona el TextField del usuario, ya ahí se pueden presionar las teclas de números y letras, para pasar al siguiente TextField se presionan las flechas de selección.

Ejemplo #3

Realizar la interfaz de usuario en un celular, para capturar los siguientes datos de un alumno:


· Nombre
· Apellido Paterno
· Apellido Materno
· Escuela


Solución:

El video siguiente muestra la solución al ejemplo #3:





¿Te animas con estos ejercicios?

Ejercicio #1


Realizar un programa que muestre la interfaz de usuario en un celular, para calcular el área de un triangulo.

Ejercicio #2


Realizar un programa que muestre la interfaz de usuario en un celular, para calcular el área de círculo.



Clic AQUI para leer más...!

sábado, 30 de mayo de 2009

Descripción del NetBeans



Ya se ha mencionado anteriormente NetBeans, es un entorno para editar, compilar, depurar y ejecutar programas para celulares (por cierto estos programas son llamados Midlet) pero NetBeans va más allá, contiene poderosas herramientas ayudan muchísimo al programador, necesitamos conocerlo bien para poderlo explotar, así que esta entrada del blog muestra a detalle algunas secciones del NetBeans.


Para iniciar mostramos en la figura siguiente alguna de las partes del NetBeans:


A continuación detallamos cada una de las partes que se observan en la figura.



Lista de Proyectos

No hay mucho que decir de esta sección, simplemente cada vez que se crea un nuevo proyecto se va agregando a la lista de proyectos. Cada proyecto contiene la lista de archivos o recursos necesarios para el funcionamiento de cada programa, NetBeans los crea automáticamente.



Navegador de Componentes

Aquí se puede navegar entre componentes para su fácil localización, aún sin saberlo, el ejemplo “Hola Mundo” contiene varios elementos o componentes, los cuales son mostrados en la figura siguiente.

Desde el navegador se puede seleccionar los componentes, esto es realmente útil, para aplicaciones que tienen muchísimos elementos. No se desesperen, más adelante habrá otra entrada para analizar cada uno de los elementos mencionados en esta sección.


Ventana del Diseñador Visual

El diseñador visual me permite crear interfaces de usuario de una forma rapidísima, consta de varias vistas, como se puede observar en la figura siguiente:


Vista: Screen

Esta vista es la que ya conocemos, la figura siguiente muestra esta vista:

Es equivalente a la pantalla del celular, lo que pase ahí se refleja en la pantalla del teléfono, ya la vimos trabajando en el ejemplo “Hola Mundo” y en la imagen observan dos componentes:
  • Form. Forma o formulario, sirve para agregar componentes dentro de el. En el ejemplo se observa dentro del Form, un stringItem
  • StringItem. Elemento para mostrar una palabra en la pantalla del teléfono celular.

Vista: Flow


Esta vista es la de flujo. Veamos como se ve la vista “flow” en la figura siguiente:

Esta vista es una representación gráfica de alto nivel del flujo de la aplicación, hay dos elementos:
  • Movile Device: Representa el teléfono celular.
  • Form: Ya lo mencionamos arriba, sirve para agregar elementos, esta forma es la misma que la de la vista Screen, lo que yo coloqué en la forma es lo mismo que va aparecer en la pantalla del celular.

La vista de flujo nos sirve para agregar por ejemplo más formas, esto para programas con muchas interfaces de usuario. Ya habrá tiempo de mostrar esta vista en acción un poquito más adelante.

Vista: Analyzer

La figura siguiente muestra esta vista:

Analiza el programa para ver si tenemos recursos que no estamos usando en nuestro programa, para eliminarlos y no gasten memoria, recuérdese que tenemos la memoria limitada en un celular y no conviene tener recursos sin usar, desde esta vista esos recursos se pueden eliminar, para ejemplo sencillos esta vista está completamente vacía.


Vista: Source

Esta vista es la del código fuente, escrito automáticamente por el NetBeans obviamente en el lenguaje Java. La figura siguiente muestra la vista Source



Como ya se vio para el ejemplo “Hola Mundo” no agregamos una sola línea de código, pero existe, NetBeans agrego el código automáticamente.
Más adelante vernos como agregar o modificar líneas de código, a medida que se hagan los ejemplos más complejos.

La paleta de Componentes

Contiene elementos que simplemente se van agregando, se arrastran y sueltan en la pantalla del celular (Screen), por ejemplo en la figura siguiente se observa la ubicación del elemento String ítem (en rojo), si deseamos agregar por ejemplo otro mensaje al celular, se elige el String Item y se arrastra y suelta dentro del Form



Ventana de Propiedades

Esta ventana muestra las propiedades de los elementos que podemos cambiar en tiempo de compilación, la figura siguiente muestra la ventana de propiedades cuando se elige el elemento String Item


Se observan muchas propiedades pero en la figura se remarcan solo las dos propiedades que fueron modificadas:
  • Label: Titulo del String: Hola
  • Text: Contiene el texto que deseamos que aparezca: Hola Mundo :)
Bueno aquí termina esta entrada, aprendimos detalles más técnicos del NetBeans, ojala que haya servido. Prometo que la siguiente entrada realizaremos otro ejemplo completo, porque solo practicando se aprende a programar, solo hay que tener poquita paciencia.





Clic AQUI para leer más...!

miércoles, 27 de mayo de 2009

¿Cómo enviar el programa “Hola Mundo” a un Sony Ericsson W595a?



Por fin tuve tiempo de escribir una nueva entrada. Bueno la entrada anterior aprendimos a usar el NetBeans para crear un programa que envía el clásico mensaje “Hola Mundo”, el mensaje solamente se observo en el emulador del Sony Ericsson, pero quizá se pregunten ¿cómo se hace para verlo en el teléfono celular?. La respuesta es mucho más fácil de lo que se imaginan.


Paso #1 Se identifica la ruta del proyecto

Primero que nada, se debe identificar la ruta donde se guardo el proyecto, si no se recuerda, se puede ver, simplemente dando clic derecho al proyecto dentro del NetBeans, como se observa en la figura:


Al hacer lo anterior, aparece la configuración del proyecto donde se puede ver la ruta cuando se da click sobre la opción de General, esto se puede ver en la figura:


Paso #2 Identificar el archivo JAR

NetBeans genera automáticamente un archivo con extensión JAR, (Java Archive, Archivo de Java) cuando no existe ningún tipo de error en el proyecto. Este archivo contiene todos los recursos necesarios para que se ejecute en nuestro caso en un teléfono celular. El celular cuando soporta Java, puede recibir estos archivos y ejecutarlos.

Este archivo NetBeans lo genera en la carpeta llamada Dist ,y tiene el mismo nombre que el proyecto, la figura que sigue muestra el Explorador de Windows con la ubicación del archivo JAR en mi computadora, que es obviamente la misma que se mostro en la imagen anterior la del NetBeans.


Paso #3 Enviar el archivo JAR al teléfono celular

Finalmente se envía el archivo JAR al celular. Yo lo hago usando la comunicación Bluetooth, mi laptop soporta Bluetooth y el celular (por cierto uso un Sony Ericsson W595a ) también soporta Bluetooth, así que doy clic derecho en el archivo y le digo que lo envié por Bluetooth, la figura siguiente muestra como lo hago desde mi laptop.

Al hacer lo anterior el teléfono detecta el archivo e indica si se desea recibir el archivo JAR desde la LAP, le indicamos al celular que si y el archivo se transfiere, el celular detecta que es un archivo JAR e indica donde lo deseamos guardar, si en la carpeta de Juegos o de Aplicaciones, elegimos la de aplicaciones y se guarda ahí, después el mismo celular indica si se desea iniciar la ejecución del archivo, y si decimos que si, aparece en la pantalla el “Hola Mundo :) “, tal y como se mostro en el emulador.


Observaciones

  • Otra posibilidad de enviar el archivo JAR es usando el cable USB, el proceso es prácticamente el mismo.
  • Este ejemplo lo ejecute para un teléfono Sony Ericsson, supongo que el proceso es el mismo (no lo he verificado) para un celular de, por ejemplo, Nokia que soporte Java.




Clic AQUI para leer más...!