Laboratorio PBWD10.pdf

PowerBuilder Web Developer v10.0 - Laboratorio

___________________________________________________________________________________________ Lab- 1 PowerBuilder Web Developer v10.0 2005 TechEra e-Learning

Este producto solo puede ser usado para uso personal y no para otros fines

Laboratorio

PowerBuilder

Web Developer V10.0 PBWD10

[email protected]

www.techeras.com




Laboratorio

PowerBuilder Web

Developer v9.0

2004 TechEra e-Learning




Configuraciones

Descripción

Las siguientes configuraciones son requeridas antes de iniciar los laboratorios.

Configurar el ODBC y el DB Profile PowerBuilder La base de datos compras.db usado en estos laboratorios se provee en el fólder c:\cursos techera\pbwd10\database\. Un ODBC profile necesitará ser configurado. Esto puede realizarse desde el panel de control o desde el Database Profiles en PowerBuilder. Esto es una base de datos ASA con el username estándar: dba y password: sql.

Un System DSN con el nombre de compras debe apuntar a c:\cursos techera\pbwd10\database\compras.db

PowerBuilder Database Profile

Un PowerBuilder profile con el nombre de compras debe usar este ODBC DSN.

Creación del Connection Cache en el EAServer Manager

En el EAServer Manager crear un connection cache de nombre compras, los objetos que se trabajan apuntan hacia ese nombre de cache (Ver documentación de EAServer para crear un Connection Cache).




Profile EAServer : Creando un profile de EAServer El profile de EAServer es una opción nueva que fue agregada desde la versión 8.0, esta opción nos permite acceder a los servidores del EAServer que se van a utilizar como contenedores de los componentes EAServer desarrollados en PowerBuilder, lo primero que tenemos que hacer es presionar el icono EAServer Profile, para poder acceder a la ventana de diálogo donde vamos a ingresar los servidores.

Una vez que la ventana de EAServer Profile es activado el siguiente paso para agregar un servidor es presionar el icono Add..., y luego ingresar los valores del servidor.




Una vez ingresados los valores para el servidor Jaguar, como el nombre del profile (Jaguar), nombre de servidor, número de puerto (9000) y Login (jagadmin), presionamos el icono Test, para comprobar que los datos ingresados son los correctos, los nombres ingresados en esta ventana deben coincidir con los valores que se ingresaron para activar el servidor Jaguar en el EAServer Manager.

Una vez que el servidor es ingresado al profile de EAServer, desde PowerBuilder debemos de verificar que efectivamente podemos conectarnos hacia el servidor, esto lo podemos realizar en el tab page Components del System Tree y en el fólder EAServer Servers podemos ver los servidores del EAServer Profile.




Estructura de Directorios de los Archivos del Laboratorio Vista General

• Asegurarse que se encuentra en el Directorio correcto y en una Aplicación PowerBuilder.

• Su directorio de trabajo para la aplicación Compras Web es c:\cursos techera\pbwd10\estudiante.




Lab 1-1: Creación del Ambiente de Desarrollo

Objetivos: Crear un área de trabajo para poder realizar la construcción de los Web sites y poder tener en claro los conceptos de los Workspace y los Targets en PowerBuilder. Tareas:

• Generar un Workspace Generar un Workspace Debemos hacer click en el icono New del Toolbar y en la ventana New debemos escoger el icono Workspace y hacer doble click, luego en la ventana mostrada debemos de ubicar el directorio “c:\cursos techera\pbwd10\estudiante” e ingresamos como nombre cursoweb y presionamos aceptar.




Lab 1-2: Creación de un Dynamic File Web Site (opcional)

Objetivos Después de completar este laboratorio, se deberá ser capaz de:

• Crear una página por defecto para el Web Site • Configurar el Servidor Web para almacenar un Web site

Descripción En este laboratorio, se examina una simple Página HTML, se configura un Web site basado en archivos usando el servidor Web EAServer. Tareas:

1. Crear un Web site en el tab Target 2. Crear una página Web 3. Acceder a la página Web. 4. Reiniciar el Servidor Web.

Tarea 1: Crear un Web site en el Tab Target Seleccionar el tab Target y presionar doble click en el icono Web Site y luego poner el nombre de demoweb como target y aceptar los valores por defecto.

Luego de ingresado los valores veremos el Web Site demoweb creado y listo para poder crear nuestras páginas web.




Tarea 2: Generar una Página Web Presionar el icono New del toolbar y escoger el tab Web y luego hacer doble click en el icono Web/JSP Page e ingresarle el nombre de página bienvenidos.htm y aceptar los demás valores por defecto.

Luego ingresar el texto de “Bievenidos a PowerBuilder Web” y grabar los datos.




Una vez grabado el archivo, ahora tenemos que realizar el Despliegue de la página Web, esto lo podemos realizar seleccionando el tarjet y luego presionamos clic derecho y escogemos properties, y en el tab Deploy damos clic en el icono Create new local configuration y escogemos la opcion “Basic”, y escogemos el File System para desplegar las páginas Web. Lo siguiente es hacer un deploy a la página creada en el site seleccionado.




Tarea 3: Configurar el Web Server

Iniciar EAServer

1. Iniciar el Jaguar Server desde el Windows Start Menú en el fólder Sybase | EAServer.

Iniciar EAServer Manager

2. Iniciar el EAServer Manager (o EAServer Manager) desde el Windows Start Menú en el fólder Sybase | EAServer.

3. Seleccionar EAServer Manager en el panel izquierdo del Sybase Central Java Edition. Click en el botón Connect.

4. Conectarse a Host Name: nombremaquina, con el Puerto: 9000, usando el username: jagadmin y dejar el password en blanco.

Abrir el fólder Jaguar dentro de Servers en el panel izquierdo. Click en el fólder Listeners. Examine los listeners http. Para usar el EAServer como un web server, se necesitará asegurarse que los listeners HTTP coincidan con el Puerto que se especifica.

Si el número de Puerto es incorrecto hacer doble click en el listener e ingresar el número correcto: 8080




Click derecho en Jaguar y seleccionar Server Properties desde el menú de contexto.

Click en el tab Dynamo y poner la propiedad que habilita la ejecución de Dynamo “Enable Dynamo execution”

Cerrar este diálogo. No cerrar el EAServer Manager.




Tarea 4: Probar el Target

1. Ejecutar el Internet Explorer o Netscape Navigator.

2. Tipear http://nombremaquina:8080/demoweb/bienvenidos.htm en la línea de dirección URL.

Nota: Si el website de ejemplo no aparece, se necesitará reiniciar el servidor Jaguar. Esto se hace desde el EAServer Manager, haciendo click derecho en Jaguar y seleccionando Shutdown and Start desde el menú popup.

Felicitaciones haz realizado tu primera interacción con PowerBuilder para Web.




Lab 2-1: Creación de un JSP Target

Objetivos Después de completar este laboratorio será capaz de:

• Crear un JSP Target • Crear un Java Server Page en el Editor Web • Deploy y verificar el JSP en un Browser

Descripción En este laboratorio te enseñamos los mecanismos de configurar un JSP Target y desplegar las Páginas desde PowerBuilder.

Tareas : 1. Crear un JSP Target 2. Crear una página JSP 3. Deploy y Run al JSP

Tarea 1: Crear un JSP Target 1. Iniciar PowerBuilder.

2. Iniciar el EAServer desde el Windows Start Menú y acceder a Programs | Sybase | EAServer | Jaguar Server

Nota: Esperar hasta que aparezca “Accepting Connections” antes de proceder con este laboratorio. Se puede minimizar la ventana DOS en este momento. No cerrar la ventana DOS.

3. Abrir el workspace cursoweb.pbw (si es que no se encuentra abierto) en el fólder c:\cursos techera\pbwd10\estudiante.




4. Crear un nuevo JSP Target desde el tab Target de la ventana de diálogo New …

5. Nombrar el target ComprasWeb y aceptar los valores por defecto para los nombres de archivos.

6. Aceptar los valores por defecto para el nombre de configuración de despliegue.

