Paso 1 Trabajo Colaborativo

Miller Fabian Rodriguez Paez

Alejandro Martinez
Tatiana Fernanda Gomez
Harold Steven Romero
Marzo 2019

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

ECBTI
VISUAL BASIC AVANZADO
 INTRODUCTION ii

During the development of the proposed activity, various tools are identified in the
ASP.NET environment, which provide great functionality that can be applied to various projects,
such as websites or apps that work with this emphasis.

Similarly, work is being done to create the graphic interface that will allow a better
interaction between the user and the application.
 OBJETIVES iii

 Know the various tools that exist in the ASP.NET development

environment

 Develop skills in the design of interfaces that make the interaction with the
end user friendly.

 Validate various ways in which web-type projects can be carried out.

 Tabla de Contenidos iv

DESARROLLO DE LA ACTIVIDAD .......................................................................................... 1

Descripción de Herramientas VB ASP.NET .............................................................................. 1
CheckBox ................................................................................................................................ 1
ComboBox .............................................................................................................................. 2
ListBox .................................................................................................................................... 3
EventLog ................................................................................................................................. 4
TreeView................................................................................................................................. 6
Input (Button).......................................................................................................................... 7
Input (Reset)............................................................................................................................ 7
Input (Text) ............................................................................................................................. 7
Input (Radio) ........................................................................................................................... 8
Input (Check box) ................................................................................................................... 8
INTERFAZ DE PROYECTO ....................................................................................................... 19
Pantalla de Carga Inicial ........................................................................................................... 19
Login usuario ............................................................................................................................ 20
Pantalla Registrate .................................................................................................................... 20
Pantalla Temas .......................................................................................................................... 21
Pantalla Ingreso Tema............................................................................................................... 21
Pantalla Evaluación ................................................................................................................... 22
Conclusions ................................................................................................................................... 23
Lista de referencias ........................................................................Error! Bookmark not defined.
 Lista de figuras v

Imagen 1-Checkbox Visual Basic ................................................................................................... 1

Imagen 2- ComboBox Visual Basic ............................................................................................... 2
Imagen 3- ListBox Visual Basic ..................................................................................................... 3
Imagen 4- ListBox Visual Basic ..................................................................................................... 4
Imagen 5 - TreeView Visual Basic ................................................................................................. 6
 1

DESARROLLO DE LA ACTIVIDAD

Descripción de Herramientas VB ASP.NET

CheckBox

Imagen 1-Checkbox Visual Basic

Indica si una condición determinada está activada o desactivada. Normalmente se

utiliza para presentar una selección Sí/No o Verdadero/Falso al usuario. Puede utilizar de
controles de casilla en grupos para mostrar múltiples opciones de entre las que el usuario
puede seleccionar una o más.

Propiedades:

Appearance: Obtiene o establece el valor que determina el aspecto de un

control CheckBox.
AutoCheck: Obtiene o establece un valor que indica si los valores
de Checked o CheckStatey la apariencia de CheckBox cambian automáticamente
al hacer clic en dicha casilla CheckBox.
CheckAling: Obtiene o establece la alineación horizontal y vertical de la marca
de verificación en un control CheckBox.
Checked: Obtiene o establece un valor que indica si CheckBox está en el estado
activado.
CheckState: Obtiene o establece el estado del control CheckBox.
CreateParams: Obtiene los parámetros de creación necesarios cuando se crea el
identificador del control.
DefaultSize: Obtiene el tamaño predeterminado del control.
TextAling: Obtiene o establece la alineación del texto en el control CheckBox.
ThreeState: Obtiene o establece un valor que indica si la casilla CheckBox podrá
tener tres estados de verificación en lugar de dos.
 2

ComboBox

Imagen 2- ComboBox Visual Basic

Se utiliza para mostrar datos en un cuadro combinado desplegable. De forma

predeterminada, el ComboBox control aparece en dos partes: la parte superior es un
cuadro de texto que permite al usuario escribir un elemento de lista. La segunda parte es
un cuadro de lista que muestra una lista de elementos desde el que el usuario puede
seleccionar uno.

Propiedades:

AutoCompleteMode: Obtiene o establece una opción que controla cómo

