Laboratorio PBWD10 PDF

PowerBuilder Web Developer v10.
0 - Laboratorio
Laboratorio
PowerBuilder
Web Developer
V10.0
PBWD10
cursos@techeras.com
www.techeras.com
___________________________________________________________________________________________
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
PowerBuilder Web Developer v10.0 - Laboratorio
Laboratorio
PowerBuilder Web
Developer v9.0
2004 TechEra e-Learning
___________________________________________________________________________________________
Configuraciones
Descripcin
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 flder 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 estndar: 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.
Creacin 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 documentacin de EAServer para crear un
Connection Cache).
___________________________________________________________________________________________
Profile EAServer : Creando un profile de EAServer
El profile de EAServer es una opcin nueva que fue agregada desde la versin 8.0, esta
opcin 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
dilogo 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, nmero 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 flder 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 Aplicacin

PowerBuilder.
Su directorio de trabajo para la aplicacin Compras Web es c:\cursos
techera\pbwd10\estudiante.
___________________________________________________________________________________________
Lab 1-1: Creacin del Ambiente de Desarrollo
Objetivos:
Crear un rea de trabajo para poder realizar la construccin 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: Creacin de un Dynamic File Web Site (opcional)

Objetivos
Despus de completar este laboratorio, se deber ser capaz de:

Crear una pgina por defecto para el Web Site
Configurar el Servidor Web para almacenar un Web site
Descripcin
En este laboratorio, se examina una simple Pgina 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 pgina Web
3. Acceder a la pgina 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 pginas web.
___________________________________________________________________________________________
Tarea 2: Generar una Pgina 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 pgina bienvenidos.htm y aceptar los dems 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 pgina 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 pginas Web.
Lo siguiente es hacer un deploy a la pgina 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 flder Sybase | EAServer.
Iniciar EAServer Manager

2. Iniciar el EAServer Manager (o EAServer Manager) desde el Windows Start Men en el
flder Sybase | EAServer.
3. Seleccionar EAServer Manager en el panel izquierdo del Sybase Central Java Edition.
Click en el botn Connect.
4. Conectarse a Host Name: nombremaquina, con el Puerto: 9000, usando el username:
jagadmin y dejar el password en blanco.
Abrir el flder Jaguar dentro de Servers en el panel izquierdo. Click en el flder

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 nmero de Puerto es incorrecto hacer doble click en el listener e ingresar el nmero
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 ejecucin de Dynamo
Enable Dynamo execution
Cerrar este dilogo.

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 lnea de
direccin 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 interaccin con PowerBuilder para Web.
___________________________________________________________________________________________
Lab 2-1: Creacin de un JSP Target

Objetivos
Despus 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
Descripcin
En este laboratorio te enseamos los mecanismos de configurar un JSP Target y desplegar las
Pginas desde PowerBuilder.
Tareas :
1. Crear un JSP Target
2. Crear una pgina 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 flder

c:\cursos techera\pbwd10\estudiante.
___________________________________________________________________________________________
4. Crear un nuevo JSP Target desde el tab Target de la ventana de dilogo 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 configuracin 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 ttulo ser Bienvenidos con un nombre de archivo bienvenidos.jsp. no hay un style

sheet asociado con esta pgina web, no hay un background. Poner fecha de creacin en
la pgina. Click en finish para crear la pgina web.
___________________________________________________________________________________________
Use el toolbar para insertar un texto y tamao de tu seleccin. Poner el texto de:
Bienvenidos a PowerBuilder Web en la pgina 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 pgina
web.
La pgina web debe lucir as:
Grabar la pgina web y salir del editor web.
Tarea 3: Deploy y Run al JSP

1. Asegurarse que EAServer est ejecutndose 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 flder Jaguar dentro de Servers. Abrir el flder Listener y examinar el listener
HTTP. El listener HTTP es: ____________________
___________________________________________________________________________________________
4. Cerrar el EAServer Manager. Reiniciar PowerBuilder sino est ejecutndose.

5. En PowerBuilder, click derecho en el target ComprasWeb y acceder a las propiedades
del men popup.
6. Editar la configuracin 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 flder Web Applications. Se debe observar la
nueva aplicacin 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 Aplicacin Compras

Web
En esta parte vamos a disear la plantilla para poder ponerla a las pginas web para que
tengan un diseo 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 aplicacin
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 todava.

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 imgenes no se encuentran en el directorio, importarlas

