Práctica A: Crear un formulario Web Form con Microsoft ... - Willy .Net
Práctica A: Crear un formulario Web Form con Microsoft ... - Willy .Net
Práctica A: Crear un formulario Web Form con Microsoft ... - Willy .Net
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
2Ejercicio 0Configuración del laboratorioPara realizar este laboratorio, es necesario haber creado el proyecto deaplicación <strong>Web</strong> denominado Benefits y <strong>un</strong> proyecto de biblioteca de clasesBenefitsList. Estos proyecto pueden crearse utilizando Visual Basic .NET oVisual C# .NET.Si no se han creado estos proyectos, seguir los siguientes pasos:<strong>Crear</strong> la solución LabApplicationImportante Realizar este procedimiento únicamente si no se ha creado <strong>un</strong>archivo de solución LabApplication.1. Utilizando Visual Studio .NET, crear <strong>un</strong>a nueva solución en blancodenominada LabApplication:En el menú Archivo, seleccionar Nuevo, y hacer clic en Solución enblanco.En el cuadro de diálogo Nuevo proyecto, escribir LabApplication en elcuadro de texto Nombre y hacer clic en Aceptar.<strong>Crear</strong> el proyecto BenefitsImportante Realizar este procedimiento únicamente si no se ha creadoanteriormente <strong>un</strong> proyecto Benefits, o si se ha eliminado.1. <strong>Crear</strong> <strong>un</strong> nuevo proyecto de aplicación <strong>Web</strong> ASP.NET, denominadoBenefitsVB o BenefitsCS, en la solución LabApplication:a. En el menú Archivo, seleccionar Nuevo, y hacer clic en Proyecto.b. En el cuadro de diálogo Nuevo proyecto, en la lista Tipos de proyecto,hacer clic en Proyectos de Visual Basic o Proyectos de Visual C#.c. En la lista Plantillas, hacer clic en Aplicación <strong>Web</strong> ASP.NET,establecer la Ubicación en http://localhost/BenefitsVB para <strong>un</strong>proyecto Visual Basic .NET o en http://localhost/BenefitsCS para <strong>un</strong>proyecto Visual C#.d. Hacer clic en Agregar a Solución, y hacer clic en Aceptar.Precaución Cuando se agregan proyectos a la solución, es importante eluso de mayúsculas en el nombre del proyecto. Probablemente, utilizaremosalg<strong>un</strong>os <strong>formulario</strong>s <strong>Web</strong> <strong>Form</strong>s ya generados en éste y en otroslaboratorios, por ello, debemos verificar que hemos escrito en mayúsculas elnombre del proyecto Benefits.
3Para el proyecto VisualBasic .NETPara el proyecto VisualC#Actualizar el proyecto Benefits1. En Visual Studio .NET, abrir el archivo de solución LabApplication.2. En el Explorador de soluciones, hacer clic <strong>con</strong> el botón derecho enBenefitsVB o BenefitsCS, seleccionar Agregar, y hacer clic en Agregarelemento existente.3. Buscar los archivos de proyectoIr a la carpeta VB\Starter\BenefitsVB.Ir a la carpeta CS\Starter\BenefitsCS.Estas carpetas se pueden en<strong>con</strong>trar dentro del fichero labs03.zip.4. En el cuadro Archivos de tipo del cuadro de diálogo Agregar elementoexistente – Benefits, hacer clic en Todos los archivos (*.*).5. Seleccionar todos los archivos de la carpeta y hacer clic en Abrir.6. Hacer clic en Sí a la preg<strong>un</strong>ta de sobrescribir o cargar de nuevo los archivos.<strong>Crear</strong> la biblioteca de clases BenefitsListImportante Realizar estos pasos únicamente si no se ha creado anteriormente<strong>un</strong> proyecto BenefitsList, o si se ha eliminado.Para <strong>un</strong> proyecto VisualBasic .NETPara <strong>un</strong> proyecto VisualC#<strong>Crear</strong> <strong>un</strong> proyecto de biblioteca de clases<strong>Crear</strong> <strong>un</strong> nuevo proyecto de biblioteca de clases <strong>Microsoft</strong>Visual Basic® .NET <strong>con</strong> el nombre BenefitsListVB, y añadirlo a la soluciónLabApplication:En el menú Archivo, seleccionar Nuevo, y hacer clic en Proyecto.En el cuadro de diálogo Nuevo proyecto, en la lista Tipos de proyecto,hacer clic en Proyectos de Visual Basic. En la lista Plantillas, hacerclic en Biblioteca de clases, establecer el Nombre de BenefitsListVB,hacer clic en Agregar a solución, y clic en Aceptar.<strong>Crear</strong> <strong>un</strong> nuevo proyecto de biblioteca de clases <strong>Microsoft</strong> Visual C#.NET <strong>con</strong> el nombre BenefitsListCS, y añadirlo a la soluciónLabApplication:a. En el menú Archivo, hacer clic en Nuevo, y hacer clic en Proyecto.b. En el cuadro de diálogo Nuevo proyecto, en la lista Tipos de proyecto,hacer clic en Proyectos de Visual C#. En la lista Plantillas, hacer clicen Biblioteca de clases, establecer el Nombre de BenefitsListCS, hacerclic en Agregar a solución, y clic en Aceptar.Precaución Verificar que se han escrito correctamente las mayúsculas delproyecto BenefitsList.
4Para el proyecto VisualBasic .NETPara el proyecto VisualC#Actualizar el proyecto BenefitsList1. En Visual Studio .NET, abrir el archivo de solución LabApplication.2. En el Explorador de soluciones, hacer clic <strong>con</strong> el botón derecho enBenefitsListVB o BenefitsListCS, seleccionar Agregar y hacer clic enAgregar elemento existente.3. Buscar los archivos de proyecto:Ir a la carpeta VB\Starter\BenefitsListVB.Ir a la carpeta CS\Starter\BenefitsListCS.Estas carpetas se pueden en<strong>con</strong>trar dentro del fichero labs03.zip.4. En el cuadro Archivos de tipo del cuadro de diálogo Agregar elementoexistente – BenefitsList, hacer clic en Todos los archivos (*.*).5. Seleccionar todos los archivos de esta carpeta y hacer clic en Abrir.6. Hacer clic en Sí a la preg<strong>un</strong>ta de sobrescribir o cargar de nuevo los archivos.<strong>Crear</strong> <strong>un</strong>a referencia al componente BenefitsList en el proyecto Benefits1. En el proyecto Benefits de la solución LabApplication, completar lossiguientes pasos para agregar <strong>un</strong>a referencia al componente BenefitsListque acabamos de crear:a. Hacer clic <strong>con</strong> el botón derecho en el proyecto BenefitsVB oBenefitsCS en el Explorador de soluciones y hacer clic en Agregarreferencia.b. En el cuadro de diálogo Agregar referencia, en la pestaña Proyectos,hacer doble clic en el proyecto BenefitsListVB o BenefitsListCS.c. En la lista Componentes seleccionados, seleccionar el componenteBenefitsListVB o BenefitsListCS, y hacer clic en Aceptar.El componente se agrega a la carpeta Referencias del Explorador desoluciones.
5Ejercicio 1<strong>Crear</strong> el <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong> Default.aspxEn este ejercicio, crearemos <strong>un</strong> nuevo <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong> denominadodefault.aspx. A <strong>con</strong>tinuación, agregaremos <strong>un</strong> <strong>con</strong>trol de usuario, <strong>un</strong> <strong>con</strong>trolenlazado a lista, <strong>un</strong> <strong>con</strong>trol Button, y <strong>un</strong> <strong>con</strong>trol Label a la página default.aspx.Finalmente, estableceremos atributos del <strong>con</strong>trol enlazado a lista para mostrar<strong>un</strong>a lista estática de información.Colocar <strong>con</strong>troles en <strong>un</strong> <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong>1. <strong>Crear</strong> <strong>un</strong> nuevo <strong>Web</strong> <strong>Form</strong> denominado default.aspx. Este <strong>formulario</strong> <strong>Web</strong><strong>Form</strong> será la página de entrada principal de nuestra aplicación <strong>Web</strong>. Paracrear el <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong>:a. Hacer clic <strong>con</strong> el botón derecho en el proyecto BenefitsVB oBenefitsCS, seleccionar Agregar y hacer clic en Agregar <strong>Web</strong> <strong>Form</strong>.b. En el cuadro de diálogo Agregar nuevo elemento, escribir default.aspxen el campo Nombre y hacer clic en Abrir.2. Desde el Explorador de soluciones, utilizar <strong>un</strong>a operación de arrastrar ysoltar para ubicar el archivo header.ascx desde el Explorador de solucionesa la parte superior del <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong>.Nota Estudiaremos <strong>con</strong> mayor prof<strong>un</strong>didad los <strong>con</strong>troles de usuario en elMódulo “<strong>Crear</strong> <strong>con</strong>troles de usuario”.3. Desde el Cuadro de herramientas, arrastrar <strong>un</strong> <strong>con</strong>trol CheckBoxList, <strong>un</strong><strong>con</strong>trol Button, y <strong>un</strong> <strong>con</strong>trol Label al <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong>. El <strong>formulario</strong><strong>Web</strong> <strong>Form</strong> debería tener <strong>un</strong> aspecto similar a la siguiente ilustración.4. Establecer las propiedades ID y Text para los <strong>con</strong>troles CheckBoxList,Button y Label como se muestra en la siguiente tabla.Control ID TextCheckBoxList chkListBenefits Ning<strong>un</strong>oButton cmdSubmit SubmitLabel lblSelections Selected items:5. Visualizar la página en la vista Hypertext Markup Language (HTML)haciendo clic en la ficha HTML situada en la parte inferior derecha de laventana del editor.
6Visual Studio .NET ha añadido el HTML dinámico (DHTML) a los<strong>con</strong>troles CheckBoxList, Button, y Label. El atributo style que <strong>con</strong>tienelos parámetros Z-INDEX, LEFT, POSITION y TOP posiciona los<strong>con</strong>troles en la página.6. Hacer clic <strong>con</strong> el botón derecho en la página default.aspx del Explorador desoluciones y hacer clic en Ver en el explorador.Nota El proyecto debe generarse a<strong>un</strong>que no hayamos escrito código. Estose debe a que cuando agregamos componentes de interfaz de usuario a lapágina, Visual Studio .NET genera código para soportar estos elementos.La página debería tener <strong>un</strong> aspecto similar al de la ilustración, sin ningún<strong>con</strong>tenido en el <strong>con</strong>trol CheckBoxList.Agregar elementos al <strong>con</strong>trol CheckBoxList1. Visualizar la página default.aspx en la vista Diseño.2. Hacer clic en el <strong>con</strong>trol CheckBoxList chkListBenefits del <strong>formulario</strong><strong>Web</strong> <strong>Form</strong> default.aspx.3. En la ventana Propiedades, hacer clic en la propiedad Items y hacer clic enel botón … para abrir el cuadro de diálogo ListItem Collection Editor.4. En el cuadro de diálogo ListItem Collection Editor, agregar los elementosque se muestran en la siguiente tabla (<strong>con</strong> la propiedad Selected establecidaen False).TextoValorFirst ItemSe<strong>con</strong>d ItemThird ItemFirst ItemSe<strong>con</strong>d ItemThird Item5. Hacer clic en Aceptar para cerrar el cuadro de diálogo ListItem CollectionEditor.6. Guardar los cambios a default.aspx y visualizar la página en el navegador.Ahora que hemos agregado elementos al <strong>con</strong>trol CheckBoxList, la lista deelementos sobrescribe el botón Submit.7. Visualizar de nuevo la página default.aspx en la vista Diseño.8. Hacer clic en el fondo de la página default.aspx, y en la ventanaPropiedades, establecer la propiedad pageLayout en FlowLayout (en lugarde GridLayout).
7A<strong>un</strong>que FlowLayout hace que el diseño de la página sea <strong>un</strong> poco másdifícil, permite que los elementos de interfaz de usuario se muevanautomáticamente cuando otros elementos de la página cambian de tamaño.Por ejemplo, cuando el <strong>con</strong>trol chkListBenefits tenía más elementosagregados a la lista, se sobrescribió el botón Submit. UtilizandoFlowLayout, el botón se moverá automáticamente para dejar espacio para<strong>un</strong>a lista más larga.9. Mover los <strong>con</strong>troles en la página, utilizando retornos de carro, para que lapágina tenga <strong>un</strong> aspecto similar al de la siguiente ilustración.10. Visualizar de nuevo la página en el explorador.Ahora la lista de casillas de verificación no sobrescribe el botón Submit.11. Cerrar la ventana del explorador.
8Ejercicio 2<strong>Crear</strong> el <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong> Life.aspxEn este ejercicio, crearemos la interfaz de usuario de la página life.aspx. Estapágina implementa el beneficio de seguro de vida de la compañía.Agregar <strong>con</strong>troles a la página life.aspx1. <strong>Crear</strong> <strong>un</strong> nuevo <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong> denominado life.aspx. Para crear el<strong>formulario</strong> <strong>Web</strong> <strong>Form</strong>:a. Hacer clic <strong>con</strong> el botón derecho en el proyecto BenefitsVB oBenefitsCS, seleccionar Agregar y hacer clic en Agregar <strong>Web</strong> <strong>Form</strong>.b. En el cuadro de diálogo Agregar nuevo elemento, escribir life.aspx enel campo Nombre y hacer clic en Abrir.2. Ubicar <strong>un</strong> <strong>con</strong>trol Calendar en el <strong>formulario</strong> <strong>Web</strong> <strong>Form</strong>.3. Hacer clic <strong>con</strong> el botón derecho en el <strong>con</strong>trol Calendar en la vista Diseño yseleccionar <strong>Form</strong>ato automático para abrir el cuadro de diálogo <strong>Form</strong>atoautomático de Calendar.4. Hacer clic en Colorful 1 en la lista Seleccionar <strong>un</strong> esquema, y hacer clicen Aceptar.5. Situar el <strong>con</strong>trol de usuario header.ascx, tres <strong>con</strong>troles TextBox, dos<strong>con</strong>troles CheckBox, <strong>un</strong> <strong>con</strong>trol Button, y cinco <strong>con</strong>troles Label en lapágina.
96. Establecer las propiedades ID y Text de cada <strong>con</strong>trol como se muestra en lasiguiente tabla.Control ID TextoCuadro de texto Name txtName ning<strong>un</strong>oCuadro de texto Birth txtBirthning<strong>un</strong>odateCuadro de textotxtCoveragening<strong>un</strong>oCoverageCasilla de verificación chkShortTermShort-term disabilityShort-term disabilityCasilla de verificación chkLongTermLong-term disabilityLong-term disabilityBotón Save cmdSave SaveLabel1 default Life InsuranceApplicationLabel2 default Proof of good healthappointmentLabel3 default Name:Label4 default Birth Date:Label5 default Coverage:Nota Cambiar el tamaño de la fuente de Label1, en la ventana Propiedades dela etiqueta, expandir Fuente, seleccionar Tamaño, y elegir Grande.7. Hacer clic <strong>con</strong> el botón derecho en la página life.aspx del Explorador desoluciones y hacer clic en Ver en el explorador.8. Escribir el nombre y fecha de nacimiento en los campos y hacer clic enGuardar. Los valores introducidos deberían permanecer en la página.
Change language