Création de l'interface Web (tutoriel InterBase)

De RAD Studio
Aller à : navigation, rechercher

Remonter à Tutoriel : Utilisation d'une base de données InterBase dans une application Delphi ou C++

Cette section montre comment créer un client serveur sous la forme d'une application Web au lieu d'une application locale.

Ce client utilise le serveur que nous avons créé dans Création du côté serveur avec DataSnap Server. Peu importe que le serveur ait été implémenté dans Delphi ou C++. Vous pouvez avoir un serveur Delphi et un client C++, ou vice-versa.

Avec RAD Studio, vous pouvez développer une application Web de la même façon que vous développez une application locale. Toutefois, pour les composants visuels, utilisez les composants IntraWeb qui fonctionnent avec le Web, au lieu des composants visuels que nous avons utilisés à la section précédente. La plupart de ces composants ont le même nom que les composants non Web, mais ils utilisent le préfixe "TIW" au lieu de "T". Dans l'exemple ci-dessous, nous allons utiliser les composants TIWButton, TIWDBGrid et TIWDBNavigator qui ont le même but que les composants TButton, TDBGrid et TDBNavigator. Pour la base de données, nous utilisons les mêmes composants, pour un client local ou un client Web.

Voici les étapes de la création d'un client Web.

  1. Créez un nouveau projet. Cliquez sur l'élément de menu principal Fichier > Nouveau > Autre... pour afficher la boîte de dialogue Nouveaux éléments.
  • Pour Delphi, sélectionnez Projets Delphi > VCL for the Web > VCL for the Web Application Wizard.
TutorialInterbase-MC-NewProject.png
  • Pour C++, sélectionnez VCL for the Web > VCL for the Web Application Wizard.
TutorialInterbase-MC-NewProjectCPP.png
Cliquez sur OK pour afficher l'expert :
TutorialInterbase-MC-VCLforWeb.png