desde el directorio c:\cursos techera\pbwd10\imagenes, con la opcin Import
Flder
___________________________________________________________________________________________
Lab 3-2: Crear el FrameSet para la Aplicacin y Asociar las Pginas

Web con los Frames
Ahora vamos a crear nuestra pgina de inicio para el aplicativo, con esto daremos inicio y
podremos ver todas las opciones de la Aplicacin 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 pgina web left.jsp. Y especificar
principal.css para el Cascading Style Sheet. Aceptar todos los dems 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
Clculos
Login
6. Se puede tambin 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 pgina 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 pgina web. Nombrar la nueva pgina
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 tamao 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 opcin 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 programacin Drag &
Drop. Grabar y cerrar la pgina web.
13. Click derecho al target ComprasWeb y seleccionar New desde el men popup.
14. Usando el wizard Web/JSP Page, crear una nueva pgina web. Nombrar la nueva pgina
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 pgina.
16. Grabar y Cerrar la pgina 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 posicin.
19. Usando la programacin 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 pgina EnConstruccion y el Link a las pginas

1. Importar EnConstruccion.jsp desde el flder c:\cursos techera\pbwd10\recursos
2. Click al botn Hyperlink.
3. Poner las propiedades de hyperlink de los enlaces a EnConstruccion.jsp. Est pgina
enlazada debe ser abierta en el frame right.
___________________________________________________________________________________________
Lab 4-1: Crear la Pgina de Login

Objetivos
Despus de completar este laboratorio, se debe estar hbil para:

Crear forms para enviar los ingresos de usuarios y los componentes necesarios.
Descripcin
En este laboratorio, se crear una pantalla Login para el Web Site ComprasWeb. Se crear el
Form para enviar la informacin del Login al servidor. Estos forms sern como los que se
muestra a continuacin
Tareas a realizar
1. Crear el form Login
2. Enlazar a las pginas
3. Probar la Aplicacin
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 botn OK. Presionar el
botn Next en la siguiente pgina.
___________________________________________________________________________________________
3. Digitar "Login" para el Ttulo y presionar Next.
4. Presionar el botn "Next"

5. Seleccionar "principal.css" con el style sheet.
6. Aceptar los dems valores del wizard haciendo click en el botn Next hasta llegar al
botn "Finish" para finalizar el wizard.
7. aBorrar el texto "Put your data here" de la pgina 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 despus del texto "Login".
10. Desde el tab Language en el System tree, abrir el primer flder "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 despus del primer tag "form"
12. Desde el men Table seleccionar el Wizard Table
13. Nmero de Filas = 2, click en Next
14. Nmero de Columnas = 2, click en Finish, y presionar el botn 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 todava est en la
columna seleccionada, seleccionar desde el men "Insert" => "Form Field" => "Single
Line Text"
19. En la ventana de dilogo 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 dilogo dar al botn un tipo de "Submit", un nombre de
"cb_aceptar" y una etiqueta de "Aceptar". Presionar el botn OK. Centrar el botn
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 dilogo 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 continuacin
26. Grabar y Cerrar esta pgina web.
___________________________________________________________________________________________
27. Importar la pgina validarlogin.jsp desde el directorio c:\cursos

techera\pbwd10\recursos, esta pgina tiene cdigo comentado que luego ser cambiado y
activado.
28. Abrir la pgina 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 pgina, click en el enlace "Login". En el laboratorio posterior se agregar
las validaciones de cdigo.
Tarea 2: Enlazar a las pginas
1. Abrir la pgina Login.

2. Click derecho en el tag "form".
3. Desde el men popup seleccionar "Form FORM1 Properties"
___________________________________________________________________________________________
4. En la ventana de dilogo Form Properties seleccionar la pgina "validarlogin.jsp" como

el URL destino usando el botn "ellipses".
5. Grabar y cerrar la pgina.

6. Abrir la pgina left.jsp y verificar los enlaces de los textos, todos los dems deben
apuntar a la pgina EnConstruccion.jsp y todos deben de tener el Target Window or
Frame en right.
___________________________________________________________________________________________
Tarea 3: Probar la Aplicacin

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
Despus de completar este laboratorio, ser capaz de:
Escribir funciones JavaScript (scripts client-side).
Escribir JavaScript en los eventos
Insertar cdigo JavaScript desde archivos externos en un script
Usar el System Tree para aprender ms sobre JavaScript
Descripcin
En este laboratorio, se usar la pgina Login creada anteriormente y se adicionar scripts
Tareas
1. Validar el ingreso de datos

