表示: Delphi C++
表示設定

チュートリアル:EMS クライアント アプリケーションを使用して EMS ユーザーを管理する

提供: RAD Studio
移動: 案内, 検索

データベースおよび LiveBinding のチュートリアル への移動


このチュートリアルでは、EMS サーバーに登録された EMS ユーザーを管理することができます。

ここでは、新しい EMS ユーザーを登録したり、既存の EMS ユーザーとして EMS サーバーにログインするための、簡単な EMS クライアント アプリケーションを作成します。この EMS ユーザー管理クライアント アプリケーションを使用して、EMS ユーザー情報の取得、更新、および削除を行うことができます。

このチュートリアルでは、以下を行います。

  • TBackendAuth コンポーネントを使用して、EMS サーバーでの EMS クライアント アプリケーションの認証を行う。
  • TBackendQuery コンポーネントを使用して、EMS サーバーから EMS ユーザーを取得する。
  • TBackendUsers コンポーネントを使用して、EMS サーバー内の EMS ユーザーの管理(作成、更新、削除)を行う。

EMS クライアント アプリケーションの作成

  1. Delphi または C++ の空のマルチデバイス アプリケーションを作成します。以下を選択してください。
    • [ファイル|新規作成|マルチデバイス アプリケーション - Delphi|空のアプリケーション]
    • [ファイル|新規作成|マルチデバイス アプリケーション - C++Builder|空のアプリケーション]
  2. TForm に新しい TTabControl コンポーネントをドロップします。
  3. 新しい TTabItem を TTabControl に追加します。
    • TTabControl コンポーネントを右クリックし、[項目の追加|TTabItem]を選択します。
  4. [オブジェクト インスペクタ]で、TTabItem の以下のプロパティを変更します。
    • Name を「LogInTab」に
    • Text を「Login」に
  5. フォームの Caption プロパティを「EMS Users Management」に変更します。
  6. アプリケーションのタイトルを「EMS Users Management」に変更します。
    • Delphi の場合:
     Application.Title := 'EMS Users Management';
    • C++ の場合:
    Application->Title = "EMS Users Management";
  7. TFormTEMSProvider コンポーネントをドロップします。
  8. [オブジェクト インスペクタ]で、EMS サーバーのパラメータを次のように構成します。
    • URLhostlocalhost
    • URLPort8080
  9. [接続テスト]ボタンをクリックします。接続が正しくセットアップされていれば、EMS サーバーの現在のバージョンを示すメッセージが出力されます。

既存 EMS ユーザーの EMS サーバーへのログイン

TBackendAuth コンポーネントを使用して、アプリケーションから EMS サーバーにログインします。それには、既存 EMS ユーザーの名前とパスワードが必要です。

  1. 新しい TLayout コンポーネントを LogInTab に追加し、Name を「LayoutLogIn」に変更します。
  2. TBackendAuth コンポーネントをフォームにドロップし、Name プロパティを「BackendAuthLogin」に変更します。
  3. [LiveBinding デザイナ]を開き、ユーザー名およびパスワードを編集できるコンポーネントを作成して、それを TBackendAuth コンポーネントにリンクします。手順は以下のとおりです。
    • BackendAuthLoginUserName フィールドを右クリックし、[新規コントロールにリンク...]を選択し、TEdit を選択して[OK]ボタンをクリックします。
    • BackendAuthLoginPassword フィールドを右クリックし、[新規コントロールにリンク...]を選択し、TEdit を選択して[OK]ボタンをクリックします。
  4. [構造]ビューで、EditUserName コンポーネントと EditPassword コンポーネントを LayoutLogin コンポーネントに移動します。
  5. TButton を LayoutLogin に追加し、Name プロパティを「LogIn」に変更します。
  6. LogIn ボタンをダブルクリックして OnClick イベントを作成します。
  7. LogIn ボタンの OnClick イベントのイベント ハンドラを実装し、EMS ユーザーが EMS サーバーにログインできるようにします。
    • Delphi の場合:
    procedure TForm1.LogInClick(Sender: TObject);
    begin
      try
        BackendAuthLogin.LogIn;
      Except
        on E: Exception do
        begin
          ShowMessage('Connection to EMS Server failed');
        end;
      end;
     
    end;
    • C++ の場合:
    void __fastcall TForm1::LogInClick(TObject *Sender) {
        try {
            BackendAuthLogin->Login();
        } catch (System::Sysutils::Exception &e) {
            ShowMessage("Connection to EMS Server failed");
        }
    }