Nommez le projet "WebClient". Cliquez sur le bouton Browse... et sélectionnez un répertoire pour le projet. Cliquez sur Ok. L'expert crée un jeu de fichiers.
  1. Dans le Gestionnaire de projets, affichez la fiche UserSessionUnit. Ajoutons deux composants à cette fiche, comme illustré dans la figure ci-dessous. Delphi Double-cliquez sur UserSessionUnit.pas pour afficher sa fiche. TutorialInterbase-MC-NewProjSQLConnkh.png C++ Double-cliquez sur UserSessionUnit.cpp pour afficher sa fiche. TutorialInterbase-MC-NewProjSQLConnCPPkh.png
    Comme pour l'application locale, le serveur doit être en cours d'exécution pour créer le client. Si le serveur n'est pas en cours d'exécution, suivez les instructions de Création d'une interface client enrichie pour exécuter le serveur sans débogage.
    Placez les composants suivants sur la fiche UserSessionUnit, qui est un objet IWUserSession.
    1. Ajoutez un composant TSQLConnection, configuré comme dans Création d'une interface client enrichie
      • Définissez la propriété Driver du TSQLConnection sur "DataSnap".
      • Définissez LoginPrompt sur false.
      • Définissez la propriété Connected sur true.
      • Cliquez avec le bouton droit sur le composant TSQLConnection et sélectionnez Générer les classes client DataSnap. Enregistrez cette nouvelle unité générée qui contient les classes client
        • Enregistrez l'unité sous Un_web_client_proxy.pas pour Delphi.
        • Enregistrez l'unité sous Un_web_client_proxy.cpp pour C++.
    2. Placez un composant TDSProviderConnection sur la fiche.
      • Définissez sa propriété SQLConnection sur "SQLConnection1".
      • Définissez la propriété ServerClassName sur "TDSServerModule1.

    Remarque : TDSServerModule1 est le nom de la classe serveur que nous avons créée dans Création du côté serveur avec DataSnap Server. Le nom de la classe serveur est aussi utilisé dans la classe proxy de Un_web_client_proxy.pas ou Un_web_client_proxy.cpp que vous venez de créer. Il est utilisé dans la ligne de code suivante qui appelle une procédure stockée :

    Delphi

    FcallStoredProcedureCommand.Text := 'TDSServerModule1.callStoredProcedure';
    
    C++
    FcallStoredProcedureCommand->Text = "TDSServerModule1.callStoredProcedure";
    
  2. Créez l'interface Web. Dans le Gestionnaire de projets, double-cliquez sur le module Unit1.
    • Pour Delphi, renommez cette unité Un_web_client.pas. Ajoutez UserSessionUnit à la clause uses de Un_web_client.pas.
    • Pour C++, renommez cette unité Un_web_client.cpp. Ajoutez la ligne
    # include "UserSessionUnit.h"
    
    après les autres instructions include de Un_web_client.cpp.

    La figure suivante montre les composants que nous ajouterons à la fiche qui fournit notre interface Web :

    TutorialInterbase-MC-WebForm.png


    Cliquez sur l'onglet Conception pour afficher la fiche Web pour Un_web_client.

  3. Ajoutez les composants nécessaires pour effectuer une connexion de base de données.
    • Placez un TClientDataSet sur la fiche.
      • Définissez la propriété RemoteServer du TClientDataSet sur "IWUserSession.DSProviderConnection1", qui est le composant TDSProviderConnection que nous avons ajouté à l'interface IWUserSession (fiche) de UserSessionUnit plus tôt.
    • Ajoutez un TDataSource.
      • Définissez la propriété DataSet sur ClientDataSet1 à l'aide du menu déroulant.
  4. Placez les composants visuels sur la fiche, comme illustré dans la figure ci-dessus.
    • Placez un TIWDBNavigator.
    • Faites glisser un TIWDBGrid sur la fiche. Définissez sa propriété Caption sur "Client Demo".
    • Définissez la propriété DataSource des deux contrôles TIWDBNavigator et TIWDBGrid sur "DataSource1" depuis le menu déroulant.
    • Ajoutez un TIWButton. Définissez sa propriété Caption sur "Load R/W". Ce TIWButton a exactement le même rôle que le bouton correspondant dans l'application client local : afficher les données de la table dans la grille. Créez un gestionnaire d'événements pour l'événement OnClick du TIWButton, en utilisant le code suivant :
    Delphi
    procedure TIWForm1.IWButton1Click(Sender: TObject);
    begin
      ClientDataSet1.Active := true;
    end;
    

    C++

    void __fastcall TIWForm1::IWButton1Click(TObject *Sender)
    {
      ClientDataSet1->Active = true;
    }
    

    Remarque : UserSession.DSProviderConnection1 est le composant TDSProviderConnectionque nous avons ajouté au formulaire IWUserSession de UserSessionUnit auparavant. Vous devez également ajouter l'unité ServerController à la clause uses dans Un_web_client.pas.

  5. Enregistrez tous les fichiers et construisez le projet.
  6. Exécutez le projet pour afficher le serveur d'applications IntraWeb. TutorialInterbase-MC-Server.png
    Exécutez le projet comme un projet IntraWeb en cliquant sur l'élément de menu Fichier > Exécuter ou en cliquant sur le bouton Exécuter TutorialInterbase-MC-ServerExecuteButton.png. La fiche Web s'affiche dans le navigateur Web par défaut :
    TutorialInterbase-MC-WebFormInactive.png Cliquez sur le bouton Load R/W pour afficher les données de la table dans le TIWDBGrid : TutorialInterbase-MC-WebFormActive.png Cela termine l'interface Web au serveur. Vous pouvez améliorer l'interface Web pour avoir toutes les fonctions du client local, créées dans la section précédente. Vous devriez ajouter les composants visuels IntraWeb correspondants et les composants de base de données utilisés dans Création d'une interface client enrichie.

    Précédent

    Création d'une interface client enrichie

    Voir aussi