Tutor Embedded Visual Basic - Capitulo 4

Por Roberto Alvarado

Capitulo 4

Descripción de la Aplicación Control de Tareas

La aplicación Control de Tareas, para nosotros los informáticos puede ser desarrollo de una rutina de una aplicación en la que estemos trabajando, el helpdesk que le demos a los usuarios de la compañía en la utilización de las diferentes aplicaciones de escritorio que se manejen y de las aplicaciones propias de la compañía, la instalación y configuración de un computador para alguna de las instalaciones de la compañía, etc.

Esta pequeña, pero practica aplicación nos permitirá ver o justificar en que nos gastamos el tiempo, además nos puede servir para facturar a nuestros clientes por servicios prestados.

La aplicación permitirá crear una descripción muy básica de los clientes, un tipo de aplicación, al cual le estamos trabajando, una descripción del problema o inconveniente a resolver, el valor del servicio, el tiempo que llevamos gastado en la tarea, si la tarea esta activa, en pausa o terminada.

Empezando una Nueva Aplicación

Para esto vamos a crear un nuevo proyecto y escogemos la opción de Pocket PC 2002 como tipo de proyecto.

Configurando el Proyecto

Vamos a ir al menú Project y luego Project1, Properties..., Nos va a aparecer la siguiente pantalla en la cual vamos a rellenar en la casilla de Project Name con Tareas, en la casilla Project Description, Aplicacion para el Control de Tiempos y Tareas y presionamos el botón OK.

En la barra de menús escogemos la opción Project, y en el submenú la opción Components, de la lista que aparece vamos a escoger los siguientes componentes:

• Microsoft CE PictureBox Control 3.0
• Microsoft PocketPC MenuBar Control 3.0

Con esto vamos a crear una pantalla con los siguientes datos dentro de un control frame, a continuación les muestro como debe quedar nuestra pantalla:

Incluimos cuatro controles PictureBox en los cuales vamos a mostrar las gráficas para empezar una nueva tarea, para poner en Pausa una tarea que estemos desarrollando, para Terminar una tarea en proceso o para Cancelar una Tarea. Son los cuatro botones que aparecen en la parte inferior del frame.

Hacemos doble clic sobre el control MenuBar para incluirlo en la forma, este va a aparecer en la parte central de la forma pero, no se preocupen, que este control es el que nos permite crear los menús y las barras de herramientas, así que este control aparece en la parte inferior de la pantalla de nuestra aplicación cuando se este ejecutando.

Hacemos clic sobre en control MenuBar cuando ya este en la forma, y en la ventana de las propiedades del control, la ventana inferior de la derecha y escogemos la propiedad NewButton, esta a True, la colocamos en False, esto lo hacemos para que no muestre una opción de New al iniciar la aplicación. El resto de las propiedades no son problema, podemos cambiar el nombre del control por el que queramos también, para nuestro caso dejamos el nombre de eVB asigna por defecto.

Ahora abrimos la ventana de código de nuestra forma y en le evento Load de la forma vamos a configurar el control MenuBar para crear los menús que necesitamos y le asignamos los archivos bmp a los picturebox:

Private Sub Form_Load()

Dim mnuTablas As MenuBarMenu

Dim mnuAccion As MenuBarMenu

PictureBox1.Picture = App.Path & "Adelante.bmp"

PictureBox2.Picture = App.Path & "Pausa.bmp"

PictureBox3.Picture = App.Path & "Stop.bmp"

PictureBox4.Picture = App.Path & "Undo.bmp"

'Configuro el MenuBar

Set mnuTablas = MenuBar1.Controls.AddMenu("Tablas", mnuTablas)

mnuTablas.Items.Add 1, "mnuTabTareas", "Tareas"

mnuTablas.Items.Add 2, "mnuTabClientes", "Clientes"

mnuTablas.Items.Add 3, "mnuTabApp", "Aplicaciones"

Set mnuAccion = MenuBar1.Controls.AddMenu("Accion", mnuAccion)

