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>
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);
}
}
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; }
}
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">
Esta es la definición del atributo IsWindowDisplayed para la visualización de la ventana:
public bool IsWindowDisplayed { get; set; }
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%;" />
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%;" />
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%;" />
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!
Top comments (0)