funciona la finalización automática para ComboBox.
BackColor: Obtiene o establece el color de fondo del control.
DataSource: Obtiene o establece el origen de datos de este objeto ComboBox.
DropDownHeight: Obtiene o establece el alto, en píxeles, de la parte de cuadro
desplegable del elemento ComboBox.
DropDownStyle: Obtiene o establece un valor que especifica el estilo del cuadro
combinado
ImeMode: Obtiene o establece el modo de Editor de métodos de entrada (IME)
del control.
Items: Obtiene un objeto que representa la colección de los elementos que
contiene este ComboBox.
AutoCompleteSource: Obtiene o establece un valor que especifica el origen de
cadenas completas utilizadas para la finalización automática.
ContextMenuStrip: Obtiene o establece el ContextMenuStrip asociado a este
control.
 3

ListBox

Imagen 3- ListBox Visual Basic

Permite mostrar una lista de elementos al usuario que el usuario puede seleccionar
haciendo clic.

Propiedades:

AllowDrop: Obtiene o establece un valor que indica si el control puede aceptar

los datos que el usuario arrastra al mismo.
BackColor: Obtiene o establece el color de fondo del control.
ForeColor: Obtiene o establece el color de primer plano del control.
TabStop: Obtiene o establece un valor que indica si el usuario puede dar el foco a
este control mediante la tecla TAB.
UseTabStops: Obtiene o establece un valor que indica si el
control ListBox puede reconocer y expandir los caracteres de tabulación al dibujar
sus cadenas.
Text: Obtiene o busca el texto del elemento actualmente seleccionado en el
control ListBox.
ScrollAlwaysVisible: Obtiene o establece un valor que indica si la barra de
desplazamiento vertical se muestra siempre.
Sorted: Obtiene o establece un valor que indica si los elementos del
control ListBox se ordenan alfabéticamente.
Font: Obtiene o establece la fuente del texto que muestra el control.
TopIndex: Obtiene o establece el índice del primer elemento visible del
control ListBox.
 4

EventLog

Imagen 4- ListBox Visual Basic

Permite tener acceso o personalizar los registros de eventos de Windows, que

registran información sobre eventos importantes de software o hardware. Uso
de EventLog, puede leer los registros existentes, escribir entradas en los registros, crear o
eliminar orígenes de eventos, eliminar los registros y responder a entradas de
registro. También puede crear nuevos registros al crear un origen de eventos.
 5

Propiedades:

EnableRaisingEvents: Obtiene o establece un valor que indica

si EventLog recibe notificaciones de eventos EntryWritten.
Entries: Obtiene el contenido del registro de eventos.
Log: Obtiene o establece el nombre del registro del que se lee o en el que se
escribe.
LogDisplayName: Obtiene el nombre descriptivo del registro de eventos.
MachineName: Obtiene o establece el nombre del equipo en el que se van a leer
o en el que se van a escribir los eventos.
MaximumKilobytes: Obtiene o establece el tamaño máximo del registro de
eventos, en kilobytes.
MinimumRetentionDays: Obtiene el número de días que se deben conservar las
entradas en el registro de eventos.
OverflowAction: Obtiene el comportamiento configurado para el
almacenamiento de entradas nuevas cuando el registro de eventos haya alcanzado
su tamaño máximo de archivo.
Source: Obtiene o establece el nombre de origen que se va a registrar y utilizar al
escribir en el registro de eventos.
SinchronizingObjet: Obtiene o establece el objeto utilizado para calcular las
referencias de las llamadas del controlador de eventos emitidas como resultado de
un evento escrito en una entrada de EventLog.
 6

TreeView

Imagen 5 - TreeView Visual Basic

Muestra una jerarquía de nodos, como la forma en que se muestran los archivos y
las carpetas en el panel izquierdo de la característica Windows Explorer en los sistemas
operativos Windows.

Propiedades:

BackColor: Obtiene o establece el color de fondo del control.

DefaultSize: Obtiene el tamaño predeterminado del control.
ForeColor: Obtiene o establece el color de primer plano del control.
FullRowSelect: Obtiene o establece un valor que indica si el resalte de la
selección abarca todo el ancho del control de vista de árbol.
HideSelection: Obtiene o establece un valor que indica si el nodo de árbol
seleccionado permanece resaltado aun cuando la vista de árbol pierda el foco.
LineColor: Obtiene o establece el color de las líneas que conectan los nodos del
control TreeView.
Nodes: Obtiene la colección de nodos de árbol asignados al control de vista de
árbol.
Scrollable: Obtiene o establece un valor que indica si el control de vista de árbol
mostrará barras de desplazamiento cuando sean necesarias.
Sorted: Obtiene o establece un valor que indica si los nodos de árbol de la vista
de árbol están ordenados.
VisibleCount: Obtiene el número de nodos de árbol que pueden estar totalmente
visibles en el control de vista de árbol.
 7