mnuAccion.Items.Add 1, "mnuNuevo", "Nuevo"

mnuAccion.Items.Add 2, "mnuEditar", "Editar"

mnuAccion.Items.Add 3, "mnuBorrar", "Borrar"

mnuAccion.Items.Add 4, "mnuCancelar", "Cancelar"

mnuAccion.Items.Add 5, "mnuGuardar", "Guardar"

mnuAccion.Items.Add 6, "mnuCerrar", "Cerrar"

End Sub

Hasta aquí hemos aprendido como trabajar con el control MenuBar para crear menús y submenús. Ahora vamos a adicionarle a la barra de menús, botones, o sea vamos a crear un menú combinado.

Como vamos a colocarle graficas a nuestro botones necesitamos otro control: el control ImageList para guardar las imágenes y poder asociarlas a los botones.

Nos vamos nuevamente al menú Project, Components y escogemos Microsoft CE Image List Control 3.0, presionamos en el botón OK

Doble clic sobre el control ImageList para insertarlo en la forma, ahora en el mismo evento Load de la forma configuramos el imageList y lo asignamos al MenuBar.

' Configuro el tamaño de las imagenes

ImageList1.ImageHeight = 16

ImageList1.ImageWidth = 16

' Agrego las imagenes

ImageList1.Add App.Path & "Primero.bmp"

ImageList1.Add App.Path & "Atras.bmp"

ImageList1.Add App.Path & "Adelante.bmp"

ImageList1.Add App.Path & "Ultimo.bmp"

'Le decimos al MenuBar que use el ImageList

MenuBar1.ImageList = ImageList1.hImageList

'Configuro los botones

Dim btnSepara As MenuBarButton

Dim btnInicio As MenuBarButton

Dim btnPrevio As MenuBarButton

Dim btnSigte As MenuBarButton

Dim btnFin As MenuBarButton

'Boton Separador

Set btnSepara = MenuBar1.Controls.AddButton

btnSepara.Width = 80

btnSepara.Style = mbrSeparator

'Boton Inicio

Set btnInicio = MenuBar1.Controls.AddButton("btnInicio")

btnInicio.Image = 1

btnInicio.Style = mbrDefault

'Boton Previo

Set btnPrevio = MenuBar1.Controls.AddButton("btnPrevio")

btnPrevio.Image = 2

btnPrevio.Style = mbrDefault

'Boton Sgte

Set btnSigte = MenuBar1.Controls.AddButton("btnSigte")

btnSigte.Image = 3

btnSigte.Style = mbrDefault

'Boton Ultimo

Set btnFin = MenuBar1.Controls.AddButton("btnFin")

btnFin.Image = 4

btnFin.Style = mbrDefault

' Luego que los botones y los menus son agregados

' al MenuBar, los Objectos se liberan

Set mnuTablas = Nothing

Set mnuAccion = Nothing

Set btnSepara = Nothing

Set btnInicio = Nothing

Set btnSigte = Nothing

Set btnPrevio = Nothing

Set btnFin = Nothing

Aquí podemos apreciar como se observa el menú combinado en la parte inferior de la pantalla del Pocket.

Aquí va la definición de los controles para que les quede exactamente igual a las graficas:

VERSION 5.00

Object = "{338D5EA5-4BBD-11D1-9A7D-00C04FAD5AEC}#1.0#0"; "mscepicture.dll"

Object = "{F7DEA2C9-BA8F-446E-A292-B4840F3BD661}#1.0#0"; "mscemenubar.dll"

Object = "{E491F001-98EC-11D1-9B3D-00C04FAD5AEC}#1.0#0"; "msceimagelist.dll"

Begin VB.Form frmTareas

Appearance = 0 'Flat

BackColor = &H80000005&

Caption = "Control de Tareas"

ClientHeight = 3615

ClientWidth = 3480

ForeColor = &H80000008&

ShowOK = -1 'True

Begin CEImageListCtl.ImageList ImageList1

Left = 1890

Top = 3000

End

Begin MenuBarLib.MenuBar MenuBar1

