UNIDAD 1: VISUAL WEB DEVELOPER 2005 Visual Basic PROGRAMACION VISUAL

TEMA 11: PROGRAMACION Visual Basic PRIMER EJEMPLO

Este modelo de visual web developers Visual Basic introduce una nueva coleccion de objetos denominados WEBCONTROLS.

Aunque los objetos derivados de HTMLCONTROL facilitan la tarea de manipular los objetos originales de HTML Microsoft decidio que un nuevo conjuntos denominado WEBCONTROLS derivados de la libreria SYSTEM.WEB.UI.CONTROL permite una mejora mayor y mas funcionalidad para el trabajo con paginas, estos nuevos objetos son:

VER APENDICEWEBCONTROLS AL FINAL DEL CAPITULO:

Como se puede apreciar existen muchos nuevos objetos de mucha utilidad para la construccion de sistemas de informacion, todos estos objetos tienen sus propiedades especificas, sin embargo muchos de ellos comparten las siguientes propiedades:

PROPIEDAD DESCRIPCION
BackColor Carga o lee el color de background
BorderColor Carga o lee el color del marco(border)
BorderStyle Carga o lee el estilo del marco
BorderWidth Carga o lee el tamano del marco
Font Carga o lee el font
ForeColor Carga o lee el color del foreground
Height Carga o lee la altura del control
ID Carga o lee el identificador del control
TabIndex Carga o lee el tab index
ToolTip Carga o lee el tooltip del control
Visible Carga o lee su estado visible
Width Carga o lee la anchura del control

Interesante verdad?

PROYECTO COMPLETO

1.- Preparar el proyecto tal como se dejo hasta el final del tema anterior, es decir la pantalla inicial es:

image498.jpg

2.- observar que DEFAULT.ASPX (pagina principal) ya contiene el siguiente codigo:

 
<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<script runat="server">
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head runat="server">
 
<title>Untitled Page</title>
 
</head>
 
<body>
 
<form id="form1" runat="server">
 
<div>
 
</div>
 
</form>
 
</body>
 
</html>

En particular:

1.- Empieza definiendo el lenguaje de programacion a usar es decir la pagina estara en un servidor de paginas y es el servidor quien tendra que compilar esta pagina ( recordar que aspx es en realidad un programa que mezcla instrucciones de dos lenguajes de programacion HTML y Visual Basic) por tanto el servidor tendra que compilar.

2.- Recordar que este curso esta enfocado a aprender el lenguaje de programacion VISUAL Visual Basic y a ustedes les toca aprender por su cuenta el lenguaje de programacion HTML de los cuales existen muchos tutoriales en el WEB.

3.- La segunda parte que contiene DEFAULT.ASPX son los tags o marcadores <script> ... </script> es dentro de estos tags donde se pondra el codigo en visual Visual Basic.

4.- La tercera parte esta encerrada entre tags <html>..</html> esta parte enciera el codigo del lenguaje HTML y estos tags le indican al servidor que empieze a construir una pagina web para enviarsela a algun usuario que la este pidiendo.

5.- La siguiente parte inportantes esta encerrada entre tags <form>..</form>, esta parte crea una VENTANA VIRTUAL dentro de la PAGINA WEB, es decir el programa usara o contendra ciertos objetos ( labels, textboxs, buttons) y estos objetos no pueden colocarse directamente en una PAGINA HTML, estos objetos deberan ir dentro de una FORMA o VENTANA o mejor dicho dentro de <FORM> objetos </FORM>.

6.- Los tags e instrucciones head, body, div son instrucciones de HTML y recordar que HTML lo estudian por su cuenta en algun tutorial de HTML.

7.- EN RESUMEN SE ESTA CONSTRUYENDO UNA PAGINA ASPX QUE CONTIENE UNA PAGINA <HTML>..</HTML> QUE A SU VEZ CONTIENE UNA VENTANA O FORMA VIRTUAL <FORM>…</FORM> QUE A SU VEZ CONTENDRA LOS OBJETOS WEBCONTROLS (LABELS, TEXTBOXS, BUTTONS) NECESARIOS PARA RESOLVER EL PROBLEMA PLANTEADO.