EMS サーバーからのログアウト

TBackendAuth コンポーネントを使用して、ログインしている EMS ユーザーを EMS サーバーからログアウトさせます。EMS ユーザーが問題なく EMS サーバーにログインしている間、LayoutLogin は非表示になっています。

  1. TLayout コンポーネントを LogInTab に追加し、Name プロパティを「LayoutLogOut」に変更します。
  2. 新しい TButton を LayoutLogOut に追加し、Name プロパティを「LogOut」に変更します。
  3. LogOut ボタンをダブルクリックして OnClick イベントを作成します。
  4. イベント ハンドラを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.LogOutClick(Sender: TObject);
    begin
          BackendAuthLogin.Logout;
    end;
    • C++ の場合:
    void __fastcall TForm1::LogOutClick(TObject *Sender) {
        BackendAuthLogin->Logout();
    }
  5. EMS ユーザーのログイン状態に応じて LogIn レイアウトおよび LogOut レイアウトを表示または非表示にするメソッドを作成します。
    • コードの private セクションに ShowLogin メソッドを作成します。
    • Delphi の場合:
    private
        procedure ShowLogin;
    • C++ の場合:
    private:    // User declarations
       void __fastcall ShowLogin();
    ヒント: Ctrl+Shift+C を押すと、コードの自動補完が行われます。
    • ShowLogin メソッドに以下のコードを追加します。
    • Delphi の場合:
    procedure TForm1.ShowLogin;
    begin
      LayoutLogOut.Position := LayoutLogIn.Position;
      LayoutLogIn.Visible := not BackendAuthLogin.LoggedIn;
      LayoutLogOut.Visible := BackendAuthLogin.LoggedIn;
    end;
    • C++ の場合:
    void __fastcall TForm1::ShowLogin() {
        LayoutLogOut->Position = LayoutLogIn->Position;
        LayoutLogIn->Visible =  !BackendAuthLogin->LoggedIn;
        LayoutLogOut->Visible = BackendAuthLogin->LoggedIn;
    }
  6. フォームの OnCreate イベントで ShowLogin メソッドを呼び出します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.FormCreate(Sender: TObject);
    begin
          ShowLogin;
    end;
    • C++ の場合:
    void __fastcall TForm1::FormCreate(TObject *Sender) {
        ShowLogin();
    }
  7. フォームの LayoutLogOut コンポーネントに、TLabel を 2 つ追加します。
    • Label1 の Text プロパティを「User Name」に変更します。
    • Label2 の Name プロパティを「LoggedUser」に変更します。
    • [LiveBinding デザイナ]で、BackendAuthLogin コンポーネントの UserName フィールドを LoggedUser ラベルにリンクします。
  8. フォームの BackendAuthLogin コンポーネントの OnLoggedIn イベントと OnLoggedOut イベントを作成します。
    • Delphi の場合:
    procedure TForm1.BackendAuthLoginLoggedIn(Sender: TObject);
    begin
      ShowLogin;
    end;
     
    procedure TForm1.BackendAuthLoginLoggedOut(Sender: TObject);
    begin
      BackendAuthLogin.ClearFieldValues;
      ShowLogin;
    end;
    • C++ の場合:
    void __fastcall TForm1::BackendAuthLoginLoggedIn(TObject *Sender) {
        ShowLogin();
    }
    // ---------------------------------------------------------------------------
     
    void __fastcall TForm1::BackendAuthLoginLoggedOut(TObject *Sender) {
        BackendAuthLogin->ClearFieldValues();
        ShowLogin();
    }

LoginTab.png LoginTabLoggedUser.png

EMS サーバーへの新規 EMS ユーザーの登録