Left = 2520

Top = 2940

Enabled = -1 'True

NewButton = 0 'False

End

Begin VBCE.Frame fraTareas

Height = 3225

Left = 60

TabIndex = 0

Top = 60

Width = 3405

BorderStyle = 1

Caption = "[Tareas]"

Enabled = -1 'True

BeginProperty Font {0BE35203-8F91-11CE-9DE3-00AA004BB851}

Name = "Tahoma"

Size = 8.25

EndProperty

Begin PictureBoxCtl.PictureBox PictureBox1

Height = 325

Left = 150

Top = 2790

Width = 325

Enabled = -1 'True

End

Begin PictureBoxCtl.PictureBox PictureBox2

Height = 330

Left = 570

Top = 2790

Width = 330

Enabled = -1 'True

End

Begin PictureBoxCtl.PictureBox PictureBox3

Height = 330

Left = 990

Top = 2790

Width = 330

Enabled = -1 'True

End

Begin PictureBoxCtl.PictureBox PictureBox4

Height = 330

Left = 1380

Top = 2790

Width = 330

Enabled = -1 'True

End

Begin VBCE.TextBox txtSolucion

Height = 645

Left = 120

Top = 2100

Width = 3195

Enabled = -1 'True

Text = ""

MultiLine = -1 'True

ScrollBars = 2

End

Begin VBCE.Label Label1

Height = 255

Left = 90

Top = 210

Width = 765

Caption = "Cliente :"

End

Begin VBCE.ComboBox cboClientes

Height = 300

Left = 900

Top = 180

Width = 2415

Enabled = -1 'True

Text = "cboClientes"

End

Begin VBCE.Label Label2

Height = 255

Left = 90

Top = 510

Width = 765

Caption = "Aplicacion:"

Enabled = -1 'True

End

Begin VBCE.ComboBox Combo1

Height = 300

Left = 900

Top = 480

Text = "Combo1"

End

Begin VBCE.Label Label3

Height = 225

Left = 60

Top = 810

Width = 795

Caption = "Problema:"<

Tutor Embedded Visual Basic - Capitulo 3

Por Roberto Alvarado

Capitulo 3

En este tercer capítulo de este tutorial, vamos a empezar a desarrollar una pequeña aplicación muy apropiada para estas maravillosas máquinas llamadas handhelds, muy útil para nosotros los desarrolladores de software, o para los que tenemos que hacer labor de soporte técnico, o helpdesk, en nuestras empresas o con nuestros clientes. Es algo que podemos aplicar a nuestra rutina diaria y nos va a servir muchísimo con un poco de atención de nuestra parte. Estos datos que vamos a recolectar nos servirán como estadísticas de atención, como soporte para facturarle a nuestros clientes, como soporte de nuestra labor desarrollada, etc. A medida que lo conozcan van a salir mas justificaciones y aplicaciones para este proyecto.

En este capítulo no vamos a tener código que desarrollar. Para afianzar nuestros conocimientos de eVB, vamos a sentar las bases para desarrollar una pequeña aplicación en la que podamos emplear la gran mayoría de los controles de eVB y en la cual podamos manejar una base de datos con todas las de la ley en un PDA o handheld que utilice como sistema operativo Pocket PC. Inclusive pueden hacer el ejercicio para dispositivos con Windows CE 3.0, es idéntico el desarrollo, la diferencia es la apariencia en la pantalla.

Bueno yo he titulado esta aplicación como Control de Tareas, este proyecto controlará y manejará el tiempo gastado en cada una de las tareas que registremos en la aplicación.

La idea de este proyecto es registrar todas las acciones que se ejecuten sobre una determinada tarea o problema que se nos presente, por ejemplo, un usuario de una aplicación nos informa que no sabe como hacer una determinada función con el programa. Nosotros programamos o generamos una nueva tarea nuestro proyecto de Control de Tareas y registramos las indicaciones hechas al usuario, al igual que el tiempo que gastamos en instruir al usuario. En la aplicación Control de Tareas se irá registrando la historia del usuario (en nuestro caso, nuestro Cliente), y en un momento dado podremos saber cuantas tareas se han realizado para ese Cliente (usuario) y de qué tipo.

