Creación de un Control ActiveX (OCX)
Paso a Paso

Iniciado el 27/Mar/97
Finalizado el 29/Mar/97

Actualizado el 19/Jul/2001 y 27/Jul/2006

El ejemplo que voy a usar para este "pequeño" tutorial, será igual que el control gsSpin.ocx, al que llamaré TextSpin, por aquello de que es un TextBox con un scroll al estilo de un control Spin (suma o resta un valor a lo que ya esté asignado en el TextBox).
Tengo también, estoy "depurándolo", otro control que es igual al ListBox que viene con VB5, en el que se puede especificar si queremos mostrar una lista normal y corriente o bien una con cajas de chequeo. No me gusta el aspecto que tiene, ya que los checkboxes no son 3D, así que lo mismo acabo por fabricarme uno propio, ya lo comentaré en su día. De todos modos si quieres el listado de lo que tengo hecho hasta ahora, me lo pides (cCheckList.zip) y te lo envío.
Por ahora vamos a basarnos en este ejemplo con el cual, espero, te sirva de ayuda/guía para crear los tuyos propios.


Baja los listados del ejemplo: (textspin.zip 27.3 KB incluye el control compilado)
Baja los listados del ejemplo sin el control OCX: (textspin1.zip 7.26 KB
Si quieres todas las páginas del tutorial y las imágenes, bájate este archivo: (ts_htm.zip 118 KB)

Si no tienes todavía el VB5 CCE, puedes bajarlo desde el sitio de Microsoft (o bien de mi directorio FTP)

El VB5 CCE (vb5ccein.exe 7.13 MB)
Las ayudas del VB5 CCE (ccehelp.exe 2.77 MB)

NOTA:
El VB5CCE, así como las ayudas puedes bajarlas de: http://www.microsoft.com/vbasic/download/

La dirección anterior ya no está operativa, (aunque el link te llevará a la nueva dirección), la que funciona a fecha de hoy (19/Jul/2001), es esta:
http://msdn.microsoft.com/vbasic/downloads/cce/default.asp

Nota del 17/Jul/2006:

Debido a que nunca me acuerdo donde pongo todos los links al VB5CCE, en el curso básico intentaré ir actualizando el link al VB5CCE, al menos mientras siga siendo de "libre descarga".
Así que, pásate por esta página: Apéndice A1 del Curso Básico de Visual Basic 6.0 y anteriores para ver si el link aún está operativo.
Gracias.


Empecemos por el principio: (Las imágenes las he puesto en una página aparte, para que te sea más rápida la lectura, mi consejo es que cargues la página, (pinchando en el link anterior), y así te será más fácil verlas cuande llegue el caso)

  1. Crea estos directorios (en esta jerarquía me voy a basar) TextSpin y dentro de este crea Prueba
  2. Carga el VB5cce. Te mostrará un diálogo con varias opciones, (Figura 1), selecciona CtlGroup y pulsa Aceptar
  3. Si ya tienes cargado el VB5, selecciona New Project del menú File, te mostrará el diálogo de la Figura 2, selecciona CtlGroup y pulsa OK
  4. A mi siempre me gusta trabajar con los archivos "grabados", así que pulsa en la barra de herramientas (en el disco) para guardar el proyecto.
    Nos preguntará los nombres de cada uno de los elementos y proyectos creados.
    El UserControl lo guardas en el directorio TextSpin con el nombre cTextSpin.ctl
    El Project1 con el mismo nombre que el control: cTextSpin.vbp
    El Form1 lo puedes dejar con el mismo nombre (yo así lo he hecho), pero lo guardas en el directorio Prueba que has creado en el directorio del control.
    El Project2 (el de la prueba del Form1), lo guardas como t_TextSpin.vbp en el directorio TextSpin\Prueba
    El grupo también lo nombras t_TextSpin, pero la extensión es vbg
  5. Ahora tendrás en la parte derecha la ventana de los proyectos (Project Esplorer), con este aspecto (ver Figura 3)
  6. Selecciona el UserControl y haz doble-click, te mostrará un form para el diseño del control, situalo a tu antojo en el IDE e inserta un TextBox y un VScroll. Yo lo he dimensionado de la siguiente forma:
    TextBox1 Left y Top 0, Height=315, Width=765
    VScroll1 L= 555, T=30, H= 270, W=195
    UserControl1 H=330, W=780
  7. Ahora vamos a cambiarle el nombre al UserControl, para que se llame TextSpin, que será el nombre final que usaremos en siguientes proyectos. En la ventana de propiedades, selecciona UserControl y pulsa en el tab Alphabetic, selecciona la propiedad Name y escribe TextSpin.
  8. Ya tenemos creado el control y ya podemos usarlo. Vamos a probarlo.
  9. Cierra el form de diseño de nuestro control y selecciona el Form1 (doble click para que se muestre)
  10. En la barra de controles verás un control al final, si pasas el cursor del ratón, verás que el Tooltip te indica el nombre de nuestro control (ver Figura 4)
  11. Haz doble-click sobre el icono del control y lo insertarás en el Form1(ver Figura 5)
  12. Prueba a ejecutar el programa (pulsando F5) y verás que funciona. No hace nada, pero funciona.
  13. Vamos a insertar ahora algo de acción en nuestro control.
    Esto podemos hacerlo de dos formas, manualmente o con la ayuda de un Wizard. Vamos a seleccionar la segunda opción para que VB5 trabaje por nosotros.
  14. Para seleccionar un Wizard de los dos incluidos en VB5CCE, debes tenerlo activo en el Add-In Manager (ver Figura 6). Seleccionalos y ya estarán disponibles en el menú.
  15. El que ahora nos interesa es: ActiveX Control Interface Wizard...

Bueno, te dejo que lo pruebes y si este Viernes Santo no me sacan de procesión, prometo seguir con el proyecto.
Hasta la próxima ocasión.

Ya estoy por aquí, no he esperado a la noche, para poder terminar hoy el control. Vamos a seguir por donde nos quedamos.

  1. Selecciona el menú Add-Ins y pulsa sobre la opción ActiveX Control Interface Wizard...
    Mostrará la ventana de Introducción, si es que no le marcastes antes la opción de que no la muestre más.
  2. Te mostrará una pantalla (ver Figura 7) con una lista de las Propiedades, Métodos y Eventos que podemos asignar a nuestro control, al estar usando unos controles, mostrará también todos los elementos expuestos por estos controles, de forma que ahora podemos seleccionar los que queramos aplicar al nuestro.
  3. Aquí hay que reflexionar un poco. ¿Los necesitamos todos? ¿Cuales necesitamos?
    Vamos a usar los que pone por defecto, de los cuales yo he quitado Refresh y BackStyle
    He añadido los siguientes:
    ActiveControl, Change, LargeChange, Max, MaxLength, Min, SelLength, SelStart, SelText, SmallChange, Text y Value.
  4. Una vez añadido y quitados las propiedades, métodos y eventos, pulsa en el botón Next
  5. La siguiente pantalla te permite crear tus propios elementos, así que si quieres añadir alguno, puedes hacerlo aquí.
    Por aquello del ejemplo, vamos a añadir unos cuantos, los que vamos a añadir, serán 'envolturas' (wrappers que llaman los anglosajones a esto), de elementos propios de los controles que forman parte de nuestro control.
  6. Yo he añadido, (ver Figura 8), Valor, Máximo, Mínimo y Cambiado (para Value, Max, Min y Change respectivamente)
  7. Cuando añades un nuevo miembro a la colección de objetos expuestos por el control, te pregunta sobre que tipo es, puede ser una Propiedad (Property), un Método (Method) o una Evento (Event).
  8. En nuestro caso, Valor, Máximo y Mínimo son propiedades y Cambiado es un evento. (ver Figura 9)
  9. A continuación podemos 'mapear' los elementos de nuestro control con respecto a los de los controles incluidos en el control que estamos creando y el diálogo mostrado nos permite esto, (ver Figura 10).
  10. Aquí tendremos que definir que elementos de nuestro control van a estar asociados a los de los controles que tenemos incorporados y cuales van a tener un procedimiento propio, es decir que no van a estar 'mapeados', (es decir asociados), a ninguno de los ya incluidos en los controles 'básicos'.
  11. Para hacer una asociación, debes seleccionar el 'Nombre Público' de la ventana de la izquierda y de la lista desplegable de la ventana de la derecha Control, seleccionar el control y asociarlo con el 'Miembro' de la segunda lista desplegable.
    Por ejemplo, selecciona Change de la lista de la izquierda y en el combo Control, selecciona VScroll1, de la lista Members, selecciona Change. De esta forma el evento Change de nuestro control será el que dispare el evento Change del VScroll1, luego lo veremos claramente en el código.
  12. Las asociaciones que he hecho están en el Listado 1. Resaltar sólo que Cambiado está relacionado con VScroll1_Change, Máximo con VScroll1.Max y Mínimo con VScroll1.Min
  13. Una vez realizadas las asociaciones (o mapeos) y pulsado el botón correspondiente, nos informa que ha terminado y si queremos que nos muestre un resumen, dile que si, para que te muestre que es lo que debes hacer para que todo funcione, en el Listado 2 está el generado por el Wizard. Aquí te indica lo que debes hacer para chequear el control y otras cosillas, (de las cuales ya tienes en las indicaciones que te estoy haciendo), cuando esté la versión en español, me leeré esto, por ahora no me sirve de mucho, ya que hace referencia a capitulos y Books On Line de los que no dispongo...
  14. Ahora pulsa sobre el Form1 (doble-click) y... ERROR Ambiguous name detected VSCroll1_Change
  15. Bien, este error es porque tenemos asociado dos eventos al de VScroll1_Change, el propio Change y el Cambiado.
    Para solucionarlo cambia la declaración Event Cambiado() 'MappingInfo=VScroll1,VScroll1,-1,Change
    por esta otra: Event Cambiado() 'MappingInfo=Text1,Text1,-1,Change, así cuando se cambie el Text1 se 'disparará' Cambiado y cuando se cambie el VScroll1, la que se dispare será Change, después crearemos el código necesario para que estos dos eventos estén relacionados.
  16. Haz los cambios pertinentes y cierra las ventanas que tengas abiertas. Abre de nuevo el Form1. Otro ERROR, esta vez nos avisa de que estamos usando el ActiveControl, etc. Pulsa en aceptar y la pantalla que te muestra es la de la definición de la propiedad ActiveControl, seleccionala entera y borrala.
    Nota: Si te ha mostrado el Form1 con un control rojo, no te preocupes, cierra la ventana y al abrirla de nuevo, todo volverá a la normalidad. En caso de que no vuelva a la normalidad, sólo tienes que borrar el control y añadirlo de nuevo. Siempre que antes hayas cerrado todas las ventanas del UserControl.
  17. Ahora vamos a ver un poco de código.
    Primero el que relaciona el evento Cambiado con el Change del Text1 y Change con VScroll1_Change (ver
    Listado 3)
    Fijate que en el Text1 tenemos el RaiserEvent Cambiado y en VScroll1 el evento generado es Change
  18. Realmente no es necesario tanto lío, sólo es a modo de "aprendizaje". Tampoco será necesario tener dos propiedades para el valor (Value y Valor, ni para el Máximo y Mínimo) Pero ya que las tenemos, vamos a usarlas. En el Listado 4 tienes los listados generados para el LET de las propiedades mencionadas y en el Listado 5 los cambios que he realizado a ese código.
  19. La variable YaEstoy es un "flag" o indicador de que se está modificando la propiedad, de forma que si aún no se ha terminado de modificar, no permita que otro evento de cambio de valor, haga que vuelva a entrar. Esto es necesario porque desde dentro de la propiedad se cambia otra propiedad que a su vez cambia en la que estamos y... al final daría un error de desbordamiento de pila o falta de memoria. Hay que declararla como estática para que mantenga el valor entre llamadas.
  20. Cierra el código del control y abre el Form1, cambia el Valor y verás cómo Value también cambia. Lo mismo ocurrirá con Max/Máximo y Min/Mínimo. Repito que esto sólo es para que sepas que puedes incluir eventos y propiedades del nombre que quieras y que hagan lo que tu quieras. Es preferible dejarle los nombres en inglés, ya que estamos acostumbrados a ellos y será más fácil para cualquiera saber de que van esas propiedades o eventos. Pero si quieres usar los nombres en castellano, eres libre de hacer lo que quieras.
  21. Ya estamos preparados para actuar, así que cambiemos el Form1 para hacer algo práctico. En este caso vamos a usar tres controles para cambiar una selección de colores.
  22. Antes, prueba a cambiar el tamaño del control que tienes en el Form1, hazlo más ancho y más alto... Lo correcto sería que el Text y el Scroll se adaptaran al nuevo tamaño. En el Listado 6 está el código necesario. Ahora al cambiar el tamaño del control, se adapatarán tanto el Text como el Scroll y se verán como debe.
  23. Sigamos, añade un Label1 y un Label2, alinealos con nuestro control y selecciona los tres controles. Copialos y pegalos, contestando a Si en la pregunta de si queremos crear un control array, pegalos de nuevo para que tengamos 3 controles de cada. (ver Figura 11) A los controles TextSpin asignales los valores Min a 255 y Max a 1 y el Value a 255
  24. Ahora añede el código del Listado 7 y ya puedes probarlo.

Bueno, creo que ya está bien por hoy.
El próximo día crearemos las hojas de propiedades. Por ahora puedes ir experimentando tú.
La única forma de aprender es probar, probar y probar... si no te aclaras ya verás cómo hacerlo.
¡ Feliz programación !

  1. Aquí estamos de Nuevo. Antes de crear la hoja de propiedades, vamos a crear el Icono que el control mostrará en la barra de herramientas. Para ello hay que asignarle una imagen a la propiedad ToolBoxBitMap. Pueden ser imagenes de los tipos BMP, DIB, PAL, GIF y JPG, pero no del tipo ICO. El tamaño, (creo), debe ser 32x32
  2. Para asignarla, abre el control y en la hoja de propiedades, selecciona ToolBoxBitMap y asignale la imagen (acompaño una llamada textspin.gif), cierra el control y verás que ahora muestra la nueva imagen.
  3. Vamos a crear las hojas de propiedades. Para ello nos vamos a ayudar del Wizard que incorpora el VB5.
    Selecciona Property Page Wizard... del menú de Add-Ins
  4. Nos mostrará unas páginas ya asignadas para las fuentes, colores y las imagenes. Pulsa en el botón Add para añadir una nueva hoja de propiedades y le das el nombre Valores. Muevela con las flechas de la derecha para que sea la primera, de esta forma esta será la primera que muestre. (ver Figura 13)
  5. Te mostrará, a la izquierda, una lista de las propiedades disponibles, yo he seleccionado y añadido las que sirven para asignar los valores: Máximo, Mínimo y Valor (ver Figura 14)
  6. Pulsa en Next y ya hemos terminado. Te preguntará si quieres generar un informe. Haz lo que quieras, el que ha generado para este ejemplo está en el Listado 8.
  7. Pulsa en guradar y te pedirá el nombre la hoja de propiedades, dejale el valor por defecto (Valores.pag)
  8. Bien ya tenemos las hojas de propiedades de nuestro control. Ahora vamos a probarla.
  9. Asegurate de que el control y la hoja de propiedades esté cerrada. Abre el Form 1 y selecciona uno de los controles. Pulsalo con el botón derecho del ratón y selecciona Properties, te mostrará las hojas de propiedades y la primera será la que hemos creado nosotros: Valores. (ver Figura 15)
  10. Otra forma de mostrarla es seleccionando Custom... de la ventana de propiedades que muestra el VB para nuestro control.
  11. Como podemos ajustar los valores de este control en tiempo de diseño, en nuestro programa de prueba vamos a hacer unos cambios, para que al cargar el form, se muestren los valores correctos.
  12. Escribe el Procedimiento AjustarValores, según se muestra en el Listado 9.
  13. Cambia el código para el evento Change del control (ver Listado 10)
  14. Y por último "Ajusta" los valores que tiene al cargarse el form. (ver Listado 11)
  15. Para rematar el tema, haremos que cada vez que se inserte un control en el formulario, se muestre el nombre que VB le asigna de forma automática, como ocurre con Text1, Tex2, etc.
  16. En el procedimiento InitProperties de UserControl, añade la siguiente línea:
    Text = Extender.Name
    De esta forma cada vez que añadas un control al form, se mostrará el nombre del control. Hasta que cambies las asignaciones de las propiedades Text o Valor.
  17. Ya sólo queda compilarlo y convertirlo en un verdadero control. El cual podremos usar en cualquier página WEB o en cualquier proyecto que acepte controles OCX. Incluido el VB4.
  18. Para convertirlo en un control OCX de verdad; selecciona el control en la lista de proyectos, del menú File selecciona la opción: Make cTextSpin.ocx... y ya está. Este control estará disponible para usarlo cuando quieras. Incluso puedes usarlo para crear otro nuevo control.

Y eso es todo para este control. Este control ya está terminado.
Sólo queda que quieras añadirle nuevas propiedades o cambiar las que ya tiene.
Eso lo dejo "a tu aire" (es decir a lo que te plazca hacer...)

¡Hasta el próximo!


[Imágenes]   [Listados]

Nota del 19 de julio del año de Nuestro Señor de 2001:

El listado del CheckList o uno mejorado... (para hacerme quedar bien)

Pido disculpas a quienes me han pedido los listados del cCheckList y no se lo he enviado, al menos a los que me lo pidieron MESES después, (por no decir años), de que publicase esta página.
La verdad es que teniendo a nuestra disposición un control que ya hace lo que con ése código se "iba" a hacer, (al menos si la versión era VB5 ó 6), pues la verdad es que no tenía mucho sentido...
Pero ahora "recapacito", (o pienso, ya que algunas veces también lo hago... lo de pensar), y cambio de opinión... y como el mencionado fichero zip no lo encuentro, dejo aquí el link a otro que hace lo mismo que "prometía" que hacía y además es más reciente... o casi... al menos de las tres versiones que he encontrado en mi disco duro es la única que no me ha dado error al cargar el proyecto... je, je, je.
Lo dicho, mis disculpas a los que han pedido dicho fichero y no se lo he enviado y que habrán pensado que soy un "dejao", un informal y un montón de calificativos más, (seguramente con toda la razón del mundo), los cuales asumo... y que, casi con toda seguridad serán ciertos... ¡snif! espero vuestro perdón... ¡¡¡Buaaaaa!!!! (no llores Guille que seguramente ya te han perdonado...) ¡Vale! Gracias, gracias y más gracias...

Aquí tienes el link para el fichero gsChkListMult.zip de 13.9 KB
(extráelo con la opción de crear los directorios y ejecuta el fichero t_chkList.vbg que está en el directorio Prueba)

Otra cosa más:
También te dejo este otro link a unos señores que me han pedido que lo ponga ya que el tema tratado en esta página está relacionado con lo que ellos hacen... aunque lo suyo es "comercial" (para ganar pelas) y no "altruista" como lo que yo hago, con lo cual, de ganar pelas, nada de nada... ¡en fin! (aunque ya mismo lo de "ganar pelas" estará obsoleto y habrá que decir "ganar €uros")
La página del TX Text Control un control de texto muy ampliado, acepta formatos RTF, HTML, DOC, etc.
(a ver si me regalan uno... je, je, je)


ir al índice del Guille