このアプリケーションには別のタブがあり、新しい EMS ユーザーを EMS サーバーに登録することができます。このタブを Signup タブと呼びます。

  1. [構造]ビューで、TabControl を右クリックし、[項目の追加|TTabItem]を選択します。
  2. [オブジェクト インスペクタ]で、TTabItem の以下のプロパティを変更します。
    • Name を「SignUpTab」に
    • Text を「Signup」に
  3. TBackendAuth コンポーネントをフォームに追加し、Name プロパティを「BackendAuthSignup」に変更します。BackendAuthSignup を使用して新しい EMS ユーザーを EMS サーバーに登録します。
  4. [LiveBinding デザイナ]を開きます。
    • BackendAuthSignupUserName フィールドを右クリックし、[新規コントロールにリンク...]を選択し、TEdit を選択して[OK]ボタンをクリックします。
    • BackendAuthSignupPassword フィールドを右クリックし、[新規コントロールにリンク...]を選択し、TEdit を選択して[OK]ボタンをクリックします。
  5. [構造]ビューで、EditUserName2 コンポーネントと EditPassword2 コンポーネントを SignUpTab コンポーネントに移動します。
  6. EMS クライアント アプリケーションによって新規作成される EMS ユーザーに、カスタム詳細情報を追加します。[構造]ビューBackendAuthSignup コンポーネントを選択します。
  7. [LiveBinding デザイナ]で、ユーザー詳細情報 email を新しい TEdit コントロールにリンクします。
  8. [構造]ビューで、EditUserDetailemail コンポーネントを SignUpTab コンポーネントに移動します。
  9. SignUpTab に新しい TButton コンポーネントを追加し、以下を行います。
    • Name プロパティを「SignUp」に変更します。
    • SignUp ボタンをダブルクリックして、OnClick イベントを作成します。
    • SignUp ボタンの OnClick イベントのイベント ハンドラを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.SignUpClick(Sender: TObject);
    begin
        BackendAuthSignup.Signup;
    end;
    • C++ の場合:
    void __fastcall TForm1::SignUpClick(TObject *Sender) {
        BackendAuthSignup->Signup();
    }
  10. SignUpTab を表示するのは、EMS ユーザーが EMS サーバーにログインしている場合だけです。そのために、次のコードを ShowLogin メソッドに追加します。
    • Delphi の場合:
    procedure TForm1.ShowLogin;
    begin
    // previous code goes here
      SignUpTab.Visible := BackendAuthLogin.LoggedIn;
    end;
    • C++ の場合:
    void __fastcall TForm1::ShowLogin() {
        //previous code goes here
        SignUpTab->Visible = BackendAuthLogin->LoggedIn;
    }
  11. [オブジェクト インスペクタ]で[イベント]タブを開き、OnSignedUp イベントをダブルクリックします。
  12. BackendAuthSignup コンポーネントの OnSignedUp イベントのイベント ハンドラを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.BackendAuthSignupSignedUp(Sender: TObject);
    begin
      EditUserName2.Text:= '';
      EditPassword2.Text:='';
      EditUserDetailemail.Text:= '';
    end;
    • C++ の場合:
    void __fastcall TForm1::BackendAuthSignupSignedUp(TObject *Sender) {
        EditUserName2->Text = "";
        EditPassword2->Text = "";
        EditUserDetailemail->Text = "";
    }

SignupTab.png

EMS サーバーからの EMS ユーザー リストの取得