¿Ya están entendiendo como aplicar este proyecto? Este es uno de los ejemplos más comunes, pero podemos aplicarlo a muchas más situaciones.

Vamos a empezar diseñando los archivos o tablas que vamos a utilizar para nuestra aplicación:

Necesitamos un Archivo Maestro para registrar nuestras Tareas, a esta Tabla o Archivo le he llamado Tareas, la estructura de los datos es la siguiente:

· IdTarea Int Identificador Único de la Tarea

· Aplicacion Text 5 Código de la Aplicación con problemas

· Tarea Text 50 Descripción de la Tarea

· Cliente Int Código del Cliente

· Tiempo Text 8 Tiempo gastado en la Tarea

· FecIni Date La fecha de inicio de la Tarea

· FecFin Date La fecha de culminación de la Tarea

· Estado Text 1 Activa, Pausa, Terminada, Cancelada

· HoraInicio Text 8 Hora de Inicio de la Tarea

· HoraFinal Text 8 Hora de terminación de la Tarea

· ValorHora Int El valor de la Hora

· Descripción Text 255 Descripción de la solución aplicada

Necesitamos un Archivo Maestro de Clientes en la cual se encuentra la información de nuestros clientes, a esta tabla la llamaremos Clientes, la estructura de los datos es la siguiente:

· IdCliente Int Identificador Único de Clientes

· Nombre Text 50 Nombre del Cliente

· Direccion Text 50 Dirección del Cliente

· Telefonos Text 20 Teléfonos del Cliente

· Celular Text 20 Celular del Cliente

· Fax Text 20 Número del fax del Cliente

· ValorHora Int Valor de la Hora para ese Cliente

Una tercera tabla para el Log del sistema en la cual se registraran todas las operaciones o transacciones realizadas a cada una de las tareas. A esta tabla la he llamado Log, y su estructura es la siguiente:

· Fecha Date Fecha de la Transacción

· Hora Text 8 Hora en que se realiza la transacción

· IdTarea Int La tarea que se esta ejecutando

· Tipo Text 1 Inicio, Pausa, Terminar, Cancelar

· Observación Text 255 Observaciones sobre la transacción

Y una última tabla de Aplicaciones en la cual vamos a registrar las aplicaciones a asociar a las tareas, por ejemplo, Excel de Microsoft es una aplicación que en todas las empresas o casi todas existe y algunas veces las personas que lo utilizan se traban en algo o no saben como enfocar una solución y nos preguntan a nosotros los que estamos en Sistemas o Informática para que le echemos una manito a resolver sus problemas. La estructura de esta tabla es la siguiente:

· IdApp Text 5 Identificador de la Aplicación

· Aplicación Text 30 Descripción o nombre de la aplicación

Muy bien esas son nuestras tres tablas para nuestra aplicación de Control de Tareas

Esta pequeña aplicación vamos a desarrollarla utilizando para guardar los datos una base de datos Pocket Access (*.cdb).

Vamos a verificar si el archivo cdb no existe y lo crearemos desde código, al igual que las tablas descritas arriba.

Ahora que ya tenemos definida la estructura de la Base de Datos a utilizar con nuestra aplicación, empecemos a desarrollar nuestra aplicación.

Tutor Embedded Visual Basic - Capitulo 2

Por Roberto Alvarado

Capitulo 2

En este nuevo capítulo vamos a continuar con los controles intrínsecos de eVB, a la par de seguir con algo de teoría para ir conociendo mas detalladamente lo que podemos hacer con eVB.

La barra de Herramientas (Toolbar)

A continuación vamos a explicar cada uno de los controles intrínsicos de eVB,

Pointer. Con este podemos cancelar cualquier otro comando que tengamos seleccionado, si nos arrepentimos de haber escogido un control TextBox, utilizamos a Pointer para anular o cancelar la selección.

