martes, 14 de agosto de 2012

Mi primer User Control


User Control “Hola Mundo”


El propósito de este documento es explicar como crear un simple UserControl (UC) “Hola Mundo”. Una Vez terminado este ejemplo paso a paso, se tendrá un user control llamado “HolaMudo” en la caja de herramientas.

Después de arrastrar este user control a un formulario web (como lo hace normalmente con los cuadros de texto, Grid, Tablas etc.) el control solo mostrara un mensaje “Hola Mundo” en su aplicación Genexus con el color y la fuente que configure en las propiedades del control.

Lo más probable es que la creación de un user control "Hola Mundo" no va a sonar muy atractivo, pero recuerde que esto es sólo para fines de aprendizaje. Después de leer este tutorial se puede empezar a pensar en la creación de controles de usuario muy interesantes, como los menús, treeviews, los controles de Silverlight, etc.

Así que primero vamos a definir qué es exactamente el control va a hacer.

Definición del User Control “Hola Mundo”
El control deberá hacer lo siguiente:
·         Mostrar un mensaje “Hola Mundo”
·         Permitir al programador configurar el color del texto “Hola Mundo”
·         Permitir al programador configurar la fuente del texto “Hola Mundo”
·         Permitir al programador configurar el tamaño del texto “Hola Mundo”

Crear el Control
Ejecutar "UserControlEditor.exe" que se encuentra en el directorio de instalación de Genexus y pulse el botón Nuevo.

[01] User Control Designer

Introduzca el nombre del control de usuario y la ubicación de la carpeta. Todos los controles de usuario se deben colocar en el directorio UserControls que también está en el directorio de instalación de Genexus.

Nombre del User Control: HolaMundo
Ubicación del User Control:
“C:\Program Files (x86)\ARTech\GeneXus\GeneXusXEv1\UserControls\HolaMundo”

[02] Nuevo User Control

Ficha Definición del control (Control Definition)
En la ficha Definición de control, establezca el "Icono (utilizado en la caja de herramientas)" de propiedad. En este caso estamos usando un icono llamado HolaMundoIcon.ico que tiene que ser colocado en la carpeta HolaMundo que hemos creado en el paso 1. Debido a que este es un ejemplo sencillo, no hay más trabajo que hacer en esta ficha.

[03] Control Definition

 
Ficha Propiedades
Como mencionamos anteriormente, el control debe tener 3 propiedades que nos permitan establecer el "Hola Mundo" texto, la fuente y el tamaño. En consecuencia, en la pestaña Propiedades, tenemos que crear 3 propiedades:

•FontFace ◦Type: Combo
◦Default: Verdana
◦Values: Arial=Arial,Verdana=Verdana,Comic Sans MS=Comic Sans MS

•FontColor ◦Type: Text
◦Default: #000000 (black)

•FontSize ◦Type: Text
◦Default: 10

[04] Font Face
[05]Font Color

[06] Font Size


Ficha “JScript Runtime Render”
En el momento de renderizar nuestro control, Genexus invocara el método Show de nuestro archivo de render en tiempo de ejecución (se especificó bajo la ficha de definición de control).
Este archivo se puede acceder en la ficha “JScript Runtime Render” y es donde vamos a tener que programar toda la lógica principal de nuestro control. En este caso, ya que sólo desea mostrar un "Hola Mundo" con el mensaje de una fuente determinada, el color y el tamaño, el archivo de procesamiento contendrá lo siguiente:
[07] JScript Runtime Render

Tenga en cuenta que todo el código de sombreado en gris es generada automáticamente por el editor por lo que sólo tendrá que añadir el texto "Hola Mundo" con los parámetros (tipo de letra, color y tamaño) que recibe de GeneXus. En este caso la línea es:
var buffer= '<font face="' + this.FontFace +
            '" color="' +  this.FontColor +
            '" size="' + this.FontSize +
            '">Hello World!!!</font>';        
this.setHtml(buffer);


Ficha XSL Designer Render

Este paso es opcional. Cuando creas un user control, indica como mostrar su control en tiempo de diseño (en el IDE de Genexus). Puede, por ejemplo, mostrar una imagen que representa el control o que puede hacer cosas más sofisticadas, como renderizar el control de forma dinámica de acuerdo a sus propiedades.

En este caso, vamos a mostrar un simple texto "Control Hola Mundo" cuando el control se arrastra al web form. Para ello, es necesario editar en la ficha "XSL Designer Render", agregando solo el texto "Control Hola Mundo" como se muestra a continuación:


[08] XSL Designer Render - Control Hola Mundo

Después de eso el control se vera asi:

[09] UC Hola Mundo


 
Instalar el user control en Genexus

Cierre Genexus si esta abierto, y ejecute "Genexus.exe /install" bajo en directorio de instalación de Genexus. A continuación, iniciar Genexus como de costumbre.

[10] Instalar User Control

El control está terminado y listo para usarse!


Usando el user control

Ahora vamos a utilizar el control que acabamos de crear. Este es un proceso muy sencillo:


[09] Cree un web panel y arrastre el control “Hola Mundo” de la caja de herramientas

[11] Configure las propiedades
[12] Ejecute


Imagen en el user control

Ahora vamos hacer que en lugar del texto “Control Hola Mundo” aparezca una imagen
En la ficha "XSL Designer Render" vamos a cambiar esta línea
      Control Hola Mundo

Por estas:
<img>
<xsl:attribute name="src">
<xsl:value-of select="gxca:GetMyPath()"/>

<xsl:text>\HolaMundo.jpg</xsl:text>
</xsl:attribute>
<xsl:call-template name="AddStyleAttribute"/>
</img>

[13] Poner Imagen en el User Control

[14] User Control con la imagen

6 comentarios:

  1. gracias por todos tus aportes que haces sigue adelante, que tus ayudas son muy buenas saludos

    ResponderEliminar
  2. De mucha ayuda, gracias por el aporte...

    ResponderEliminar
  3. Sabes que instalo los User Controls como dice en todos lados pero en tools no me aparece absolutamente nada? ya me canse de intentarlo

    ResponderEliminar
  4. Hola, no me funciona el UserControlEditor.exe, al hacer clic en cualquier propiedad marca error y se sale

    System.NullReferenceException: Referencia a objeto no establecida como instancia de un objeto.
    en Artech.FrameworkDE.Controls.PropertyGridEx.MHmN1dY2Vb(Property )
    en Artech.FrameworkDE.Controls.PropertyGridEx.uDDYm93gAN(Object , PropertySelectedEventArgs )
    en VisualHint.SmartPropertyGrid.PropertyGrid.OnPropertySelected(PropertySelectedEventArgs e)
    en VisualHint.SmartPropertyGrid.InternalGrid.SelectProperty(PropertyEnumerator enumerator)
    en VisualHint.SmartPropertyGrid.InternalGrid.DoSelection(MouseEventArgs e, HitTests hitTest)
    en VisualHint.SmartPropertyGrid.InternalGrid.OnMouseDown(MouseEventArgs e)
    en System.Windows.Forms.Control.WmMouseDown(Message& m, MouseButtons button, Int32 clicks)
    en System.Windows.Forms.Control.WndProc(Message& m)
    en VisualHint.SmartPropertyGrid.InternalGrid.WndProc(Message& m)
    en System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
    en System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
    en System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

    ResponderEliminar
  5. Buen día
    Excelente tutorial, me sirvió mucho para entender mejor los User Controls.
    Muy buen aporte.
    Un cordial saludo

    ResponderEliminar

Si te ha servido de algo mi aportación, deja tu comentario, gracias