Input (Button)
<input id="Button1" type="button" value="Button" name="Button1">
o Title, Texto informativo o título del elemento. Suele mostrarse a modo de
"tool tip".
o Id, Le da un nombre al elemento que lo diferencia de todos los demás del
documento.
o Class, Asigna nombres de clases al elemento. Por defecto, clases CSS.
o Style, Permite especificar información de estilo. Por defecto, estilos CSS.
o Lang, Información sobre el idioma del contenido del elemento y del valor
de sus atributos.
o Dir, Indica la dirección de texto y tablas.
o Name, Asigna un nombre de control.
o Type, Indica el tipo de botón.
o Disabled, Indica que el control está deshabilitado.
o onclick, Indica la acción que realizara realizara.

Input (Reset)
<input id="Reset1" type="reset" value="Reset" name="Reset1">

o Title, Texto informativo o título del elemento. Suele mostrarse a modo de

"tool tip".
o Id, Le da un nombre al elemento que lo diferencia de todos los demás del
documento.
o Class, Asigna nombres de clases al elemento. Por defecto, clases CSS.
o Style, Permite especificar información de estilo. Por defecto, estilos CSS.
o Lang, Información sobre el idioma del contenido del elemento y del valor
de sus atributos.
o Name, Asigna el nombre.
o Type, Indica el tipo de botón.
o Disabled, Indica que el control está deshabilitado.
o Placeholder, Muestra texto de ayuda en el campo.
o Maxlength, Indica la capacidad máxima de caracteres.
Input (Text)
<input id="Text1" type="Text" value="Text" name=" Text1">

o Title, Texto informativo o título del elemento. Suele mostrarse a modo de

"tool tip".
o Id, Le da un nombre al elemento que lo diferencia de todos los demás del
documento.
o Class, Asigna nombres de clases al elemento. Por defecto, clases CSS.
 8

o Style, Permite especificar información de estilo. Por defecto, estilos CSS.

o Lang, Información sobre el idioma del contenido del elemento y del valor
de sus atributos.
o Name, Asigna el nombre.
o Type, Indica el tipo de botón.
o Disabled, Indica que el control está deshabilitado.
o Placeholder, Muestra texto de ayuda en el campo.
o Maxlength, Indica la capacidad máxima de caracteres.
Input (Radio)
<input id="Radio1" type="radio" name="Radio1">

o Title, Texto informativo o título del elemento. Suele mostrarse a modo de

"tool tip".
o Id, Le da un nombre al elemento que lo diferencia de todos los demás del
documento.
o Class, Asigna nombres de clases al elemento. Por defecto, clases CSS.
o Style, Permite especificar información de estilo. Por defecto, estilos CSS.
o Lang, Información sobre el idioma del contenido del elemento y del valor
de sus atributos.
o Name, Asigna el nombre.
o Type, Indica el tipo de botón.
o Disabled, Indica que el control está deshabilitado.
o checked, Indica si la opción se encuentra seleccionada.
Input (Check box)
<input id="Checkbox1" type="checkbox" name="Checkbox1">

o Title, Texto informativo o título del elemento. Suele mostrarse a modo de

"tool tip".
o Id, Le da un nombre al elemento que lo diferencia de todos los demás del
documento.
o Class, Asigna nombres de clases al elemento. Por defecto, clases CSS.
o Style, Permite especificar información de estilo. Por defecto, estilos CSS.
o Lang, Información sobre el idioma del contenido del elemento y del valor
de sus atributos.
o Name, Asigna el nombre.
o Type, Indica el tipo de botón.
o Disabled, Indica que el control está deshabilitado.
o checked, Indica si la opción se encuentra seleccionada.
 9

SplitContainer
Es la unión de dos paneles separados por una barra móvil. Cuando el puntero del mouse
está sobre la barra, el puntero cambia de forma para mostrar que se puede mover se puede
crear interfaces de usuario complejas; a menudo, una selección en un panel determina qué
objetos se muestran en el otro panel sirve para mostrar y explorar información. Tener dos
paneles permite agregar información en las áreas y la barra o "divisor" facilita la tarea para
que los usuarios cambiar el tamaño de los paneles.

Uso
Para crear interfaces de usuario complejas; a menudo, una selección en un panel determina
qué objetos se muestran en el otro panel. Este arreglo es muy efectivo para mostrar y
navegar información. Tener dos paneles le permite agregar información en áreas, y la barra,
o "divisor", facilita a los usuarios cambiar el tamaño de los paneles

