Universidad Nacional

José Faustino Sánchez Carrión

Laboratorio Nº 02: Uso de Controles

Objetivos: Después de culminar este laboratorio Ud. podrá realizar

lo siguiente:

 Utilizar un control cuadro de lista.

 Utilizar propiedades y eventos.

 Agregar elementos al cuadro de lista.

 Seleccionar y obtener elementos de lista.

 Eliminar elementos de lista.

Ejercicio 01: Usando el Control ListBox

En este ejercicio Ud. practicará la incorporación de controles (ListBox,
CommandButton, SingleLineEdit, StaticText) dentro de un objeto Window
para familiarizarse con el entorno de desarrollo de Sybase Power Builder.

 Iniciar Power Builder.

1. Active el menú Inicio, elija la opción Programas, seleccione Sybase,

escoja Power Builder 10.0 y seleccione Power Builder 10.0.Power
Builder mostrará la siguiente caja de diálogo:

Computación III Pág. Nº 1

 Sybase Power Builder 11.5

 Añadiendo un Workspace, Application, Window

1. Haga Click en el menú File y elija la opción New, mostrará la siguiente

ventana:

2. Active la Ficha Workspace y seleccione Workspace.

3. Haga Click en el botón OK y aparecerá la siguiente ventana:

4. Elija la ruta donde guardará sus archivos en la sección Guardar en:

5. Luego en la sección Nombre: Escriba KIMAM2 y luego presione el

botón Guardar.

6. Haga Click en el menú File y elija la opción New, en la ventana que se

muestra elija la Ficha Target.

Pág. Nº 2 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

7. Luego seleccione el icono Application y presione el botón OK se

mostrará la siguiente ventana:

8. En la sección Application Name: escribir el nombre de la aplicación

VENTAS.

9. Haga Click en el botón Finish.

10. Luego haga Click en el menú File, elija New elija la ficha PB Object,
seleccione el icono Window tal como se muestra en la siguiente figura:

Computación III Pág. Nº 3

 Sybase Power Builder 11.5

11. Haga Click en el botón OK. Se mostrará la siguiente figura:

 Añadir controles dentro de la ventana.

1. Agregue a la ventana un (01) control StaticText, un (01) control

ListBox, dos (02) controles CommandButton. Tal como se muestra
en la siguiente figura:

Pág. Nº 4 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

2. Configure las propiedades de los controles de acuerdo a los valores

mostrados en la siguiente tabla:

Objeto Propiedad Valor

Window Title PRODUCTOS

Height 932
Width 1390
st_1 Name st_titulo
Text Listado de Productos
Font 12, Bold
TextColor Active Title Bar
lb_1 Name lb_productos
Height 610
Width 770
cb_1 Name cb_agregar
Text &Agregar
Default (Activar)
Font 10, Bold
cb_2 Name cb_salir
Text &Salir
Font 10, Bold

3. Ahora deberá grabar la ventana con el nombre w_productos.

4. Haga Click en el menú File.

5. Elija la opción Save mostrará la siguiente figura:

Computación III Pág. Nº 5

 Sybase Power Builder 11.5

6. En la sección Windows: escribir w_productos, y luego presionar el

botón OK.

7. Ejecute vista previa de la aplicación. Se mostrará la siguiente caja de

diálogo:

 Modificando propiedades en tiempo de diseño

1. Termine la ejecución de la aplicación.

2. Seleccione el control ListBox de la ventana activa y muestre la

ventana de propiedades

Pág. Nº 6 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

3. En la ficha Ítems en la propiedad Item agregue los elementos de

siguiente lista (para añadir más de un elemento presionar [ENTER]
después de cada elemento).

Lectora [ENTER]

Quemador [ENTER]

Monitor [ENTER]

Teclado [ENTER]

Mouse [ENTER]

Scanner [ENTER]

WebCam [ENTER]

Parlantes [ENTER]

Micrófono [ENTER]

8. Ejecute vista previa de la aplicación. Se mostrará la siguiente caja de

diálogo:

9. Termine la ejecución de la aplicación.

10. Seleccione el control ListBox y en la ventana de propiedades active la

opción VScrollBar.

11. Se agregará una barra de desplazamiento vertical al control ListBox.

12. Ejecute nuevamente la vista previa de la aplicación. Se mostrará la

