Saltar al contenido
Menú
El blog de Kañaz
  • Inicio
  • Acerca de
  • Github
  • Youtube
  • LinkedIn
  • Twitter
El blog de Kañaz

Validación de datos en Silverlight

Publicada el 26 febrero, 201221 mayo, 2012
Twittear

Fijemos un escenario, ustedes deben crear un formulario de entrada, los usuarios ingresan y comienzan a colocar información incompleta o simplemente no colocan lo que se les pide, lo peor del caso es que pueden incluso llegar a colocar información que puede alterar el funcionamiento de nuestra aplicación, como por ejemplo, ingresar letras en espacios reservados para números (si, lo sé, eso puedes remediarlo con un comboBox, pero créeme, hay muchos escenarios disponibles).

El punto es que para poder lograr que ninguno de esos problemas nos afecte es que nosotros tenemos la gran facultad de poder validar nuestra información en Silverlight, de una forma asombrosamente sencilla y que nos ahorarrá muchísimos dolores de cabeza.

Comienza por crear tu proyecto de Expression Blend, y después crea una carpeta y ahí dentro crea una nueva clase. El árbol de tu proyecto deberá verse de la siguiente forma.

Proyecto

En esta clase es donde pondrás todas las propiedades que utilizaremos para validar, el código C# es el siguiente.

using System;
 
namespace Validacion
{
public class Validador
{
private string nombre;
private string rangoEdad;
private bool idioma;
private string actividad;
private bool aceptar;
 
public string Nombre
{
get { return nombre; }
set
{
if (string.IsNullOrEmpty(value))
throw new Exception("No puedes dejar este campo vacío");
nombre = value;
}
}
 
public string RangoEdad
{
get { return rangoEdad; }
set
{
if (!string.IsNullOrEmpty(value) && value.Equals("Menor de 18 años", StringComparison.OrdinalIgnoreCase))
throw new Exception("No es la edad mas recomendada para ingresar al sitio");
rangoEdad = value;
}
}
 
public bool Idioma
{
get { return idioma; }
set
{
idioma = value;
if (value)
throw new Exception("El idioma del sitio es únicamente español");
idioma = value;
}
}
 
public string Actividad
{
get { return actividad; }
set
{
if (!string.IsNullOrEmpty(value) && value.Equals("Redes", StringComparison.OrdinalIgnoreCase))
throw new Exception("El sitio esta orientado al desarrollo de software");
actividad = value;
}
}
 
public bool Aceptar
{
get { return aceptar; }
set
{
if (!value)
throw new Exception("Debes aceptar los términos para poder continuar");
aceptar = value;
}
}
 
}
}

using System; namespace Validacion { public class Validador { private string nombre; private string rangoEdad; private bool idioma; private string actividad; private bool aceptar; public string Nombre { get { return nombre; } set { if (string.IsNullOrEmpty(value)) throw new Exception("No puedes dejar este campo vacío"); nombre = value; } } public string RangoEdad { get { return rangoEdad; } set { if (!string.IsNullOrEmpty(value) && value.Equals("Menor de 18 años", StringComparison.OrdinalIgnoreCase)) throw new Exception("No es la edad mas recomendada para ingresar al sitio"); rangoEdad = value; } } public bool Idioma { get { return idioma; } set { idioma = value; if (value) throw new Exception("El idioma del sitio es únicamente español"); idioma = value; } } public string Actividad { get { return actividad; } set { if (!string.IsNullOrEmpty(value) && value.Equals("Redes", StringComparison.OrdinalIgnoreCase)) throw new Exception("El sitio esta orientado al desarrollo de software"); actividad = value; } } public bool Aceptar { get { return aceptar; } set { if (!value) throw new Exception("Debes aceptar los términos para poder continuar"); aceptar = value; } } } }

Nota: Si quieres acelerar el proceso de “producción” de las propiedades, puedes utilizar el snippet propfull, después de presionar dos veces el tabulador, creará la propiedad automáticamente, dándote la posibilidad de insertar el código restante de con un ahorro de tiempo.