7. Especificar que se está usando el modelo de objetos y despliegue al EAServer desde el prompted. Use el profile jaguar EAServer y acepte los valores por defecto.

El System Tree reflejará la siguiente estructura:




Tarea 2: Crear un Java Server Page

1. Click derecho al target ComprasWeb y seleccionar New… desde el menú popup.

2. Crear un Web/JSP Page.

3. El título será Bienvenidos con un nombre de archivo bienvenidos.jsp. no hay un style sheet asociado con esta página web, no hay un background. Poner “fecha de creación” en la página. Click en finish para crear la página web.




Use el toolbar para insertar un texto y tamaño de tu selección. Poner el texto de: “Bienvenidos a PowerBuilder Web” en la página web.

5. Click derecho en el target ComprasWeb en el System Tree y seleccionar Import File. Seleccionar los archivos de tipo: Image Files. Importar el archivo techera.bmp.

6. Use drag&drop desde el System Tree para mover la imagen techera.bmp a la página web.

La página web debe lucir así:

Grabar la página web y salir del editor web.

Tarea 3: Deploy y Run al JSP 1. Asegurarse que EAServer esté ejecutándose y aceptando conexiones. La ventana DOS fue

minimizado en los pasos previos.

2. Ejecutar el EAServer Manager (desde el Windows Start Menú: Programs | Sybase | EAServer | EAServer Manager ). Conectarse al EAServer. Use el servidor jaguar, Puerto 9000 y el username: jagadmin y password en blanco.

3. Abrir el fólder Jaguar dentro de Servers. Abrir el fólder Listener y examinar el listener HTTP. El listener HTTP es: ____________________




4. Cerrar el EAServer Manager. Reiniciar PowerBuilder sino está ejecutándose.

5. En PowerBuilder, click derecho en el target ComprasWeb y acceder a las propiedades del menú popup.

6. Editar la configuración local de despliegue.

7. Examinar el Deployment Profile dentro de Server Information en el treeview en el panel izquierdo. Asegurarse que esto es agregado con los listener desde el paso 3 anterior.

8. Cerrar las propiedades de Deployment.




9. Click derecho al target ComprasWeb y seleccionar Deploy desde el menú popup. Examine el estatus del window para cualquier error.

10. Reiniciar el EAServer Manager y abrir el fólder Web Applications. Se debe observar la nueva aplicación Web desplegada ComprasWeb. Si no se visualiza esto, refrescar el EAServer. Se puede necesitar reiniciar el EAServer.

En el Internet Explorer, digitar el URL:

http://nombremaquina:8080/ComprasWeb/bienvenidos.jsp

NOTA: nombremaquina, es el nombre del equipo donde se ejecuta el EAServer.




Lab 3-1: Crear el Cascading Style Sheet para la Aplicación Compras Web

En esta parte vamos a diseñar la plantilla para poder ponerla a las páginas web para que tengan un diseño unificado. Hacer click en el icono New del Toolbar y seleccionar el tab Web y hacer doble click en el icono Cascading Style Sheet para poder crear una hoja de Estilos para nuestra aplicación Web.

1. Nombrar el sheet estiloweb.css. Aceptar todos los valores por defecto para el wizard Cascading Style Sheet.

2. Click derecho en Style Sheets y seleccionar Insert HTML Tag Selector desde el menú popup.

3. Seleccionar BODY desde la caja Insert Dialog y hacer click en OK.

4. Seleccionar el tab Background y especificar: url(../imagenes/fondo.jpg) para la imagen background.




5. Grabar estiloweb.css pero no lo cierre todavía.

6. Modificar la URL de la Imagen Background URL a: url(../imagenes/fondomain.jpg)

7. Save As principal.css.

8. Cerrar el cascading style sheet.

NOTA: Si las imágenes no se encuentran en el directorio, importarlas desde el directorio c:\cursos techera\pbwd10\imagenes, con la opción Import Fólder…




Lab 3-2: Crear el FrameSet para la Aplicación y Asociar las Páginas Web con los Frames

Ahora vamos a crear nuestra página de inicio para el aplicativo, con esto daremos inicio y podremos ver todas las opciones de la Aplicación Web.

1. Click derecho en el JSP target y seleccionar New … desde el menú popup.

2. Usando el wizard Web/JSP Page, crear una nueva página web left.jsp. Y especificar principal.css para el Cascading Style Sheet. Aceptar todos los demás valores.

3. Borrar el texto “Put your data here”

4. Insertar una tabla con 6 filas y 1 columna.

5. Ubicar el cursor en la primera fila de la tabla, insertar los siguientes textos en cada fila.

• Inicio

• Productos

• Cliente

• Pedidos

• Cálculos

• Login

6. Se puede también adicionar el copyright y el texto de email para mostrarlo abajo.

7. Formatear la tabla para que los borders sean invisibles. Cambiar los borders-thickness a 0 para manipular sus propiedades.

8. Grabar y cerrar esta página web.

9. Click derecho en el target ComprasWeb y seleccionar New … desde el menú popup.

10. Usando el wizard Web/JSP Page, crear una nueva página web. Nombrar la nueva página con el nombre de top.jsp. Especificar principal.css para el Cascading Style Sheet para usar. Aceptar todos los valores por defecto.




11. Borrar el texto por defecto: “Put your data here” y reemplazarlo con el texto “Compras Web”. Formatear el texto a negro y el fondo a Comic Sans MS con el tamaño de 36. Centrar el texto. Se puede modificar estas propiedades desde el toolbar o desde el menú: Format/Character

12. Hacer click derecho en el target ComprasWeb y escoger la opción Import Files…, luego desde el directorio de \recursos importar la imagen techera.bmp y antes del texto, insertar la imagen techera.bmp, esto se puede realizar mediante la programación Drag & Drop. Grabar y cerrar la página web.

13. Click derecho al target ComprasWeb y seleccionar New … desde el menú popup.

14. Usando el wizard Web/JSP Page, crear una nueva página web. Nombrar la nueva página right.jsp. Especificar principal.css para el Cascading Style Sheet. Aceptar todos los valores por defecto.

15. Insertar el texto “Sistema de Compras por la Web” en la página.

16. Grabar y Cerrar la página right.jsp.

17. Click derecho en el target ComprasWeb y seleccionar New … desde el menú popup usando el wizard Frameset Page, crear un nuevo frameset nombrado homepage.htm. Seleccionar Style 5.

18. Ir dentro del Source y renombrar sus frames top (frame1), left (frame2) y right (frame3) de acuerdo a la posición.

19. Usando la programación Drag & Drop desde el System Tree, mover top.jsp a top, left.jsp a left y right.jsp a right.




Y ajustar el formato de cada frame (left/right/top) de acuerdo a las dos siguientes screen-shots. Ajustar con los frames en el frameset para que pueda ser visible como se muestra abajo.




Grabar y Cerrar.

Importar la página EnConstruccion y el Link a las páginas 1. Importar EnConstruccion.jsp desde el fólder c:\cursos techera\pbwd10\recursos

2. Click al botón Hyperlink.

3. Poner las propiedades de hyperlink de los enlaces a EnConstruccion.jsp. Está página enlazada debe ser abierta en el frame right.




Lab 4-1: Crear la Página de Login

Objetivos Después de completar este laboratorio, se debe estar hábil para:

• Crear forms para enviar los ingresos de usuarios y los componentes necesarios.

Descripción

En este laboratorio, se creará una pantalla Login para el Web Site ComprasWeb. Se creará el Form para enviar la información del Login al servidor. Estos forms serán como los que se muestra a continuación

Tareas a realizar 1. Crear el form Login 2. Enlazar a las páginas 3. Probar la Aplicación

Tarea 1: Crear el form Login 1. Click derecho en el target ComprasWeb y seleccionar "New…" desde el menú popup

2. Seleccionar "Web/JSP Page" desde el tab "Web". Presionar el botón OK. Presionar el botón Next en la siguiente página.




3. Digitar "Login" para el Título y presionar Next.

4. Presionar el botón "Next"

5. Seleccionar "principal.css" con el style sheet.