siguiente caja de diálogo:

Computación III Pág. Nº 7

 Sybase Power Builder 11.5

13. Termine la ejecución de la aplicación.

Ejercicio 02: Asociando Código a la Aplicación

En este ejercicio, Ud. agregará código a la aplicación anterior para darle
mayor funcionabilidad al ejecutarse.

 Agregar Código de programa a los controles

1. En el System Tree hacer Doble Click sobre el objeto Application,

aparecerá la ventana de instrucciones (Script), en el evento open
escribir la siguiente línea:

open (w_productos).

2. En el System Tree hacer Doble Click sobre el objeto Window

(w_productos), aparecerá la ventana de trabajo (w_productos).

3. Haga Doble Click en el botón de comando Salir, aparecerá la ventana

de instrucciones (Script).

4. En el objeto cb_salir y el evento clicked escriba las siguientes líneas:

Close (w_productos).

 Modificar propiedades en tiempo de Ejecución

1. En la ventana de instrucciones (Script), seleccione el objeto

w_productos y el evento open para escribir las siguientes líneas:

w_productos.lb_productos.additem("Memoria 128 Kb")

w_productos.lb_productos.additem("Memoria 256 Kb")

Pág. Nº 8 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

w_productos.lb_productos.additem("Tarjeta Fax Modem")

w_productos.lb_productos.additem("Tarjeta de Red" )

w_productos.lb_productos.additem("Tarjeta de Video" )

2. Ejecute la aplicación. Se mostrará la siguiente Caja de diálogo.

3. Observe la adición de elementos en tiempo de ejecución

4. Utilice la Barra de Desplazamiento Vertical

5. Termine la aplicación.

 Dando funcionabilidad al comando Agregar

1. En tiempo de diseño agregar un (01) control SingleLineEdit, tal como

se muestra en la siguiente figura:

Computación III Pág. Nº 9

 Sybase Power Builder 11.5

2. Configure las propiedades de los controles de acuerdo a los valores

mostrados en la siguiente tabla:

Objeto Propiedad Valor

cb_agregar Enabled Desactivar

Default Desactivar

cb_salir Default Activar

sle_1 Name sle_agregar

Text <vacío>
Height 96
Width 1245
3. Hacer Doble Click en el control sle_agregar, mostrará la ventana de
instrucciones (Script).

4. En el objeto sle_agregar y el evento other agregar las siguientes

líneas de código:

if len(this.text)<>0 then

cb_agregar.enabled=true

else

cb_agregar.enabled=false

end if

5. En la ventana de instrucciones (Script), seleccione el objeto

cb_agregar y el evento clicked para escribir las siguientes líneas:

String Producto

Producto= sle_agregar.text

lb_productos.AddItem (Producto)

sle_agregar.text=""

if lb_productos.totalitems( )>0 then

cb_eliminar.enabled=true

cb_limpiar.enabled=true

end if

Pág. Nº 10 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

6. Ejecute la aplicación. Se mostrará la siguiente Caja de diálogo.

7. Observe Los cambios realizados.

8. Termine la aplicación.

Ejercicio 03: Obtener Elemento de Lista

En este ejercicio Ud. Obtendrá un elemento para su procesamiento

asignación o eliminación.
 Obtener elemento de la lista.

1. En el ejercicio anterior agregue dos (02) controles StaticText tal como

se muestra en la figura siguiente:

Computación III Pág. Nº 11

 Sybase Power Builder 11.5

2. Configure las propiedades de los controles de acuerdo a los valores

mostrados en la siguiente tabla:

Objeto Propiedad Valor

w_productos Height 1250

st_1 Name st_mensaje

Text <vacío>
Font 12, Bold
TextColor Red
Height 96
Width 900
st_2 Name st_producto
Text <vacío>
Height 96
Width 1245
Font 12, Bold
TextColor Black
3. Hacer Doble Click en el control lb_productos, mostrará la ventana de
instrucciones (Script).

4. En el objeto lb_productos y el evento selectionchanged agregar las

siguientes líneas de código:

string ps

if lb_productos.totalitems( )>0 then

ps = this.selecteditem( )

st_producto.text = ps

st_mensaje.text="Producto Seleccionado"

cb_eliminar.enabled=true

end if

5. Ejecute la aplicación. Seleccione un producto.