Como puedes ver,  creamos cinco propiedades diferentes, en donde al momento de establecerles el valor primero las pasaremos por una condición, en donde de cumplirla comenzará a arrojar excepciones, en caso contrario todo pasará desapercibido.

En el XAML, tendremos una interfaz como la siguiente.

Interfaz

Ya con la interfaz lista, lo primero que debes hacer es utilizar el DataContext de tu control mas grande (LayoutRoot sería la mejor opción) y asignarle la clase que recién acabas de crear.

<Grid x:Name="LayoutRoot" Background="#FF858585">
<Grid.DataContext>
<local:Validador/>
</Grid.DataContext>

<Grid x:Name="LayoutRoot" Background="#FF858585"> <Grid.DataContext> <local:Validador/> </Grid.DataContext>

Al tener el DataContext de tu control ya asignado, entonces vete a Visual Studio, selecciona el TextBox y en su ventana de propiedades, busca la propiedad Text.

Propiedades

¿Ves el pequeño cuadrito blanco que está a la derecha del texto? Bien, presiónalo, te aparecerá un menú similar a esto, selecciona ahí la opción ApplyDataBinding.

 

Menu Binding

En el menú que aparece, en la sección de Path, selecciona la propiedad Nombre (como puedes ver en la pestaña de Source, esta ya asignado el DataContext a la clase que creaste al principio).

DataBinding

Por último en la pestaña de Options, selecciona la opción ValidateOnExceptions, de la siguiente forma.

Validacion

Si todo salió de acuerdo a lo planeado, el resultado será el siguiente visto en XAML.

<TextBox x:Name="txtNombre" Margin="8,56,8,0" TextWrapping="Wrap" Height="24" VerticalAlignment="Top" Text="{Binding Path=Nombre, Mode=TwoWay, ValidatesOnExceptions=True}" />

<TextBox x:Name="txtNombre" Margin="8,56,8,0" TextWrapping="Wrap" Height="24" VerticalAlignment="Top" Text="{Binding Path=Nombre, Mode=TwoWay, ValidatesOnExceptions=True}" />

Repite la misma secuencia con la caja de texto de los apellidos.

<TextBox x:Name="txtApellidos" Margin="8,106,8,0" TextWrapping="Wrap" Height="24" VerticalAlignment="Top" Text="{Binding Path=Nombre, Mode=TwoWay, ValidatesOnExceptions=True}" />

<TextBox x:Name="txtApellidos" Margin="8,106,8,0" TextWrapping="Wrap" Height="24" VerticalAlignment="Top" Text="{Binding Path=Nombre, Mode=TwoWay, ValidatesOnExceptions=True}" />

En el caso del comboBox, lo que harás será utilizar la propiedad SelectedItem, y la vas a asociar a la propiedad RangoEdad, de la siguiente forma.

<ComboBox x:Name="cmbRango" Margin="8,156,8,0" Height="24" VerticalAlignment="Top" d:LayoutOverrides="Height" SelectedItem="{Binding Path=RangoEdad, Mode=TwoWay, ValidatesOnExceptions=True}">
<sys:String>Menor de 18 años</sys:String>
<sys:String>Entre 18 y 23</sys:String>
<sys:String>Entre 24 y 28</sys:String>
<sys:String>Entre 29 y 34</sys:String>
</ComboBox>

<ComboBox x:Name="cmbRango" Margin="8,156,8,0" Height="24" VerticalAlignment="Top" d:LayoutOverrides="Height" SelectedItem="{Binding Path=RangoEdad, Mode=TwoWay, ValidatesOnExceptions=True}"> <sys:String>Menor de 18 años</sys:String> <sys:String>Entre 18 y 23</sys:String> <sys:String>Entre 24 y 28</sys:String> <sys:String>Entre 29 y 34</sys:String> </ComboBox>

En el caso de los RadioButtons, solo al que tiene el texto “Otro” es al que le asignaremos los valores, utiliza su propiedad IsChecked y asóciala a la propiedad Idioma.

<RadioButton x:Name="rdbOtro" Content="Otro" Height="23" Margin="0,0,8,167" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="114" IsChecked="{Binding Mode=TwoWay, ValidatesOnExceptions=True, Path=Idioma}"/>