6. Aceptar los demás valores del wizard haciendo click en el botón “Next” hasta llegar al botón "Finish" para finalizar el wizard.

7. aBorrar el texto "Put your data here" de la página y reemplazarlo con "Login"

8. Seleccionar el texto "Login" usando el Painter Bar centrarlo y darle el formato "Heading 1"

9. Presionar la tecla Enter después del texto "Login".

10. Desde el tab Language en el System tree, abrir el primer fólder "Alphabetical listing…", ubicar el tag "FORM" y drag & drop dentro del texto Login. La pantalla debe lucir como la de abajo.




11. Ubicar el cursor entre los tags "form" y "/form" usando las teclas left/right, y presionando la tecla Enter, entonces ubicar el cursor después del primer tag "form"

12. Desde el menú Table seleccionar el Wizard Table

13. Número de Filas = 2, click en Next

14. Número de Columnas = 2, click en Finish, y presionar el botón OK en la última pantalla.




15. Centrar la tabla usando la barra del Painter (primero se necesitará seleccionar la tabla haciendo click en uno de sus bordes).

16. Borrar el texto "Cell" desde la primera columna y reemplazar con el texto “Usuario” y resaltarlo en Negrita y justificarlo a la derecha (use el Painter Bar)

17. Aplicar lo mismo para la siguiente Columna usando el texto "Password"

18. Borrar el texto "Cell" seguido de “Usuario” y mientras el cursor todavía está en la columna seleccionada, seleccionar desde el menú "Insert" => "Form Field" => "Single Line Text"

19. En la ventana de diálogo Text Properties, nombrar el control "user_id"

20. Hacer lo mismo para el Password "Single Line Text" – nombrarlo "password" y seleccionar el check box "password"

21. La tabla ahora muestra la siguiente pantalla




22. Ubicar el cursor en la tabla y sobre el tag form "/form". Click en el "Push Button" en el Painter Bar. En la ventana de diálogo dar al botón un tipo de "Submit", un nombre de "cb_aceptar" y una etiqueta de "Aceptar". Presionar el botón OK. Centrar el botón usando el Painter Bar.

23. Ocultar los bordes de la tabla accediendo a sus propiedades => Click derecho en uno de sus bordes y seleccionar "Table TABLE1 Properties…" desde el menú popup.

24. En el medio de la ventana de diálogo ubicar la propiedad "Borders" => "Thickness" y cambiar esto a pixels en Cero (0)

25. Ahora la pantalla de login debe lucir como se muestra a continuación

26. Grabar y Cerrar esta página web.




27. Importar la página validarlogin.jsp desde el directorio c:\cursos techera\pbwd10\recursos, esta página tiene código comentado que luego será cambiado y activado.

28. Abrir la página left.jsp en el Editor Web. Click derecho en el texto “Login” y modificar las propiedades de hyperlink para el enlace con login.jsp.

29. Abrir homepage.htm en el Editor Web. Click en el tab "Preview". Mientras se va visualizando la página, click en el enlace "Login". En el laboratorio posterior se agregará las validaciones de código.

Tarea 2: Enlazar a las páginas 1. Abrir la página Login. 2. Click derecho en el tag "form". 3. Desde el menú popup seleccionar "Form FORM1 Properties…"




4. En la ventana de diálogo Form Properties seleccionar la página "validarlogin.jsp" como el URL destino usando el botón "ellipses".

5. Grabar y cerrar la página.

6. Abrir la página left.jsp y verificar los enlaces de los textos, todos los demás deben apuntar a la página EnConstruccion.jsp y todos deben de tener el “Target Window or Frame” en right.




Tarea 3: Probar la Aplicación Abrir un browser y digitar la URL:

http://nombremaquina:8080/ComprasWeb/homepage.htm




Lab 5-1: Usando JavaScript client-side para validar el ingreso de usuario

Objetivos

Después de completar este laboratorio, será capaz de: • Escribir funciones JavaScript (scripts client-side). • Escribir JavaScript en los eventos • Insertar código JavaScript desde archivos externos en un script • Usar el System Tree para aprender más sobre JavaScript

Descripción En este laboratorio, se usará la página Login creada anteriormente y se adicionará scripts Tareas

1. Validar el ingreso de datos 2. Probar la aplicación

Tarea 1: Validar el Campo Usuario Abrir la página login.jsp del target "ComprasWeb".




Click derecho en el editor Web de código y seleccionar New Script | Client.

Luego hacer click derecho y seleccionar "Insert from File …" desde el menú popup. Irse al directorio c:\cursos techera\pbwd10\recursos e importar el archivo validarcampos.txt




Y luego irse en el editor Web del objeto FORM1 y escoger el evento onsubmit() y digitar el código que se muestra en la figura.

Tarea 2: Probar la aplicación Guardar Los cambios realizados

Abrir un Browser y digitar la URL para probar el código ingresado.

http://nombremaquina:8080/ComprasWeb/login.jsp




Lab 6-1 Crear el Web DataWindow en un JSP

Objetivos

Después de completar este laboratorio será capaz de:

Usar el Web DataWindow Page para crear un JSP con un DataWindow Deploy y probar un Java Server Page en un Browser

Descripción

Este laboratorio se concentra en el mecanismo de configurar un Java Server Page conteniendo un DataWindow.

Tareas

1. Adicionar un Target PowerScript con los DataWindow 2. Crear un Java Server Page con el wizard Web DataWindow Page. 3. Deploy y Run al JSP 4. Crear Páginas Web para Clientes y Pedidos

Tarea 1: Adicionar un Target PowerScript con los DataWindows

1. Click derecho en el Workspace y seleccionar Add Target.

2. Escoger el Target: comprasdw del directorio c:\cursos techera\pbwd10\recursos

3. Revise los DataWindows necesarios para ser usados como d_grid_tipoproductos, d_grid_productos, d_mto_clientes., d_lista_pedidos etc.

Tarea 2: Crear un Java Server Page con el wizard Web DataWindow Page

1. Click derecho en el target ComprasWeb en el System Tree.

2. Seleccionar New … desde el menú popup.

3. Click al tab Web en la ventana de diálogo New..

4. Seleccionar el wizard Web/JSP DataWindow Page y click en OK.




5. El nombre de la página web es: tipoproductos.jsp como se muestra en la pantalla de abajo.

6. Continuar con el wizard. No tiene un style sheet.

7. Seleccionar el profile EAServer jaguar.

8. Seleccionar el componente Standard Web DataWindow.

9. Seleccionar una librería PowerBuilder como el origen. La librería es comprasdw.pbl.

10. Poner el check al checkbox para generar un path absoluto.

11. Seleccionar el DataWindow d_grid_tipoproductos.

12. Seleccionar el profile database compras.

13. Click en Finish. Esto abrirá la página JSP en el editor web. Se debe ver el control DataWindow en la página en el Page view.




14. Click derecho en el Web DataWindow DTC (design time control) y verificar cada tab en las propiedades. Asegurarse que la conexión a la base de datos esté configurado para realizar la recuperación de datos automáticamente.

Insertar el texto encima del DataWindow: Tipo de Productos.

15. Irse a la página left.jsp y modificar el Hyperlink del texto “Productos” y modificarlo para que acceda a la página tipoproductos.jsp




16. Grabar el JSP y cerrar el editor.

Tarea 3: Deploy y Run

1. Click derecho en el target ComprasWeb y seleccionar Deploy.

2. Iniciar el Internet Explorer y digitar en la URL:

http://nombremaquina:8080/ComprasWeb/login.jsp

y luego acceder a la opción Productos.

Nota: sino se ven datos, verificar el tab de la conexión del DataWindow y asegurarse que compras esté seleccionado. Si esto está seleccionado y todavía no se obtienen datos. Verificar la conexión a la base de datos. (esto se configuró en los pasos anteriores).




Tarea 4: Crear Páginas Web para Clientes y Pedidos

1. Crear las páginas Web cliente.jsp y listapedidos.jsp adicionarle los siguientes objetos DataWindow: d_mto_clientes y d_lista_pedidos del target comprasdw.

