Tutorial: Crear una aplicación cliente enriquecida con MFC

El siguiente tutorial describe un procedimiento para crear una aplicación cliente enriquecida basada en MFC.

Durante este tutorial, realizará las siguientes actividades:

  • Diseñar una solución basada en MFC que muestra datos de una base de datos existente y presenta las siguientes características mediante diversos cuadros de diálogo:

    • Alojar un control ActiveX sin ventana

    • Utilizar cuadros de diálogo de HTML dinámico (DHTML)

    • Validar el usuario de una aplicación utilizando un servicio Web XML existente.

Para completar este tutorial, debe proporcionar una base de datos existente y al menos una tabla en la que se pueda buscar.

NotaNota:

Este tutorial utiliza como ejemplo la base de datos pubs y la tabla authors.

Para crear la aplicación MFC

  1. En el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto.

  2. En el panel Tipos de proyecto, haga clic en Proyectos de Visual C++ y, en el panel Plantillas, haga clic en el icono Aplicación MFC.

  3. En el cuadro Nombre, escriba MyProject.

  4. Haga clic en Aceptar para cerrar el cuadro de diálogo y abrir el Asistente para aplicaciones MFC.

Utilizando el Asistente para aplicaciones MFC, se modifica el proyecto para que admita el acceso a bases de datos y muestre características de la aplicación cliente enriquecida.

NotaNota:

Este tutorial da por supuesto que el servidor al que se obtiene acceso es un servidor SQL y que la base de datos pubs existe en este servidor.

Para implementar la compatibilidad con bases de datos

  1. En el Asistente para aplicaciones MFC, seleccione Compatibilidad con bases de datos.

  2. Seleccione la opción Vista de base de datos con compatibilidad con archivos.

  3. Haga clic en el botón Origen de datos.

  4. En el cuadro de lista Proveedores OLE DB, haga clic en el elemento Proveedor de Microsoft OLE DB para SQL Server y haga clic en Siguiente.

  5. Escriba o seleccione un nombre de servidor existente.

  6. Seleccione Usar seguridad integrada de Windows NT.

  7. Seleccione la base de datos pubs.

  8. Haga clic en el botón Aceptar para establecer la conexión.

  9. En el cuadro de diálogo Seleccionar objeto de base de datos, seleccione la tabla authors.

  10. Seleccione Aceptar para cerrar el cuadro de diálogo.

  11. Haga clic en Finalizar para crear la aplicación del marco de trabajo.

  12. Una vez creado el proyecto, deberá quitar la línea #error de MyProjectSet.h.

Una vez creada la aplicación del marco de trabajo, se pueden agregar las características principales.

En esta sección, se utiliza un formulario sencillo y un control para describir el acceso y la presentación de datos en la tabla authors. Como sólo es una demostración, la consulta y la presentación son sencillas. Los resultados de la consulta (todos lo autores de la tabla) se muestran en un cuadro de lista.

La aplicación MyProject ya contiene un objeto de formulario (denominado IDD_MYPROJECT_FORM), situado en el nodo Dialog en la Vista de recursos. Este formulario se modificará para que muestre una lista de autores sencilla de la tabla authors.

Para modificar el formulario

  1. En la Vista de recursos, expanda el proyecto, expanda el nodo Dialog y haga doble clic en el objeto de formulario predeterminado (IDD_MYPROJECT_FORM).

  2. Arrastre un control List Box hasta el formulario predeterminado.

  3. Haga clic con el botón secundario del mouse (ratón) en el control List Box y, en el menú contextual, seleccione Agregar variable.

    Aparecerá el Asistente para agregar variables miembro.

  4. En el cuadro Nombre de variable, escriba m_DataList y haga clic en Finalizar.

  5. Arrastre un control Button hasta el formulario predeterminado. En la ventana Propiedades, cambie el cuadro Título a Alojamiento de controles.

  6. Arrastre un control Button hasta el formulario predeterminado. En la ventana Propiedades, cambie el cuadro Título a Cuadro de diálogo DHTML.

    NotaNota:

    Estos dos controles se utilizan más adelante en el tutorial para obtener acceso a otras características de la aplicación.