Propiedades:

 SplitterDistance Determina la distancia en píxeles desde el borde izquierdo o

superior a la barra de división movible.

 SplitterIncrement Determina la distancia mínima en píxeles, que el usuario puede

mover el divisor.

 SplitterWidth Determina el grosor, en píxeles, objeto

 EventoSplitterMoved se genera cuando se ha movido el divisor

 10

 Orientation : Obtiene o establece un valor que indica la orientación vertical u

horizontal de los paneles Uno de los valores de Orientation. De manera

predeterminada, es Vertical.

 Padding: Obtiene o establece el espaciado interior, en píxeles, entre los bordes de

un panel SplitterPanely su contenido Objeto de tipo Padding que representa el

espaciado interior.

 FixedPanel: Obtiene o establece qué panel SplitContainer conserva el mismo

tamaño cuando se cambia el tamaño del contenedor El valor predeterminado

es None.

 TabRenderer Class: Proporciona métodos para representar un control de ficha con

estilos visuales. Esta clase no puede heredarse.

 TextImageRelation Especifica la posición relativa entre sí del texto y la imagen en

un control.

 AutoScroll : obtiene o establece un valor que indica si las barras de

desplazamiento aparecen automáticamente si los controles están colocados fuera

del área cliente de SplitContainer.

TabStrip

Es un control que contiene una colección de una o más pestañas.Cada pestaña (objeto Tab )
de un control TabStrip es un objeto independiente que el usuario puede
seleccionar. Visualmente, el control TabStrip incluye un área cliente que comparten todas
las TabStrip que contiene.
 11

Permite definir varias páginas para el mismo área de un cuadro de diálogo o de una
ventana en la aplicación.

Uso
Para colocar los controles que quermos mostrar cuando se pulse en una u otra solapa,
para ello se usa este control que pueda contener otros controles, normalmente se suele
usar el Picture, pero el Frame también es válido, además de que consume algo de menos
recursos, por supuesto que se pueden usar otros controles, incluso los SSPanel... pero, por
simpleza, vamos a usar en este ejemplo un frame.

Propiedades:

 ToolTipText : Para mostrar temporalmente una cadena de texto en un pequeño

cuadro rectangular en tiempo de ejecución cuando el cursor del usuario se posa

sobre la ficha.

 MultiRow : Devuelve o establece un valor que indica si un control TabStrip puede

mostrar más de una fila de fichas.

 TabFixedHeight, TabFixedWidth Devuelven o establecen el alto y el ancho fijo de

todos los objetos Tab

 12

 TabWidthStyle Propiedad que Devuelve o establece un valor que determina la

justificación o ancho de todos los objetos Tab

 Style Devuelve o establece la apariencia, fichas o botones, de un control TabStrip

 Tabs : Cada objeto Tab tiene propiedades asociadas con su estado y apariencia

actuales. Por ejemplo, puede asociar un control ImageList con el control TabStrip y

después usar imágenes en fichas individuales. También puede asociar una

información sobre herramientas con cada objeto Tab . Una

colección Tabs contiene un conjunto de objetos Tab .

 Separators : Devuelve o establece un valor que determina si se dibujan separadores

entre los botones de un control TabStrip que tenga los

estilos tabButton o tabFlatButton

 Image ponga un control ImageList en el formulario y llene la

colección ListImages con objetos ListImage , dándole a cada uno de ellos un

número de índice y una clave opcional.

 BeforeClick (Evento) :Se genera cuando se hace clic en un objeto Tab de un

control TabStrip o cuando el valor Selected de un objeto Tab ha cambiado.

 13

ScrollBar

Proporciona una herramienta gráfica para navegar rápidamente por una lista larga de
elementos o por una gran cantidad de información, para indicar la posición actual en una
escala o para usarla como dispositivo de entrada o indicador de velocidad o cantidad.

Uso:
Para que una página de internet, una imagen, un texto, etc, sean deslizados hacia abajo o
arriba. La barra aparece por lo general a la derecha de la pantalla, aunque también se puede
configurar para que aparezca a la izquierda.

Propiedades :

 scrollbar-width propiedad le permite al autor establecer el grosor máximo de las

barras de desplazamiento de un elemento cuando se muestran.

 AccessibleDescription Establece la descripción del control que las aplicaciones

cliente de accesibilidad utilizan.

 AllowDrop Obtiene o establece un valor que indica si el control puede aceptar los