2. Realizar los pasos que se hicieron para crear la página Web para la lista de Productos y enlazarlos con sus respectivos enlaces.

3. Luego realizar el Deploy a las páginas y realizar las pruebas respectivas:

Nota: para ahorrar tiempo, también puede importar esas páginas desde el directorio de soluciones, pero tiene que tener en cuenta el nombre del servidor, el nombre del web target y demás opciones de configuración.




Lab 6-2 Adicionando código Java

Objetivos

Después de completar este laboratorio será capaz de: • Poder Adicionar código Java en una Página JSP • Deploy y probar el Java Server Page en un Browser

Descripción

Se modificará la página tipoproductos.jsp creado en el laboratorio anterior para llamar a la función para imprimir la fecha en el bottom de la Página Web.

Tareas

1. Crear un Server Script 2. Deploy y Run

Tarea 1: Crear un Server Script 1. Abrir tipoproductos.jsp en el editor web.

2. Ubicar el cursor en el editor web después del Web DataWindow DTC. Digitar el siguiente texto: La fecha actual es:

3. Click derecho en el script del editor web y seleccionar New Script | Server | JSP | <%= … %>

Nota: esto es una sentencia de asignamiento (note el tag <%=). Se está asignando el resultado del script después del texto “la fecha actual es”.




4. Digite el siguiente fragmento de script: new java.util.Date( )

Nota: tener cuidado cuando digita los nombres y código, Java es case-sensitive. No hay un punto y coma después del fragmento de código.

Tarea 2: Deploy y Run 1. Grabar la página web.

2. Click derecho en el target ComprasWeb y seleccionar Deploy.

3. Iniciar Internet Explorer y digitar el URL:

http://nombremaquina:8080/ComprasWeb/tipoproductos.jsp

Nota: no olvidarse de irse a la parte de la fecha para ver los resultados de la codificación.




Lab 7-1: Generar el Web DataWindow Containers

Este laboratorio mostrará como crear y desplegar un Web DataWindow Container al EAServer.

Objetivos

Después de completar este laboratorio, será capaz de:

• Crear un Web DataWindow Container Project • Deploy al Container hacia el EAServer • Usar el Container como un origen de DataWindows para el Web DataWindow DTC

en una Página Web.

Descripción

En este laboratorio, se creará un Web DataWindow Container y se desplegará al EAServer. Luego se creará/modificará una Página Web para que use este container como su origen para los Objetos DataWindow.

Tareas: 1. Crear un Web DataWindow Container Project 2. Deploy al Web DataWindow Container al EAServer 3. Usar el Web DataWindow Container en una Página Web




Tarea 1: Crear un Web DataWindow Container Project

1. Click derecho en el target comprasdw y seleccionar New… desde el menú popup.

2. Click en el tab Project.

3. Seleccionar Web DataWindow Container Wizard y click en OK para acceder al wizard.

4. Nombrar el project p_compras_container

5. Seleccionar el profile Database compras.

6. Nombrar el container: comprascontainer_component en el package comprasdw.




7. Aceptar los valores por defecto hasta el Dynamic Library options. En el Dynamic Library Options asegurarse que esté activado Include unreferenced objects in Consolidated PBD. También seleccionar la opción Build a Consolidated Dynamic Library (pbd).

Nota: Activar Include unreferenced objects in Consolidated PBD, permite trabajar con los objetos DataWindows en la web

8. Click en Next y Finish para finalizar el Wizard.




Tarea 2: Deploy al Container

1. Click al botón Deploy en el Painter del Project.

2. Ubicar el package comprasdw en el System Tree en el page Components. Abrir el package en el System Tree. Qué DataWindows han sido desplegados?

____________________________________________




Tarea 3 : Usar el Web DataWindow Container en una Página Web

1. Abrir la Página Web tipoproductos.jsp del target ComprasWeb.

2. Click derecho al Web DataWindow DTC y acceder a las propiedades DTC.




3. Deseleccionar el radiobutton Library (*.pbl) y seleccionar el radiobutton Web DataWindow Container Component. Click al button ellipsis para buscar en el package comprasdw. Seleccionar el DataWindow d_grid_tipoproductos. Recuerde verificar el tab Connection a compras.

4. Click en OK.

5. Grabar la Página Web.

6. Deploy a la Página Web.

7. Probar la página accediendo con el URL como se hizo en el laboratorio anterior.




Lab 8-1 Crear Páginas Web con Ordenamiento en los DataWindows

Objetivos

Después de completar este laboratorio, será capaz de: • Crear un 4GL JSP Web Page • Adicionar controles server-scriptable • Codificar el server-scripts que se unen a los eventos del control

Descripción

Se creará un 4GL Java Server Page que contiene un DataWindow mostrando los Productos. El JSP mostrará al usuario para sortear un reporte por descripción o por precio.

Tareas a realizar

1. Crear un 4GL Java Server Page con DW 2. Adicionar controles server-scriptable 3. Implementar el Sort

Tarea 1: Crear un 4GL Java Server Page con DW Click derecho en el target ComprasWeb en el System Tree. Seleccionar New… desde el menú popup.

Usar el Wizard 4GL Web/JSP Page desde el tab Web de la ventana de diálogo New…

Nombrar a la página productos.jsp y continuar con el wizard:

No hay un style sheet para esta página. Aceptar los valores por defecto en las opciones image y el background. Check a los checkboxes para crear un header y footer en esta página.

Seleccionar choice of display de runtime errors o trace. Esto puede ser desactivado después.

No hay parámetros de página para esta página. Se puede también saltar los componentes EAServer porque esta página no hace referencia a ningún EJB u otro componente.

Click en Finish para finalizar el Wizard.

Click derecho a la página web y examinar las propiedades de página. Hacer Check y Uncheck al 4GL property. Note los tabs que aparecen y desaparecen dependiendo del estado de la propiedad.




Tarea 2: Adicionar controles server-scriptable

Adicionar una tabla con 1 fila y 5 columnas antes del Web DataWindow DTC como se muestra en la figura. Después de crear la tabla, poner el texto de “Seleccione un Ordenamiento:” en la primera columna.

Adicionar un Listbox a la segunda columna en la tabla. Examinar las propiedades del Listbox. Asegurarse que la opción server-scriptable checkbox esté checked.

Nombrar el dropdown Listbox lb_1. El usuario final reportará el uso de este listbox para especificar el sort de la columna para el reporte.

Abrir el DataWindow d_grid_productos desde la librería comprasdw.pbl en el target comprasdw. Cuáles son los nombres de las columnas (recuerde que Java es case-sensitive, por lo tanto debe tener cuidado cuando escribe los nombres).

Cerrar el DataWindow d_grid_productos e irse al Java Server Page.

Click en el tab Options de las propiedades del listbox lb_1. Adicionar los siguientes items al Listbox:

El Listbox contendrá los items: descripcion y precio.

El valor para estos items serán los nombres correspondientes a las columnas que fueron escritas en el paso 3.




Permitir a descripcion ser el item de inicio a ser mostrado al usuario.

Escribir abajo los nombres de los server-events para este control.

Adicionar un control checkbox nombrado cbx_ascendente seguido del listbox en la tercera columna de la tabla.

Poner el texto de “Ascendente” al lado del checkbox en la cuarta columna de la tabla.

Asegurarse que cbx_ascendente es server-scriptable. Cuando el JSP es mostrado al usuario, el checkbox debe estar checked.




Ir al tab Page en el System Tree y examinar los controles Server.

Abrir las propiedades y eventos para cada control.

Ubicar un CommandButton server-scriptable seguido del checkbox. El texto en el CommandButton es “Sortear”. En qué evento debes de poner el código del servidor para que al hacer click en este botón invoque esa funcionalidad? ServerAction

Debajo de los controles de esta página agregar un Web DataWindow DTC. Asegurarse de que esté con Server-Scriptable. Especificar una conexión a la base de datos compras, y un objeto DataWindow de d_grid_productos ubicado en la librería comprasdw.pbl.

Examinar los controles server side mostrados en el System Tree en el tab page. Se debe ver cada uno de los controles ubicados en esta página web. Si alguno de los controles no son mostrados, verificar la propiedad server-scriptable del control.