EMS クライアント アプリケーションで、EMS サーバーから現在の EMS ユーザー リストを取得します。

  1. TBackendQuery コンポーネントをフォームにドロップします。
  2. [オブジェクト インスペクタ]で、TBackendQueryBackendService プロパティに[Users]を選択します。
  3. LogIntTabTLayout コンポーネントを追加し、Name プロパティを「LayoutUsers」に変更します。
  4. TListView コンポーネントを LayoutUsers にドロップします。[オブジェクト インスペクタ]ItemAppearance プロパティを展開し、ItemAppearanceImageListItemBottomDetail を選択します。
  5. LayoutUsers に新しい TButton コンポーネントを追加し、Name プロパティを「GetUsers」に変更します。この GetUsers ボタンは BackendQuery を実行するためのものです。
  6. GetUsers ボタンの OnClick イベントを作成し、そのイベント ハンドラを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.GetUsersClick(Sender: TObject);
    begin
      BackendQuery1.ClearResult;
      BackendQuery1.Execute;
      UpdateListUsers(BackendQuery1.JSONResult);
    end;
    • C++ の場合:
    void __fastcall TForm1::GetUsersClick(TObject *Sender) {
        BackendQuery1->ClearResult();
        BackendQuery1->Execute();
        UpdateListUsers(BackendQuery1->JSONResult);
    }
  7. UpdateListUsers メソッドを作成および実装します。
    • コードの private セクションでメソッドを宣言します。
    • Delphi の場合:
    procedure UpdateListUsers(AUsers: TJSONArray);
    • C++ の場合:
    private:    // User declarations
        //previous code goes here
        void __fastcall UpdateListUsers(TJSONArray *AUsers);
    • メソッドを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.UpdateListUsers(AUsers: TJSONArray);
    var
      I: Integer;
      LUser: TJSONValue;
      LUsername: String;
      _id: String;
      item: TListViewItem;
    begin
      ListView1.ClearItems;
      ListView1.Visible := true;
      for I := 0 to AUsers.Count - 1 do
      begin
        item := ListView1.Items.Add;
        LUser := AUsers.Items[I];
        LUsername := LUser.GetValue<string>('username');
        _id := LUser.GetValue<string>('_id');
        item.text := LUsername;
        item.Detail := _id;
      end;
    end;
    • C++ の場合:
    void __fastcall TForm1::UpdateListUsers(TJSONArray *AUsers) {
        Integer I;
        TJSONValue *LUser;
        String LUsername;
        String _id;
        TListViewItem *item;
     
        ListView1->ClearItems();
        ListView1->Visible = true;
        for (I = 0; I < AUsers->Count; I++) {
            item = ListView1->Items->Add();
            LUser = AUsers->Items[I];
            LUsername = static_cast<TJSONObject*>(LUser)->Get("username")->JsonValue->Value();
            _id = static_cast<TJSONObject*>(LUser)->Get("_id")->JsonValue->Value();
            item->Text = LUsername;
            item->Detail = _id;
        }
    }
  8. EMS ユーザーが問題なく EMS サーバーにログインしている場合にだけ、LayoutUsers を表示します。ShowUsersLayout メソッドを作成して実装します。
    • コードの private セクションでメソッドを宣言します。
    • Delphi の場合:
      private
        // Previous code goes here
        Procedure ShowUsersLayout;
    • C++ の場合:
    private:    // User declarations
        //previous code goes here
        void __fastcall ShowUsersLayout();
    • ShowUsersLayout メソッドを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.ShowUsersLayout;
    begin
      LayoutUsers.Visible := BackendAuthLogin.LoggedIn;
      ListView1.Visible := false;
    end;
    • C++ の場合:
    void __fastcall TForm1::ShowUsersLayout() {
        LayoutUsers->Visible = BackendAuthLogin->LoggedIn;
        ListView1->Visible = false;
    }
  9. OnLoggedInOnLoggedOutOnCreate の各イベント ハンドラで ShowUsersLayout メソッドを呼び出します。
  10. OnSignedUp イベント ハンドラで GetUsers メソッドを呼び出します。
    • Delphi の場合:
    procedure TForm1.BackendAuthSignupSignedUp(Sender: TObject);
    begin
        //Previous code goes here
        GetUsersClick(nil);
    end;
    • C++ の場合:
    void __fastcall TForm1::BackendAuthSignupSignedUp(TObject *Sender) {
        //previous code goes here
        GetUsersClick(NULL);
    }

EMSUsersList.png

EMS サーバーに格納された EMS ユーザー パスワードの更新

