Erstellen einer Web-Benutzeroberfläche (InterBase-Tutorial)

Nach oben zu Tutorial: Eine InterBase-Datenbank in einer Delphi- oder C++-Anwendung verwenden

Dieser Abschnitt zeigt, wie ein Server-Client als Webanwendung anstatt als lokale Anwendung erstellt wird.

Dieser Client verwendet denselben Server, der im Abschnitt Erstellen eines Servers mit DataSnap erstellt wurde. Es spielt keine Rolle, ob der Server in Delphi oder C++ implementiert wurde. Sie können z.B. einen Delphi-Server und einen C++-Client oder umgekehrt verwenden.

Mit RAD Studio lässt sich eine Webanwendung ähnlich wie eine lokale Anwendung entwickeln. Für die visuellen Komponenten verwenden Sie jedoch anstatt der visuellen Komponenten des vorherigen Abschnitts IntraWeb-Komponenten, die mit dem Web arbeiten. Viele dieser Komponenten haben denselben Namen wie Nicht-Webkomponenten, verwenden aber das Präfix "TIW" anstatt "T". Im folgenden Beispiel werden die Komponenten TIWButton, TIWDBGrid und TIWDBNavigator verwendet, die demselben Zweck wie die Komponenten TButton, TDBGrid und TDBNavigator dienen. Für die Datenbank werden dieselben Komponenten für einen lokalen Client und für einen Web-Client verwendet.

Mit den folgenden Schritten erstellen Sie einen Web-Client.

Erstellen Sie ein neues Projekt. Wählen Sie aus dem Hauptmenü Datei > Neu > Weitere..., um das Dialogfeld Objektgalerie anzuzeigen.

Delphi: Wählen Sie Delphi-Projekte > VCL for the Web > VCL for the Web Application Wizard.

C++: Wählen Sie VCL for the Web > VCL for the Web Application Wizard.

Klicken Sie auf OK, um den Experten anzuzeigen:

Geben Sie dem Projekt den Namen "WebClient". Klicken Sie auf die Schaltfläche Browse..., und wählen Sie ein Verzeichnis für Ihr Projekt aus. Klicken Sie auf OK. Der Experte erstellt eine Reihe Dateien für Sie.

Zeigen Sie in der Projektverwaltung die Unit UserSessionUnit an. Diesem Formular sollen zwei Komponenten, wie in der folgenden Abbildung gezeigt, hinzugefügt werden. Delphi Doppelklicken Sie auf UserSessionUnit.pas, um das zugehörige Formular anzuzeigen. C++ Doppelklicken Sie auf UserSessionUnit.cpp, um das zugehörige Formular anzuzeigen.
Ebenso wie bei der lokalen Anwendung muss der Server ausgeführt werden, damit der Client erstellt werden kann. Falls der Server nicht ausgeführt wird, folgen Sie zum Ausführen des Servers ohne Debugger den Anleitungen im Abschnitt Erstellen einer Rich-Client-Benutzeroberfläche.

Platzieren Sie die folgenden Komponenten auf dem Formular UserSessionUnit, das ein IWUserSession-Objekt ist.
1. Fügen Sie eine exakt wie in Erstellen einer Rich-Client-Benutzeroberfläche konfigurierte TSQLConnection-Komponente hinzu:
  - Setzen Sie die Eigenschaft Driver der TSQLConnection-Komponente auf "Datasnap".
  - Setzen Sie LoginPrompt auf False.
  - Setzen Sie die Eigenschaft Connected auf True.
  - Klicken Sie die TSQLConnection-Komponente mit der rechten Maustaste an, und wählen Sie DataSnap-Client-Klassen erzeugen. Speichern Sie diese neu erzeugte Unit, die die Client-Klassen enthält:
    Delphi: Speichern Sie die Unit unter dem Namen Un_web_client_proxy.pas.
    
    C++: Speichern Sie die Unit unter dem Namen Un_web_client_proxy.cpp.
2. Platzieren Sie eine TDSProviderConnection-Komponente auf dem Formular.
  - Setzen Sie deren Eigenschaft SQLConnection auf "SQLConnection1".
  - Setzen Sie die Eigenschaft ServerClassName auf "TDSServerModule1".
Hinweis: TDSServerModule1 ist der Name der Serverklasse, die in Erstellen eines Servers mit DataSnap erstellt wurde. Der Name der Serverklasse wird auch in der Proxy-Klasse in Un_web_client_proxy.pas bzw. Un_web_client_proxy.cpp verwendet, die Sie gerade erstellt haben. Der Name der Serverklasse wird in der folgenden Codezeile, die eine Stored Procedure aufruft, verwendet:

Delphi
```
FcallStoredProcedureCommand.Text := 'TDSServerModule1.callStoredProcedure';
```
C++
```
FcallStoredProcedureCommand->Text = "TDSServerModule1.callStoredProcedure";
```
Erstellen Sie die Web-Benutzeroberfläche. Doppelklicken Sie in der Projektverwaltung auf das Modul Unit2.
- Delphi: Benennen Sie diese Unit in Un_web_client.pas um. Fügen Sie der uses-Klausel in Un_web_client.pas den Eintrag UserSessionUnit hinzu.
- C++: Benennen Sie diese Unit in Un_web_client.cpp um. Fügen Sie die Zeile
```
# include "UserSessionUnit.h"
```
nach den anderen "includes" in Un_web_client.cpp ein.

Die folgende Abbildung zeigt die Komponenten, die dem Formular für die Web-Benutzeroberfläche hinzugefügt werden:

Klicken Sie auf das Register Design, um das Webformular für Un_web_client anzuzeigen.
Fügen Sie die für die Datenbankverbindung erforderlichen Komponenten hinzu.
- Platzieren Sie eine TClientDataSet-Komponente auf dem Formular.
  - Setzen Sie die Eigenschaft RemoteServer der TClientDataSet-Komponente auf "IWUserSession.DSProviderConnection1". Das ist die TDSProviderConnection-Komponente, die Sie zuvor dem Formular UserSessionUnit (IWUserSession) hinzugefügt haben.
- Fügen Sie eine TDataSource-Komponente hinzu.
  - Setzen Sie die Eigenschaft DataSet im Dropdown-Menü auf "ClientDataSet1".
Platzieren Sie die visuellen Komponenten, wie in der obigen Abbildung gezeigt, auf dem Formular.
- Platzieren Sie eine TIWDBNavigator-Komponente.
- Ziehen Sie eine TIWDBGrid-Komponente auf das Formular. Setzen Sie die Eigenschaft Caption auf "Client Demo".
- Setzen Sie die Eigenschaft DataSource der TIWDBNavigator- und der TIWDBGrid-Komponente im Dropdown-Menü auf "DataSource1".
- Fügen Sie eine TIWButton-Komponente hinzu. Ändern Sie deren Eigenschaft Caption in "Load R/W". Diese TIWButton-Komponente dient demselben Zweck wie die entsprechende Schaltfläche in der lokalen Client-Anwendung: Anzeigen der Tabellendaten in dem Gitter. Erstellen Sie eine Ereignisbehandlungsroutine für das OnClick-Ereignis der TIWButton-Komponente mit dem folgenden Code:
Delphi
```
procedure TIWForm1.IWButton1Click(Sender: TObject);
begin
  ClientDataSet1.Active := true;
end;
```
C++
```
void __fastcall TIWForm1::IWButton1Click(TObject *Sender)
{
  ClientDataSet1->Active = true;
}
```
Note: UserSession.DSProviderConnection1 is the TDSProviderConnection component we added to UserSessionUnit 's IWUserSession (form) earlier. Also, you need to add ServerController unit to the uses clause in Un_web_client.pas.
Speichern Sie alle Dateien, und erzeugen Sie das Projekt.
Führen Sie das Projekt aus, um den IntraWeb Application Server anzuzeigen.

Führen Sie das Projekt als IntraWeb-Projekt aus, indem Sie File > Execute aus dem Menü wählen oder auf die Ausführen-Schaltfläche klicken. Das Webformular wird im Standard-Webbrowser angezeigt:
Klicken Sie auf die Schaltfläche Load R/W, um im TIWDBGrid-Steuerelement Tabellendaten anzuzeigen: Damit ist die Erstellung der Web-Benutzeroberfläche für den Server abgeschlossen. Sie können diese Web-Benutzeroberfläche so erweitern, dass sie auch alle Funktionen des lokalen, im vorherigen Abschnitt erstellten Clients enthält. Dazu müssen Sie die entsprechenden visuellen IntraWeb-Komponenten und die in Erstellen einer Rich-Client-Benutzeroberfläche verwendeten Datenbankkomponenten hinzufügen.
Zurück

Erstellen einer Rich-Client-Benutzeroberfläche

Siehe auch