6. Desplazarse con las teclas direccionales.

Pág. Nº 12 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

7. Observe los cambios realizados

8. Se mostrará una figura como la siguiente:

9. Termine la aplicación.

 Eliminar elementos de la lista

1. Agregar dos (02) controles CommandButton tal como se muestra en

la figura siguiente:

Computación III Pág. Nº 13

 Sybase Power Builder 11.5

2. Configure las propiedades de los controles de acuerdo a los valores

mostrados en la siguiente tabla:

Objeto Propiedad Valor

cb_1 Name cb_eliminar

Text &Eliminar
Enabled Desactivar
cb_2 Name cb_limpiar
Text &Limpiar
3. Hacer Doble Click en el control cb_eliminar, mostrará la ventana de
instrucciones (Script).

4. En el objeto cb_eliminar y el evento clicked agregar las siguientes

líneas de código:

integer pp

pp=lb_productos.selectedindex ( )

lb_productos.deleteitem (pp)

st_mensaje.text="Producto Eliminado"

this.enabled=false

if lb_productos.totalitems( )=0 then

cb_limpiar.enabled=false

end if

5. Luego en la misma ventana (Script), seleccione el objeto cb_limpiar y

el evento clicked para escribir las siguientes líneas:

lb_productos.reset( )

st_mensaje.text=""

st_producto.text=""

cb_eliminar.enabled=false

this.enabled=false

st_mensaje.text="Lista Vacía"

Pág. Nº 14 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

6. Ejecute la aplicación.

7. Se mostrará la siguiente figura:

8. Manipular la aplicación y prestar atención a los resultados obtenidos.

9. Finalice la aplicación.

Computación III Pág. Nº 15

 Sybase Power Builder 11.5

Ejercicio 04: Utilizando DropDownListBox

En este ejercicio, Ud. utilizará el control DropDownListBox el cual combina
las características de un control SingleLineEdit y un control ListBox.

 Agregar un Objeto Window

1. Haga Click en el menú File, elija New elija la ficha PB Object,

seleccione el icono Window, y luego presione el botón OK.

2. Se agregará un nuevo objeto Window.

3. Colocar en la nueva ventana de trabajo un (01) control StaticText, Un

(01) control DropDownListBox, cuatro (04) controles CommandButton.
Tal como se muestra en la siguiente figura:

4.

Pág. Nº 16 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

4. Luego el control Tab tendrá dos páginas.

5. En la Primera Página (tabpage_1) colocar los siguientes controles:

Siete (07) Static Text, Cinco (05) SingleLineEdit, Un (01) MultiLineEdit,
Un (01) DropDownListBox, Dos(02) CommandButton.

6. En la Segunda Página (tabpage_2) colocar los siguientes controles:

Siete (07) Static Text, Seis (06) SingleLineEdit, Un (01) GroupBox, Dos
(02) RadioButton, Un (01) ListBox, Un (01) CommandButton, Un (01)
Line.

7. Los controles serán distribuidos tal como muestra las siguientes

figuras:

Computación III Pág. Nº 17

 Sybase Power Builder 11.5

8. Cambiar las propiedades de los objetos de acuerdo a la siguiente tabla

de valores:

NOTA: Para cambiar las propiedades de las páginas seleccionar una

de ellas dando un click en el título, luego ubicar el puntero del mouse
en la parte interior de la página y hacer un click para observar las
propiedades de dicha página. Si la ventana de propiedades no se
hallara visible hacer click secundario y seleccionar la opción Properties
del menú contextual, esto activará dicha ventana para poder realizar
los cambios necesarios.

Objeto Propiedad Valor

Window Title PERSONAL

tab_1 Pointer HyperLink!

tabpage_1 BackColor Sky

Tabtext Datos Generales

Picturename ComputePage5!

TabTextColor Blue

TabBackColor Sky

Pág. Nº 18 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

st_1 Text Código

Font 10, Bold

BackColor Sky

st_2 Text Apellidos

Font 10, Bold

BackColor Sky

st_3 Text Nombres

Font 10, Bold

BackColor Sky

st_4 Text Dirección

Font 10, Bold

BackColor Sky

st_5 Text Observación

Font 10, Bold

BackColor Sky

st_6 Text Télefono

Font 10, Bold

BackColor Sky