datos que el usuario arrastra al mismo.

 14

 Anchor : Obtiene o establece los bordes del contenedor al que está enlazado un

control y determina cómo se cambia el tamaño de un control con su elemento

primario.

 Autosize :Obtiene o establece un valor que indica si el control ScrollBar cambia

automáticamente de tamaño para ajustar su contenido

 BackgroundImage :Obtiene o establece la imagen de fondo que se muestra en el

control

 BackgroundImageLayout :Obtiene o establece el diseño de imagen de fondo

como se define en la enumeración ImageLayout.

 Back Color Obtiene o establece el color de fondo del control.

 Bottom : Obtiene la distancia, en píxeles, que existe entre el borde inferior del

control y el borde superior del área cliente de su contenedor

 CanFocus : Obtiene un valor que indica si el control puede recibir el foco.

 15

Image

Muestra una imagen gráfica de un mapa de bits, de un icono o de unmetarchivo en el

formulario. Las imágenes que se muestran en un control Imagen solo son decorativas y
usan menos recursos que un cuadro de imagen.

Uso
Para visualizar gráficos e imágenes de los formatos clásicos como gif, bmp, jpg, ico, cur,
wmf etc... Pero no todos ellos son aceptados por este control como los png o lo s Tif,

Propiedades

 ActualHeight Obtiene el alto representado de este elemento.

 ActualWidth Obtiene el ancho representado de este elemento.

 AreAnyTouchesCaptured Obtiene un valor que indica si se captura al menos una

entrada táctil en este elemento.

 Cursor Obtiene o establece el cursor que aparecerá cuando el puntero del mouse

se encuentre sobre este elemento.

 DefaultStyleKey Obtiene o establece la clave que usará para hacer referencia al

estilo de este control, cuando se utilicen o se definan estilos de tema

 16

 Focusable Obtiene o establece un valor que indica si el elemento puede recibir el

foco.Es una propiedad de dependencia..

 Height Obtiene o establece el alto sugerido del elemento.

 Language Obtiene o establece la información del idioma de localización o

globalización que se aplica a un elemento

 Margin Obtiene o establece el margen externo de un elemento.

 MinWidth Obtiene o establece el valor mínimo que puede tomar el ancho del

elemento.

List box

Este control permite seleccionar un elemento solo o varios de ellos, utilizando la propiedad
Multiselect. La imagen de la izquierda muestra un ListBox en el que se selecciona un solo
elemento y a la derecha se seleccionan varios:

Uso
Se usa para mostrar una lista de elementos que el usuario puede elegir. La lista puede
desplazarse si tiene más elementos de los que se pueden mostrar al mismo tiempo
 17

Propiedades:

 Sorted : Para ordenar el contenido, es decir los elementos del control List en forma
Alfabética

 ListCount devuelve la cantidad de elementos que contiene el control.

 List evuelve o establece los elementos contenidos en la lista del control

 MultiSelect : Permite indicar si el ListBox se podrá seleccionar mas de un elemento

 Visible : Si está en True el control será visible si está en False estará oculto

 Height y Width : Establece el ancho y alto del control

 ForeColor : Establece el color de la fuente de los elementos

 Font : Establece el tipo de fuente, tamaño estilo

 Enabled : Permite habilitar o deshabilitar el control ListBox - Valores True y False

 18

 Backcolor : Establece el color de fondo del control

 19

INTERFAZ DE PROYECTO

Pantalla de Carga Inicial

 20

Login usuario

Pantalla Registrate
 21

Pantalla Temas

Pantalla Ingreso Tema

 22

Pantalla Evaluación
 23

Conclusions

With this work we could understand about the tools and properties of ASP to use them
in the development of the project and have a management of the program. We could also
specify the design of the interface to develop it and know the ideas or proposals of the other
colleagues to work with the better and develop it in the project.

We were able to know the environment for web applications and the basic tools is an
environment to create and execute dynamic and interactive applications on the Web that
can be combined with HTML pages.
 24

References

Wikipedia. (2007, 28 agosto). Scrollbar. Recovered of:

https://es.wikipedia.org/wiki/Scrollbar

R ecursos Visual Basic. (2009). Control Image - Control de imagen. Recovered of:
recursosvisualbasic.com.ar/htm/tutoriales/control-image.htm

Microsoft. (2017, 29 marzo). ListBox Control Overview. Recovered of:

https://docs.microsoft.com/en-us/dotnet/framework/winforms/controls/listbox-control-
overview-windows-forms