Shape. Nos permite crear figuras geométricas en la forma.

Line. Permite dibujar una línea de diferentes anchos y colores en la forma.

Labels. Es uno de los controles más usados, pues en ellos vamos a colocar el texto que deseamos aparezca en las formas para ayudar al usuario en la captura de los datos de una aplicación. El texto de los labels no puede ser cambiado por el usuario.

TextBox. Es otro de los controles más usados en nuestras aplicaciones, ya que en ellos podemos capturar o visualizar información de diferente índole para actualizar nuestras bases de datos en el Pocket PC.

Frames. Este control es un contenedor de controles. Permite insertar en él cualquier control de los que tenemos en la barra de herramientas. Este control particularmente lo utilizo mucho, para simular diferentes formas, debido al inconveniente de eVB que no permite descargar las formas de memoria.

Button. Permite crear botones para seleccionar diferentes opciones por ejemplo para guardar los datos o para cancelar la grabación de los mismos, para seleccionar una opción diferente, etc.

CheckBox. Nos permite seleccionar una o varias opciones referentes a un tema.

OptionButton. Nos permite seleccionar una opción entre varias. Este es excluyente.

ComboBox. Este control permite mostrar una lista de datos desplegable que se muestra y oculta cuando hacemos clic en él. Este control nos sirve, por ejemplo, para desplegar una lista de ciudades y escoger una.

ListBox. Este control es similar al ComboBox, la diferencia es que la lista no es desplegable como la del ComboBox. Este control lo podemos utilizar para por ejemplo mostrar los nombres de los empleados de una empresa. Como en el ejemplo de la entrega anterior

HScrollBar y VScrollBar. Estos dos controles lo usamos para simular un desplazamiento vertical u horizontal en la pantalla, por ejemplo.

Timer. Este control nos permite controlar la ejecución de un procedimiento cada determinado tiempo.

Ahora vamos a desarrollar una aplicación para ir utilizando cada uno de los diferentes controles, además de los controles Actives que aun no hemos visto.

La aplicación que vamos a desarrollar es: un teclado numérico controlado completamente desde eVB.

La intención de este pequeño proyecto, es porque para llegar al teclado numérico del SIP hay que realizar demasiados pasos, además que a mi parecer es mas cómodo que el usuario tenga un teclado en la pantalla.

Una de las ventajas es que podemos acomodarlo como más nos guste, ya que lo hemos creado utilizando únicamente controles CommandButton.

En el proyecto tenemos dos Labels y dos TextBox para hacernos una idea de lo que debemos hacer.

La idea del teclado es esta: generalmente (por no utilizar siempre), se piden los datos en un TextBox, asi que vamos a crear en nuestra forma una variable publica que sea de tipo TextBox y cada vez que un TextBox tenga el foco vamos a asignar a esa variable el TextBox en cuestión. Luego en el evento click de cada uno de los botones del teclado numérico le asignamos el valor correspondiente del botón a través de nuestra variable publica de tipo TextBox.

Talvez lo único tedioso es que en el evento GotFocus de cada TextBox debemos colocar esto:

Set CajaTexto = Text1

Donde CajaTexto es nuestra variable publica tipo TextBox y Text1, es el TextBox en cuestión.

La verdad no es que sea difícil, pero mucho no sabemos por donde entrarle a la solución del problema. ¡Así que aquí esta una muy modesta solución que he probado y me ha dado muy buenos resultados! Espero que la disfruten y les sirva de mucho a todos.

Aquí esta el código completo del proyecto

Option Explicit

Public CajaTexto As TextBox

Private Sub Form_Load()

Text7.Visible = True

Text1.Visible = True

End Sub

Private Sub Form_OKClick()

App.End

End Sub

Private Sub cmdBorrar_Click()

CajaTexto.Text = ""

End Sub

Private Sub cmdCero_Click()

CajaTexto.Text = CajaTexto.Text & "0"

End Sub

Private Sub cmdCinco_Click()

CajaTexto.Text = CajaTexto.Text & "5"

End Sub

Private Sub cmdCuatro_Click()

CajaTexto.Text = CajaTexto.Text & "4"

End Sub

Private Sub cmdDos_Click()

CajaTexto.Text = CajaTexto.Text & "2"

End Sub

Private Sub cmdEntrar_Click()

'Hago algo simulando en enter

End Sub

Private Sub cmdNueve_Click()

CajaTexto.Text = CajaTexto.Text & "9"

End Sub

Private Sub cmdOcho_Click()

CajaTexto.Text = CajaTexto.Text & "8"

End Sub

Private Sub cmdRutero_Click()

frmRutero.Show

frmTomaLectura.Hide

End Sub

Private Sub cmdSeis_Click()

CajaTexto.Text = CajaTexto.Text & "6"

End Sub

Private Sub cmdSiete_Click()

CajaTexto.Text = CajaTexto.Text & "7"

End Sub

Private Sub cmdTres_Click()

CajaTexto.Text = CajaTexto.Text & "3"

End Sub

Private Sub cmdUno_Click()

CajaTexto.Text = CajaTexto.Text & "1"

End Sub

Private Sub Text1_GotFocus()

Set CajaTexto = Text1

End Sub

Private Sub Text7_GotFocus()

Set CajaTexto = Text7

End Sub

A continuación vemos una grafica de cómo se aprecia la aplicación en el handheld

Enseguida les muestro la descripción de cada uno de los controles contenidos en la forma, esta es una forma (me parece a mi) mas clara, de mostrar los controles ya que gráficamente a veces no nos cuadran las imágenes. Aquí no aparecen todas las propiedades de los controles, solo las que necesitamos para este ejemplo. Luego les explico como pueden documentar sus manuales técnicos de esta manera.

VERSION 5.00

Begin VB.Form Form1

Appearance = 0 'Flat

BackColor = &H80000005&

Caption = "Form1"

ShowOK = -1 'True

Begin VBCE.TextBox Text1

Height = 285

Left = 990

Top = 180

Visible = 0 'False

Width = 1425

BorderStyle = 1

Enabled = -1 'True

Text = ""

End

Begin VBCE.Label Label6

Height = 225

Left = 60

Top = 210

Width = 915

Caption = "LecAnterior:"

Alignment = 0

End

Begin VBCE.Label Label7

Height = 225

Left = 60

Top = 480

Width = 915

Caption = "LecActual:"

Enabled = -1 'True

Alignment = 0

End

Begin VBCE.TextBox Text7

Height = 285

Left = 990

Top = 450

Visible = 0 'False

Width = 1425

BorderStyle = 1

Enabled = -1 'True

Text = ""

Alignment = 0

End

Begin VBCE.CommandButton cmdUno

Height = 285

Left = 2400

TabIndex = 11

Top = 3090

Width = 315

Caption = "1"

Enabled = -1 'True

Style = 0

End

Begin VBCE.CommandButton cmdDos

Height = 285

Left = 2745

TabIndex = 10

Top = 3090

Width = 315

Caption = "2"

Enabled = -1 'True

Style = 0

End

Begin VBCE.CommandButton cmdTres

Height = 285

Left = 3090

TabIndex = 9

Top = 3090

Width = 315

Caption = "3"

Enabled = -1 'True

Style = 0

End

Begin VBCE.CommandButton cmdCuatro

Height = 285

Left = 2400

TabIndex = 8

Top = 2790

Width = 315

Caption = "4"

Enabled = -1 'True

Style = 0

End

Begin VBCE.CommandButton cmdCinco

Height = 285

Left = 2745

TabIndex = 7

Top = 2790

Width = 315

Caption = "5"

Enabled = -1 'True

Style = 0

End

Begin VBCE.CommandButton cmdSeis

Height = 285

Left = 3090

TabIndex = 6

Top = 2790

Width = 315

Caption = "6"

Enabled = -1 'True

Style = 0

End

Begin VBCE.CommandButton cmdSiete

Height = 285

Left = 2400