Custom Control, Enfoque Mobile

Para este artículo les traigo una solución que generalmente dejamos de lado en el desarrollo y que es muy potente en miras a la reusabilidad de componentes.

El objetivo es crear un custom control mobile para un textbox, a este componente le vamos a aplicar comportamiento solamente para que se le pueda ingresar números y además sobre alguno de sus eventos vamos a incorporar comportamiento de input panel para que reaccione a los estímulos.

Veamos la idea primaria, vamos a agregar a una solución genérica un Custom Control.

Plataforma: Windows Mobile 6.0

Visual Studio 2005 – C#


Para nuestro siguiente paso vamos a heredar desde un textbox que es el objetivo que tenemos para la solución.


public
partial
class
CustomControlDemo : System.Windows.Forms.TextBox


Actualmente con esta modificación nos tenemos que centrar en los eventos para reescribir, para el objetivo principal voy a modificar el OnKeyPress.


protected

override
void OnKeyPress(KeyPressEventArgs e)

{


if (!(Char.IsDigit(e.KeyChar)) e.KeyChar == '\b' e.KeyChar == 13)

{

e.Handled = true;

}



base.OnKeyPress(e);

}


Como vemos en el código solo se trabaja cuando se presiona sobre el textbox y se validan los ingresos para solo dejar válidos lo numéricos.

Con esta modificación tenemos un objetivo realizado, pero si, voy a incorporar más eventos para tomar control al entrar al foco del textbox y al salir de foco en el textbox.

protected
override
void OnGotFocus(EventArgs e)

{


this.BackColor = Color.WhiteSmoke;


base.OnGotFocus(e);

}

protected
override
void OnLostFocus(EventArgs e)

{


this.BackColor = this.Parent.BackColor;


base.OnLostFocus(e);

}

Con estas dos agregaciones voy a cambiar el color de fondo al ingresar al textbox y a devolver el color al perder el foco.

Veamos el efecto en este primer punto:


Lo que vemos en el textbox de la parte inferior tiene que ver con el foco al intentar ingresar número porque eso es lo que permite únicamente el control desarrollado hasta el momento.

Pero he decidido incorporar a nuestro custom control una nueva funcionalidad que dice de que cada vez que el textbox tome el control voy a llamar a un inputPanel para que se visualice el teclado virtual de forma instantánea.

Veamos las modificaciones a los eventos:

Microsoft.WindowsCE.Forms.InputPanel objIn;



public CustomControlDemo()

{


objIn = new Microsoft.WindowsCE.Forms.InputPanel();

InitializeComponent();

}

protected
override
void OnGotFocus(EventArgs e)

{


this.BackColor = Color.Silver;


objIn.Enabled = true;


base.OnGotFocus(e);

}



protected
override
void OnLostFocus(EventArgs e)

{


this.BackColor = this.Parent.BackColor;


objIn.Enabled = false;


base.OnLostFocus(e);

}

El modelo quedaría de esta forma:


Esto es solo para una muestra de que podemos incorporar esta funcionalidad en nuestro control y es a modo de prueba pero muy útil al fin.

Les dejo el código completo del control:

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Text;

using System.Windows.Forms;




namespace DeviceApplicationMob6Demo

{


public
partial
class
CustomControlDemo : System.Windows.Forms.TextBox

{

Microsoft.WindowsCE.Forms.InputPanel objIn;



public CustomControlDemo()

{

objIn = new Microsoft.WindowsCE.Forms.InputPanel();

InitializeComponent();

}



protected
override
void OnPaint(PaintEventArgs pe)

{


// TODO: Add custom paint code here



// Calling the base class OnPaint


base.OnPaint(pe);

}



protected
override
void OnKeyPress(KeyPressEventArgs e)

{


if (!(Char.IsDigit(e.KeyChar)) e.KeyChar == '\b' e.KeyChar == 13)

{

e.Handled = true;

}



base.OnKeyPress(e);

}



protected
override
void OnKeyDown(KeyEventArgs e)

{


base.OnKeyDown(e);

}



protected
override
void OnGotFocus(EventArgs e)

{


this.BackColor = Color.Silver;

objIn.Enabled = true;


base.OnGotFocus(e);

}



protected
override
void OnLostFocus(EventArgs e)

{


this.BackColor = this.Parent.BackColor;

objIn.Enabled = false;


base.OnLostFocus(e);

}

}

}


Espero les sea de utilidad y de paso pongan toda su creatividad para esquemas innovadores basados en este modelo.

Entradas más populares de este blog

7 arquetipos #Polymer 1.0 puntos esenciales prácticos

El potencial de la nube en 5 pasos desde Buenos Aires y junto al ecosistema regional

Iniciando la representación de una mobile-web-page pensando en el rendimiento - Parte 1