DEV Community

Cover image for Diseño de formularios web con DotVVM Business Pack
Daniel Gomez Jaramillo for DotVVM

Posted on

Diseño de formularios web con DotVVM Business Pack

Hoy en día, la innovación detrás de .NET consiste en integrar todas las herramientas de desarrollo de Microsoft, librerías, lenguajes, tecnologías, propósitos, bajo un mismo framework, que sea de utilidad para el desarrollador o la empresa lo necesite. En este sentido, existen varias herramientas y controles disponibles para la realización de aplicaciones con .NET. Estas herramientas nos facilitan la construcción de aplicaciones al utilizar sus controles y componentes ya establecidos. Una de estas herramientas es DotVVM.

En un articulo previo, pudimos aprender como diseñar formularios con los controles base que DotVVM ofrece: Creación de formularios para páginas web con los controles de DotVVM.

En esta ocasión aprenderemos de igual manera a diseñar formularios web con DotVVM (con C# y HTML), pero empleando los controles premium que DotVVM ofrece, en este caso, denominados como Business Pack.

El patrón de diseño Modelo, Vista, Vistamodelo - MVVM

DotVVM se fundamenta en el patrón de diseño Modelo, Vista, Vistamodelo sobre .NET para la comunicación entre HTML (páginas web) y C# (código fuente). La finalidad de estas partes son las siguientes:

  • El modelo. — es responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.

  • La vista. — Representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.

  • El Modelo-Vista o Vista-Modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo fácilmente.

Adquirir DotVVM Business Pack

DotVVM Business Pack no es más que un NuGet privado, en el cual, podemos hacer uso de los competentes premium ya establecidos para la construcción de aplicaciones web en el ámbito empresarial.

Para la instalación de la versión del Business Pack, además de obtener la licencia correspondiente (existe una versión de prueba), es necesario realizar una configuración de unos pocos minutos para poder emplear estas funcionalidades. Los pasos para agregar el NuGet privado se pueden consultar en la siguiente dirección: https://www.dotvvm.com/docs/tutorials/commercial-dotvvm-private-nuget-feed/2.0.

Crear un proyecto DotVVM con Business Pack en Visual Studio 2019

Para crear un proyecto con la opción de Business Pack en DotVVM desde Visual Studio 2019, empezaremos creando el proyecto como cualquier otro de DotVVM:

Al especificar el nombre y continuar, el asistente de inicialización del proyecto nos brindara una serie de opciones para agregar ciertas funcionalidades al proyecto. En este caso la funcionalidad que nos interesa es la de DotVVM Business Pack ubicada en la sección DotVVM Commercial Extensions:

Formulario DotVVM con Business Pack

Para ejemplificar la utilización de componentes Business Pack de DotVVM, tendemos una pequeña aplicación como esta:

Teniendo en cuenta que esta página web en DotVVM está conformada por una vista y por su correspondiente vistamodelo, analicemos las partes más importantes en conjunto de estos elementos.

Vista

@viewModel BPFormControls.ViewModels.DefaultViewModel, BPFormControls
@masterPage Views/MasterPage.dotmaster
<dot:Content ContentPlaceHolderID="MainContent">

    <h1 align="center">
        <img src="UserIcon.png" width="20%" height="20%" />
        <br />
        <b>{{value: Title}}</b>
    </h1>

    <div align="center">

        <bp:Window IsDisplayed="{value: IsWindowDisplayed}"
                   HeaderText="Form"
                   CloseOnEscape="false"
                   CloseOnOutsideClick="false">
            <h1 align="center"><p><b>Pearson Form</b>.</p></h1>

            <div Validator.Value="{value: Person.Username}"
                 Validator.InvalidCssClass="has-error"
                 Validator.SetToolTipText="true"
                 class="page-input-box">
                <b>Username:</b>
                <br />
                <bp:TextBox Text="{value: Person.Username}"
                            UpdateTextAfterKeydown="true"
                            Type="Normal"
                            Placeholder="Insert your username..."
                            AutoFocus="true"
                            style="width: 80%;" />
            </div>

            <p />

            <div Validator.Value="{value: Person.EnrollmentDate}"
                 Validator.InvalidCssClass="has-error"
                 Validator.SetToolTipText="true"
                 class="page-input-box">
                <b>EnrollmentDate:</b>
                <br />

                <bp:DateTimePicker SelectedDateTime="{value: Person.EnrollmentDate}"
                                   HourText="Hours"
                                   MinuteText="Minutes"
                                   SecondText="Seconds"
                                   AmPmDesignatorText="AM/PM"
                                   style="width: 80%;" />

            </div>

            <p />

            <div Validator.Value="{value: Person.EnrollmentDate}"
                 Validator.InvalidCssClass="has-error"
                 Validator.SetToolTipText="true"
                 class="page-input-box">
                <b>Gender:</b>
                <br />

                <bp:RadioButton CheckedItem="{value: Person.Gender}"
                                CheckedValue="Male"
                                Text="Male" />
                <bp:RadioButton CheckedItem="{value: Person.Gender}"
                                CheckedValue="Female"
                                Text="Female" />
            </div>

            <p />

            <b>About:</b>
            <br />
            <bp:TextBox Text="{value: Person.About}"
                        Type="MultiLine"
                        Placeholder="Enter information about you..."
                        class="page-input" style="width: 80%;" />

            <p />

            <b>Profile Picture:</b>
            <br />
            <bp:FileUpload Data="{value: ProfilePicture}"
                           AllowMultipleFiles="false"
                           UploadCompleted="{command: ProcessFile()}"
                           class="page-input" style="width: 80%;" />

            <p />

            <bp:Button Text="Process"
                       Click="{command: Process()}"
                       style="width: 80%;"/>

            <p />

        </bp:Window>

        <bp:Button Text="Start form"
                   Click="{command: IsWindowDisplayed = true}" />

    </div>
</dot:Content>
Enter fullscreen mode Exit fullscreen mode

Vistamodelo

public class DefaultViewModel : MasterPageViewModel
{
    public string Title { get; set; }
    public PersonModel Person { get; set; } = new PersonModel { EnrollmentDate = DateTime.UtcNow.Date };
    public bool IsWindowDisplayed { get; set; }

    public UploadData ProfilePicture { get; set; } = new UploadData();


    public DefaultViewModel()
    {
        Title = "Person Form";
    }

    public void Process()
    {
        this.IsWindowDisplayed = false;
        String script = "alert('" + "Welcome" + " " + Person.Username + " to Web App :) ')";
        Context.ResourceManager.AddStartupScript(script);
    }

    public void ProcessFile()
    {
        // do what you have to do with the uploaded files
        String script = "alert('" + "ProcessFile() was called.')";
        Context.ResourceManager.AddStartupScript(script);
    }
}
Enter fullscreen mode Exit fullscreen mode

Modelo

public class PersonModel
    {
        [Required]
        public string Username { get; set; }
        [Required]
        public DateTime EnrollmentDate { get; set; }
        [Required]
        public string Gender { get; set; }
        public string About { get; set; }
    }

Enter fullscreen mode Exit fullscreen mode

El primer elemento que analizaremos es el componente Window, el cual, representa a una ventana de diálogo de tipo modal, como en HTML. Este control nos permite personalizar directamente desde sus atributos como se visualizará la ventana. Si estuviésemos trabajando con los controles base de DotVVM, para lograr esta funcionalidad tendríamos que hacer uso de algunas funcionalidades de Javascript directamente para establecer la ventana. En este ejemplo, el título de la ventana se puede asignar. Asimismo, se pueden personalizar ciertas propiedades, por ejemplo, no permitir que la ventana se cierre al presionar la tecla Escape o dar clic fuera del recuadro de la ventana. En este ejemplo, el atributo booleano IsWindowDisplayed, de acuerdo con su valor true o false, permitirá visualizar o no la ventana establecida.

<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
                   HeaderText="Form"
                   CloseOnEscape="false"
                   CloseOnOutsideClick="false">
Enter fullscreen mode Exit fullscreen mode

Esta es la definición del atributo IsWindowDisplayed para la visualización de la ventana:

public bool IsWindowDisplayed { get; set; }
Enter fullscreen mode Exit fullscreen mode

Más información sobre el componente Window aquí: https://www.dotvvm.com/docs/controls/businesspack/Window/2.0.

Para mostrar la ventana, se hace uso de un botón. Este botón también es otro de los componentes Business Pack. La versión premium permite realizar ciertas personalizaciones en cuanto a sus estilos, por ejemplo, activar/desactivar el botón, asignar un icono, entre otras funcionalidades: https://www.dotvvm.com/docs/controls/businesspack/Button/2.0.

El resultado es el siguiente:

Al cargar la ventana, vemos como el cursor se posiciona en la caja de texto destinado para el atributo Username de la Persona, esta propiedad se llama AutoFocus, y es parte del componente premium TextBox.

<bp:TextBox Text="{value: Person.Username}"
            UpdateTextAfterKeydown="true"
            Type="Normal"
            Placeholder="Insert your username..."
            AutoFocus="true"
            style="width: 80%;" />
Enter fullscreen mode Exit fullscreen mode

Entre las características de este componente, uno de los más relevantes es la propiedad Type. Esta permite especificar si el componente es de tipo texto, contraseña o un textarea. Por ejemplo, en el caso de la aplicación, la sección About de la Persona a través del tipo MultiLine se ve así:

<bp:TextBox Text="{value: Person.About}"
            Type="MultiLine"
            Placeholder="Enter information about you..."
            class="page-input" style="width: 80%;" />
Enter fullscreen mode Exit fullscreen mode

Más información sobre el componente TextBox aquí: https://www.dotvvm.com/docs/controls/businesspack/TextBox/2.0.

Continuando con el análisis de este formulario, ahora revisaremos el componente DatePicker, un control premium que permite trabajar con fechas y horas a través de diseños ya establecidos. En este caso, el componente se ve algo como esto:

Los componentes Business Pack generalmente tienen un mayor numero de propiedades que nos permiten personalizar los controles. En este caso, en el DateTimePicker, se puede ajustar por ejemplo el formato de la hora (AM/PM o 24 horas), establecer iconos, ajustar el día de inicio de la semana, entre otros.

Para conocer más sobre el componente DateTimePicker, se puede acceder a la siguiente acceder a la siguiente dirección: https://www.dotvvm.com/docs/controls/businesspack/DatePicker/2.0.

Finalmente, el ultimo componente que analizaremos es FileUpload, otro de los controles exclusivos de las herramientas Business Pack que permite cargar archivos desde un formulario, para procesarlos y cumplir algún objetivo en específico. Para este caso, el control puede ser de utilidad para cargar la imagen de perfil de un usuario determinado.

Para el manejo de archivos, una imagen por ejemplo puede ser arrastrada a la sección de carga o a través de la búsqueda por medio de los directorios del sistema operativo.

<bp:FileUpload Data="{value: ProfilePicture}"
                AllowMultipleFiles="false"
                UploadCompleted="{command: ProcessFile()}"
                class="page-input" style="width: 80%;" />
Enter fullscreen mode Exit fullscreen mode

Existen ciertas funcionalidades que se pueden tener en cuenta en este control, por ejemplo, especificar si se pueden cargar uno o varios archivos a través de la propiedad AllowMultipleFiles, realizar una acción determinada cuando el archivo se haya subido a través de la propiedad UploadCompleted, entre otras: https://www.dotvvm.com/docs/controls/businesspack/FileUpload/2.0.

¿Qué sigue?

Con este artículo, hemos aprendido ciertas características de los componentes premium de DotVVM a través de su Business Pack. Asimismo, hemos visto como crear formularios dinámicos a través de la implementación de vistas y modelos de las vistas con los controles predefinidos por DotVVM para trabajar con páginas web.

El código fuente de esta implementación está disponible en este repositorio: DotVVM Business Pack.

Recursos adicionales

¿Deseas saber cuáles son los pasos para crear una aplicación DotVVM? Para ello puedes revisar este articulo: Pasos para crear una aplicación MVVM (Model-View-Viewmodel) con DotVVM y ASP.NET Core.

¿Quieres dar tus primeros pasos en el desarrollo de aplicaciones web con ASP.NET Core y DotVVM? Aprende mas en este tutorial: DotVVM and ASP.NET Core: Implementing CRUD operations.

Gracias

Si tienes alguna inquietud o necesitas ayuda en algo particular, será un gusto poder ayudar.

Nos vemos en Twitter!! :)
¡Hasta pronto!

Discussion (0)