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.

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. }

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.

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:

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 »

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.

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.

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:

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.

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. }

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 »

Crear Storyboard dinámicos en Silverlight

.Net, Silverlight 1 Comentario »

Todavía le queda mucho camino que recorrer a Silverlight, y para muestra un botón. Vamos realizar un pequeño ejemplo. Nuestra aplicación Silverlight consistirá en un Canvas divido en dos partes, al que añadiremos círculos dinámicamente allí donde hagamos click con el raton. Además a cada círculo le añadiremos una animación, de tal forma que la bola suba o baje en función del lugar donde hayamos hecho Click.

Añadir un elemento dinámicamente a un Canvas es trivial:

  1. creamos el elemento

  2. le asignamos la propiedades que lo definen

  3. lo posicionamos

  4. y finalmente lo añadimos a la colección de elementos del Canvas.

Leer el artículo completo »

Animación Gráfico de Barras con Silverlight

.Net 2 Comentarios »
  • Estructura Proyecto Silverlight (2ª Parte)

La teoria esta muy bien para tomar un primer contacto con una nueva tecnología, pero no hay nada como ponerse con las manos en la masa, en nuestro caso en el teclado. Vamos a ello.

El ejemplo, como ya anticipamos, consistirá en generar un control Silverlight que contendrá un Gráfico de Barras, la cuales cambiaran su áltura en función de los valores asignados a cada una de ellas. Los valores serán introducidos en tres cajas de texto (simples componentes HTML).

Para empeza abrimos Visual Studio, y creamos un nuevo proyecto Silverlight. Si recordamos, la interfaz de nuestro control esta definida en un fichero con extension XAML. Aunque podríamos crear nuestro control editando directamente este fichero, vamos a hacer uso de Expression Design, herramienta que ofrece Microsoft para crear interfaces de un modo profesional. Como el uso de esta herramienta se escapa del ambito de este articulo, partiremos de un fichero XAML generado por Expression Design.

Leer el artículo completo »

Estructura Proyecto Silverlight (1ª Parte)

.Net 3 Comentarios »

Que mejor forma de presentar la estructura de un proyecto en Silverlight que crear un pequeño proyecto de ejemplo. Nuestro ejemplo va a consistir en un control Silverlight que contendrá un gráfico de barras. La entrada de datos la haremos mediante tres campos de texto que serán controles normales HTML. Pero antes de nada veamos que ficheros obtenemos al crear un proyecto Silverlight.

Al instalar “Silverlight tools for Visual Studio 2008”, añadiremos a Visual Studio dos nuevos templates: Uno para gernerar un proyecto Silverlight y otro para crear controles Silverlight. Para nuestro ejemplo partiremos de un nuevo proyecto Silverlight. Despues de proporcionar un nombre al proyecto, se nos genera la estructura particular de un proyecto Silverlight.

Un proyecto Silverlight consta de ficheros XAML que definen las interfaces, ficheros CS que contienen el codebehind y ficheros HTML que sirven de entrada a las páginas. Como proyecto Silverlight, que contiene solo lógica de cliente, podremos ejecutarlo directamente desde nuestro navegador, es decir sin hacer uso del servidor web de visual studio (o IIS).

Leer el artículo completo »

Introduccion a Silverlight

.Net 3 Comentarios »

Silverlight LogoUna definición simplista, pero directa para describir a Silverlight, podría ser algo tal que así: “La nueva arma de Microsoft para combatir a Flash”, pero claro eso sería simplificar mucho. Simplificar mucho puede conllevar a errores, porque aunque al igual que Flash, Silverlight permite crear contenido interactivo que se ejecuta en cliente, mostrar animaciones y videos, Flash lleva muchos años de ventaja, está presente en la mayoría de los ordenadores, y es una tecnología madura y robusta.

Entonces, ¿Qué me ofrece Silverlight?, pues simplificando y en este caso si me vale, me ofrece la posibilidad de programar en cliente con tecnología .Net, es decir: Puedo programar en C# (o VB, según guste). Para ello Silverlight nos instalara en el navegador un plug-in al estilo de Flash que contiene en una versión reducida del CLR (common language runtime) de .Net.

Leer el artículo completo »

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

Switch to our mobile site