Las aplicaciones Java ME a menúdo requieren conectarse a la red para trabajar apropiadamente. Desafortunadamente las redes wireles son aun relativamente lentas. Las tareas de segundo plano (background task) normalmente deben de esperar para conectarse a la red o para transferir datos, esto puede detener la aplicación y dejar a los usuarios pensando si la pantalla congelada significa que ellos deberían reiniciar la aplicación, esperar indefinidamente o tratar de nuevo mas tarde (o nunca). Tu como desarrollador ¿que harías para evitar a los usuarios desagradable pero a la vez común, experiencia?

La respuesta es agregar una Pantalla de espera "Wait Screen." Las Wait Screens permitaen a los usuarios ejecutar tareas de segundo plano (background task) como por ejemplo conectarte a la red, y mostrar el progreso de la tarea o mostrar un mensaje sobre la pantalla para informar al usuario que la aplicación esta intentando ser ejecutada.

Tu podrás apreciar en este tutorial, que el Visual Mobile Designer (VMD), una interfaz grafica dentro de NetBeans Mobility Pack, simplifica la creación de las pantallas de espera a través del componente WaitScreen, tu podrás utilizar y diseñar este componente solo arrastrándolo y colocándolo dentro del flujo de tu aplicación .

Como funciona este componente

Existen dos maneras de crear tareas de segundo plano para el componente Wait Screen. Tu podrás escribir una clase que implemente una interfase para una tarea de cancelación CancellableTask o simplemente utiliza el Recurso SimpleCancellableTask de la Paleta de Componentes. Tu asignaras una background al componente Wait Screen usando el método setTask() .

El componente WaitScreen automáticamente cambia a diferente pantalla o objeto cuando la background task es terminada. Si la tarea finaliza exitosamente, la pantalla de espera cambiara al siguiente display a través del método setNextDisplayable() . Si la tarea fracasa, la pantalla de espera cambara a la siguiente pantalla a través del método setFailureDisplayable(). En el caso de que no haya sido asignado una pantalla para este propósito, la pantalla de espera cambiara a la pantalla especificada por el método setNextDisplayable(). Si definitivamente no hay ninguna pantalla especificada el componente WaitScreen cambiara a la pantalla que fue desplegada previamente.

Toma en cuenta que este componente solo esta disponible solo para aplicaciones que soportan el perfil MIDP 2.0.

Requisitos

Antes de comenzar, tu necesitas instalar el siguiente software en tu computadora:

• NetBeans IDE 5.0 o actual (descargar)
• NetBeans Mobility Pack 5.0 o actual(descargar)
• Java Standard Development Kit (JDK) versión 5.0 (descargar)

Si tu no estas familiarizado con NetBeans Mobility Pack, tu deberías empezar por NetBeans Mobility Pack 5.5 Quick Start Guide antes de continuar.

Sigue los siguientes pasos para instalar la aplicación de ejemplo waitscreenexample:

1. Descarga waitscreen.zip.
2. Unzip el archivo;.
3. 1.En el IDE, selecciona el archivo en >Open Project y busca el fólder que contiene el archivo.
4. Abre el proyecto y la ventana Inspector. Esto debería lucir como la siguiente imagen:



5. En la ventana Projects, clic-derecho en el nodo del proyecto y selecciona Run Project (o presiona la tecla F6). Cuando la aplicación es ejecutada el emulador aparece y despliega la aplicación en el dispositivo emulador por default.
6. En el Emulador has clic en el botón "Launch."
   En el Emulador aparace el URL de NetBeans Web site: http://netbeans.org.
7. Has clic en el botón "Ok."
   La pantalla te preguntara si deseas continuar con el tiempo de emisión (airtime).
8. Has clic en el botón "Yes" para continuar.
   El emulador trata de conectarse al Web site, este desplegara una pantalla de espera (Wait Screen).
   
   
   
9. Después de que el emulador se conecte, cierra la aplicación

Ahora que tú has visto el componente WaitScreen en acción, vamos de regreso al principio para crear esta aplicación. Para realizar esta aplicación, tu deberás siguir los siguientes pasos:

