mar 20

Malaga .NET User Group: Silverlight + Javascript

.Net, Silverlight, Web 3 Comentarios »

El pasado 19 de Marzo tuvimos una sesión de Silverlight en el grupo de Usuario de .Net de Málaga. Participé junto al MVP Braulio Diez. Braulio hizo una magnífica presentación de Silverlight y hasta donde podemos llevar esta tecnología. 

Aquí podeis conseguir el material (presentación y ejemplos) que usó Braulio.

Por mi parte hice una pequeña demostración de la integración de una aplicación Silverlight con Javascript.

  • Acceso al DOM de la página
  • Llamar a métodos Javascript desde Silverlight
  • Llamar a métodos Silverligth desde Javascript
  • Acceso a la Sesión de una aplicación asp.Net

SessionSLJS

Aqui podeís descargar la presentación y el código de los ejemplos.

oct 17

TextBox: Texto introducido mayor que Width del Control

Silverlight Sin comentarios »

Simulando al amigo Alejandro (maaestro web de Chuletilla`s Web), aqui va una mini entrada.

Es posible encontrarse en la tesitura de tener un formulario en el que por motivos de dimensiones tengamos un control TextBox con un width predeterminado en el que el número de caracteres permitidos tengan una longitud mayor que el width del control, por lo que siempre veremos el final del texto introducido en vez del comienzo de este.

Extensión del control TextBox.

La solución no es compleja, y consiste en crear un nuevo control TextBox que añada el comportamiento requerido, extendiendo la clase TextBox. Solo tenemos que controlar el evento LostFocus del control.

PLAIN TEXT
C#:
  1. public class TextBoxExtension : TextBox
  2. {
  3.     public TextBoxExtension()
  4.     {
  5.         this.LostFocus += new RoutedEventHandler(TextBoxExtension_LostFocus);
  6.     }
  7.  
  8.     void TextBoxExtension_LostFocus(object sender, RoutedEventArgs e)
  9.     {
  10.         //Marcamos el inicio del cursor
  11.         this.SelectionStart = 0;
  12.         this.SelectionLength = 0;
  13.     }
  14. }

oct 10

Data Binding entre controles

Silverlight Sin comentarios »

El hecho de establecer los datos en los formularios de forma declarativa, es una forma de obtener un codigo limpio. Si bien es verdad que intentar definir toda la interfaz declarativamente puede conllevar complicaciones en el desarrollo, una vez que se consigue uno se queda satisfecho. Una pena que no dispongamos en Silverlight 3 de los comandos que si podemos encontrar en WPF, los cuales nos permitirían establecer el control de eventos sin hacer uso del codebehind.

Un punto interesante del Data Binding, es la posibilidad de establecer el valor de las propiedades de los controles en función de los valores de otras propiedades de otros controles.

Como ejemplo veamos como las cajas de texto buscan su valor en función del objeto seleccionado en un combobox, y como podemos establecer el tamaño de fuente de los TextBoxes mediante un control Slider.

PLAIN TEXT
XML:
  1. <StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Top">
  2.         <Border Background="#D3DAED" CornerRadius="3" Margin="2" Padding="2" BorderThickness="1" BorderBrush="#A9AFCC" Width="200"  Height="40" VerticalAlignment="Top">
  3.             <StackPanel Orientation="Horizontal">
  4.                 <TextBlock Text="Modelo" Height="30" Width="80" VerticalAlignment="Center"/>
  5.                 <ComboBox x:Name="cbModelo" Height="30" Width="100"  VerticalAlignment="Center"
  6.                   ItemsSource="{Binding Path=Coches}"                                   
  7.                   DisplayMemberPath="Modelo"
  8.                   />
  9.             </StackPanel>
  10.         </Border>
  11.         <Border Background="#D3DAED" CornerRadius="3" Margin="2" BorderThickness="1"
  12.                 BorderBrush="#A9AFCC" Width="200" VerticalAlignment="Top">
  13.             <StackPanel Orientation="Vertical"  Margin="10,2" HorizontalAlignment="Left">
  14.                 <!-- La propiedad Text de los TextBoxes es obtenida
  15.                      del objeto seleccionado en el combobox -->
  16.                 <TextBlock Text="{Binding SelectedItem.Marca, ElementName=cbModelo}" 
  17.                            Height="40" Width="180" FontSize="{Binding Value, ElementName=sliderSize}"/>
  18.                 <TextBlock Text="{Binding SelectedItem.Cilindrada, ElementName=cbModelo}"
  19.                            Height="40" Width="180" FontSize="{Binding Value, ElementName=sliderSize}"/>
  20.                 <TextBlock Text="{Binding SelectedItem.Combustible, ElementName=cbModelo}"
  21.                            Height="40" Width="180" FontSize="{Binding Value, ElementName=sliderSize}"/>                               
  22.             </StackPanel>           
  23.         </Border>       
  24.     </StackPanel>
  25.     <Border Background="#D3DAED" CornerRadius="3" Margin="2" Padding="2" BorderThickness="1"
  26.                 BorderBrush="#A9AFCC" Width="400" Height="40" VerticalAlignment="Top" HorizontalAlignment="Left">
  27.         <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="2">
  28.             <TextBlock Text="Tamaño de Fuente" Height="30" Width="120" VerticalAlignment="Center" />
  29.             <!-- La Propiedad Value del control Slider se puede establcer mediante una caja de texto-->
  30.             <Slider x:Name="sliderSize" Minimum="10" Maximum="34" Value="{Binding Text,
  31.                         ElementName=txtFont, Mode=TwoWay}" SmallChange="1" LargeChange="1"
  32.                         Width="100" VerticalAlignment="Center"></Slider>
  33.             <!-- El valor de la caja de texto es obtenida de la propiedad Value del control Slider-->
  34.             <TextBox x:Name="txtFont" Text="{Binding Value, ElementName=sliderSize}"
  35.                          Height="30" Width="40" VerticalAlignment="Center" />
  36.         </StackPanel>
  37.     </Border>
  38.     </StackPanel>
  39.  

Si nos fijamos en el XAML, observaremos que en el Binding de las propiedades añadimos una nueva etiqueta ElementName, etiqueta que  especifica el objeto origen del cual vamos a obtener el valor. El valor será el que proporcione la propiedad de ese objeto y que establecemos en el Binding. Por ejemplo, para las cajas de texto que muestran la información del objeto Coche, indicamos que el objeto origen es el combo box, y que el valor a mostrar es una propiedad del objeto seleccionado.

Text="{Binding SelectedItem.Cilindrada, ElementName=cbModelo}"

Veamos el ejemplo en funcionamiento:

sep 27

Patrones de diseño en Siverlight: Model View ViewModel

Silverlight 1 Comentario »

Es verdad que tenía un poco abandonado el blog, y puede parecer que Silverlight también. Lo primero es cierto, pero lo segundo todo lo contrario, ya que en este tiempo he estado asignado a varios proyectos Silverlight. Con un poco de suerte cuaja este nuevo cacharro de Microsoft y las empresas se toman en serio esta nueva tecnología.

Y ahora, cuando más de uno está destripando PRISM, como  por ejemplo el compañero Braulio Diez, que por cierto ha sido nombrado recientemente MVP en Silverlight, llega  el menda con un post de MVVM. Desde aquí, y  antes de continuar, dar mi más sincera enhorabuena a Braulio por este reconocimiento – no sé realmente cuanta gente opta a estos premios, pero si estoy seguro que nadie se lo merecía más que él.  Todo un lujo trabajar a su lado. Congratulations (es que se empeña en que escriba en ingles :-) ).

MCV, MVP, y ahora MVVM, Model View ViewModel. Aunque ya se ha dicho y escrito mucho sobre este modelo,  voy a intentar dar una visión más práctica,  después de haber aplicado el modelo en diversas aplicaciones.

Leer el artículo completo »

mar 21

Silverlight y Clipboard

Silverlight 2 Comentarios »

Como complemento al articulo en el que explicabamos como generar / grabar un fichero en Silverlight, el uso del clipboard puede sernos también de utilidad. La solución, aunque no optima porque solo funciona en Internet Explorer, es simpe.

PLAIN TEXT
C#:
  1. private void btnSetTo_Click(object sender, RoutedEventArgs e)
  2. {
  3.    ScriptObject clipboard = (ScriptObject)HtmlPage.Window.GetProperty("clipboardData");
  4.  
  5.    if (clipboard != null)
  6.       clipboard.Invoke("setData", "text", txtCaja.Text);
  7. }
  8.  
  9. private void btnGetFrom_Click(object sender, RoutedEventArgs e)
  10. {
  11.    ScriptObject clipboard = (ScriptObject)HtmlPage.Window.GetProperty("clipboardData");
  12.  
  13.    if (clipboard != null)
  14.       txtCaja.Text = clipboard.Invoke("getData", "text").ToString();
  15. }
  16.  

feb 27

Bases de Datos y Silverlight : DB Schema Editor

Bases de Datos, Silverlight Sin comentarios »

Esto de Silverlight va tomando forma, y va cogiendo fondo. Forma porque hay muchas demostraciones en la web sobre lo que visualmente se puede hacer con Silverlight y fondo, por que ya son mucho los programadores que estan apostanto por esta tecnología y podemos encontrar numerosos desarrollos realizados integramente en Silverlight que muestran lo que se puede hacer mas allá de fuegos artificiales.

Como ejemplo de experto desarrollador en Silverlight  tenemos a Brualio Diez y la aplicación que da titulo a este post, aplicación que  tiene expuesta a todo el público DB Schema Editor.

 

DB Schema Editor, es una aplicación que nos permiter diseñar visualmente Esquemas de Bases de datos. Podemos añadir, borrar, arrastrar tablas y sus relaciones, Como característica principal podemos decir que una vez tengamos nuestro esquema finalizado podemos generar los Script de creación de la base de datos para distintos motores:

  • SQL Server
  • Oracle
  • MySQL
  • PostgreSQL
  • SQLite
  • FirdBird
No me creo que no encuetres la base de datos que necesites, están todas. Podemos grabar el esquema para posteriormente recuperalo, podemos compartirlo con otros usuarios de la aplicación y como punto extra podemos generar un Jpeg con el diagrama :) .

La aplicación esta simplemente genial, es usable cien por cien, y cuando digo usable quiero decir que hace lo que esperas que haga. Y todo en Silverlight, y todo en C#.

Para usar la aplicación tienes que registrarte, es totalmente gratis y de esta manera usar todas las características, pero también tienes la opción de loguearte como invitado. Te recomiendo que te registres, es rápido y de esta manera podrás probar todas sus posibildades.

Con aplicaciones como estas Silverlight tiene un futuro prometedor.

dic 14

Guardar fichero desde Silverlight

Silverlight 6 Comentarios »

Pongámonos en situación. El problema es simple: Necesitamos generar un fichero con resultados / Informe y guardarlo en la maquina cliente. Por motivos de seguridad esto no podemos hacerlo desde Silverlight, ya que no podemos acceder al sistema de archivos en el cliente.

Isolated Storage

Bueno esto no es del todo cierto, ya que sí se puede generar un fichero en el cliente pero solo en un sandbox que tiene Silverlight dedicado a tal efecto. El problema de generar un fichero en el Isolated Storage es el path destinado a ello:

Path del Isolated Storage en Vista
%:\Users\%\AppData\LocalLow\Microsoft\Silverlight\is
Path del Isolated Storage en Windows XP
%:\Documents and Settings\%\Local Settings\Application Data\Microsoft\Silverlight\is

Es ese path habrá una carpeta para cada una de las aplicaciones Siverlight a las que hallamos accedido y hayan hecho uso de esta funcionalidad. 

Ventana 'Save File' en Silverlight

Esta ventana en Silverlight no existe, pero si podemos hacer que el usuario reciba un fichero y el decida donde guardalo. La solucion no es muy complicada. Vamos a añadir un nuevo formulario a la pagina sobre el cual  generaremos un submit . El destino de este nuevo formulario será una nueva página cuyo único cometido será devolvernos un fichero.

PLAIN TEXT
HTML:
  1. <form id="formGenerarFichero" action="GuardarFichero.aspx" method="post">
  2.           <input runat="server" type="hidden" id="contenidoFichero" />
  3.           <input runat="server" type="hidden" id="nombreFichero" />
  4. </form>

[/HTML]

Desde la aplicación Silverlight solo tenemos que jugar un poquito con el DOM de este nuevo formulario, identificando los elementos, estableciendo valores y por último provocando  un submit:

PLAIN TEXT
C#:
  1. private void Button_Click(object sender, RoutedEventArgs e)
  2. {
  3.     HtmlDocument doc = HtmlPage.Document;
  4.     HtmlElement contenidoFichero = doc.GetElementById("contenidoFichero");
  5.     contenidoFichero.SetAttribute("value", txtContenido.Text);
  6.  
  7.     HtmlElement nombreFichero = doc.GetElementById("nombreFichero");
  8.     nombreFichero.SetAttribute("value", txtNombreFichero.Text);
  9.     doc.Submit("formGenerarFichero");
  10. }

Solo queda cambiar el tipo de respuesta que vamos a recibir desde el nuevo formulario.

PLAIN TEXT
C#:
  1. public partial class GuardarFichero : System.Web.UI.Page
  2. {
  3.         protected void Page_Load(object sender, EventArgs e)
  4.         {
  5.             string data = Request.Form["ContenidoFichero"];
  6.             string fileName = Request.Form["NombreFichero"];
  7.             Response.Clear();
  8.             Response.ContentType = "application/octet-stream";
  9.             Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName);
  10.             Response.Write(data);
  11.             Response.Flush();
  12.             Response.Close();
  13.         }
  14. }

nov 02

Silverlight 2, Menu Contextual

.Net, Silverlight 4 Comentarios »

Llevaba tiempo esperando poder reescribir el control Menu Contextual que hice hace ya tiempo, ya que este dejó de funcionar en la sucesivas versiones alfas, betas y gammas de Silverlight (y no más versiones preliminares porque se le acabarían las letras a Microsoft, menuda pifia por su parte). Bueno el caso, es que no me apatecía volver a escribir el control hasta que Silverlight 2 no fuera una cosa seria. Parece ser que ahora si tenemos una versión final.

El código de este ejemplo lo puedes descargar aquí.

La lógica y funcionamiento del control sigue siendo la misma y practicamente no ha cambiado nada. Lo cambios mas importantes han sido la forma de aplicar propiedades sobre los objetos, y además que en esta nueva versión del Control MenuContextual , el userControl MenuContextaul estará formado por objetos OpcionMenu, siendo estos los encargados de pintarse y modificar su estado cuando el raton entre y salga de ellos. El control de los eventos delegados seguirá estando en el control padre MenuContextual.

Enlaces Relacionados:

may 10

Menu Contextual (Context Menu) en Silverlight

Silverlight Sin comentarios »

Hace un par de semanas, formaba parte de un pequeño  equipo de desarrollo de una aplicación en Silverlight 2, y casi llegando al final del desarrollo pensamos que el uso de un menú contextual  podría sernos de gran utilidad. Nos encontramos con dos problemas.

Primero , no existe un control  para tal funcionalidad en el conjunto de controles de Silverlight 2 (por ahora) - no pasa nada pensamos, nos creamos uno.  Aquí nos apareció el segundo problema: El plugin de Silverlight no  implementa los eventos sobre el botón derecho (si pulsamos el botón derecho sobre una aplicación Silverlight nos aparece un menú contextual propio del plugin). Por motivos de tiempo desistimos de crear un menú contextual. 

Suerte que un servidor todavía disfruta de un poco de tiempo libre los fines de semana  :) .

Leer el artículo completo »

mar 29

Comunicación Silverlight – Aplicacion Web

.Net, Silverlight 2 Comentarios »

No descubriríamos América si afirmásemos  que las aplicaciones Web  han dejado de ser  meras páginas Web con funcionalidad,  y se asemejan cada vez más a aplicaciones de escritorio. Para lograr este objetivo se ha mejorado mucho el tiempo que transcurre entre la acción del cliente y la respuesta del servidor, y esto no ha sido gracias la red de  Telefónica, sino mas bien a la optimización de la información que viaja desde la aplicación en el navegador y el servidor y viceversa – sirva de ejemplo, Ajax para solicitar información o javascript para validaciones en cliente.

Ahora entra en escena Silverlight. Una aplicación Web ASP.NET con Silverlight, está formada por dos aplicaciones distintas, uno que se ejecuta en el servidor y otro que se ejecuta en el cliente.  Pero aunque sean dos aplicaciones que se ejecutan en entornos distintos las dos forman una única aplicación, y por lo tanto debe de existir un flujo de comunicación entre ambas. Silverlight simplifica y optimiza operación que no necesita de la acción del servidor, así como la comunicación si fuese necesario. Leer el artículo completo »

Entrada Anterior
WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Acceder

Switch to our mobile site