En un post anterior detallé los pasos básicos necesarios para la implementación de un ActiveX con .NET (C#). Pero faltó por describir aquellos necesarios para la interacción de la página HTML con el ActiveX y de este con la página.

Interacción de la página con el ActiveX

La interacción de la página con el ActiveX consiste en poder llamar a métodos del ActiveX o establecer y/o recuperar valores de propiedades públicas del mismo.

Para establecer el valor de una propiedad haremos lo siguiente:

  1. Marcar la propiedad, a la que queremos acceder desde la página, como visible para COM.
  2. [ComVisible(true)]
    public string Property1
    {
        get; set;
    }
  3. Establecer el valor de la propiedad pasándolo como parámetro del ActiveX
  4. <object id="MyActiveX" width="306px" height="167px" classid="clsid:D857B4F5-8684-453e-82C8-7F493CBE5592"
                viewastext style="border-style:dashed">
        <param name="Property1" value="desde Javascript" />
        <p>
            Pon el texto que quieras mostrar si se abre la página con un browser no compatible
            o si el ActiveX no está instalado correctamente.             
        </p>
    </object>
  5. Recuperar el valor de la propiedad del ActiveX
  6. <script type="text/javascript">
        function Method1() {
            alert(MyActiveX.Property1);
        }
    </script>

Para llamar a un método del ActiveX haremos lo siguiente:

  1. Marcar el método que queremos llamar como visible para COM.
  2. [ComVisible(true)]
    public void Method1()
    {
        MessageBox.Show("Hola Mundo desde Javascript");
    }
  3. Llamar el método desde la página.
  4. <script type="text/javascript">
        function Method2() {
            MyActiveX.Method1();
        }
    </script>
    y si abrimos la página en Internet Explorer y hacemos clic en el nuevo botón veremos lo siguiente
    LlamadaDesdeJS

Interaccion del ActiveX con la página

La interacción del ActiveX con la página consiste en poder ejecutar código javascript desde el ActiveX. Esta funcionalidad esta muy bien descrita en este artículo de microsoft y en esencia se trata de crear eventos en .NET y suscribirse a estos desde javascript.

Para ello implementamos la siguiente interface.

using System.Runtime.InteropServices;

namespace MyActiveX
{
    public delegate void ControlEventHandler(string eventArgs);

    [Guid("0422D916-C11A-474e-947D-45A107038D12")]
    [InterfaceType(ComInterfaceType.InterfaceIsIDispatch)]
    [ComVisible(true)]
    public interface IControlEvents
    {
        [DispId(0x60020000)]
        void Execute(string handler);
    }
}

Marcamos el control tal como sigue

[ClassInterface(ClassInterfaceType.AutoDispatch), ComSourceInterfaces(typeof(IControlEvents))]
[ComVisible(true), Guid("D857B4F5-8684-453e-82C8-7F493CBE5592")]
public partial class MyUserControl : UserControl
{
    ...
}

Luego creamos un evento y el método que lo dispara

public event ControlEventHandler Execute;

private void OnExecute(string handler)
{
    if (Execute != null)
        Execute(handler);
}

Una vez hecho esto en la página HTML nos suscribimos al evento de la siguiente forma

<script type="text/javascript">        
    function MyActiveX::Execute(param)
    {
        alert(param)
    }
</script>

y ya solo los queda llamarlo cuando haga falta. Para este ejemplo la llamada la haremos al hacer click en un botón del control.

mapping_events

y esto ha sido todo. Creo que solo quedaría lo relacionado con marcar el ActiveX como seguro para scripting pero eso es algo que podemos retomar en otro post. Mientras tanto aquí les dejo el código fuente.


Uno de los proyectos en los que trabajo actualmente trata de crear un componente común a varias aplicaciones de una empresa. Dichas aplicaciones son todas web y el componente trata de automatizar un proceso que solo puede ocurrir del lado del cliente: capturar la firma digital hecha por un usuario de cualquiera de estas aplicaciones a través de un tableta conectada a un ordenador por USB. Así que como solución se optó por crear un ActiveX ya que como política de la empresa todos eran ordenadores Windows que usaban Microsoft Internet Explorer como navegador.

Yo nunca antes había hecho un ActiveX así que comencé a buscar información en la web. Aunque existen muchos sitios en los cuales se puede encontrar información acerca de este tema. La solución final fue el resultado de lo encontrado en diversos lugares. Este artículo resume todos los pasos que necesité para completar la construcción del ActiveX, y espero que me sirva como referencia en el futuro.

1.) Creando el control ActiveX

Lo primero que haremos es crear un proyecto en VisualStudio del tipo Librería de Clases (Class Library). En la que añadiremos un UserControl en el pondremos un botón y en el evento clic de este mostraremos un mensaje.

SolucionInicial La clase “MyUserControl” deberemos marcarla con los siguientes atributos:

  1. Guid –> Identificador de la clase cuando esta sea expuesta en COM
  2. ComVisible –> Expone la clase para que sea visible desde COM
  3. ClassInterfaceAttribute –> Es el tipo de Interface COM que encapsulará a la clase (mas información en MSDN)

Tip: Si tu ensamblado va a tener más de una clase asegúrate de que esté marcado como NO visible para COM y solo marca las clases realmente quieras exponer.

[assembly: ComVisible(false)]
Al final tenemos algo como en código que sigue a continuación.
using System;
using System.Windows.Forms;
using System.Runtime.InteropServices;

namespace MyActiveX
{
    [ClassInterface(ClassInterfaceType.AutoDispatch)]
    [ComVisible(true), Guid("D857B4F5-8684-453e-82C8-7F493CBE5592")]
    public partial class MyUserControl : UserControl
    {
        public MyUserControl()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            MessageBox.Show("Hola Mundo");
        }
    }
}

2.) Incrustando el control en la página HTML

Para mostrar el control en una página web primero hay que instalarlo, ese será el siguiente paso, y luego solo hay que utilizar el tag object como se muestra a continuación. Ten en cuenta que el atributo classid debes poner el GUID con que has decorado la clase en C#



    

Este texto se mostrará si se abre la página con un browser no compatible o si el ActiveX no está instalado correctamente.

3.) Instalando el AcativeX

Para instalar el ActiveX una de las opciones que tenemos es la de crear un instalador que además de dar la opción de ubicar los archivos necesarios para que la aplicación funcione, registre el ensamblado (DLL) que contiene la clase que queremos exponer en COM. Solo hará falta añadir el proyecto principal al proyecto de instalación de VisualStudio.

PrimaryOutput

Seleccionando el “Primary output from MyActiveX” y visualizando sus propiedades, podremos marcar la DLL para que se registre en COM durante la instalación.

InstaladorUna vez hecho esto generamos el instalador lo instalamos en el ordenador y al abrir Internet Explorer y navegar a la página de demostración, vemos el control que hemos creado previamente.

html

y si hacemos clic en el botón vemos que funciona tal y como esperábamos.

holamundo

En un próximo post trataré el tema de la interacción entre el ActiveX y el Navegador.

 

Puedes descargarte el código fuente desde aquí


 |