Construyendo una UI

¿que tan difícil puede ser construir una interface de usuario web para alguien que no sabe mucho del tema?

Poco. Siguiendo con la idea de siempre, delegamos esto a algún experto, el único detalle en este caso es que no conozco ninguno que sea de uso gratuito y que llegue a los niveles de los productos comerciales.

En este caso vamos a usar DevExpress en su modo evaluación, por lo que vamos a tener una leyenda en la parte superior de nuestras páginas advirtiendo esto.

Como primer UI vamos a hacer un sitio web, vamos a ver como con pocas líneas de nuestro código logramos mucha funcionalidad.

El objetivo

Este formulario vamos a dividirlo en dos partes

• Master Page: el título (“Digital Media Store”), el combo para seleccionar la apariencia, el menú de la izquierda y el pié de página.
• CustomersView: el filtro por país y la grilla.

En esta última es que vamos a centrarnos, como podemos ver, además del filtro por país, la grilla tiene la funcionalidad de filtro por cada una de las columnas (eso es la primer fila con textbox vacios). También tiene un botones para editar, crear y eliminar customers. tiene la opción de agrupar por columnas (“Drag a column header here to group by that column”), ordenar, pagina los datos, y todo esto con AJAX.

pregunta: ¿cuantas líneas de código necesitamos para hacer esto, incluyendo los formularios de edición/alta?. Respuesta: 23 líneas en el aspx, 0 (cero) en el code behind y 16 de código C# en una clase. Veámoslas…

El código

El filtro por país

un label, un textbox y un button que solo dispara un postback

<table>
    <tr>
        <td><dxe:ASPxLabel ID="lblContry" Text="Country" runat="server" ></dxe:ASPxLabel></td>
        <td><dxe:ASPxTextBox ID="txtCountry" runat="server" Text="France" Width="170px"></dxe:ASPxTextBox></td>
        <td><dxe:ASPxButton ID="btnSearch" runat="server" Text="Search"></dxe:ASPxButton></td>
    </tr>
</table>

La grilla:

una grilla de DevExpress

<dxwgv:ASPxGridView ID="gridCustomers" runat="server" DataSourceID="odsCustomers" KeyFieldName="Id" Width="100%">
    <Columns>
        <dxwgv:GridViewCommandColumn>
            <EditButton Visible="true" />
            <NewButton Visible="True" />
            <DeleteButton Visible="True" />
        </dxwgv:GridViewCommandColumn>
        <dxwgv:GridViewDataColumn FieldName="FirstName" />
        <dxwgv:GridViewDataColumn FieldName="LastName" />
        <dxwgv:GridViewDataColumn FieldName="Country" />
        <dxwgv:GridViewDataColumn FieldName="State" />
        <dxwgv:GridViewDataColumn FieldName="City" />
    </Columns>
    <Settings ShowFilterRow="True" ShowGroupPanel="true"/>
    <SettingsBehavior ConfirmDelete="true" />
    <SettingsEditing EditFormColumnCount="1" Mode="PopupEditForm" PopupEditFormModal="true" PopupEditFormHorizontalAlign="Center" PopupEditFormVerticalAlign="Middle" />
</dxwgv:ASPxGridView>

veamos las propiedades significativas:

• DataSourceID para vincularnos al data source,
• KeyFieldName es en nombre de la property que identifica a cada objeto (en este caso es Id)
• Columns es la lista de columnas que va a tener la grilla, empezando por las de comando: EditButton, NewButton y DeleteButton y siguiente por las propiedades que queremos mostrar en la grilla y/o en los formularios de edición.
• ShowFilterRow muestra la primer fila donde están los campos para el filtrado.
• ShowGroupPanel muestra el panel de agrupamiento.
• ConfirmDelete pide una confirmación al intentar borrar un registro.
• Mode indicamos el modo en que queremos que aparezca la pantalla de alta y edición de nuevos customers.
• PopupEditFormModal indica que el popup va a ser modal, es decir que no se va a poder usar otra parte de la página mientras se esté editando.

y esto es todo para obtener la funcionalidad citada: filtrar, editar, crear, eliminar, agrupar, ordenar y paginar (estas dos últimas están activas por default).

El DataSource

un ObjectDataSource de asp.net:

<asp:ObjectDataSource ID="odsCustomers" runat="server" DataObjectTypeName="DMS.DTOs.CustomerDTO, DMS.DTOs" TypeName="DMS.Web.DataSources.CustomerDataSource"
                      SelectMethod="Select" InsertMethod="Save" UpdateMethod="Save" DeleteMethod="Delete">
     <SelectParameters>
        <asp:ControlParameter Name="country" PropertyName="Text" ControlID="txtCountry" />
     </SelectParameters>
</asp:ObjectDataSource>

veamos las propiedades significativas:

• DataObjectTypeName indica el tipo de objeto que vamos listar en la grilla, en este caso un CustomerDTO.
• TypeName es el tipo de objeto que vamos a usar como datasource y los métodos para cada acción: SelectMethod, InsertMethod, UpdateMethod, DeleteMethod.
• SelectParameters son los parámetros que tiene el método asociado a SelectMethod, en este caso se llama country y el valor lo tomamos de la propiedad “Text” del control “txtCountry”.

El código del DataSource:

public class CustomerDataSource
{
    private readonly ICustomerService service = ServiceLocatorHelper.GetService<ICustomerService>();

    public IList<CustomerDTO> Select(string country)
    {
        ResultListDTO<CustomerDTO> result = service.GetCustomersByContry(country);
        if (result.Exception != null)
            throw result.Exception;
        return result.Items;
    }

    public void Save(CustomerDTO dto)
    {
        service.Save(dto);
    }

    public void Delete(CustomerDTO dto)
    {
        service.DeleteById(dto.Id);
    }
}

Aquí simplemente hacemos llamadas al servicio de manejo de customers y manejamos los valores de retorno. Aún me falta una vuelta de rosca para el manejo de mensajes, pero en breve espero que esté.

Y esto es solo una mínima muestra de lo que se puede hacer con DevExpress