1. Creando el proyecto WaitScreenExample
2. Agregando los paquetes y un Visual MIDlet a el proyecto MyWaitScreen
3. Agregando componentes a MyWaitScreenMIDlet
4. Agregando Imagenes
5. Agregando comandos Ok, Back y Exit a los componentes TextBox y WaitScreen
6. Creando el flujo de la Aplicación
7. Creando una tarea de segundo plano(Background Task) para la pantalla de espera
8. Ejecuta el Proyecto

NOTA: Antes que tu cree este proyecto, debes asegurarte de cerrar o borrar el proyecto WaitScreenExample que tu ejecutaste en los pasos anteriores. NetBeans IDE no te permite proyectos con nombres idénticos abiertos al mismo tiempo.

Creando el proyecto WaitScreenExample

1. Selecciona el del menú principal la opcion FILE > New Project (Ctrl-Shift-N). En Categorias selecciona Mobile. En Proyectos, selecciona Mobile Application y clic Next.
2. En el campo Name introduce WaitScreenExample. Cambia el campo Project Location por un directorio dentro de tu sistema. Desde este momento nosotros nos referiremos a este directorio $PROJECTHOME.
3. Deselecciona el checkbox Create Hello MIDlet. Clic Next.
4. Deja el J2ME Wireless Toolkit como la plataforma detino (Target Platform). Clic Next.
5. Clic Finish.
   El fólder del proyecto contiene la fuente de tu código y los metadatos, así como el Ant script. La aplicación es desplegada en el la ventana Flow Design del Visual Mobile Designer.

Agregando los paquetes y un Visual MIDlet a el proyecto MyWaitScreen

1. Selecciona el proyecto WaitScreenExample en la ventana Project, escoge File > New File (Ctrl-N).
   Debajo de Categories, selecciona Java Classes. Debajo de File Types, selecciona Java Package. Clic Next.
2. Introduce waitscreenexample en el campo Package Name. Clic Finish.
3. Selecciona el paquete waitscreenexample en la ventana Project, y escoge File > New File (Ctrl-N) . Debajo de Categories, selecciona MIDP. Debajo de File Types, selecciona Visual MIDlet. Clic Next.
4. Introduce MyWaitScreenMidlet dentro de los campos MIDlet Name y MIDP Class Name. Clic Finish.

Agregando componentes a MyWaitScreenMIDlet

Selecciona el Visual MIDlet en la ventana Inspector abre Visual Mobile Designer (VMD). Haciendo Clic sobre la ventana Flow design en el menú de la ventana del VMD abre Flow Designer, donde tu diseñaras el flujo de tu aplicación.

1. Cambia el Visual MIDlet a la ventana Flow Designer. Arrastra los siguientes componentes desde la paleta de componente (Component Palette) colócalos en el Flow Designer:
   
• TextBox
• WaitScreen
• List
• Alert
  
2. Selecciona el textBox1. En la ventana de propiedades (Properties window) localizada de bajo de la paleta de componentes, cambia el valor del campo Title property a Text Box.
3. Usa el mismo proceso para cambiar los tituloso de los siguientes componentes:
   
   • Cambia waitScreen1 a Wait Screen
   • Cambia List1 a List
   • Cambia Alert1 a Alert
4. Usa la propiedad String para cada uno se los siguientes componentes para cambiar los valores:
   
   • Cambia el string deltextBox1 a http://netbeans.org
   • Cambia el string del alert1 a Connection Failed
5. Cambia el string del WaitScreen1 a Please Wait...

La ventana del Flow Designer debería lucir como el siguiente grafico:

Nota que al menos cada componente tiene un cuadrito naranja a lado del el, el cual nosotros usaremos después para conectar unos con otros los componentes en el orden del flujo de la aplicación. Nota también que la waitScreen1 tiene dos cuadritos sobre su lado derecho.

Agregando Imágenes

En esta sección tu agregaras imágenes que serán usada por la pantalla de espera y la pantalla de Alerta. .