この EMS クライアント アプリケーションでは、EMS サーバーに格納された EMS ユーザー パスワードを更新することができます。

  1. TBackendUsers コンポーネントをフォームにドロップします。
  2. 以下のコンポーネントを LayoutUsers に追加し、Name プロパティをそれぞれ次のように変更します。
    • TButton コンポーネント、NameUpdatePassword
    • TLabel コンポーネント、NameNewPassword
    • TEdit コンポーネント。Name は「editedPassword」。
  3. UpdatePassword ボタンの OnClick イベントを作成し、そのイベント ハンドラを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.UpdatePasswordClick(Sender: TObject);
    var
      LEditedUser: TJSONObject;
      LUpdatedAt: TBackendEntityValue;
    begin
     
      try
       if ListView1.Selected <> nil then
       begin
         LEditedUser := TJSONObject.Create;
         LEditedUser.AddPair('password',editedPassword.Text);
         BackendUsers1.Users.UpdateUser(TListViewItem(ListView1.Selected).Detail,LEditedUser,LUpdatedAt);
         editedPassword.Text:='';
       end;
      finally
        LEditedUser.Free;
      end;
    end;
    • C++ の場合:
    void __fastcall TForm4::UpdatePasswordClick(TObject *Sender) {
        TJSONObject *LEditedUser = 0;
        TBackendEntityValue LUpdatedAt;
        try {
            if (ListView1->Selected != NULL) {
                LEditedUser = new TJSONObject;
                LEditedUser->AddPair("password", editedPassword->Text);
                BackendUsers1->Users->UpdateUser(((TListViewItem*)(ListView1->Selected))->Detail,LEditedUser, LUpdatedAt);
                editedPassword->Text = "";
            }
            }
        __finally {
            delete LEditedUser;
        }
    }
  4. ShowUsersButtons メソッドを作成し、リストから選択した EMS ユーザーを更新するためのフィールドを表示するよう実装します。
    • コードの private セクションでメソッドを宣言します。
    • Delphi の場合:
      private
        // Previous code goes here
        Procedure ShowUserButtons;
    • C++ の場合:
    private:    // User declarations
        //Previous code goes here
        void __fastcall ShowUserButtons();
    • ShowUsersButtons メソッドを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.ShowUserButtons;
    begin
      NewPassword.Visible:= true;
      editedPassword.Visible:=true;
      UpdatePassword.Visible := true;
    end;
    • C++ の場合:
    void __fastcall TForm1::ShowUserButtons() {
        NewPassword->Visible = true;
        editedPassword->Visible = true;
        UpdatePassword->Visible = true;
    }
  5. 以下のコードを ShowUsersLayout メソッドの実装に追加します。
    • Delphi の場合:
    procedure TForm1.ShowUsersLayout;
    begin
      //Previous code goes here
      NewPassword.Visible:= false;
      editedPassword.Visible:=false;
      UpdatePassword.Visible := false;
    end;
    • C++ の場合:
    void __fastcall TForm1::ShowUsersLayout() {
        //Previous code goes here
        NewPassword->Visible = false;
        editedPassword->Visible = false;
        UpdatePassword->Visible = false;
    }
  6. UpdateListUsers メソッドの最後で ShowUsersButtons メソッドを呼び出します。

EMS サーバーからの EMS ユーザーの削除

EMS クライアント アプリケーションで、選択した EMS ユーザーを EMS サーバーから削除します。

  1. LayoutUsers に新しい TButton コンポーネントを追加し、Name プロパティを「DeleteUser」に変更します。
  2. DeleteUser ボタンの OnClick イベントを作成し、そのイベント ハンドラを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.DeleteUserClick(Sender: TObject);
    begin
     if ListView1.Selected <> nil then
      begin
        BackendUsers1.Users.DeleteUser(TListViewItem(ListView1.Selected).Detail);
      end;
      GetUsersClick(nil);
    end;
    • C++ の場合:
    void __fastcall TForm1::DeleteUserClick(TObject *Sender) {
        if (ListView1->Selected != NULL) {
            BackendUsers1->Users->DeleteUser(((TListViewItem*)(ListView1->Selected))->Detail);
        }
        GetUsersClick(NULL);
    }
  3. ShowUsersButtons メソッドを実装します。次のコードを追加します。
    • Delphi の場合:
    procedure TForm1.ShowUserButtons;
    begin
      //previous code goes here
      UpdatePassword.Visible := true;
    end;
    • C++ の場合:
    void __fastcall TForm1::ShowUserButtons() {
        DeleteUser->Visible = true;
    }
  4. 以下のコードを ShowUsersLayout メソッドの実装に追加します。
    • Delphi の場合:
    procedure TForm1.ShowUsersLayout;
    begin
      //Previous code goes here
      DeleteUser.Visible := false;
    end;
    • C++ の場合:
    void __fastcall TForm1::ShowUsersLayout() {
        //Previous code goes here
        DeleteUser->Visible = false;
    }

アプリケーションの実行

この時点で、アプリケーションを実行し、EMS サーバーの EMS ユーザーを管理することができます。ログインするには既存の EMS ユーザーが必要です。

アプリケーションを実行するには、F9 キーを押すか、[実行|実行]を選択します。

EMSManagementRunningApp.png

関連項目

個人用ツール
他言語版
以前のバージョン
Assistance