<RadioButton x:Name="rdbOtro" Content="Otro" Height="23" Margin="0,0,8,167" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="114" IsChecked="{Binding Mode=TwoWay, ValidatesOnExceptions=True, Path=Idioma}"/>

Con el ListBox, utiliza la proiedad SelectedItem y asóciala a la propiedad Actividad.

<ListBox x:Name="lstActividad" Height="77" Margin="8,0,8,64" VerticalAlignment="Bottom" SelectionMode="Single" SelectedItem="{Binding Path=Actividad, Mode=TwoWay, ValidatesOnExceptions=True}">
<sys:String>Redes</sys:String>
<sys:String>Bases de datos</sys:String>
<sys:String>Análisis</sys:String>
<sys:String>Programación</sys:String>
</ListBox>

<ListBox x:Name="lstActividad" Height="77" Margin="8,0,8,64" VerticalAlignment="Bottom" SelectionMode="Single" SelectedItem="{Binding Path=Actividad, Mode=TwoWay, ValidatesOnExceptions=True}"> <sys:String>Redes</sys:String> <sys:String>Bases de datos</sys:String> <sys:String>Análisis</sys:String> <sys:String>Programación</sys:String> </ListBox>

En el CheckBox, busca la propiedad IsChecked y asóciala a la propiedad Aceptar.

<CheckBox x:Name="chkPoliticas" Content="He leído los términos y los acepto" Height="21" Margin="8,0,8,39" VerticalAlignment="Bottom" IsChecked="{Binding Path=Aceptar, Mode=TwoWay, ValidatesOnExceptions=True}" />

<CheckBox x:Name="chkPoliticas" Content="He leído los términos y los acepto" Height="21" Margin="8,0,8,39" VerticalAlignment="Bottom" IsChecked="{Binding Path=Aceptar, Mode=TwoWay, ValidatesOnExceptions=True}" />

Por último, en el botón vas a establecer una conducta para que si el usuario no ha aceptado los términos, simplemente este inhabilitado.

<Button x:Name="btnIngresar" Content="Ingresar" Height="27" Margin="8,0,8,8" VerticalAlignment="Bottom" Click="btnIngresar_Click" IsEnabled="{Binding ElementName=chkPoliticas, Path=IsChecked}" />

<Button x:Name="btnIngresar" Content="Ingresar" Height="27" Margin="8,0,8,8" VerticalAlignment="Bottom" Click="btnIngresar_Click" IsEnabled="{Binding ElementName=chkPoliticas, Path=IsChecked}" />

De esta forma es como puedes impedir que un usuario pueda ingresar información que no desees, es muy sencillo ¿no?

Como tip adicional, te recomiendo que al momento de hacer tus pruebas, lo hagas utilizando Blend, ya que en Visual Studio, al momento de depurar la aplicación será interrumpida en la excepción, causándote cierta molestia. Al lograr la excepción, tu resultado será algo como esto.

resultadoValidar

Descarga aquí el código de ejemplo.

3 comentarios en «Validación de datos en Silverlight»

  1. jesus dice:
    26 febrero, 2012 a las 5:58 am

    buen post mijo un excelente tutorial en horabuena

    Responder
  2. Edax Ucles dice:
    6 junio, 2012 a las 6:19 am

    Hola he estado viendo tu sitio es muy interesante espero poder hacer tiempo y poder ver todos tus post!! soy desarrollador de silverlight hace poco empece y me encanta mucho ! tambn tengo mi windows phone y ya hice mi primera aplicacion espero poder seguir alimentandome de esta grandiosa Plataforma, gracias por tu info!!

    Responder
    1. Amin Espinoza dice:
      6 junio, 2012 a las 3:01 pm

      No, pues muchas gracias por visitarlo y cualquier cosa aquí andamos, tu síguele con la estudiada!!

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Busca en este sitio

MI perfil de Github

Github profile

Sígueme en Twitter

Seguir a @aminespinoza
©2023 El blog de Kañaz | Funciona con SuperbThemes y WordPress