Abrir los métodos disponibles desde el Control DataWindow. Qué métodos deben ser llamados para realizar el ordenamiento?

Abrir las propiedades disponibles para el checkbox y el control Listbox. Que propiedades contendrán la información escogida por el usuario para implementar el ordenamiento?




Tarea 3: Implementar el Sort

Nota: si eres nuevo programando en Java un archivo de texto codigodesorteo.txt ha sido proveído para Ud. en este módulo, y se encuentra en el directorio c:\cursos techera\pbwd10\recursos

1. El System Tree puede ser abierto en el tab page o el tab language. Se puede usar drag & drop en el panel del script para codificar la llamada al método o acceso de propiedad.

2. Es importante codificar en el evento apropiado para el control apropiado. Siempre hacer doble click donde se desea codificar. Recuerde que es Java.

a. Todas las variables deben ser declaradas b. Las sentencias son finalizadas por un punto y coma c. Todo el código es case-sensitive

3. Escribir el código del servidor para el command button para:

a. Usar el seleccionar datos (para la descripción y precio) b. Sortear ascendentemente o descendentemente de acuerdo al checkbox c. Realizar el sort

Luego de haber ingresado el código en el evento ServerAction(), la codificación debe quedar como se muestra en la figura.




4. Deploy y Run al JSP digitando: http://nombremaquina:8080/ComprasWeb/login.jsp en el URL del browser.

Nota: si al hacer deploy falla con un mensaje de “unable to rename WAR file” (visto en algunos casos), reiniciar el EAServer y hacer redeploy.




Lab 9-1: Creando Páginas Web con Hyperlinks

En este laboratorio, se debe adicionar funcionalidad al DataWindow para la aplicación de ComprasWeb. Verificar que el target de los Objetos DataWindows se encuentre adicionado, en todo caso adicionarlo al workspace. Se creará un detalle de las compras realizadas.

Objetivos

Después de completar este laboratorio, podrá realizar:

Crear una Página Web conteniendo un Web DataWindow DTC Modificar las propiedades del Web DataWindow DTC para hacer un Hyperlink

Descripción En este laboratorio, se revisará algunos Objetos DataWindow para ser usados en la Aplicación de Compras Web. Y se creará las páginas para mostrar los detalles de los productos. Esta página web hará un enlace a sus detalles del producto para poder escoger que cosas poder comprar por la Web. Tareas:

1. Configurar el ambiente del DataWindow 2. Crear la Página Web del Detalle del Producto 3. Actualizar los Hyperlinks 4. Deploy y probar la aplicación

Tarea 1: Configurar el Ambiente del DataWindow

Click derecho en la librería comprasdw.pbl en el System Tree y verificar el objeto DataWindow d_mto_productos, verificar si tiene asignado un Retrieval Argument al código de producto.

Realizar las pruebas en el preview del DataWindow para verificar la recuperación de datos.




Tarea 2: Crear la página Web para el detalle de los Productos Click derecho en el Target ComprasWeb y crear una nueva Página Web detalleproductos.jsp usando el Web/JSP Page Wizard.

Aceptar los demás valores por defecto para crear la página web.

Borrar el texto “Put your Data Here”.

Insertar un DataWindow Control desde el toolbar. Click al button DataWindow en el toolbar.

Click en el radiobutton Library (PBL) y navegar al fólder c:\cursos techera\pbwd10\recursos. Seleccionar la librería comprasdw.pbl.

Activar el check de “Generate absolute path in script”,

Seleccionar el Objeto DataWindow d_mto_producto.




Ir al tab Connection y seleccionar compras para el DataBase Connection.

Click en el tab Retrieval de las propiedades del DTC. Este Objeto DataWindow está esperando un retrieval argument.




Ahora la Página Web lucirá como se muestra en el Editor Web:

Examinar el script.




Tarea 3: Actualizar los Hyperlinks 1. Modificar la página de productos.jsp para enlazarla con la página detalleproductos.jsp

en el frame right, para esto tenemos que abrir la página productos.jsp y en el tab LinkTo realizaremos dichas modificaciones.

2. Presionaremos botón derecho en el Web DataWindow y escogeremos la opción Sybase Web DataWindow DTC 10.0 Properties…




3. Luego irse al tab Link To para escoger el campo descripción y hacer doble click en medio de la opción para referenciar con la página destino.




4. Escoger la página detalleproductos.jsp como destino, y en los parámetros escoger lo siguiente: Name: as_codigo (por defecto), Bind Type: “Database Column” y en Bind Value: “codigo”

5. Luego de haber realizado esas asignaciones la página debe quedar tal como se muestra a continuación:




6. Cerrar y grabar la página seleccionada.

7. Abrir la página tipoproductos.jsp del target ComprasWeb.

8. Click derecho en el Web DataWindow y escoger sus propiedades del DTC.

9. Luego Irse al tab Link To y direccionarla con la página productos.jsp para pasarle el código de tipo de producto y mostrarlo en el frame right.

10. Grabar y cerrar la página tipoproductos.jsp

Tarea 4: Deploy y Probar la Aplicación Cerrar y Grabar cualquier Página Web abierta. Click derecho al Target ComprasWeb y Deploy.




Otros temas para solucionar problemas:

1. Examinar el log de EAServer en el fólder %EAServer%\bin 2. Verificar para asegurarse que la conexión a la base de datos compras esté asignado

en las propiedades del DTC. 3. Asegurarse que la página de inicio para Ejecutar es login.jsp. 4. Ejecutar la Aplicación. 5. Probar lo siguiente: 6. Loguearse al sistema. 7. Probar todos los Hyperlinks. 8. Examinar la página de detalle de productos. Se debe ver los datos. Si los datos no son

presentados, verificar la conexión a la base de datos. 9. Se debe estar habilitado para retroceder a la página de inicio.




Lab 9-2: Crear la Página de Pedidos

En este laboratorio, se continuará para adicionar la funcionalidad a los DataWindows de la Aplicación de Compras. Se Modificará una Página Web para hacer los pedidos.

Objetivos:

Después de completar este laboratorio, se debe estar preparado para: Modificar las propiedades del Web DataWindow DTC En este laboratorio, se Modificará una Página Web para ver los pedidos que van a realizarse y para registralos en el Sistema. Tareas:

Configurar la página de las compras Deploy y Probar la Aplicación

Tarea 1: Configurar la página de las compras 1. Click en el target ComprasWeb. 2. Abrir la página detalleproductos.jsp. 3. Agregarle controles para poder ingresar los pedidos: Un control Single Line Edit

nombrado sle_1 y un Command Button nombrado cb_aceptar para enviar la cantidad de pedidos, también le puede agregar imágenes para mejorar la apariencia de esta página. Esta página tendrá la lógica necesaria para realizar los pedidos para la compra por Web, además de tener un enlace.




4. El proceso de captura de valores y la realización de compras se realizará mediante la invocación de Componentes de Negocio que ya se encuentran creados y serán invocados en los siguientes laboratorios.

Tarea 2: Deploy y Probar la Aplicación Click derecho al target ComprasWeb y seleccionar Deploy desde el menú popup.

Asegurarse que el EAServer está ejecutándose. Inicializarlo si es necesario.

Ejecutar la Aplicación. Asegurarse que todos los hyperlinks trabajen.




Lab 10-1: Crear una Página 4GL Java Server con controles server-scriptable

Objetivos


• Crear controles con codificación del lado del servidor

Descripción

En este laboratorio, se codificará los eventos del lado del servidor de los controles para poder invocar procesos de actualización de los DataWindows.

Tareas:

Modificar la Página con el Web DataWindow.

Agregar un Control Command Button y la codificación del Servidor.

Probar la aplicación.

Tarea 1: Modificar la Página con el Web DataWindow

1. Abrir la página clientes.jsp.

2. Verificar que la conexión a la base de datos sea la correcta y que se puedan realizar modificaciones de los campos del Objeto DataWindow d_mto_clientes.