Para mostrar los resultados de una consulta

  1. En la Vista de clases, expanda el nodo del proyecto y haga clic en el método OnInitialUpdate de la clase CMyProjectView.

  2. Agregue el siguiente código después de cualquier código existente en la función:

       HRESULT hr = S_OK;
       TCHAR szAuthor[80];
       
       CMyProjectSet &dbset = GetDocument()->m_MyProjectSet;
       [db_command(name="cmd", source_name="dbset", hresult=hr)
       {
          SELECT au_lname
          ([bindto]szAuthor)
          FROM AUTHORS
       }];
    
       while(cmd.MoveNext() == S_OK)
          m_DataList.InsertString(-1, szAuthor);
    

    Este código utiliza el atributo db_command para inicializar el conjunto de datos del objeto de documento (m_MyProjectSet) con los últimos nombres de los autores actuales en la tabla.

  3. En el menú Generar, haga clic en Generar solución.

  4. En el menú Depurar, haga clic en Iniciar sin depurar.

    Los resultados de la consulta se mostrarán en el cuadro de lista del formulario de vista secundario.

La siguiente modificación de la aplicación cliente enriquecida es un cuadro de diálogo que aloja un control personalizado sencillo sin ventana. El primer paso es crear un control ActiveX personalizado con un evento simple. A continuación, se crea un objeto de cuadro de diálogo que contiene el control y administra el evento de control.

Para crear el control personalizado

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en la solución MyProject.

  2. En el menú contextual, haga clic en Agregar y, a continuación, en Nuevo proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto.

  3. En el panel Tipos de proyecto, haga clic en Proyectos de Visual C++ y, en el panel Plantillas, haga clic en el icono Proyecto ATL.

  4. Escriba CustomCtl para el nombre del proyecto nuevo y haga clic en Aceptar.

    Aparecerá el Asistente para proyectos ATL.

  5. Haga clic en Finalizar para aceptar la configuración predeterminada y crear el proyecto.

  6. Haga clic con el botón secundario del mouse en el proyecto CustomCtl.

  7. En el menú contextual, haga clic en Agregar y, a continuación, en Agregar clase.

    Aparecerá el cuadro de diálogo Agregar clase.

  8. Haga doble clic en el elemento Control ATL.

    Aparecerá el Asistente para controles ATL.

  9. En el Asistente para controles ATL, escriba MyCtl en el cuadro Nombre corto.

  10. En la página Opciones, elija Puntos de conexión.

  11. Haga clic en Finalizar para crear el objeto de control personalizado.

Una vez creado el control, se agrega un evento simple denominado Click. Este evento lo desencadena el control siempre que se hace clic en el mouse dentro del área de control.

Para crear el evento Click

  1. En la Vista de clases, expanda el nodo CustomCtl.

  2. Haga clic con el botón secundario del mouse en la interfaz de eventos para el control personalizado (_IMyCtlEvents).

  3. En el menú contextual, haga clic en Agregar y, a continuación, en Agregar método.

  4. Escriba los siguientes valores utilizando el Asistente para agregar métodos:

    • Tipo de valor devuelto: void

    • Nombre de método: Click

  5. Haga clic en Finalizar para crear el evento Click.

  6. En la Vista de clases, seleccione la clase del control (CMyCtl).

  7. En la ventana Propiedades, haga clic en el botón Mensajes y agregue un controlador OnLButtonDown para el mensaje WM_LBUTTONDOWN.

  8. Agregue el código siguiente al cuerpo del controlador:

       Click();
       return 0;
    
  9. En el menú Generar, haga clic en Generar solución.

Una vez generada correctamente la solución, el control se puede alojar en un cuadro de diálogo sencillo.