2. Probar la aplicacin
Tarea 1: Validar el Campo Usuario

Abrir la pgina login.jsp del target "ComprasWeb".
___________________________________________________________________________________________
Click derecho en el editor Web de cdigo 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
cdigo que se muestra en la figura.
Tarea 2: Probar la aplicacin

Guardar Los cambios realizados
Abrir un Browser y digitar la URL para probar el cdigo ingresado.
http://nombremaquina:8080/ComprasWeb/login.jsp
___________________________________________________________________________________________
Lab 6-1 Crear el Web DataWindow en un JSP

Objetivos
Usar el Web DataWindow Page para crear un JSP con un DataWindow

Deploy y probar un Java Server Page en un Browser
Descripcin
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 Pginas 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 dilogo New..
4. Seleccionar el wizard Web/JSP DataWindow Page y click en OK.
___________________________________________________________________________________________
5. El nombre de la pgina 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 librera PowerBuilder como el origen. La librera 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 pgina JSP en el editor web. Se debe ver el control
DataWindow en la pgina 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 conexin a la base de datos est configurado para
realizar la recuperacin de datos automticamente.
Insertar el texto encima del DataWindow: Tipo de Productos.
15. Irse a la pgina left.jsp y modificar el Hyperlink del texto Productos y modificarlo
para que acceda a la pgina 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 opcin Productos.
Nota: sino se ven datos, verificar el tab de la conexin del DataWindow y asegurarse que
compras est seleccionado. Si esto est seleccionado y todava no se obtienen datos.
Verificar la conexin a la base de datos. (esto se configur en los pasos anteriores).
___________________________________________________________________________________________
Tarea 4: Crear Pginas Web para Clientes y Pedidos
1. Crear las pginas 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 pgina Web para la lista de Productos y
enlazarlos con sus respectivos enlaces.
3. Luego realizar el Deploy a las pginas y realizar las pruebas respectivas:
Nota: para ahorrar tiempo, tambin puede importar esas pginas desde el directorio de
soluciones, pero tiene que tener en cuenta el nombre del servidor, el nombre del web target y
dems opciones de configuracin.
___________________________________________________________________________________________
Lab 6-2 Adicionando cdigo Java

Objetivos
Poder Adicionar cdigo Java en una Pgina JSP
Deploy y probar el Java Server Page en un Browser
Descripcin
Se modificar la pgina tipoproductos.jsp creado en el laboratorio anterior para llamar a la
funcin para imprimir la fecha en el bottom de la Pgina 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 despus 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 despus 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 cdigo, Java es case-sensitive. No hay
un punto y coma despus del fragmento de cdigo.
Tarea 2: Deploy y Run

1. Grabar la pgina 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 codificacin.
___________________________________________________________________________________________
Lab 7-1: Generar el Web DataWindow Containers
Este laboratorio mostrar como crear y desplegar un Web DataWindow Container al

EAServer.
Objetivos
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 Pgina Web.
Descripcin
En este laboratorio, se crear un Web DataWindow Container y se desplegar al EAServer.
Luego se crear/modificar una Pgina 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 Pgina 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. Tambin seleccionar la opcin 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 botn 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 Pgina Web
1. Abrir la Pgina 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 Pgina Web.
6. Deploy a la Pgina Web.
7. Probar la pgina accediendo con el URL como se hizo en el laboratorio anterior.
___________________________________________________________________________________________
Lab 8-1 Crear Pginas Web con Ordenamiento en los DataWindows

Objetivos