3. Luego click derecho en el panel de diseño de la página web y escoger Page Properties y en tab Page activar el check Enable 4GL Web Server Side Event Model, con esto la página clientes.jsp ya es una página 4GL.




Tarea 2: Agregar un control Command Button y la codificación del lado del servidor

1. Agregar un control Command Button debajo del control DataWindow en la página Web y nombrarlo cb_grabar y ponerle una etiqueta de Grabar.

2. Verificar en las propiedades del control Command Button que la opción Server Side Scriptable esté habilitada, para que se pueda realizar invocaciones del lado del servidor. Si esta opción está bloqueada para activarla, verificar que la página sea una 4GL (en Page Properties)




3. Agregar el código de Actualización para un Web DataWindow en el evento ServerAction() como se muestra a continuación:

Nota: el código agregado es similar como se realiza en PowerScript a diferencia de esto que es Java y por eso termina con punto y coma.

Tarea 3: Probar la Aplicación

1. Grabar todas las opciones agregadas.

2. Acceder a la Aplicación para probar la actualización de datos en la opción Clientes

Nota: Otro tipo de poder realizar actualización a los datos en los Objetos DataWindows es hacerlo directamente desde el painter del DataWindow y usar los controles del Toolbar, se pueden agregar opciones de Actualizacion, Nuevo, Siguiente, Anterior, Inicio, Fin etc.




Lab 10-2: Almacenando información del Objeto Session

Objetivos


Usar el objeto Session para almacenar información de usuario Crear scripts del lado del servidor

Descripción

En este laboratorio, se almacenará información de usuario en el objeto session para ser validado con la base de datos.

Tareas:

1. Inicializar el objeto session. 2. Crear una página errorlogin.jsp. 3. Probar la aplicación.




Tarea 1: Inicializar el objeto Session

1. Abrir la página validarlogin.jsp.

2. Modificar el script de la validación del login.

a. Si la información del login es válida, almacenar los contenidos en las variables de usuario del objeto session. El código para completar esto debe estar antes de cualquier dirección.

b. Click derecho en el área de código y seleccione lo siguiente:

New>Script>Server>JSP><%...%>.

c. Luego agregue el siguiente código (o modifiquelo si fuera el caso):

String usuario = request.getParameter("user_id "); String clave = request.getParameter("password"); if ( usuario == clave ) { session.setAttribute( "usuario",usuario ); response.sendRedirect( "homepage.htm" ); } else { response.sendRedirect( "errorlogin.jsp" ); }

3. Grabar validarlogin.jsp.




Tarea 2: Crear una página ErrorLogin 1. Basado en el ejemplo de la pantalla, crear una página JSP nombrada errorlogin.jsp.

Esta página es cargada cuando el usuario no está registrado en el sistema.

En el texto del Login hacer un enlace a la página login.jsp.

2. Grabar errorlogin.jsp.

Tarea 3: Probar la Aplicación

1. Deploy al Web Target.

2. Iniciar el Browser con la opción Run del Web Target.

3. Ahora ingresar al sistema.




Lab 11-1: Invocando Componentes PowerBuilder

En el Sistema de Ventas se desea validar el ingreso de los usuarios contra la base de datos de Clientes, para esto vamos a invocar un componente PowerBuilder desde una página JSP que realice esta tarea.

Objetivos


1. Desplegar un componente al EAServer 2. Crear stubs para los componentes que pueden ser usados por páginas web clientes 3. Llamar métodos de un componente

Tareas: 1. Examinar y desplegar el componente n_validar 2. Verificar los componentes desplegados al EAServer 3. Modificar la página validarlogin.jsp 4. Codificar el cliente Web para retornar el resultado al usuario

Tarea 1: Examinar y Desplegar el componente n_validar

1. Adicionar el target PowerScript compras_business de la dirección c:\cursos techera\pbwd10\recursos.

2. Click derecho en la librería compras_business.pbl y seleccionar Import… desde el menú popup.

3. Importar n_validar.sru desde el fólder c:\cursos techera\pbwd10\recursos.




4. Importar los demás archivos: n_calcular.sru, n_compras.sru, n_compras_cabecera.sru y n_compras_detalle.sru desde el fólder c:\cursos techera\pbwd10\recursos.

5. Abrir n_validar en el editor User Object en PowerBuilder.

6. Cuál es el nombre de la función? ____________________________________

7. Cuáles son los argumentos para la función of_validar? ______________________________________________________

8. Examinar el código de la función.

9. Cerrar n_validar. Este objeto es para validar el ingreso de usuario.

10. Click derecho al target compras_business y seleccionar New… desde el menú popup.

11. Seleccionar el EAServer Component Wizard en el tab Project de la ventana de diálogo New.

12. Nombrar el proyecto p_compras_validar.




13. Seleccionar el user object n_validar.

14. Nombrar su package compras (case-sensitive).

15. Aceptar todos los valores por defecto del Wizard excepto para especificar un full rebuild on the Options dialog.

16. La librería consolidada será: c:\cursos techera \pbwd10\recursos\compras_business.pbd

17. Click en Finish.

18. Click al botón Deploy para desplegar el nuevo proyecto creado p_compras_validar.




19. Examinar el System Tree. Se debe ver el package compras con el componente n_validar.

Tarea 2: Verificar los componentes desplegados al EAServer

1. Desde el Windows Start Menú en Programs \ Sybase \ EAServer, ejecutar el EAServer Manager.

2. Ingresar al EAServer con el User Name jagadmin y el Password en blanco, Host name: nombremaquina y el Port Number: 9000.

Abrir el fólder Jaguar dentro de Servers.




Examinar el fólder Installed Packages. El componente n_validar debe estar en el package compras. Si no se puede ver, se puede necesitar hacer un refresh al servidor. (Click derecho en el Jaguar y seleccionar Shutdown and Start …)

Crear Stubs

Click derecho al package compras y seleccionar Generate Stub / Skeleton … desde el menú popup.




Verificar el Generate Java Stubs with CORBA seleccionado. Click al radiobutton Generate Java Files y verificar el checkbox para Compile Java Stubs.

Click al botón Generate.




Tarea 3: Modificar la Página Web validarlogin.jsp

1. Irse al target ComprasWeb en PowerBuilder y abrir la página validarlogin.jsp.

2. En el editor Web irse al código del servidor agregado anteriormente

3. El código mostrado en la figura anterior será modificado para que quede como se muestra a continuación (el código en negrita ha sido agregado): //***codigo de invocación del Componente String usuario = request.getParameter("user_id"); String clave = request.getParameter("password"); int li_valor=0; Properties props = new Properties(); props.put( "org.omg.CORBA.ORBClass", "com.sybase.CORBA.ORB" ); org.omg.CORBA.ORB orb = org.omg.CORBA.ORB.init( (String[])null, props ); compras.n_validar val = n_validarHelper.narrow( orb.string_to_object( "compras/n_validar" ) ); li_valor = val.of_validar( usuario, clave ); if (li_valor > 0) { session.setAttribute( "usuario",usuario ); response.sendRedirect( "homepage.htm" ); } else { response.sendRedirect( "errorlogin.jsp" );

}




4. Luego irse al tab Source del editor de Código y antes del código adicionado arriba agregar el siguiente código para importar y acceder a los componentes.

Nota: este código siempre debe ir antes de cualquier referencia a un componente EAServer, porque con esto referenciamos a las clases creadas

5. Grabar y desplegar esta página web.

6. Deploy al website.

7. Verificar la página login.jsp para realizar la validación de ingreso de usuario con el componente que se invoca, probar con usuario: mario y la clave: techera.




Lab 11-2 Invocar los componentes para realizar la Compra por Web

Ahora vamos a continuar con el proceso de registrar una compra por Web, para esto ya tenemos creado varios objetos NVO que realizan dicha actividad y que fueron importados en los laboratorios anteriores.

Objetivos: Después de completar este laboratorio, será capaz de:

• Desplegar un componente al EAServer • Crear stubs para los componentes que pueden ser usados por páginas web

clientes • Llamar métodos de un componente para registrar la compra por Web

Tareas: 1. Examinar y desplegar los objetos NVO n_compras, n_compras_cab,