1. Descarga y copia los archivos alert.png y sandglass.png al fólder $PROJECTHOME/src/waitscreenexample .
2. Clic-derecho al fólder Resources en la ventana Inspector y selecciona Add > Image.
3. Selecciona image1 en la ventana Inspector. En la ventana Properties escoge la propiedad Resource Path y has clic en el boton (...). En el dialogo, selecciona alert.png.
4. Selecciona el compoenente alert1.
5. En la ventana Properties de alert1 en cuentra la propiedad Image y escoge image1 de la lista.
   Esta acción mostrara la imagen alert.png en el componente alert1. .
6. Repite los Pasos del 2 al 5, agrega un image2, selecciona en Resource Path la imagen sandglass.png, y de esta menera se mostrara la imagen en el componente waitScreene.

Agregando comandos Ok, Back y Exit a los componentes TextBox y WaitScreen

1. Selecciona el comando Ok Command de la sección de comandos de la Paleta de Componentes. Arrástralo y colócalo dentro del textBox1.
2. Selecciona el comando Back de la sección de comandos de la Paleta de Componentes. Arrástralo y colócalo dentro de list1.
3. Selecciona el comando Exit de la sección de comandos de la Paleta de Componentes. Arrástralo y colócalo dentro de list1.

Creando el Flujo de la Aplicación

Ahora estas listo para crear el flujo de tu aplicación.

1. En la ventana Flow design, clic sobre el Start Point del Mobile Device y arrástralo hacia el componente textBox1. .
2. De la misma manera, conecta los componentes como se muestra en el siguiente grafico
   
   

Creando una tarea de segundo plano (Background Task) para la pantalla de espera

1. Clic-derecho en el nodo Resources de la ventana Inspector y selecciona Add > SimpleCancellableTask.
2. Selecciona el compoenente waitScreen1 en la ventana Flow Design.
3. Clic sobre la propiedad Task en la ventana de propiedades de la waitScreen1 y selecciona simpleCancellableTask1 del menú
   Ahora la simpleCancellableTask1 es la tarea de segundo plano del componente waitScreen1.
4. Clic en el botón Source en la barra de menú de la ventana VMD.
   Esta desplegara el código de la aplicación.
5. Agrega un método a la tarea de segundo plano copiando y pegando el siguiente código dentro del código del MyWaitScreenMIDlet después de
public void destroyapp(boolean unconditional) {
}:

      private void getServerInfo() throws IOException {
      String url = textBox1.getString();
      list1.deleteAll();
      /**
      * Open an HttpConnection
      */
      HttpConnection hc = (HttpConnection) Connector.open(url);

      /**
      * Gets a header field key and header field by index and
      * insert it into list1.
      */
      list1.setTitle(hc.getURL());
      for (int i=0;hc.getHeaderFieldKey(i)!=null; i++){
      list1.insert(0,hc.getHeaderFieldKey(0)+" :"+hc.getHeaderField(0),null);
      }
      /**
      * Closing time ...
      */
      hc.close();
      }

6. En la ventana de Propiedades de la SimpleCancellableTask1 selecciona la propiedad Execute.
7. En la ventana Insert Code introduce: getServerInfo();

Ejecutando el Proyecto

1. Presiona <F6> para ejectar el proyecto principal.

   Alternativamente tu puedes selccionar Run > Run Main Project.

Para aprender mas acerca del componente WaitScreen y del recurso SimpleCancellableTask

NetBeans IDE provee documentación de API en —javadocs—para el componente WaitScreen y el recurso SimplecancellableTask, al igual que los otros componentes que tu puedes usar en el VMD. Para leer los javadocs:

1. Selecciona Help > Javadoc References > NetBeans MIDP Components.
   Esta acción desplegara el archivo en el navegador

Siguientes Pasos:

• Leer los turotiales de otros Componentes:
  • Creating Mobile Splash Screens
  • Creating Table Items
• Revisa el Blog de Lukas Hasik las entradas de WaitScreen y SimpleCancellableTask
  • Cambios en API de SimpleCancellableTask (1 Nov 2005)
  • Simple Ejemplo del Componente WaitScreen (7 Marzo 2006)
• Ver otros ejemplos en acción de WaitScreen en el NetBeans Day Mobility Demo
• Leer la NetBeans Mobility Pack Quick Start Guide para aprender mas características de NetBeans Mobility Pack