Crear un 4GL JSP Web Page
Adicionar controles server-scriptable
Codificar el server-scripts que se unen a los eventos del control
Descripcin
Se crear un 4GL Java Server Page que contiene un DataWindow mostrando los Productos.
El JSP mostrar al usuario para sortear un reporte por descripcin 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 dilogo New
Nombrar a la pgina productos.jsp y continuar con el wizard:
No hay un style sheet para esta pgina. Aceptar los valores por defecto en las opciones
image y el background. Check a los checkboxes para crear un header y footer en esta
pgina.
Seleccionar choice of display de runtime errors o trace. Esto puede ser desactivado
despus.
No hay parmetros de pgina para esta pgina. Se puede tambin saltar los componentes
EAServer porque esta pgina no hace referencia a ningn EJB u otro componente.
Click en Finish para finalizar el Wizard.
Click derecho a la pgina web y examinar las propiedades de pgina. 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. Despus 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 opcin 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 librera comprasdw.pbl en el target
comprasdw. Cules 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 sern 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 cdigo del servidor para que
al hacer click en este botn invoque esa funcionalidad? ServerAction
Debajo de los controles de esta pgina agregar un Web DataWindow DTC. Asegurarse de que
est con Server-Scriptable. Especificar una conexin a la base de datos compras, y un objeto
DataWindow de d_grid_productos ubicado en la librera 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 pgina web. Si alguno de los controles no son
mostrados, verificar la propiedad server-scriptable del control.
Abrir los mtodos disponibles desde el Control DataWindow. Qu mtodos deben ser
llamados para realizar el ordenamiento?
Abrir las propiedades disponibles para el checkbox y el control Listbox. Que propiedades
contendrn la informacin 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

provedo para Ud. en este mdulo, 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 mtodo 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 cdigo es case-sensitive
3. Escribir el cdigo del servidor para el command button para:
a. Usar el seleccionar datos (para la descripcin y precio)

b. Sortear ascendentemente o descendentemente de acuerdo al checkbox
c. Realizar el sort
Luego de haber ingresado el cdigo en el evento ServerAction(), la codificacin 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 Pginas Web con Hyperlinks

En este laboratorio, se debe adicionar funcionalidad al DataWindow para la aplicacin 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
Despus de completar este laboratorio, podr realizar:
Crear una Pgina Web conteniendo un Web DataWindow DTC

Modificar las propiedades del Web DataWindow DTC para hacer un Hyperlink
Descripcin
En este laboratorio, se revisar algunos Objetos DataWindow para ser usados en la Aplicacin
de Compras Web. Y se crear las pginas para mostrar los detalles de los productos. Esta
pgina 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 Pgina Web del Detalle del Producto
3. Actualizar los Hyperlinks
4. Deploy y probar la aplicacin
Tarea 1: Configurar el Ambiente del DataWindow
Click derecho en la librera comprasdw.pbl en el System Tree y verificar el objeto

DataWindow d_mto_productos, verificar si tiene asignado un Retrieval Argument al cdigo
de producto.
Realizar las pruebas en el preview del DataWindow para verificar la recuperacin de datos.
___________________________________________________________________________________________
Tarea 2: Crear la pgina Web para el detalle de los Productos
Click derecho en el Target ComprasWeb y crear una nueva Pgina Web

detalleproductos.jsp usando el Web/JSP Page Wizard.
Aceptar los dems valores por defecto para crear la pgina 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 flder c:\cursos

techera\pbwd10\recursos. Seleccionar la librera 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 Pgina Web lucir como se muestra en el Editor Web:
Examinar el script.
___________________________________________________________________________________________
Tarea 3: Actualizar los Hyperlinks
1. Modificar la pgina de productos.jsp para enlazarla con la pgina detalleproductos.jsp

en el frame right, para esto tenemos que abrir la pgina productos.jsp y en el tab LinkTo
realizaremos dichas modificaciones.
2. Presionaremos botn derecho en el Web DataWindow y escogeremos la opcin Sybase

Web DataWindow DTC 10.0 Properties
___________________________________________________________________________________________
3. Luego irse al tab Link To para escoger el campo descripcin y hacer doble click en
medio de la opcin para referenciar con la pgina destino.
___________________________________________________________________________________________
4. Escoger la pgina detalleproductos.jsp como destino, y en los parmetros 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 pgina debe quedar tal como se muestra a
continuacin:
___________________________________________________________________________________________
6. Cerrar y grabar la pgina seleccionada.

7. Abrir la pgina 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 pgina productos.jsp para pasarle el
cdigo de tipo de producto y mostrarlo en el frame right.
10. Grabar y cerrar la pgina tipoproductos.jsp
Tarea 4: Deploy y Probar la Aplicacin
Cerrar y Grabar cualquier Pgina Web abierta.

Click derecho al Target ComprasWeb y Deploy.
___________________________________________________________________________________________
Otros temas para solucionar problemas:
1. Examinar el log de EAServer en el flder %EAServer%\bin