st_7 Text Distrito

Font 10, Bold

BackColor Sky

sle_1 Name sle_codigo

Text <vacío>

sle_2 Name sle_apellidos

Text <vacío>

Computación III Pág. Nº 19

 Sybase Power Builder 11.5

sle_3 Name sle_nombres

Text <vacío>

sle_4 Name sle_direccion

Text <vacío>

sle_5 Name sle_telefono

Text <vacío>

mle_1 Name mle_observacion

Text <vacío>

ddlb_1 Name ddlb_distrito

Item Huacho

Huaura

Sayán

Andahuasi

Végueta

Santa María

Hualmay

Primavera

Humaya

Carquín

cb_1 Name cb_agregar

Text &Agregar

Font 10, Bold

cb_2 Name cb_salir

Text &Salir

Font 10, Bold

Pág. Nº 20 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

tabpage_2 BackColor Mint

Tabtext Detalles

Picturename Custom048!

TabTextColor Red

TabBackColor Mint

st_8 Text Categoría

Font 10, Bold

BackColor Mint

st_9 Text Horas Normales

Font 10, Bold

BackColor Mint

st_10 Text Horas Extras

Font 10, Bold

BackColor Mint

st_11 Text Pago X Horas Normales

Font 10, Bold

BackColor Mint

st_12 Text Pago X Horas Extras

Font 10, Bold

BackColor Mint

st_13 Text Bonificación

Font 10, Bold

BackColor Mint

st_14 Text PAGO TOTAL

Font 12, Bold

BackColor Mint

Computación III Pág. Nº 21

 Sybase Power Builder 11.5

sle_6 Name sle_horasn

Text <vacío>

DisplayOnly (Activar)

sle_7 Name sle_horase

Text <vacío>

DisplayOnly (Activar)

sle_8 Name sle_pagon

Text <vacío>

DisplayOnly (Activar)

sle_9 Name sle_pagoe

Text <vacío>

DisplayOnly (Activar)

sle_10 Name sle_bonifica

Text <vacío>

DisplayOnly (Activar)

sle_11 Name sle_pagototal

Text <vacío>

DisplayOnly (Activar)

gb_1 Name gb_condicion

Text Condición

BorderStyle StyleRaised!

Font 10, Bold

TextColor Red

BackColor Mint

Pág. Nº 22 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

rb_1 Name rb_nombrado

Text Nombrado

Font 10, Bold

BackColor Mint

rb_2 Name rb_contratado

Text Contratado

Font 10, Bold

BackColor Mint

lb_1 Name lb_categoria

Enabled (Desactivar)

Item Nivel III

Nivel IV

Nivel V

TextColor Red

cb_3 Name cb_calcular

Text &Calcular

Font 10, Bold

9. Una vez realizado los cambios de las propiedades a los objetos

respectivamente, obtendremos las siguientes figuras:

Computación III Pág. Nº 23

 Sybase Power Builder 11.5

Pág. Nº 24 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

 Agregar Código de programa a los controles

1. Vamos a declarar una variable global llamada Bono de tipo Integer

para la ventana w_personal, esta variable almacenará la bonificación
del trabajador dependiendo de su categoría.

2. En la ventana de instrucciones (Script), seleccione la opción (Declare)

de la lista desplegable que muestra los objetos y funciones de la
ventana.

3. Ahora seleccione la opción Global Variables de la lista tipo de

declaración y escriba la siguiente línea:

Int Bono

4. Seleccione la ventana w_acceso y en el botón Aceptar modificar y

agregar el siguiente código:

Nota: Tenga presente que ya existen 2 líneas de código sólo complete

lo que falta.

If sle_password.text="020769" Then

MessageBox ("Sistema de Seguridad","Bienvenido : " + sle_usuario.text)

Open(w_personal)

Close (w_acceso)

Computación III Pág. Nº 25

 Sybase Power Builder 11.5

Else

sle_usuario.text=""

sle_password.text=""

sle_usuario.setfocus()

MessageBox ("Sistema de Seguridad","Clave Incorrecta ",StopSign!)

End If

5. Luego en el botón Cancelar modificar y agregar el siguiente código:

Nota: Tenga presente que ya existen 2 líneas de código sólo complete

lo que falta.

int Rpta

