Cajas de mensaje en Silverlight 2 RC con la nueva clase MessageBox (…y también al viejo estilo)

MessageBox. Un nuevo modo de mostrar mensajes


Una de las novedades que incorpora la Release Candidate de Silverlight 2 consiste en la posibilidad de utilizar la nueva clase MessageBox para crear un sencillo cuadro de diálogo que nos permita mostrar un mensaje o aviso al usuario.


El método Show de esta clase es el encargado de la visualización de los mensajes, disponiendo de dos sobrecargas que nos permiten presentar el aviso al usuario con ligeras variaciones.


 


Un mensaje sencillo


Mediante la primera sobrecarga visualizaremos la caja de mensaje con un texto simple; para ello, vamos a crear un proyecto en Visual Studio con el siguiente código en su página XAML.


<UserControl x:Class=”SL2RCMessageBox.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”400″ Height=”300″>

<Grid x:Name=”LayoutRoot” Background=”White”>
<StackPanel x:Name=”pnlPrincipal” Background=”Beige”>
<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Center” Margin=”5″>
<TextBlock Margin=”5″ TextDecorations=”Underline” FontSize=”16″>
Clase MessageBox
</TextBlock>
</StackPanel>

<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Left” Margin=”5″>
<TextBlock Margin=”5″>Texto del mensaje</TextBlock>
<TextBox x:Name=”txtMensaje” Width=”200″ Height=”25″ />
</StackPanel>

<StackPanel Margin=”5″ >
<Button x:Name=”btnMensajeSimple”
Width=”150″ Height=”25″
Content=”Mensaje simple”
Click=”btnMensajeSimple_Click” />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>


 


Para el evento Click del botón btnMensajeSimple escribiremos el siguiente bloque de código, en el que utilizaremos la clase MessageBox para mostrar un mensaje conteniendo el texto que hayamos escrito en el TextBox txtMensaje.


private void btnMensajeSimple_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(this.txtMensaje.Text);
}

 


El resultado en tiempo de ejecución lo podemos ver en la siguiente imagen.



 


Si estamos acostumbrados al uso de los cuadros de mensaje desde JavaScript utilizando la función alert, como el de la siguiente imagen, nos habremos percatado inmediatamente de ciertas diferencias.



 


Utilizando Internet Explorer como navegador, la ventana obtenida mediante la función alert muestra un título, y al lado del texto se visualiza un icono, cosa que no ocurre con MessageBox.Show, lo cual en ciertos casos es de agradecer, ya que puede que no queramos o no nos guste que nuestros mensajes tengan dicho título e icono en la ventana.


 


Completando el mensaje con un título y selección de respuesta


No obstante, si el hecho de poder utilizar un título personalizado para la ventana de mensaje nos resulta útil, la otra sobrecarga de Show nos permite disponer de dicha característica, así como de la posibilidad de visualizar los botones Aceptar y Cancelar, de forma que el usuario pueda seleccionar una respuesta ante una pregunta que le formulemos mediante el mensaje.


A fin de ilustrar esta otra forma de mostrar el mensaje, añadiremos un nuevo TextBox a la página XAML para poder escribir el título, y otro botón para llamar a esta sobrecarga de Show.


<!–….–>
<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Left” Margin=”5″>
<TextBlock Margin=”5″>Título del mensaje</TextBlock>
<TextBox x:Name=”txtTitulo” Width=”200″ Height=”25″ />
</StackPanel>

<StackPanel Margin=”5″ >
<Button x:Name=”btnMensajeTitulo”
Width=”150″ Height=”25″
Content=”Mensaje con título”
Click=”btnMensajeTitulo_Click” />
</StackPanel>
<!–….–>


 


La funcionalidad que vamos a implementar consiste en lo siguiente: cuando el usuario pulse uno de los botones del MessageBox, cambiaremos el color de fondo de las cajas de texto de la página. Mediante la enumeración MessageBoxButton especificamos los botones a mostrar en el cuadro de diálogo de mensaje; mientras que el método Show devuelve un tipo MessageBoxResult cuyo valor consultaremos para comprobar el botón pulsado y actuar en consecuencia.


private void btnMensajeTitulo_Click(object sender, RoutedEventArgs e)
{
MessageBoxResult oResultado = MessageBox.Show(this.txtMensaje.Text,
this.txtTitulo.Text, MessageBoxButton.OKCancel);

switch (oResultado)
{
case MessageBoxResult.OK:
this.txtMensaje.Background = new SolidColorBrush(Colors.Cyan);
this.txtTitulo.Background = new SolidColorBrush(Colors.Cyan);
break;

case MessageBoxResult.Cancel:
this.txtMensaje.Background = new SolidColorBrush(Colors.White);
this.txtTitulo.Background = new SolidColorBrush(Colors.White);
break;
}
}


 


La siguiente imagen muestra el efecto obtenido.



 


La clase HtmlWindow. Puerta de acceso a los mensajes en JavaScript