2. Verificar para asegurarse que la conexin a la base de datos compras est asignado
en las propiedades del DTC.
3. Asegurarse que la pgina de inicio para Ejecutar es login.jsp.
4. Ejecutar la Aplicacin.
5. Probar lo siguiente:
6. Loguearse al sistema.
7. Probar todos los Hyperlinks.
8. Examinar la pgina de detalle de productos. Se debe ver los datos. Si los datos no son
presentados, verificar la conexin a la base de datos.
9. Se debe estar habilitado para retroceder a la pgina de inicio.
___________________________________________________________________________________________
Lab 9-2: Crear la Pgina de Pedidos

En este laboratorio, se continuar para adicionar la funcionalidad a los DataWindows de la
Aplicacin de Compras. Se Modificar una Pgina Web para hacer los pedidos.
Objetivos:
Despus de completar este laboratorio, se debe estar preparado para:

Modificar las propiedades del Web DataWindow DTC
En este laboratorio, se Modificar una Pgina Web para ver los pedidos que van a realizarse y
para registralos en el Sistema.
Tareas:
Configurar la pgina de las compras

Deploy y Probar la Aplicacin
Tarea 1: Configurar la pgina de las compras
1. Click en el target ComprasWeb.

2. Abrir la pgina 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, tambin le puede agregar imgenes para mejorar la apariencia de esta pgina.
Esta pgina tendr la lgica necesaria para realizar los pedidos para la compra por Web,
adems de tener un enlace.
___________________________________________________________________________________________
4. El proceso de captura de valores y la realizacin de compras se realizar mediante la

invocacin de Componentes de Negocio que ya se encuentran creados y sern invocados
en los siguientes laboratorios.
Tarea 2: Deploy y Probar la Aplicacin

Click derecho al target ComprasWeb y seleccionar Deploy desde el men popup.
Asegurarse que el EAServer est ejecutndose. Inicializarlo si es necesario.
Ejecutar la Aplicacin. Asegurarse que todos los hyperlinks trabajen.
___________________________________________________________________________________________
Lab 10-1: Crear una Pgina 4GL Java Server con controles server-
scriptable
Objetivos
Crear controles con codificacin del lado del servidor
Descripcin
En este laboratorio, se codificar los eventos del lado del servidor de los controles para poder
invocar procesos de actualizacin de los DataWindows.
Tareas:
Modificar la Pgina con el Web DataWindow.
Agregar un Control Command Button y la codificacin del Servidor.
Probar la aplicacin.
Tarea 1: Modificar la Pgina con el Web DataWindow
1. Abrir la pgina clientes.jsp.

2. Verificar que la conexin 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 diseo de la pgina web y escoger Page Properties y
en tab Page activar el check Enable 4GL Web Server Side Event Model, con esto la
pgina clientes.jsp ya es una pgina 4GL.
___________________________________________________________________________________________
Tarea 2: Agregar un control Command Button y la codificacin del lado del

servidor
1. Agregar un control Command Button debajo del control DataWindow en la pgina Web y
nombrarlo cb_grabar y ponerle una etiqueta de Grabar.
2. Verificar en las propiedades del control Command Button que la opcin Server Side
Scriptable est habilitada, para que se pueda realizar invocaciones del lado del servidor.
Si esta opcin est bloqueada para activarla, verificar que la pgina sea una 4GL (en Page
Properties)
___________________________________________________________________________________________
3. Agregar el cdigo de Actualizacin para un Web DataWindow en el evento

ServerAction() como se muestra a continuacin:
Nota: el cdigo agregado es similar como se realiza en PowerScript a diferencia de esto que
es Java y por eso termina con punto y coma.
1. Grabar todas las opciones agregadas.

2. Acceder a la Aplicacin para probar la actualizacin de datos en la opcin Clientes
Nota: Otro tipo de poder realizar actualizacin 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 informacin del Objeto Session

Objetivos
Usar el objeto Session para almacenar informacin de usuario

Crear scripts del lado del servidor
Descripcin
En este laboratorio, se almacenar informacin de usuario en el objeto session para ser

validado con la base de datos.
Tareas:
1. Inicializar el objeto session.

2. Crear una pgina errorlogin.jsp.
3. Probar la aplicacin.
___________________________________________________________________________________________
Tarea 1: Inicializar el objeto Session
1. Abrir la pgina validarlogin.jsp.