Rpta=MessageBox("Sistema de Seguridad","Está seguro de Salir",Question!,YesNo!)

If Rpta=1 Then

Close (w_acceso)

Else

Return 1

End if

6. Guarde la nueva ventana con el nombre de w_personal.

7. Ejecute su aplicación, observe los cambios realizados y pruebe la

codificación realizada.

8. Finalice la aplicación para continuar agregando código.

9. Seleccione la ventana w_personal y en el evento CloseQuery

agregue las siguientes líneas de código:

If MessageBox ("Sistema de Seguridad","Desea Salir",Question!,YesNo!)=2 Then

Return 1

End if

Pág. Nº 26 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

10. Luego en la Página 01 seleccione el botón Agregar y el evento

Clicked, adicionar las siguientes líneas de código:

Int Indice

tab_1.tabpage_1.sle_codigo.text=""

tab_1.tabpage_1.sle_apellidos.text=""

tab_1.tabpage_1.sle_nombres.text=""

tab_1.tabpage_1.sle_direccion.text=""

tab_1.tabpage_1.sle_telefono.text=""

tab_1.tabpage_1.mle_observacion.text=""

tab_1.tabpage_1.ddlb_distrito.text=""

tab_1.tabpage_1.sle_codigo.setfocus()

tab_1.tabpage_2.rb_nombrado.checked=false

tab_1.tabpage_2.rb_contratado.checked=false

Indice=tab_1.tabpage_2.lb_categorias.selectItem(0)

tab_1.tabpage_2.lb_categorias.enabled=false

tab_1.tabpage_2.sle_horasn.text=""

tab_1.tabpage_2.sle_horase.text=""

tab_1.tabpage_2.sle_pagon.text=""

tab_1.tabpage_2.sle_pagoe.text=""

tab_1.tabpage_2.sle_bonifica.text=""

tab_1.tabpage_2.sle_pagototal.text=""

11. Seguidamente seleccione el botón Salir y el evento Clicked, añadir la

siguiente línea de código:

Computación III Pág. Nº 27

 Sybase Power Builder 11.5

close(w_personal)

12. Luego en la Página 02 seleccione el objeto rb_nombrado y en el

evento Other, adicionar las siguientes líneas de código:

If tab_1.tabpage_2.rb_nombrado.checked=true Then

lb_categorias.enabled=true

Else

lb_categorias.enabled=false

Bono=0

End if

13. Seguidamente seleccione el objeto rb_contratado y en el evento

Clicked, añadir las siguientes líneas de código:

Int Indice

Indice=tab_1.tabpage_2.lb_categorias.SelectItem(0)

Bono =0

14. Luego seleccione el objeto lb_categorias y en el evento

SelectionChanged, agregar las siguientes líneas de código:

If tab_1.tabpage_2.lb_categorias.SelectedIndex()=1 Then

Bono=30

End If

If tab_1.tabpage_2.lb_categorias.SelectedIndex()=2 Then

Pág. Nº 28 Mg. Henry Marcial Arévalo Flores

 Universidad Nacional
José Faustino Sánchez Carrión

Bono=20

End If

If tab_1.tabpage_2.lb_categorias.SelectedIndex()=3 Then

Bono=15

End If

15. Seguidamente seleccione el botón Calcular y en el evento Clicked,

añadir las siguientes líneas de código:

Int H, HE, Horas, Pago1, Pago2, Total

If tab_1.tabpage_2.rb_nombrado.checked=True Then

Horas=8

Else

Horas=6

End If

H=Integer (tab_1.tabpage_2.sle_horasn.text)

HE=Integer(tab_1.tabpage_2.sle_horase.text)

Pago1=H*Horas

Pago2=HE*Horas*1.5

Total= Pago1 + Pago2 + Bono

tab_1.tabpage_2.sle_pagon.text=String(Pago1)

tab_1.tabpage_2.sle_pagoe.text=String(Pago2)

tab_1.tabpage_2.sle_bonifica.text=String(Bono)

tab_1.tabpage_2.sle_pagototal.text=String(Total)

16. Ejecutar su aplicación y observar los procesos.

Computación III Pág. Nº 29

 Sybase Power Builder 11.5

17. Finalizar su aplicación

18. Salir de Power Builder

Pág. Nº 30 Mg. Henry Marcial Arévalo Flores