La clase HtmlPage, situada en el espacio de nombres System.Windows.Browser, dispone de una propiedad llamada Window, que contiene un objeto de tipo HtmlWindow, el cual nos proporciona acceso, mediante los métodos Alert y Confirm, a las funciones JavaScript del mismo nombre,  con las cuales conseguiremos la misma funcionalidad que la ya explicada anteriormente con la clase MessageBox, si bien el uso de MessageBox proporciona un estilo de codificación más “a la C#”, por lo que pensamos que el programador se encontrará más cómodo utilizando esta última clase.


No obstante, si por cualquier motivo no queremos emplear MessageBox, vamos a añadir a nuestro ejemplo un par de botones adicionales para demostrar el funcionamiento de estos métodos.


<!–….–>
<StackPanel x:Name=”pnlHtmlPageWindow”
Background=”Aquamarine”
Margin=”5,20,5,5″
Width=”380″>

<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Center” Margin=”5″>
<TextBlock Margin=”5″ TextDecorations=”Underline” FontSize=”16″>HtmlPage.Window</TextBlock>
</StackPanel>

<StackPanel Orientation=”Horizontal” Margin=”5″ HorizontalAlignment=”Center”>
<Button x:Name=”btnAlert”
Width=”100″ Height=”25″
Margin=”0,0,20,0″
Content=”Alert”
Click=”btnAlert_Click” />

<Button x:Name=”btnConfirm”
Width=”100″ Height=”25″
Margin=”0,0,20,0″
Content=”Confirm”
Click=”btnConfirm_Click” />
</StackPanel>
</StackPanel>
<!–….–>


 


Tanto Alert como Confirm reciben un parámetro de tipo string que será el texto mostrado por la caja de mensaje, con la diferencia de que Confirm devuelve un tipo bool, mediante el que podremos averiguar el botón pulsado por el usuario, para realizar la acción correspondiente.


private void btnAlert_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Alert(this.txtMensaje.Text);
}

private void btnConfirm_Click(object sender, RoutedEventArgs e)
{
if (HtmlPage.Window.Confirm(this.txtMensaje.Text))
{
this.pnlHtmlPageWindow.Background = new SolidColorBrush(Colors.Magenta);
}
else
{
this.pnlHtmlPageWindow.Background = new SolidColorBrush(Colors.Gray);
}
}


 


El mensaje obtenido mediante HtmlPage.Window.Alert es el siguiente.



 


En cuanto a HtmlPage.Window.Confirm, la siguiente imagen muestra el resultado.



 


HtmlWindow.Invoke. Invocando a funciones JavaScript desde Silverlight


Y para finalizar este artículo vamos a presentar a Invoke, otro de los métodos de la clase HtmlWindow, al que pasaremos como primer parámetro una cadena con el nombre de la función JavaScript a ejecutar, mientras que como segundo parámetro podemos utilizar otra cadena o bien un array que será pasado como parámetro a la función. Este método devuelve un tipo object, que deberemos convertir a un tipo más adecuado, según el valor que devuelva la función JavaScript que hayamos llamado.


Para ilustrar el uso de este método, en primer lugar añadiremos una función JavaScript a la página aspx que aloja el contenido Silverlight de la aplicación.


<script type=“text/javascript”>
function MensajeJS(sTextoMensaje) {
return confirm(sTextoMensaje);
}
</script>

 


Seguidamente añadiremos otro control Button a la página XAML, escribiendo a continuación el código correspondiente a su evento Click, en el que mediante el método Invoke ejecutaremos la función MensajeJS(), que abrirá un cuadro de mensaje de confirmación. Al obtener la respuesta de la ejecución del código JavaScript, cambiaremos el color del panel que contiene estos botones según el botón pulsado.


<!–….–>
<Button x:Name=”btnInvoke”
Width=”100″ Height=”25″
Content=”Invoke”
Click=”btnInvoke_Click” />
<!–….–>

 


private void btnInvoke_Click(object sender, RoutedEventArgs e)
{
bool bResultado = (bool)HtmlPage.Window.Invoke(“MensajeJS”, this.txtMensaje.Text);

if (bResultado)
{
this.pnlPrincipal.Background = new SolidColorBrush(Colors.Orange);
}
else
{
this.pnlPrincipal.Background = new SolidColorBrush(Colors.Purple);
}
}


 


La siguiente imagen muestra esta parte del ejemplo en funcionamiento.



 


Y esto ha sido todo en este artículo, en el que hemos realizado un repaso de las distintas posibilidades que ofrece Silverlight en cuanto a la creación de cuadros de mensaje se refiere. El código de ejemplo puede descargarse en los siguientes enlaces: C# y VB.


Espero que os resulte de utilidad.


Un saludo.

4 Comentarios

  1. anonymous

    Muy buenos post, siempre aportando valor añadido. Saludos.

  2. lmblanco

    Hola Enrique

    Muchas gracias por leer el artículo, celebro que te haya parecido interesante 😎

    Un saludo.
    Luismi

  3. anonymous

    ánimo, bitácoras como esta hacen la información más accesible en español.

    Gracias.

  4. lmblanco

    Hola Pablo

    Muchas gracias por tus ánimos, celebro que te gusten los contenidos.

    Un saludo,
    Luismi

Leave a Reply

Tema creado por Anders Norén