2. Modificar el script de la validacin del login.
a. Si la informacin del login es vlida, almacenar los contenidos en las variables de
usuario del objeto session. El cdigo para completar esto debe estar antes de
cualquier direccin.
b. Click derecho en el rea de cdigo y seleccione lo siguiente:
New>Script>Server>JSP><%...%>.
c. Luego agregue el siguiente cdigo (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 pgina ErrorLogin

1. Basado en el ejemplo de la pantalla, crear una pgina JSP nombrada errorlogin.jsp.
Esta pgina es cargada cuando el usuario no est registrado en el sistema.
En el texto del Login hacer un enlace a la pgina login.jsp.

2. Grabar errorlogin.jsp.
1. Deploy al Web Target.

2. Iniciar el Browser con la opcin 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 pgina JSP que
realice esta tarea.
Objetivos
1. Desplegar un componente al EAServer

2. Crear stubs para los componentes que pueden ser usados por pginas web clientes
3. Llamar mtodos de un componente
Tareas:
1. Examinar y desplegar el componente n_validar
2. Verificar los componentes desplegados al EAServer
3. Modificar la pgina 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 direccin c:\cursos

techera\pbwd10\recursos.
2. Click derecho en la librera compras_business.pbl y seleccionar Import desde el
men popup.
3. Importar n_validar.sru desde el flder c:\cursos techera\pbwd10\recursos.
___________________________________________________________________________________________
4. Importar los dems archivos: n_calcular.sru, n_compras.sru, n_compras_cabecera.sru

y n_compras_detalle.sru desde el flder c:\cursos techera\pbwd10\recursos.
5. Abrir n_validar en el editor User Object en PowerBuilder.

6. Cul es el nombre de la funcin? ____________________________________
7. Cules son los argumentos para la funcin of_validar?
______________________________________________________
8. Examinar el cdigo de la funcin.
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 dilogo
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 librera consolidada ser: c:\cursos techera
\pbwd10\recursos\compras_business.pbd
17. Click en Finish.
18. Click al botn 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 flder Jaguar dentro de Servers.
___________________________________________________________________________________________
Examinar el flder 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 botn Generate.
___________________________________________________________________________________________
Tarea 3: Modificar la Pgina Web validarlogin.jsp
1. Irse al target ComprasWeb en PowerBuilder y abrir la pgina validarlogin.jsp.

2. En el editor Web irse al cdigo del servidor agregado anteriormente
3. El cdigo mostrado en la figura anterior ser modificado para que quede como se muestra
a continuacin (el cdigo en negrita ha sido agregado):
//***codigo de invocacin 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 Cdigo y antes del cdigo adicionado arriba
agregar el siguiente cdigo para importar y acceder a los componentes.
Nota: este cdigo siempre debe ir antes de cualquier referencia a un componente

EAServer, porque con esto referenciamos a las clases creadas
5. Grabar y desplegar esta pgina web.

6. Deploy al website.
7. Verificar la pgina login.jsp para realizar la validacin 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:
Desplegar un componente al EAServer
Crear stubs para los componentes que pueden ser usados por pginas web
clientes
Llamar mtodos 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 pgina JSP comprarproductos.jsp
3. Crear la pgina 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 verificacin 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 pginas web.
___________________________________________________________________________________________
Tarea 2: Importar la pgina JSP comprarproductos.jsp
1. Desde el directorio de c:\cursos techera\pbwd10\recursos importar la pgina

comprarproductos.jsp, esta pgina ya tiene configurado el manejo de los objetos
session, la invocacin de las dems pginas para realizar el proceso de compras, el
desarrollador debe de examinar como est compuesta esta pgina 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 podrs realizar la invocacin de esta pgina.
2. Tambin se debe de modificar la pgina detalleproductos.jsp a fin de que pueda

recibir el cdigo de producto que se est seleccionando y sea cargado en el objeto
session cdigo, en el Editor Web presionar el botn derecho y escoger New Script |
Server | JSP | <% %>, y nos debe abrir activar el rea del servidor y le
agregaremos el cdigo que se muestra en la figura.
___________________________________________________________________________________________
Tarea 3: Crear la pgina realizarcompras.jsp para realizar el proceso de

compras
1. Crear una pgina nueva nombrada realizarcompras.jsp y que tenga el siguiente

diseo.
4. Luego agregar el cdigo de importacin de clases como se ense anteriormente
Nota : Esto debe ser agregado antes de la invocacin de los componentes
___________________________________________________________________________________________
5. En el editor Web presionar el botn derecho y escoger New Script | Server | JSP |
<% %>, como se muestra en la figura.
6. Luego agregar el siguiente cdigo para instanciar el componente e invocar los

mtodos 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 nmero de compra en el objeto session pedido
session.setAttribute("pedido",ls_pedido);
___________________________________________________________________________________________
5. Ahora el nmero 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 grfica.
Nota: todas las opciones de realizar la compra ya estn programadas en los objetos NVO,
con esto logramos reutilizar la codificacin 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 aplicacin Compras web tiene un objeto no visual n_calcular en el target
compras_business que realiza el clculo de deudas. Este componente reside en EAServer y
es llamado desde una pgina JSP en el sistema.
Objetivos
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
Descripcin
En este laboratorio, se debe desplegar el NVO n_calcular desde PowerBuilder al EAServer.
Se realizarn 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 flder c:\cursos
techera\pbwd10\recursos
2. Abrir el editor User Object n_calcular en PowerBuilder
3. Cul es el nombre de la funcin?
4. Examine el cdigo de la funcin.

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 dilogo

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 botn 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 flder 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 botn 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 opcin escogeremos desde Inicio de Windows
Programs/Sybase/EAServer 5.0/Eclipse.
b. En la primera interaccin 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

opcin.
d. Una vez seleccionado EAServer, debemos activar esa opcin 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 mquina
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
opcin de Summary como se muestra en la figura y presionaremos Finsh para
empezar la creacin del Web Service y nos mostrar una Ventana de Mensaje,
donde nos indica que se gener Satisfactoriamente.
g. Una vez realizado el proceso de Creacin de Web Services, esto debe ser visto en
el Flder 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 opcin 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 configuracin de tu instalacin, 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
Ejecutar el Wizard para crear un custom tag con informacin para llamar a un Web
Service
Identificar los key constructs creados por el Wizard
Descripcin
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 dilogo. Seleccionar el Wizard JSP Web Service
Proxy.
___________________________________________________________________________________________
3. Cuando el Wizard pida la ubicacin del archivo WSDL, digitar

http://nombremaquina:8080/calcular.wsdl. esta es la direccin donde se copia el
archivo.
Nota: para este trabajo se tiene que tener corriendo el EAServer. El WSDL tambin debe ser
ubicado en el flder %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 mtodo of_calcular.
10. Luego escogemos la funcin of_calcular para poder generar el Proxy y luego aceptamos
los dems 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 flder
\Web-Inf \ tlds en el JSP Target.
11. Examinar los otros flders 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
informacin necesaria para un JSP para una referencia a un mtodo en el Web Service
que hemos importado. Para el mtodo, of_calcular: Cul es el tipo de dato de ingreso?
El tipo de dato de salida?
___________________________________________________________________________________________
Lab 13-2: Pgina JSP para Invocar el Web Service

Objetivos
Despus de completar este laboratorio, se debe estar hbil para:
Incluir un Web Services Tag desde un Tag Library en una pgina JSP
Referenciar mtodos desde un Web Service en Java
Descripcin
En este laboratorio, se crear, se har deploy y probar una pgina JSP que invoca un mtodo
desde un Web Service. Se crear una opcin para calcular y mostrar en una pgina Web el
resultado de los datos solicitados.
Tareas
1. Crear las Pginas JSP para realizar la Invocacin del Web Service
2. Adicionar la llamada al Web Service
3. Deploy y Probar
Tarea 1: Crear las Pginas JSP para realizar la Invocacin del Web Service
1. Ahora debemos de crear la pgina que recibir los datos para procesarlos en el Web
Services.
2. debemos de crear una pgina 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 Contrada y debajo poner El total de su deuda es : centrarlos y
darles el tamao 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 pgina 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 cdigo.
8. Adicionar un single-line edit (sle_1) para guardar los datos ingresados y un Command
Button (cb_calcular) para invocar el mtodo. Adicionar algn texto para describir la
interfaz del usuario.
9. Verificar que los controles estn dentro del tag Form, sino es as tratar de ubicarlos en
la posicin adecuada como se muestra en la figura anterior, seleccionando, cortando y
pegndolo en la ubicacin correcta.
___________________________________________________________________________________________
10. Luego hacer click derecho en el tag form para poder acceder a sus propiedades e
indicarle que abra la pgina calculosdestino.jsp para que procese los datos que se
envan.
11. Luego en la ventana indicarle que direccione la pgina calculosdestino.jsp y que la

opcin Submit Method sea GET
___________________________________________________________________________________________
Tarea 2: Adicionar la llamada al Web Service
Ahora adicionar un page directive para usar el TLD con la pgina 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 pgina en el editor HTML.
Una ventana de dilogo 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 pgina.
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 pgina

calculosdestino.jsp en el Page view.
La ventana de dilogo 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 pgina para indicar que un

custom JSP action ha sido adicionado. En el Source view, el cdigo 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 Aplicacin Web

Objetivos
Optimizar el acceso a una Aplicacin Web
Descripcin
En este laboratorio se aplicar lo impartido en la Unidad 14, donde se detalla como mejorar
los procesos para acceder a una Aplicacin Web.
Esto lo realizar el participante de acuerdo a lo detallado en el contenido de la Unidad 14.
___________________________________________________________________________________________

Laboratorio PBWD10 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laboratorio PBWD10 PDF

Uploaded by

Copyright:

Available Formats

PowerBuilder Web Developer v10.

Configurar el ODBC y el DB Profile PowerBuilder

Un System DSN con el nombre de compras debe apuntar a c:\cursos

Creacin del Connection Cache en el EAServer Manager

Profile EAServer : Creando un profile de EAServer

Estructura de Directorios de los Archivos del Laboratorio

Asegurarse que se encuentra en el Directorio correcto y en una Aplicacin

Lab 1-1: Creacin del Ambiente de Desarrollo

Lab 1-2: Creacin de un Dynamic File Web Site (opcional)

Despus de completar este laboratorio, se deber ser capaz de:

1. Crear un Web site en el tab Target

Tarea 1: Crear un Web site en el Tab Target

Tarea 2: Generar una Pgina Web

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

Lo siguiente es hacer un deploy a la pgina creada en el site seleccionado.

Tarea 3: Configurar el Web Server

Iniciar EAServer Manager

Abrir el flder Jaguar dentro de Servers en el panel izquierdo. Click en el flder

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

Cerrar este dilogo.

Tarea 4: Probar el Target

1. Ejecutar el Internet Explorer o Netscape Navigator.

Nota: Si el website de ejemplo no aparece, se necesitar reiniciar el servidor Jaguar. Esto se

Felicitaciones haz realizado tu primera interaccin con PowerBuilder para Web.

Lab 2-1: Creacin de un JSP Target

Tarea 1: Crear un JSP Target

3. Abrir el workspace cursoweb.pbw (si es que no se encuentra abierto) en el flder

Tarea 2: Crear un Java Server Page

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

3. El ttulo ser Bienvenidos con un nombre de archivo bienvenidos.jsp. no hay un style

5. Click derecho en el target ComprasWeb en el System Tree y seleccionar Import File.

Grabar la pgina web y salir del editor web.

Tarea 3: Deploy y Run al JSP

4. Cerrar el EAServer Manager. Reiniciar PowerBuilder sino est ejecutndose.

7. Examinar el Deployment Profile dentro de Server Information en el treeview en el

8. Cerrar las propiedades de Deployment.

9. Click derecho al target ComprasWeb y seleccionar Deploy desde el men popup.

En el Internet Explorer, digitar el URL:

Lab 3-1: Crear el Cascading Style Sheet para la Aplicacin Compras

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

5. Grabar estiloweb.css pero no lo cierre todava.

NOTA: Si las imgenes no se encuentran en el directorio, importarlas

Lab 3-2: Crear el FrameSet para la Aplicacin y Asociar las Pginas

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

Importar la pgina EnConstruccion y el Link a las pginas

Lab 4-1: Crear la Pgina de Login

Despus de completar este laboratorio, se debe estar hbil para:

Tarea 1: Crear el form Login

3. Digitar "Login" para el Ttulo y presionar Next.

4. Presionar el botn "Next"

12. Desde el men Table seleccionar el Wizard Table

13. Nmero de Filas = 2, click en Next

14. Nmero de Columnas = 2, click en Finish, y presionar el botn OK en la ltima pantalla.

25. Ahora la pantalla de login debe lucir como se muestra a continuacin

26. Grabar y Cerrar esta pgina web.

27. Importar la pgina validarlogin.jsp desde el directorio c:\cursos

29. Abrir homepage.htm en el Editor Web. Click en el tab "Preview". Mientras se va

Tarea 2: Enlazar a las pginas

1. Abrir la pgina Login.

4. En la ventana de dilogo Form Properties seleccionar la pgina "validarlogin.jsp" como

5. Grabar y cerrar la pgina.

Tarea 3: Probar la Aplicacin

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