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 |
gracias por todos tus aportes que haces sigue adelante, que tus ayudas son muy buenas saludos
ResponderEliminarDe mucha ayuda, gracias por el aporte...
ResponderEliminarSabes que instalo los User Controls como dice en todos lados pero en tools no me aparece absolutamente nada? ya me canse de intentarlo
ResponderEliminarmuchas gracias!
ResponderEliminarHola, no me funciona el UserControlEditor.exe, al hacer clic en cualquier propiedad marca error y se sale
ResponderEliminarSystem.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)
Buen día
ResponderEliminarExcelente tutorial, me sirvió mucho para entender mejor los User Controls.
Muy buen aporte.
Un cordial saludo