Para alojar el control

  1. En la Vista de recursos, haga clic con el botón secundario del mouse en la solución MyProject.

  2. En el menú contextual, haga clic en Agregar y, a continuación, en Agregar recurso.

  3. Haga clic en el elemento Dialog y haga clic en New.

  4. Haga clic con el botón secundario del mouse en el cuadro de diálogo IDD_DIALOG1 y haga clic en Agregar clase en el menú contextual.

    Aparece el Asistente para clases MFC.

  5. En el Asistente para clases MFC, escriba los siguientes valores:

    • Nombre de clase: CMyCtlDlg

    • Clase base: CDialog

  6. Haga clic en Finalizar.

  7. Haga clic con el botón secundario del mouse en el cuadro de diálogo IDD_DIALOG1 y seleccione Insertar control ActiveX en el menú contextual.

  8. En el cuadro de diálogo Insertar control ActiveX, seleccione el objeto CMyCtl y haga clic en Aceptar para agregarlo a la página.

  9. Seleccione el control ActiveX en la plantilla de diálogos.

  10. En la ventana Propiedades, haga clic en el botón Eventos de control y agregue un controlador ClickMyctl1 para el evento Click.

  11. Agregue el código siguiente al cuerpo del controlador de eventos:

       AfxMessageBox("Click event fired");
    

El paso final implica enlazar el cuadro de diálogo a la aplicación cliente enriquecida. Esto se consigue con código en el controlador para el botón Alojamiento de controles creado anteriormente, en el tema Obtener acceso y mostrar datos de una base de datos existente.

Para mostrar el cuadro de diálogo de alojamiento de controles

  1. En la Vista de recursos, muestre el formulario principal haciendo doble clic en IDD_MYPROJECT_FORM (situado en el nodo Dialog del archivo de recursos para la solución MyProject).

  2. Haga doble clic en el botón Alojamiento de controles, agregado anteriormente.

  3. Agregue el siguiente código a la función controladora:

       CMyCtlDlg dlg;
       dlg.DoModal( );
    
  4. Agregue el siguiente código después de la última instrucción #include en el archivo de código fuente actual:

    #include "MyCtlDlg.h"
    

    Esto incluye el archivo .h de la clase que implementa el cuadro de diálogo de alojamiento de controles.

  5. En el menú Generar, haga clic en Generar solución.

  6. En el menú Depurar, haga clic en Iniciar sin depurar.

Para invocar el cuadro diálogo de alojamiento de controles, presione el botón Alojamiento de controles. Active el evento Click personalizado haciendo clic con el botón primario del mouse en el control.

Otra característica de aplicaciones cliente enriquecidas es el uso de cuadros de diálogo que utilizan HTML para la interfaz de usuario en lugar de recursos de cuadro de diálogo tradicionales. Para los fines de este tutorial, se implementa un sencillo cuadro de diálogo DHTML que contiene un control de imagen que muestra un simple mapa de bits.

Para implementar el cuadro de diálogo DHTML

  1. En la Vista de recursos, haga clic con el botón secundario del mouse en el proyecto MyProject.

  2. En el menú contextual, haga clic en Agregar y, a continuación, en Agregar recurso.

  3. Haga clic en el elemento Dialog y haga clic en Nuevo para crear un nuevo cuadro de diálogo.

  4. Quite los botones Aceptar y Cancelar de la plantilla de diálogos; éstos se implementan en HTML en pasos posteriores.

  5. Haga clic con el botón secundario del mouse en el cuadro de diálogo IDD_DIALOG2 y seleccione Agregar clase.

  6. Escriba los siguientes valores:

    • Nombre de clase: CMyDhtmlDlg

    • Clase base: CDHtmlDialog

  7. Haga clic en Finalizar.

  8. En la Vista de recursos, bajo el nodo HTML, haga doble clic en el elemento IDR_HTML_MYDHTMLDLG y, a continuación, haga clic en la ficha HTML en el panel de diseño para editar el archivo HTML asociado.

  9. Reemplace el texto existente (que debe ser parecido a TODO: Place controls here) por This is the text content of my DHTML dialog box.

Al igual que ocurre con el cuadro de diálogo de alojamiento de controles implementado anteriormente, este cuadro de diálogo se mostrará cuando el usuario presione un botón (Cuadro de diálogo DHTML) en el formulario principal de la aplicación.

