 
     
.jsp
y un archivo .java
para la página. Tu aprenderas más
acerca de archivos .jsp y .java en
la próxima sección.
Para más información
Creando Paginas Web
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Figura 3:
Click derecho al nodo Web Pages
|
Figura 4:
Diseñador Visual
|
Click al botón en la barra de
edición para ver el código
fuente para el page bean, como se muestra en la siguiente figura.
Cuando el área de edición muestra el
código Java, la ventana
Navigator aparece. Esta ventana lista todos lo campos miembro
y los métodos. Nota que el código
fuente de la página tiene
métodos para acceder al Application Bean, Session Bean y
Request Bean.
Mira la sección Almacenando
y Pasando Datos en este tutorial para una
explicación sobre
estos tres tipos de beans.
Figura 5:Codigo
Java para el Page Bean
|
Figura 6:
Busqueda rapida en la ventana Navigator
|
Figura 7:
Vista JSP
|
Figura 8:
Ventana Outline
|
Para más información
Tu diseñas una página web arrastrando componentes desde la ventana Palette y soltandolos sobre la página web en el Visual Disigner. La siguiente figura muestra Page2 con los componentes Boton, Campo de Texto, Mensaje, Lista Desplegable y Grupo de Radio Botones. Todos estos componentes están disponibles desde la sección Básico (Basic) de la paleta. Los componentes han sido personalizados para cambiar las propiedades del componente. Tu aprenderas acerca de las propiedades después en esta sección.
Figura 9:
Componentes en el Visual Designer
|
Nota: Los componentes que están disponibles desde la Paleta son componentes JSF, los cuales han sido realzados de acuerdo al API de Tiempo de Diseño así que sus propiedades están disponibles para el Diseñador Visual y la ventana de propiedades. Tu puedes usar otros componentes en las aplicaciones web que tu construyas usando el IDE, pero tu no podras usar las características interactivas en tiempo de diseño en estos componentes a menos que ellos hayan sido personalizados de acuerdo a los requerimientos del API de Tiempo de Diseño. Si la versión de Java EE es configurada a Java EE 5 (por defecto), la Paleta ofrece componentes JSF 1.2. Si, cuando tu creaste el proyecto, tu configuras la versión de Java EE a 1.3 o 1.4, la Paleta ofrecerá componentes JSF 1.1.
La mayoría de componentes que tu usas están en las secciones Básico (Basic), presentacion (Layout) y combinación (Composite) de la ventana Paleta. La siguiente tabla muestra algunos de los más comunes componentes usados.
Tabla 1: Componentes de Entrada
| Componente | Descripción |
Sección en la Paleta |
|---|---|---|
| Campo de Texto (Text Field) |
Un campo de entrada para una línea sencilla
de texto. |
Básico (Basic) |
| Area de Texto (Text Area) |
Un campo de entrada para multiples líneas de
texto. |
Básico (Basic) |
| Campo de Contraseña. (Password Field) |
Un campo de entrada que remplaza el caracter
de entrada por otro para ocultar la contraseña. |
Básico (Basic) |
| Calendario (Calendar) |
Un campo de entrada con un calendario emergente que
permite al usuario seleccionar una fecha. |
Básico (Basic) |
| Lista Desplegable (Drop Down List) |
Un menu desplegable, también se refiere a un
combo box. |
Básico (Basic) |
| Lista (Listbox) |
Una lista desde la cual el usuario puede seleccionar
uno o multiples items, dependiendo como el componente este configurado. |
Básico (Basic) |
| Caja de Confirmación (Check box) |
Una sencillo cuadro que el usuario puede
seleccionar o limpiar. |
Básico (Basic) |
| Radio Botón (Radio Button) |
Un sencillo radio botón que el usuario puede
seleccionar. |
Básico (Basic) |
| Lista Adicionar-Remover (Add-Remove List) |
Dos listas (una para opciones disponibles y otra para
opciones seleccionadas) con botones para mover las opciones entre las
listas y para ordenar las opciones escogidas. |
Compuesto (Composite) |
| Cargar Archivo (File Upload) |
Un componente con un campo de entrada de texto y un
botón Buscar (Browse) que despliega un seleccionador de
archivos
para especificar un archivo a cargar. La
aplicación carga
el archivo especificado cuando el usuario envía la
página. |
Básico (Basic) |
Tabla 2: Componentes de Despliege
| Componente | Descripción |
Sección de la Paleta |
|---|---|---|
| Texto Estático (Static Text) |
Un campo para desplegar texto. |
Básico (Basic) |
| Etiqueta (Label) |
Campo de texto que puede ser asociado con una entrada
de
texto para la cual tu puedes especificar un débil, medio o
fuerte estilo de fuente. |
Básico (Basic) |
| Imagen (Image) |
Imagen en línea. |
Básico (Basic) |
| Mensaje (Message) |
Campo de texto que es enlazado a un componente
específico para desplegar errores de validación y
otros
mensajes acerca de ese componente. |
Básico (Basic) |
| Grupo de Mensajes (Message Group) |
Campo de texto para desplegar mensajes de error en
tiempo
de ejecución, mensajes de error generados por el programa,
y,
opcionalmente, errores de validación y otros mensajes acerca
de
componentes que están en la página. |
Básico (Basic) |
| Alerta (Alert) |
Despliega un icono e información sobre una
advertencia, un error o la ejecución exitosa de algun evento. |
Compuesto (Composite) |
| Alerta de Página (Page Alert) |
Similar al un componente de Alerta, pero este intenta
desplegar el icono y la información en una página
separada. |
Presentación (Layout) |
Tabla 3: Componentes para Agrupar
| Componente | Descripción | Sección de la Paleta |
|---|---|---|
| Grupo de Cajas de Verificación (Checkbox Group) |
Despliega dos o más cajas de
verificación en una rejilla |
Básico (Basic) |
| Grupo de Radio Botones (Radio Button Group) |
Despliega dos o más radio botones en una
rejilla y
se asegura que sólo un botón pueda se
seleccionado a la
vez. |
Básico (Basic) |
| Tablas, Grupo de Filas de una Tabla, Columna de una
Tabla (Table, Table Row Group, and Table Column) |
Despliega datos desde un tipo de datos compuesto como
una tabla de base de datos o un arreglo. |
Básico (Basic) |
| Arbol y Nodos de un Arbol (Tree and Tree Node) |
Renderiza una lista expandible en una estructura de
árbol. |
Básico (Basic) |
| Conjunto de Pestañas y Pestañas (Tab Set and Tab) |
Despliega diferentes capas en una misma página. También puede ser usada como una herramienta de navegación. | Presentación (Layout) |
| Panel en Rejilla (Grid Panel) |
Organiza los componentes dentro de una capa de filas y
columnas. |
Presentación (Layout) |
| Panel Agrupado (Group Panel) |
Agrupa un conjunto de componentes en un modo de
disposición de flujo. |
Presentación (Layout) |
| Panel en Capas (Layout Panel) |
Se usa para agrupar un conjunto de componentes en un modo de disposición de flujo o modo de disposición en rejilla. | Presentación (Layout) |
| Propiedades de Hoja, Sección de Propiedades
de Hoja y Propiedades (Property Sheet, Property Sheet Section, and Property) |
Presenta un columna sencilla de componentes etiquetados rápidamente, y divide los componentes dentro de secciones. | Presentación (Layout) |
| Etiquetas (Breadcrumbs) |
Presenta una serie de componentes enlazados separados por corchetes en ángulo recto (>). | Compuesto (Composite) |
| Caja de Fragmentos de Página (Page Fragment Box) |
Componenetes agrupados que tu quieres desplegar consistentemente en dos o más páginas. | Presentación (Layout) |
Tabla 4: Componentes de Acción.
| Componente | Descripción | Sección de la Paleta |
|---|---|---|
| Botón (Button) |
Botón que envía en formulario asociado. | Básico (Basic) |
| Hiperenlace (Hyperlink) |
Campo de texto que envía una URL o un formulario. | Básico (Basic) |
| Imagen de Hiperenlace (Image Hyperlink) |
Imagen que envía una URL o un formulario. | Básico (Basic) |
| Nodo de un árbol (Tree Node) |
Subcomponente de un Arbol o Nodo de un Arbol. Una hoja de un árbol puede opcionalmente envíar una URL o un formulario. | Básico (Basic) |
| Pestaña (Tab) |
Subcomponente de un Conjunto de Pestañas o una Pestaña. Una Pestaña puede opcionalmente envíar una URL o un formulario. | Compuesto (Composite) |
Tu usas la hoja de propiedades de los componentes en la ventana Propiedades (Properties) para cambiar la apariencia y comportamiento de los componentes, para conectar los componentes a los datos, y para asociar los componentes con manejadores de eventos.
La siguiente figura muestra las propiedades para un componente Lista.
Figura 10:
Propiedades de una Lista en la ventana Propiedades.
|
Intenta esto
Abre la página que tu creaste (Page2) que siguiendo las sugerencias del Intenta esto de la sección Creando Páginas Web, o creala si es necesario.Arrastra varios componentes desde la sección Básico (Basic) y Presentación (Layout) de la Paleta y juega a través de sus propiedades. Por ejemplo, intenta los siguientes pasos.
1.2 con Java
EE 5*
No requerida
Click
Me! y presiona Enter. En la ventana
Propiedades, nota como la propiedad text tiene
el valor Click
Me!. En la ventana Propiedades, selecciona la
cajilla de verificación de la propiedad primary y
nota como la apariencia del botón cambio. Name: y
presiona Enter. Ctrl-Shift-Click dentro del componente
Etiqueta y
arrastra hacia el componente Text Field. Nota como la
propiedad for para la Etiqueta es
ahora configurada al id del
componente Text Field. Configura el labelLevel
a Strong (1). for del
componente Message esta ahora configurada al id del
componente Text Field. Blue.
Presiona tab dos veces y cambia el Item 2 a White.
Presiona tab dos veces más y cambia el Item 3 a Green.
Click en OK y observa como tus cambios afectan el componente
en
el diseñador visual. Para más información
El IDE provee un Visor de Ayuda (Help Viewer), el cual contiene temas de ayuda acerca del IDE. También, cuando tu presionas F1 en una ventana, cuadro de dialogo, o componente de la Paleta, el visor de ayuda aparece y despliega información acerca de ese item. Para acceder a los temas de ayuda del Visual Web Pack, incluyendo ayuda acerca de los componentes, escoge Help > Help Contents desde el menú principal y localiza el nodo Visual Web Pack.
El IDE también provee una ventana de Ayuda Dinámica, la cual muestra enlaces a temas de ayuda que están relacionados a la actual ventana u objeto. Cuando tu haces doble-click a un enlace en la ventana de Ayuda Dinámica, el IDE muestra la información en el visor apropiado, tal como el navegador, el visor de ayuda o el visor Javadoc.
Cuando tu estas listo para probar un proyecto, presiona F6 o escoge Run > Run Main Project desde el meńu principal. El IDE ejecuta las siguientes acciones:
Compila cualquier archivo que necesite ser compilado.
Si hay complicaciones. el IDE muestra los mensajes de error relacionados en la ventana Output (Salida) mostrada abajo y no continua con el proceso de construcción.
Despliega la aplicación al servidor de aplicaciones.
Si hay alguna complicación, el IDE muestra los mensajes de error relacionados en la ventana Output y no continua con el proceso de construcción.Abre el navegador por defecto y envia la URL para desplegar la aplicación al navegador el cual muestra la página de inicio.
Figura 11:
Ventana Output
|
Si tu has hecho cambios masivos, borrado algunos items, o tu
estas
viendo algún comportamiento inesperado, tu puedes
escoger Build > Clean
and
Build Main Project (Construir > Limpiar y Construir el proyecto
principal) desde el menú principal. El IDE borra
los
directorios build y dist
del proyecto, undeploys la aplicación web, y luego construye
y deploys la aplicación.
Next
Page, y presione Enter.url, seleccione una página
diferente en el proyecto, y click OK. Observe como el IDE configura la
propiedad url a /faces/page-name.jsp.En la ventana Runtime, expanda Servers, expanda el nodo del servidor actual, expanda Applications, expanda Web Applications, y observe que existe un nodo para tu proyecto, como se muestra en la siguiente figura.
Figura 12:
Deployed aplicaciones web
|
Para más información
url de ese componente a /faces/nombre-de-la-página.jsp.
Cuando tu usas la propiedad url para
navegar, los datos de formulario no son enviados. La
aplicación web simplemente navega al destino. Para acceder al editor Page Navegation, haz click derecho en un área en blanco de la página en el Diseñador Visual y escoge la opción Page Navigation. El editor Page Navigation muestra iconos de páginas para todas las páginas en el proyecto. Cuando tu haces click en un icono de página en el editor Page Navigation, la página se expande y muestra todas sus componentes de acción. (Un componente de acción es un componente que tiene una propiedad action, tal como los Botones, los Hiperenlaces o las Pestañas.) Luego, cada componente es un conector. Tu arrastrar desde el conector a un icono de una página para crear el enlace entre la petición de una acción y la página para ser renderizada como respuesta. Cuando tu liberas el mouse, el IDE adiciona una representación visual de esa conexión, como lo muestra la conexión etiquetada comonextPage en la siguiente figura.
Figura 13:
Editor Page Navigation
|
Nota: Cuando una página es enviada, la aplicación web ejecuta conversiones y validaciones antes de ejecutar los métodos de acción. Si una conversión o validación falla, los métodos de acción no son llamados. Tu deberlas colocar componentes Message Group en la página durante el desarrollo, para que tu puedas capturar cualquier conversión no esperada o error de validación que pueda prevenir a un método de acción para ser invocado.
Intenta estoNext Page,
y presiona Enter.Go, y presiona
Enter.Haz doble-click al botón para acceder al método de acción del botón.
Observa que el método de acción retorna un null. Cuando un método de acción retorna nulo, la aplicación redespliega la página.nextPage y presiona Enter.go. En LinkPage2, haz doble-click al botón para acceder al método de acción de dicho botón.
Observa que el método de acción ahora retorna la cadena "go". El mapeo que tu creaste en el editor Page Navigation le dice al servidor mostrar LinkPage1.jsp siempre que LinkPage2.jsp retorne "go."Para más Información
Completación de código. La completación de código te permite digitar unos pocos caracteres y entonces escoger desde una lista de posibles clases, métodos, variables y demás para automáticamente completar la expresión. Para desplegar la caja de completación de código, presiona Ctrl+Espacio. La caja de completación de código también aparece cuando tu te detines después de digitar un punto que sigue el nombre de un paquete, una variable o el llamado de un método, como se muestra en la siguiente figura.
Figura 14:
Caja de completación de código
|
Detección de errores. Una cajilla roja de error aparece en el margen izquierdo de todas las sentencias que no compilarán. Coloca el mouse sobre la caja para ver la descripción del error, como se muestra en la siguiente figura. El IDE también muestra una franja de errores en el margen derecho. Esta franja representa el archivo completo, no solo las líneas de código que son visibles. Lineas rojas en la franja de errores identifican errores en el código. Doble-click en una línea roja salta a la sentencia erronea. Cuando tu compilas archivos , todos los errores de compilación aparecen en la ventana Output (Salida). Click en un mensaje de error para desplegar el código erroneo en el editor Java.
Figura 15:
Detección de Errores
|
Atajos del teclado en el editor Java. Tu puedes invocar muchas tareas comunes de edición con una simple combinación de teclas como lo demuestran los siguientes ejemplos. Para aprender más acerca de atajos del teclado escoge Help > Help Contents > Contents > IDE Basics > Keyboard Shortcuts > Editor Shortcuts desde el menú principal.
| Acción | Atajo |
|---|---|
| Reformatear el código | Ctrl-Shift-F |
| Borrar la línea actual | Ctrl-E |
| Mover el punto de inserción a la llave
coincidente |
Ctrl-[ |
| Seleccionar el bloque delimitado por las llaves a la izquierda del cursor | Ctrl-Shift-[ |
| Encontrar palabras: hacia adelante o hacia atras | Ctrl-L, Ctrl-K |
Abreviaciones. Abreviaciones son cortor
grupos de
caracteres que se expanden a palabras completas o frases cuando tu
presionas la barra espaciadora, como muestran los siguientes ejemplos.
Para ver la lista completa de abreviaciones, escoge Tools >
Options
> Advanced Options
>
Editing > Editor Settings > Java Editor. Haz Click en el
botón con los puntos suspensivos (...)
para la propiedad de Abreviaciones.
| Código | Abreviación |
|---|---|
for (Iterator it =
collection.iterator(); it.hasNext();) |
forc |
for (int i = 0; i < arr.length;
i++) {} |
fori |
try {|} catch (Exception ex) |
trycatch |
Intenta esto
Nota: En el siguiente ejercicio tu tienes
que digitar código en el método destroy.
El código que tu digites es solo para ilustrar las
características de edición. Tu
normalmente no
colocarias codigo como este en este método.
Después
de completar los pasos, tu deberlas remover este código.
destroy()
para posicionar el código fuente en ese método.
en el método destroy() ,
digita getSessionBean1(). y detente.
La caja de completación de texto aparece. Digita d
para ver la lista desplegable para destroy().
Presiona Enter para usar la selección.
Digita ; y presiona Enter.
Ahora digita this.getH,
y detente para que la caja de completación de
código aparezca. Si esta no aparece,
presiona Ctrl-Space para que aparezca. Mueve el cursor hacia abajo
hasta getHyperlink1()
y presiona Enter. Digia el punto, detente para que aparezca la
caja de completación de código, y digita set.
Después de que aparece la lista con todos los
métodos que comienzan con set,
digita te para restringir la lista
a setText(Object text) y presiona
Enter. El IDE inserta setText()
después del punto y posiciona el cursor dentro de los
parentesis. Digita "hello",
presiona End, y digita un ;.serr
y presiona la barra espaciadora para expandir la abreviación
System.err.println("").
Borra el punto y coma del final de la línea. Presiona F9
para
compilar el archivo. La ventana Output despliega varios
enlaces a
errores. Click al primer enlace que aparece en la ventana.
El IDE
desplega la sentencia que causó el error. Vuelve a
colocar
el punto y coma que habias borrado.getSes
y presiona Ctrl-K. El IDE remplaza la cadena con la primera
palabra coincidente desde el código fuente desde la
línea actual. destroy
y presiona Ctrl-E para remover esa línea. Usa Ctrl-E para
borrar el resto de lineas en el cuerpo del método.Para más información
El IDE provee objetos validadores y conversores para facilitar el formateo y verificación de entradas. Estos objetos pueden ser encontrados en sus respectivas secciones en la Paleta.
Tu conectas una validación a un componente de entrada, tales como los componenetes Text Field (Campos de texto), arrastrando el validador dentro del componente de entrada. Por ejemplo, después de adicionar un componente Text Field a un página del diseñador visual, tu puedes arrastrarun Length Validator (Validador de longitud) desde la sección Validators en la paleta y soltarlo sobre el Text Field.
Alternativamente, tu puedes soltar el validador sobre la página y configurar la propiedadvalidator
del componente de entrada al objeto validador. Por ejemplo,
tu
puedes soltar un Long Range Validator sobre una parte en blanco de la
página, la cual adiciona longRangeValidator1 en la ventana
Outline. Tu puedes entonces seleccionar un componente de
entrada
en el diseñador visual, tal como un componente Text Field, y
escoger longRangeValidator1 desde la lista desplegable de su propiedad
validatorExpression. Tu puedes usar el mismo
validador para más de un componenteTu usas la ventana de propiedades del validador para configurar las reglas de validación, tales como el valor mínimo y máximo o la longitud máxima. De la misma manera, tu usas la ventana de propiedades de los conversores para configurar las reglas de conversión, tales como el patrón que el valor debería coincidir o el método a llamar para hacer la validación. El conversor Number tiene un asistente especial que aparece cuando tu sueltas un conversor Number dentro de una página o sobre un componente visual.
La sección Basic de la paleta prevee los componentes Message y Message Group para desplegar automáticamente errores de conversión, de validación y mensajes requeridos por los campos. El componente Message Group despliega mensajes de errores globales, errores en tiempo de ejecución y, opcionalmente, todos los mensajes de error de componentes. Un componente Message muestra solo los mensajes para el componente al cual fueron enlazados. Tu enlazas un componente Message a otro componente configurando la propiedadfor del componente
Message o
presionando Ctrl-Shift en el componente Message y
arrastrando
el mouse al componente el cual tu quieres enlazar el componente Message.error, warn,
fatal, e info en
cualquier Página
Bean. Para aprender más acerca de estos
métodos,
escoge Tools > Javadoc Index Search, digita en el campo
de
texto de la lista desplegable y haz click en Find.Go. required.Price:
y presiona Enter.for.
Nota como la etiqueta en el diseñador visual
muestra un
asterisco para indicar que la entrada es requerida por su componente
Text Field asociado. En la paleta, expanda la sección
Validators.
Arrastre un Double
Range Validator y suéltelo sobre el componente Text
Field.
En la ventana Outline, seleccione el recién creado
nodo
doubleRangeValidator1. En la ventana propiedades para el validador,
configura el máximo a 10.0
y el mínimo a 1.0, como
muestra la siguiente figura.
Figura 16:
Propiedades del Double Range Validator
|
En la paleta, expande la sección Converters. Arrastra un conversor Number Converter y suéltalo sobre el componente Text Field. Una caja de dialogo Number Format aparece, como muestra la siguiente figura. Selecciona currency (moneda) desde la lista desplegabe Type (Tipo), selecciona English (United States) desde la lista desplegable para Locale (Localización), y haz click en OK.
Figura 17:
Formato Número
|
Adiciona un componete Message a la página. Presiona Ctrl-Shift sobre el componente y arrastra hacia el componente Text Field.
Observa que el IDE configura la propiedadfor del
componente Message al id del
componente Text FieldConfigura esta página como la página
de inicio y
corre la aplicación. Intenta hacer click en el
botón sin introducir algún precio, con un precio
de 1.5, con un valor no numérico,
y con un precio mayor a $10.00. Finalmente, digita $1.50
en el campo de texto y haz click en el botón.
showGlobalOnly del
componente Message Group.Tu usas el Bean de aplicación, el Bean de sesión, y el Bean de petición para almacenar informacion del usuario para otras páginas.
Si tu solo necesitas la información del usuario para la siguiente página, usa el Bean de petición (Request Bean).
Cualquier valor que tu almacenes en un Request Bean desaparece tan pronto como la petición finaliza. Una petición es una transmisión sencilla de una petición HTTP desde el cliente al servidor más la correspondiente respuesta, la cual puede ser otra página. En la mayoría de los casos, la petición comienza con un click a un botón o un enlace y termina con la respuesde de una página HTML para ser desplegada.
Nota: El Request Bean es instanciado solo si la página que inicia la petición almacena valores en las propiedades del Request Bean, tales como cuando un componente de entrada es enlazado a una propiedad del Request Bean como se describe abajo.
Advertencia: Tu no puesdes usar el Request Bean si tu has incluido el elemento<redirect>
dentro del elemento <navigation-case>de
una regla de navegación. (Tu ves estas reglas cuando tu
haces
click en el botón Source en el editor Page
Navigation.) Cuando la página es enviada, el elemento <redirect>
redirige la página y finaliza la petición antes
de que
una página subsecuente pueda usar cualquera de los valores
almacenados en el Request Bean.Para adicionar una propiedad al Session Bean, haz click derecho al nodo SessionBean1 en la ventana Outline y escoge Add > Property. El IDE adiciona una declaración, un método getter y un método setter para la propiedad. La propiedad aparece como un subnodo debajo de SessionBean1 en la ventana Outline, pero usualmente no de inmediato. Usa pasos similares para adicionar una propiedad al Request Bean o al Application Bean.
Nota que tu puedes también adicionar propiedades a un page bean (el bean de respaldo que el IDE crea para cada página). Para adicionar una propiedad a un page bean, haz click derecho en una parte en blanco de la página en el diseñador visual y escoge Add > Property desde el menú emergente. Sin embargo, los valores de las propiedades de un page bean se pierden tan pronto como el page bean es inicializado. Por ejemplo, cuando el usuario hace click a un botón que re-renderiza la página (esto es, el método de acción retorna nulo), una nueva instancia de ese page bean es creado, y los valores de las propiedades del page bean son re-inicializados. Si tu quieres pasar un valor de vuelta al servidor para su procesamiento (postback), tu puedes usar componentes Hidden Field (de campo oculto).
Para asociar un componente con su propiedad de bean, haz click derecho al componente y escoge Bind to Data (Enlazar a datos). En la caja de dialogo Bind to Data, seleccina la pestaña Bind to Object (Enlazar al objeto) y escoge la propiedad del bean, como muestra la siguiente figura.
Figura 18:
Caja de dialogo Bind to Data
|
Nota: Para la mayoría de componentes, el menú emergente provee dos acciones de enlace - Property Bindings (Propiedades de enlace) y Bind to Data (Enlazar a datos). La caja de dialogo para propiedades de enlace te permite enlazar cualquiera de las propiedades del componente a una propiedad de bean manejado o un campo proveedor de datos. La caja de dialogo para enlazar a datos es un atajo para enlazar la propiedad value-holding de un componente a una propiedad de bean manejado o un campo proveedor de datos. Usa la pestaña Bind to Data Provider (Enlazar a proveedor de datos) para enlazar a cualquier proveedor de datos que tu haz adicionado a la página o a un bean manejado. Usa la pestaña Bind to an Object (Enlazar a un objeto) para enlazar a una propiedad de página o propiedad de un bean manejado.
Click derecho al nodo RequestBean1 en la
ventana Outline y escoge Add > Property. Nombra la
propiedad parm, hazla un String,
y click en OK.
getParm y setParm
que el IDE adicionó para la propiedad.La ventana Runtime incluye el nodo Databases, el cual muestra todas las bases de datos que están registradas con el IDE, como muestra la siguiente figura. El Visual Web Pack provee un ejemplo de una base de datos llamada TRAVEL la cual usarás en el resto de este tutorial.
Figura 19:
Fuentes de datos
|
Antes de que tu puedas acceder a una base de datos desde un proyecto, tu deberías primero conectar el IDE a la base de datos. Tu deberlas hacer esto cada vez que tu arrancas el IDE y abres un proyecto que esta conectado a la base de datos.
Si la marca de la base de datos esta rota y tu no puedes expandir su nodo, el IDE no esta conectado a la base de datos. Para conectar a la base de datos TRAVEL, haz click la nodo databases en la ventana Runtime y escoge Connect desde el menú emergente. Si el dialogo Connect aparece, introduce travel
como Password
y selecciona Remember Password During This Session (Recordar
password durante esta sesión). Si tu no ves un
nodo jdbc
para la base de datos TRAVEL, revisa la sección Visual
Web Pack Sample Database
en las instrucciones de instalación del NetBeans
Visual Web
Pack para obtener información de como hacer disponible esta
base
de datos al IDE.Nota: Si tu aplicacion web usa un servidor
diferente al Sun Java Application Server, tu deberlas colocar una copia
del archivo derbyclient.jar en
el directorios de librerías de tu servidor. Por
ejemplo, si tu
quieres usar la base de datos TRAVEL con Tomcat, copia el
archivo derbyclient.jar dentro de directorio-de-instalación-de-netbeans\enterprise3\apache-tomcat-5.5.17\common\lib.
Tu puedes encontrar una copia del archivo derbyclient.jar
en
javadb\lib\derbyclient.jar bajo el directorio de
instalación del Sun Java Application Server.
Cuando tu abres un proyecto existente, el diseñador visual podría mostrar una pantalla de error. Típicamente, esto ocurre porque el diseñador visual necesita obtener información desde la base de datos, pero el IDE no esta conectado a ella. Intenta conectarte al servidor de la base de datos y haz click en el botón Continuar en la pantalla de error para resolver el problema.
Tu puedes conectar una página a una tabla de la base de datos arrastrando la tabla desde la sección de fuentes de datos y soltarla sobre un componente o sobre la página. Cuando tu haces esto, el IDE adiciona un proveedor de datos a la página y un rowset (conjunto de filas) a la clase SessionBean1, como muestra la siguiente figura.
Figura 20:
Proveedor de datos y conjunto de filas
|
El objeto rowset hace la conexión a la base de datos, ejecuta las consultas y gestiona el conjunto de resultados. El objeto proveedor de datos provee una interface común para acceder a muchos tipos de datos compuestos, desde las tablas de la base de datos, a objetos ArrayList o a Enterprise JavaBeans. Típicamente, la única vez que tu trabajas con el objeto rowset es cuando tu necesitas configurar los parámetros de consulta. En la mayoría de los casos, tu usas el objeto proveedor de datos para acceder y manipular los datos.
Una vez haz adicionado un proveedor de datos a un proyecto, tu puedes enlazar un componente al proveedor de datos haciendo click derecho al componente y escogiendo Bind to Data. En el dialogo Bind to data, haz click en la pestaña Bind to Data Provider para traerla al frente. La lista Choose a Data Provider (Escoger un proveedor de datos) muestra todos los proveedores de datos del proyecto de los cuales tu puedes seleccionar uno para enlazar al componente. Después de seleccionar el proveedor de datos, escoge la columna apropiada para ser enlazada al componente. Para algunos componentes, como el componente Drop Down List, tu debes escoger un Value Field (Campo de valor) y un Display Field (Campo de despliegue).Tu usas el Query Editor (Editor de consultas) de un objeto rowset para definir la sentencia SQL a ser usada para recuperar los datos, como muestra la siguiente figura.
Figura 21:
Editor de consultas
|
Arrastra el nodo TRIPTYPE y suéltelo sobre la página.
Si la marca de la base de datos TRAVEL esta rota y tu no puedes expandir el nodo de la base de datos, el IDE no esta conectado a la base de datos. Para conectarte a la base de datos TRAVEL, haz click derecho en el nodo databases en la ventana Runtime y escoge Connect desde el menú emergente. Si el dialogo Connect aparece, introducetravel como
password, selecciona Remember Password During This Session y haz click
en OK.(Opcional) Mira en el método _initen
el
código fuente de Java de la página para ver el
código asociado al proveedor de datos con el rowset.
Este
método aparece enrollado por defecto. Para
desenrollar
este código, haz click en el signo + que aparece
próximo
a la margen izquierda.
_init del
bean de
sesión como el código del rowset implementa la
consulta
SQL. Haz click derecho en el proveedor de datos y
métodos
del rowset y escoge Show Javadoc desde el menú emergente
para
ver la documentación acerca de lo que los métodos
hacen. Para más información
El IDE tiene un depurador integrado para ayudarte a localizar errores en tus programas, como es mostrado en la siguiente figura. Tu puedes usarlo para configurar pausas intencionales (breakpoints) y vistas (watches), avanzar paso a paso a través de tu código y para para correr el programa hasta alcanzar la sentencia de código donde el cursor se encuentra.
Tu configuras una pausa intencional (breakpoint) haciendo click en la margen izquierda del editor Java. Tu configuras una vista (watch) haciendo click derecho a una variable o expresión y escogiendo New Watch. Para correr el depurador, escoge Run > Debug Main Project o Run > Run to Cursor desde el menú principal.
Figura 22:
Ventana Depurador
|
Tip: Aquí están algunas otras características que tu puedes usar para diagnosticar y resolver problemas:
error, warn,
fatal, e info para desplegar mensajes de
diagnóstico en el componente.log
para enviar mensajes de diagnóstico al log del servidor.text
a Hello,
y su propiedad id a helloText.
Adiciona un Botón. Haz doble click al
botón para acceder su método de
acción (button1_action)
y reemplaza el cuerpo del método con el siguiente
código:
| Ejemplo de código 1: Método button1_action |
String oldString = (String) this.helloText.getText(); |
oldString,
escoge New
Watch, y haz click en OK. Haz lo mismo para newString.
Haz click en la margen izquierda para configurar un breakpoint
en la primera sentencia en el cuerpo del método. button1_action,
haz click a la pestaña Watches en la
ventana Debugger para ver el actual valor de newString
y oldString. Para más información
url.Bookmark this page
| Companion Projects: |
|
|
|
|
|
|
|
|
Powered by |