n_compras_det y verificar los componentes desplegados al EAServer (desplegar componentes se enseñó en el laboratorio anterior, como es el de crear un objeto Project y asignarle los objetos NVO).

2. Importar la página JSP comprarproductos.jsp

3. Crear la página realizarcompra.jsp para realizar el proceso de compras.

4. Grabar y probar las opciones creadas.

Tarea 1: Examinar y desplegar los componentes n_compras, n_compras_cab,

n_compras_det y verificar los componentes desplegados al EAServer

1. El proceso de despliegue y verificación de los componentes fue explicado en el Lab 11.1, aplicar esos pasos, para poder llevar los componentes al EAServer, así como crear los Stubs para poder ser invocados desde las páginas web.




Tarea 2: Importar la página JSP comprarproductos.jsp

1. Desde el directorio de c:\cursos techera\pbwd10\recursos importar la página comprarproductos.jsp, esta página ya tiene configurado el manejo de los objetos session, la invocación de las demás páginas para realizar el proceso de compras, el desarrollador debe de examinar como está compuesta esta página a fin de verificar todos sus valores. Los componentes acceden al package compras y al conection cache compras, tener cuidado con estas configuraciones, porque si se ha cambiado alguno de estos valores no podrás realizar la invocación de esta página.

2. También se debe de modificar la página detalleproductos.jsp a fin de que pueda

recibir el código de producto que se está seleccionando y sea cargado en el objeto session código, en el Editor Web presionar el botón derecho y escoger New Script | Server | JSP | <% …%>, y nos debe abrir activar el área del servidor y le agregaremos el código que se muestra en la figura.




Tarea 3: Crear la página realizarcompras.jsp para realizar el proceso de compras

1. Crear una página nueva nombrada realizarcompras.jsp y que tenga el siguiente

diseño.

4. Luego agregar el código de importación de clases como se enseñó anteriormente

Nota : Esto debe ser agregado antes de la invocación de los componentes




5. En el editor Web presionar el botón derecho y escoger New Script | Server | JSP |

<% …%>, como se muestra en la figura.

6. Luego agregar el siguiente código para instanciar el componente e invocar los métodos para pasarle los valores y pueda generar la compra

String ls_codigo = (String) session.getAttribute("codigo"); String ls_usuario = (String) session.getAttribute("usuario"); String ls_cantidad = (String) session.getAttribute("cantidad"); Properties props = new Properties(); props.put( "org.omg.CORBA.ORBClass", "com.sybase.CORBA.ORB" ); org.omg.CORBA.ORB orb = org.omg.CORBA.ORB.init( (String[])null, props ); compras.n_compras comp = n_comprasHelper.narrow( orb.string_to_object( "compras/n_compras" ) ); String ls_pedido = comp.of_compra( ls_codigo, ls_usuario, ls_cantidad ); //***Ingresa el número de compra en el objeto session pedido session.setAttribute("pedido",ls_pedido);




5. Ahora el número de la compra que es realizada debe ser impresa en la celda de la tabla,

para hacer esto tenemos que irnos al tab Source y en medio de la tabla digitamos lo siguiente:

<%= session.getAttribute("pedido") %>

Y el tab Page debe quedar como se muestra en la gráfica.

Nota: todas las opciones de realizar la compra ya están programadas en los objetos NVO, con esto logramos reutilizar la codificación de los Componenes PowerBuilder.

Tarea 3: Grabar y probar las opciones creadas 1. Grabar y cerrar todas las opciones creadas y probar el aplicativo realizando una Compra. Felicitaciones!! Ya estas realizando una compra invocando componentes EAServer.




Lab 12-1: Web Services desarrollados desde PowerBuilder

La aplicación Compras web tiene un objeto no visual n_calcular en el target compras_business que realiza el cálculo de deudas. Este componente reside en EAServer y es llamado desde una página JSP en el sistema.

Objetivos

Después de completar este laboratorio, será capaz de: • Desplegar un componente al EAServer. • Crear stubs para el componente para ser usados por clientes no PowerBuilder • Trabajar con el Web Services Toolkit • Crear un WSDL Document

Descripción

En este laboratorio, se debe desplegar el NVO n_calcular desde PowerBuilder al EAServer. Se realizarán los pasos necesarios para habilitar este componente para ser usado como un Web Service.

Tareas:

1. Examine y haga Deploy al NVO n_calcular 2. Leer el objeto NVO como un Web Service 3. Crear el WSDL Document(s) requerido usando el Web Services Toolkit

Tarea 1: Examine y haga Deploy al NVO n_calcular 1. Adicionar el target compras_business desde el fólder c:\cursos

techera\pbwd10\recursos

2. Abrir el editor User Object n_calcular en PowerBuilder

3. Cuál es el nombre de la función?

4. Examine el código de la función.

5. Cerrar n_calcular.

6. Click derecho en el target compras_business y seleccionar New…. Desde el menú popup.




7. Seleccionar el EAServer Component Wizard en el tab Project de la ventana de diálogo New.

8. Nombrar el proyecto como p_compras_calcular.

9. Seleccionar el User Object n_calcular.




10. Nombrar el package como calcular (case-sensitive).

11. Aceptar los valores por defecto excepto para especificar un full rebuild en Options dialog. Y el consolidated library será:

C:\Cursos Techera\PBWD10\Estudiante\n_calcular.pbd

12. Click en Finish.

13. Click en el botón Deploy para desplegar el nuevo proyecto creado p_compras_calcular.

14. Examinar el System Tree. Se debe ver el package calcular con el componente.




Tarea 2: Leer el NVO n_calcular como un Web Service

Ejecutar el EAServer Manager 1. Cerrar PowerBuilder.

2. Desde el Windows Start Menú en Programs\Sybase\EAServer, ejecutar EAServer Manager.

3. Logearse al EAServer con el username jagadmin y password en blanco.

4. Abrir el fólder Jaguar dentro de Servers.

5. Examinar el Installed Packages. El componente n_calcular debe estar en el package calcular. Si no se ve esto, se necesitará hacer un refresh al servidor. (Click derecho en Jaguar y seleccionar Shutdown and Start…)




Crear Stubs y Skeletons 6. Click derecho en el package calcular y seleccionar Generate Stub/Skeleton… desde el

menú popup.

7. Check en Generate Stubs, Generate Java Stubs, y seleccionar CORBA desde el listbox. Seleccionar el radio button Generate Java Files y hacer check en el checkbox para Compile Java Stubs. Use el default (…EAServer\html\classes) como el Java Code Base y hacer clic en Next.




8. Click Generate Skeletons y hacer check al checkbox para compilar los skeletons.

9. Click al botón Finish para generar los Stubs y los Skeleton y debe aparecer una ventana como la que se muestra.




Tarea 3: Crear el WSDL Document(s) requerido usando el EAServer Web Services Toolkit

Conectarse al Web Services Toolkit 1. Conectarse al Web Services Toolkit.

a. Para realizar esto utilizaremos el Sybase Web Services en Eclipse, para acceder a esta opción escogeremos desde Inicio de Windows Programs/Sybase/EAServer 5.0/Eclipse.

b. En la primera interacción con el Eclipse el aplicativo será mostrado como

en la imagen anterior, tenemos que configurar para poder ver el Sybase Web Services Toolkit para esto escogeremos las siguienes opciones desde el menú: Window/Open Perspective/Other.




c. Y luego nos mostrará una ventana donde escogeremos Sybase como

opción.

d. Una vez seleccionado EAServer, debemos activar esa opción para mostrarla como inicio para poder crear nuestros Web Services y para esto tenemos que conectarnos desde el Eclipse al EAServer, presionando click derecho en “Default on techera:8080” (poner el nombre de su máquina en vez de techera para los estudiantes).




e. Luego de habernos conectado al EAServer desde el Eclipse el siguiente paso es publicar el componente EAServer como Web Service, haciendo click derecho y escogiendo “Expose as Web Service…” como se muestra en la figura.