Para mostrar el cuadro de diálogo DHTML

  1. En la Vista de recursos, muestre el formulario principal haciendo doble clic en IDD_MYPROJECT_FORM (situado en el nodo Dialog del archivo de recursos para la solución MyProject).

  2. Haga doble clic en el botón Cuadro de diálogo DHTML, agregado anteriormente.

  3. Agregue el siguiente código a la función controladora:

       CMyDhtmlDlg dlg;
       dlg.DoModal( );
    
  4. Agregue el siguiente código después de la última instrucción #include en el archivo de código fuente actual:

    #include "MyDhtmlDlg.h"
    

    Esto incluye el archivo .h de la clase que implementa el cuadro de diálogo DHTML.

  5. En el menú Generar, haga clic en Generar solución.

  6. En el menú Depurar, haga clic en Iniciar sin depurar.

Cuando el cuadro de diálogo aparezca, abra el cuadro de diálogo DHTML presionando el botón Cuadro de diálogo DHTML.

For more information on DHTML dialogs and a more complete example, see the CDHtmlDialog class and the DHtmlExplore sample.

Ocasionalmente, una aplicación cliente enriquecida interactúa con un servicio Web XML externo proporcionando un cliente enriquecido a una o varias bases de datos existentes. A continuación, el usuario puede interactuar con los datos de forma familiar o gráfica.

En este paso, se puede crear un simple servicio Web XML diseñado para ejecutarse en un servidor Web utilizando los Servicios de Internet Information Server (IIS) de Microsoft.

Para crear el servicio Web XML

  1. En el menú Archivo, haga clic en New y, a continuación, haga clic en Proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto.

  2. En el panel Tipos de proyecto, haga clic en Proyectos de Visual Basic o Proyectos de Visual C# y, en el panel Plantillas, haga clic en el icono Servicio Web ASP.NET.

  3. En el cuadro Ubicación, escriba http://localhost/MyService.

  4. Haga clic en Aceptar para cerrar el cuadro de diálogo y crear la solución.

Un parte común de los servicios Web XML es comprobar cada usuario de la aplicación. Una vez creada la solución, puede implementar un método de validación sencillo. Esta rutina de validación es deliberadamente sencilla para ilustrar el concepto claramente.

Cuando se ha creado la solución, agregue un método de validación al archivo de código fuente Service1.asmx. Para ello, haga clic con el botón secundario del mouse en la superficie de diseño Service1.asmx.cs y seleccione Ver código. Reemplace el método Web HelloWorld al final del archivo por el siguiente código:

' Visual Basic
<WebMethod()> Function Validate(ByVal s1 As String, ByVal s2 As String) As Boolean
   Return s1 = s2
End Function

// C#
[WebMethod]
   public bool Validate(string s1, string s2)
   {
    return s1 == s2;
   }

Después de que se ha modificado el archivo de código fuente, se genera la solución.

Una vez que existe el servicio Web XML, se puede agregar y configurar una referencia Web con el cuadro de diálogo Agregar referencia Web.

Para agregar una referencia Web a la aplicación cliente

  1. Abra la solución MyProject.

  2. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el proyecto MyProject y seleccione Agregar referencia Web.

    Aparecerá el cuadro de diálogo Agregar referencia Web.

  3. En Examinar, seleccione Servicios Web del equipo local. Aparecerá una lista de los servicios Web XML existentes en el equipo local, seleccione el que acaba de crear (Service1). Si encuentra el servicio, aparecerá una descripción del mismo en el panel izquierdo y se activará el botón Agregar referencia. La dirección URL del archivo .asmx para el servicio Web deberá aparecer también en el cuadro Dirección URL y ser similar a la siguiente:

    http://localhost/MyService/Service1.asmx
    
  4. Haga clic en el botón Agregar referencia.

Una vez que se ha agregado la referencia Web, se agrega un cuadro de diálogo de validación para demostrar la interacción entre la aplicación y el servicio Web XML.

Para agregar un cuadro de diálogo de validación

  1. En la Vista de recursos, haga clic con el botón secundario del mouse en el proyecto MyProject.

  2. En el menú contextual, haga clic en Agregar y, a continuación, en Agregar recurso.

  3. Haga doble clic en el elemento Dialog.

  4. Haga doble clic en el formulario de cuadro de diálogo IDD_DIALOG3.

    Aparece el Asistente para clases MFC.

  5. Escriba los siguientes valores:

    • Nombre de clase: CMyValidateDlg

    • Clase base: CDialog

  6. Haga clic en Finalizar.

Ahora que se ha creado el cuadro de diálogo, se agregan controles para proporcionar un servicio de validación para el usuario.