APARTE LA PAGINA ASPX LLEVA UN APARTADO <SCRIPT>…</SCRIPT> QUE CONTENDRA EL CODIGO EN VISUAL BASIC (GENERALMENTE UN EVENTO(RECORDAR TEMA DE OBJETOS) DE ALGUN COMPONENTE WEBCONTROL.

PROYECTO

USAR la pestanita de DESIGN y arrastrar desde TOOLBOX un LABEL, dos TEXTBOX y un BUTTON.

En PROPIEDADES, usando tecla TAB moverse a LABEL y en propiedad ID cargarle MESES, con TAB irse a los TEXTBOX y en propiedades ID cargarles con BASE1(no se puede usar BASE porque es palabra reservada de visual basic) y ALTURA, al final con tab irse a BUTTON y en la ventanita de propiedades usar el icono de EVENTOS(ver tema anterior) y buscar el evento buttonclick y cargarlo con la palabra EVENTO1.

Si en alguna parte de este proceso terminan en la pantalla de codigo, regresar a la pantalla de diseno usando la pestanita de abajo que dice DESIGN y recordar que estas dos pestanitas de SOURCE y DESIGN les permite estar circulando entre diseno y codigo.

PROGRAMA

 
<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<script runat="server">
 
Protected Sub EVENTO1(ByVal sender As Object, ByVal e As System.EventArgs)
 
AREA.Text = (BASE1.Text * ALTURA.Text / 2).ToString("##.##")
 
End Sub
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head runat="server">
 
<title>PROGRAMACION VISUAL BASIC ASPX</title>
 
</head>
 
<body>
 
<H2>BIENVENIDO A VISUAL WEB DEVELOPER 2005 Visual Basic </H2>
 
<B>MI PRIMER ASPX<BR>
 
<form id="form1" runat="server">
 
BASE.....:<ASP:TEXTBOX ID=BASE1 RUNAT=SERVER/><BR>
 
ALTURA.....:<ASP:TEXTBOX ID=ALTURA RUNAT=SERVER/><BR>
 
<ASP:BUTTON ID="BUTTON1" TEXT=OK ONCLICK=EVENTO1 RUNAT=SERVER/>
 
AREA..:<ASP:LABEL ID=AREA RUNAT=SERVER/><BR>
 
</form>
 
</body>
 
</html>

0.- A DEFAULT.ASPX SOLO AGREGARLE EL CODIGO FALTANTE EL RESTO ES EL DEFAULT QUE YA ESTA ESCRITO.

1.- Lo primero y mas importante a recordar que los scripts deben estar embebidos o empotrados en una pagina aspx y deben ir entre los tags <script>codigo c sharp </script>.

2.- Este codigo mezcla instrucciones y objetos de dos lenguajes de programacion diferentes ellos son HTML y Visual Basic.

3.- Considerar la pagina como una sola forma o ventana empotrada en el browser esta forma contiene tres objetos, controles o componentes provenientes de WEBCONTROLS (TEXTBOXS, LABEL, BUTTON ) este ultimo control ( button) se usa para activar el codigo o script del programa.

4.- Observar que se debera usar el tag <ASP: WEBCONTROL PROPIEDADES /> para poner cada webcontrol en la pagina, esto es si se quieren poner directamente los objetos en la forma y no se quiere usar la pantalla de diseno.

5.-Como se observa todos estos controles son objetos y por tanto tienen propiedades y metodos que son los que usamos dentro del programa observar el formato para procesarlos, es decir: objeto.propiedad o metodo.

6.- Se muestran dos tipos de controles para desplegar datos, textos o mensjes estaticos, ellos son LABEL y LITERAL(la diferencia entre ellos revisar en el apendice pero en general tiene mas y mejores propiedades LABEL), todos estos controles incluyendo TEXTBOX estan usando su propiedad TEXT para procesar los datos, del control BUTTON estamos usando su evento onclick, para pegarle el proceso u operacion.

7.- Observar que lo primero que hace VISUAL Visual Basic, es detectar el EVENTO1 onclick del boton y realizar directamente las operaciones con los objetos webcontrol.

8.- Como se observa podemos manipular o accesar directamente los objetos TEXTBOX y LABEL usando su propiedad TEXT, recordar que en nuestros programas se usaran MAYUSCULAS para nombrar objetos WEBCONTROLS y se usaran MINUSCULAS para nombrar variables que en este problema no se ocuparon.

9.- Ya realizado el calculo, se manda el resultado al objeto MESES.Text y observar que a toda la operacion la estamos convirtieno a string con el metodo ToString() de la clase STRING y de paso se estan formateando (ver tema que sigue) para recortar la parte decimal del resultado.

Para ejecutarlo:

A.- PRIMERO USAR FILE –> SAVE ALL O LOS TRES DISQUITOS image450.jpgDE ARRIBA

B.- AHORA USAR EL ICONO DE RUN image451.jpgARRIBA, visual web developer 2005 LES PREGUNTARA CUAL ES TU SITIO WEB EN MI CASO ES LUNARPAGES Y TAMBIEN MARCAR OPCION DE RUN WITHOUT DEBUGING

El programa en ejecucion:

image499.jpg

TAREAS PROGRAMACION VISUAL WEB DEVELOPER 2005 Visual Basic

Nota: Por favor no pongan en todas sus tareas lo de bienvenidos, mi primer aspx, saludos etc, solo son ejemplos de como agregar instrucciones html a un programa aspx.

ANTES DE EJECUTARLO USAR FILE–>SAVE DEFAULT.ASPX AS –> Y VISUAL WEB DEVELOPER 2005 Visual Basic LES PREGUNTARA EL NUEVO NOMBRE DEL ASPX, USAR LOS NOMBRES DE PROG1.ASPX, PROG2.ASPX, PROG3.ASPX ETC. SI NO USAN ESTA NOTA SOLO LES QUEDARA EN SU SITIO LA ULTIMA TAREA PORQUE SE IRAN SOBREESCRIBIENDO UNA TAREA SOBRE OTRA TAREA ESTAN ADVERTIDOS

1.- Construir scripts VISUAL WEB DEVELOPER 2005 Visual Basic para 5 de los problemas que se vieron en el tema de modelo de solucion.

Politica de Privacidad