f. En esta primera etapa aceptaremos todos los valores por defecto hasta llegar a la opción de Summary como se muestra en la figura y presionaremos Finísh para empezar la creación del Web Service y nos mostrará una Ventana de Mensaje, donde nos indica que se generó Satisfactoriamente.

g. Una vez realizado el proceso de Creación de Web Services, esto debe ser visto en

el Fólder Web Services como se muestra en la figura.




h. El siguiente paso es publicar los archivos WSDL de los Web Services para que puedan ser invocados desde los Proxys de PowerBuilder, hacemos click derecho sobre el Web Services publicado y escogemos la opción “Create JSP Clients” para generar el archivo wsdl.

i. Ahora ya tenemos listo nuestro archivo wsdl y listo para ser trabajados desde los clietes PowerBuilder, Windows o Web, esto es instalado en el directorio C:\Archivos de programa\Sybase\EAServer\Repository\WebApplication\JSPClient\wsdl dependiendo de la configuración de tu instalación, estos archivos deben ser copiados al directorio C:\Archivos de programa\Sybase\EAServer\html, para ser invocados desde los Proxy que vamos a crear.




Lab 13-1: Creando el Tag Library para el Web Services

Objetivos

Después de completar este laboratorio será capaz de: • Ejecutar el Wizard para crear un custom tag con información para llamar a un Web

Service • Identificar los key constructs creados por el Wizard

Descripción

En este laboratorio, se crearará un Tag Libray para el Web Service. Se despliega el PowerBuilder NVO que calcula los montos que se ingresan en el EAServer y son reenviados como un Web Service.

Tareas:

1. Crear el Tag Libray

Tarea 1: Crear el Tag Library 1. Click derecho en el target ComprasWeb y seleccionar New… desde el menú popup.

2. Click al tab Web en la ventana de diálogo. Seleccionar el Wizard JSP Web Service Proxy.




3. Cuando el Wizard pida la ubicación del archivo WSDL, digitar http://nombremaquina:8080/calcular.wsdl. esta es la dirección donde se copia el archivo.

Nota: para este trabajo se tiene que tener corriendo el EAServer. El WSDL también debe ser ubicado en el fólder %JAGUAR%\html. Si estas condiciones no se encuentran, primero debe de |solucionarlas.

4. Seleccionar n_calcular desde la lista de servicios que se encuentran.




9. Activamos el chech del método of_calcular.

10. Luego escogemos la función of_calcular para poder generar el Proxy y luego aceptamos los demás valores por defecto. Y click en Finish para crear el Tag Library.




11. Aceptar todos los valores por defecto. Y click en Finish para crear el Tag Library.

Abrir el System Tree. Se debe ver el calcular_n_calcularService.tld dentro del fólder \Web-Inf \ tlds en el JSP Target.

11. Examinar los otros fólders usando el System Tree. Donde es ubicado el WSDL?

12. buscar el archivo web.xml dentro del directorio de despliegue y hacer Doble-click. El documento XML se abrirá en el browser. Note que esto contiene una referencia al nuevo tag library.

13. Abrir el tag library en el Word Pad. El tag library es ubicado en c:\cursos techera\…\ComprasWeb\Source\WEB-INF\tlds. Note que este tag library contiene la información necesaria para un JSP para una referencia a un método en el Web Service que hemos importado. Para el método, of_calcular: Cuál es el tipo de dato de ingreso? El tipo de dato de salida?




Lab 13-2: Página JSP para Invocar el Web Service

Objetivos

Después de completar este laboratorio, se debe estar hábil para: • Incluir un Web Services Tag desde un Tag Library en una página JSP • Referenciar métodos desde un Web Service en Java

Descripción

En este laboratorio, se creará, se hará deploy y probar una página JSP que invoca un método desde un Web Service. Se creará una opción para calcular y mostrar en una página Web el resultado de los datos solicitados.

Tareas 1. Crear las Páginas JSP para realizar la Invocación del Web Service 2. Adicionar la llamada al Web Service 3. Deploy y Probar

Tarea 1: Crear las Páginas JSP para realizar la Invocación del Web Service

1. Ahora debemos de crear la página que recibirá los datos para procesarlos en el Web Services.

2. debemos de crear una página de nombre calculosdestino.jsp y que recibirá un argumento para procesarlos en el Web Services, click derecho en el target JSP ComprasWeb y seleccionar el tabpage Web y Double-click al icono Web/JSP Page.

3. Aceptar todos los valores por defecto y cambiar el mensaje de “Put your data here” por “Deuda Contraída” y debajo poner “El total de su deuda es :” centrarlos y darles el tamaño adecuado tal como se muestra en la figura.




4. Click derecho al target JSP ComprasWeb y seleccionar el tabpage Web. Double-click al icono Web/JSP Page.




5. Nombrar a la página Web: calculos.jsp cuando el wizard lo pida.

6. Aceptar los valores por defecto.

7. Reemplazar las palabras “Put your data here” con “Ingrese su código”.

8. Adicionar un single-line edit (sle_1) para guardar los datos ingresados y un Command Button (cb_calcular) para invocar el método. Adicionar algún texto para describir la interfaz del usuario.

9. Verificar que los controles estén dentro del tag Form, sino es así tratar de ubicarlos en la posición adecuada como se muestra en la figura anterior, seleccionando, cortando y pegándolo en la ubicación correcta.




10. Luego hacer click derecho en el tag form para poder acceder a sus propiedades e indicarle que abra la página calculosdestino.jsp para que procese los datos que se envían.

11. Luego en la ventana indicarle que direccione la página calculosdestino.jsp y que la opción Submit Method sea “GET”




Tarea 2: Adicionar la llamada al Web Service

Ahora adicionar un page directive para usar el TLD con la página calculodestino.jsp. adicionar un custom tag para definir argumentos para la clase n_calcular del Web Service, y adicionar script del servidor para retornar el resultado de la deuda calculada por el servicio.

1. Click en el tab Components del System Tree. 2. Expandir la lista de las librerias custom tag para mostrar el archivo

n_calcular.tld.

3. Arrastrar el archivo n_calcular.tld a la página en el editor HTML.

Una ventana de diálogo le pedirá que ingrese un prefijo como un shorthand para referirse al archivo TLD.

4. Digitar

ws para el prefijo y click en OK.

PowerBuilder adiciona la directiva taglib a la página.

5. Expandir la lista del archivo n_calcular.tld en el tab Components del System Tree.




6. Arrastrar la clase of_calcular a la parte inferior de la página calculosdestino.jsp en el Page view.

La ventana de diálogo “ws:of_calcular Properties” será mostrado.

7. En la columna Values, digitar los siguienes valores para la lista de atributos y click en OK:




Attribute Name Value in0 <%= request.getParameter ("sle_1") %>

8. En el Page view, el simbolo: <ctl:/> mostrado en la página para indicar que un custom JSP action ha sido adicionado. En el Source view, el código para el custom action tag muestra lo siguiente:

9. <ws:of_calcular in0='<%= request.getParameter ("sle_1") %>' /> 10. Click derecho en el Script view y seleccionar New

Script>Server>JSP>"<%= ... %>" desde el menú pop-up.

El Script view ahora muestra ServerScript[0] en el primer drop-down list box.

11. en el tab Components del System Tree, expandir la lista para la clase of_calcular dentro de la lista n_calcular.tld.

12. Arrastrar la variable n_calcular_of_calcular_returnValue al Script view para ServerScript[0].




13. Grabar todos los cambios realizados.

Tarea 4: Deploy y Probar

1. Grabar el trabajo.

2. Click derecho al target y seleccionar Deploy … desde el menú popup.

3. Click derecho al target y acceder a las propiedades. Seleccionar el Start Page y Deployment configuration desde el dropdowns.

4. Run al Web Target.




Lab 14-1: Realizar los procesos para mejorar la Aplicación Web

Objetivos


Optimizar el acceso a una Aplicación Web

Descripción

En este laboratorio se aplicará lo impartido en la Unidad 14, donde se detalla como mejorar los procesos para acceder a una Aplicación Web.

Esto lo realizará el participante de acuerdo a lo detallado en el contenido de la Unidad 14.

Documents

Laboratorio PBWD10.pdf