Para validar el usuario

  1. Arrastre dos controles Edit control hasta el formulario de cuadro de diálogo IDD_DIALOG3.

  2. Haga clic con el botón secundario del mouse en el primer control Edit control.

  3. En el menú contextual, seleccione Agregar variable.

  4. En el cuadro Nombre de variable, escriba m_Name.

  5. En el menú desplegable Categoría, seleccione Valor.

  6. Haga clic en Finalizar.

  7. Haga clic con el botón secundario del mouse en el segundo control Edit control.

  8. Agregue otra variable (denominada m_Password de categoría Value).

  9. Haga doble clic en el botón Aceptar del formulario de cuadro de diálogo.

  10. Agregue el siguiente código a la función controladora:

       Service1::CService1 *s = new Service1::CService1();
    
       UpdateData(TRUE);
       bool result = false;
       s->Validate(CComBSTR(m_Name), CComBSTR(m_Password), &result);
       if (result)
          CDialog::OnOK();
    
  11. Agregue el siguiente código después de la última instrucción #include en el archivo de código fuente actual:

    #include "WebService.h"
    

    Esto incluye el archivo .h del servicio Web que utiliza el cuadro de diálogo de validación.

Para que la rutina de validación sea efectiva, el cuadro de diálogo de validación tiene que ser el primer objeto de interfaz de usuario que aparezca. Si el usuario escribe el nombre correcto y la contraseña, se mostrará la aplicación cliente enriquecida. Si se escribe una contraseña o un nombre incorrecto, se impedirá el acceso a la aplicación cliente enriquecida al usuario actual.

Para implementar este comportamiento, modifique primero la función InitInstance de la clase de la aplicación principal para llamar a este cuadro de diálogo. La aplicación continúa sólo cuando se sale del cuadro de diálogo correctamente.

Para mostrar inicialmente el cuadro de diálogo de validación

  1. En la Vista de clases, expanda el nodo CMyProjectApp.

  2. Haga doble clic en la función InitInstance para editar el cuerpo de la función.

  3. Agregue el siguiente código antes de llamar a la función ShowWindow del objeto pMainFrame:

       // Display the validation dialog box first
       CMyValidateDlg dlg;
       if (dlg.DoModal() != IDOK)
          return FALSE;
    
  4. Agregue el siguiente código después de la última instrucción #include en el archivo de código fuente actual:

    #include "MyValidateDlg.h"
    

    Esto incluye el archivo .h del cuadro de diálogo de validación.

  5. Genere la solución. En el menú Generar, haga clic en Generar solución.

  6. En el menú Depurar, haga clic en Iniciar sin depurar. En el cuadro de diálogo de comprobación, escriba el mismo texto en los cuadros de edición de Nombre y Contraseña y, a continuación, haga clic en Aceptar. A continuación, se ejecutará la aplicación de cliente enriquecida y se mostrará el cuadro de diálogo principal.

El paso final en el desarrollo de una aplicación de Visual C++ consiste en crear un proyecto de instalación.

Para crear un proyecto de instalación

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en la solución MyProject.

  2. En el menú contextual, haga clic en Agregar y, a continuación, en Nuevo proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto.

  3. En el panel Tipos de proyecto, seleccione Proyectos de instalación e implementación y, en el panel Plantillas, haga clic en el icono Asistente para proyectos de instalación.

  4. Escriba MySetup como nombre del proyecto de instalación y haga clic en Aceptar.

    Aparecerá el Asistente para proyectos de instalación.

  5. Haga dos veces clic en Next.

  6. Seleccione los siguientes grupos de resultados:

    • Resultado principal de MyProject

    • Resultado principal de CustomCtl

  7. Haga dos veces clic en Next.

  8. Haga clic en Finalizar.

  9. En el menú Generar, haga clic en Generar MySetup.

El archivo de resultados (MySetup) se puede copiar al equipo de destino para la instalación de la aplicación cliente enriquecida. Para obtener más información sobre los proyectos de implementación y el Asistente para proyectos de instalación, vea Implementar aplicaciones, Implementar proyectos e Implementar tutoriales.

Adiciones de comunidad

Mostrar: