Show: Delphi C++
Display Preferences

Tutorial: EMS Client Application to Manage EMS Users

From RAD Studio
Jump to: navigation, search

Go Up to Database and LiveBindings Tutorials


This tutorial allows you to manage the EMS Users that are registered in the EMS Server.

This tutorial creates a simple EMS Client Application to register new EMS Users and login in an EMS Server with an existing EMS User. By using this EMS User management client application, the EMS User information can be retrieved, updated and deleted.

In this tutorial you are going to:

  • Use the TBackendAuth component to authenticate your EMS Client application in the EMS Server.
  • Use the TBackendQuery component to retrieve the EMS Users from the EMS Server.
  • Use the TBackendUsers component to manage (create, update and delete) the EMS Users in the EMS Server.

Creating the EMS Client Application

  1. Create a Delphi or C++ blank Multi-Device Application, by selecting:
    • File > New > Multi-Device Application Delphi
    • File > New > Multi-Device Application - C++Builder > Blank Application
  2. Drop a new TTabControl component to the TForm.
  3. Add a new TTabItem to the TTabControl.
    • Right-click the TTabControl component | Add TTabItem.
  4. In the Object Inspector, change the following TTabItem properties:
  5. Change the caption property of the form to EMS Users Management.
  6. Change the application's title to EMS Users Management.
    • For Delphi:
     Application.Title := 'EMS Users Management';
    
    • For C++:
    Application->Title = "EMS Users Management";
    
  7. Drop a TEMSProvider component to the TForm.
  8. In the Object Inspector, configure the EMS Server parameters as follows:
    • URLhost: localhost
    • URLPort: 8080
  9. Click the Test Connection button. If the connection is set up successfully, you get a message with the current version of the EMS Server.

Login an Existing EMS User in the EMS Server

Use the TBackendAuth component to log in the EMS Server from your application. To do so, you need an existing EMS User name and password.

  1. Add a new TLayout component to the LogInTab and change its Name to LayoutLogIn.
  2. Drop a TBackendAuth component to your form and change its Name property to BackendAuthLogin.
  3. Open the LiveBindings Designer to create the user name and password editable components and link them to the TBackendAuth component:
    • Right-click the UserName field of BackendAuthLogin | Link to new control | select TEdit | click the OK button.
    • Right-click the Password field of BackendAuthLogin | Link to new control | select TEdit | click the OK button.
  4. In the Structure View, move the EditUserName and the EditPassword components to the LayoutLogin component.
  5. Add a TButton to the LayoutLogin and change its Name property to LogIn.
  6. Double-click the LogIn button to create the OnClick event.
  7. Implement the event handler for the OnClick event of the LogIn button, to allow the login of an EMS User in the EMS Server.
    • For 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;
    
    • For C++:
    void __fastcall TForm1::LogInClick(TObject *Sender) {
        try {
            BackendAuthLogin->Login();
        } catch (System::Sysutils::Exception &e) {
            ShowMessage("Connection to EMS Server failed");
        }
    }
    

Logout from the EMS Server

Use the TBackendAuth component to log out the logged EMS User from the EMS Server. The LayoutLogin is hidden when the EMS user is properly logged in to the EMS Server.

  1. Add a TLayout component to the LogInTab and change its Name property to LayoutLogOut.
  2. Add a new TButton to the LayoutLogOut, and change the Name property to LogOut.
  3. Double-click the LogOut button to create the OnClick event.
  4. Implement the event handler by adding the following code:
    • For Delphi:
    procedure TForm1.LogOutClick(Sender: TObject);
    begin
          BackendAuthLogin.Logout;
    end;
    
    • For C++:
    void __fastcall TForm1::LogOutClick(TObject *Sender) {
        BackendAuthLogin->Logout();
    }
    
  5. Create a method to show or hide LogIn and LogOut layouts, depending on the login status of the EMS user:
    • In the private section of your code, create the ShowLogin method:
    • For Delphi:
    private
        procedure ShowLogin;
    
    • For C++:
    private:    // User declarations
       void __fastcall ShowLogin();
    
    Tip: Click CRTL+SHIFT+C to autocomplete the code.
    • Add the following code to the ShowLogin method:
    • For Delphi:
    procedure TForm1.ShowLogin;
    begin
      LayoutLogOut.Position := LayoutLogIn.Position;
      LayoutLogIn.Visible := not BackendAuthLogin.LoggedIn;
      LayoutLogOut.Visible := BackendAuthLogin.LoggedIn;
    end;
    
    • For C++:
    void __fastcall TForm1::ShowLogin() {
        LayoutLogOut->Position = LayoutLogIn->Position;
        LayoutLogIn->Visible =  !BackendAuthLogin->LoggedIn;
        LayoutLogOut->Visible = BackendAuthLogin->LoggedIn;
    }
    
  6. In the OnCreate event of the form, call the ShowLogin method by adding the following code:
    • For Delphi:
    procedure TForm1.FormCreate(Sender: TObject);
    begin
          ShowLogin;
    end;
    
    • For C++:
    void __fastcall TForm1::FormCreate(TObject *Sender) {
        ShowLogin();
    }
    
  7. Add two TLabels to the LayoutLogOut component of your form:
    • Change the Text property of Label1 to User Name.
    • Change the Name property of Label2 to LoggedUser.
    • In the LiveBindings Designer, link the UserName field of the BackendAuthLogin component to the LoggedUser label.
  8. Create the OnLoggedIn and OnLoggedOut events of the BackendAuthLogin component of your form:
    • For Delphi:
    procedure TForm1.BackendAuthLoginLoggedIn(Sender: TObject);
    begin
      ShowLogin;
    end;
    
    procedure TForm1.BackendAuthLoginLoggedOut(Sender: TObject);
    begin
      BackendAuthLogin.ClearFieldValues;
      ShowLogin;
    end;
    
    • For C++:
    void __fastcall TForm1::BackendAuthLoginLoggedIn(TObject *Sender) {
        ShowLogin();
    }
    // ---------------------------------------------------------------------------
    
    void __fastcall TForm1::BackendAuthLoginLoggedOut(TObject *Sender) {
        BackendAuthLogin->ClearFieldValues();
        ShowLogin();
    }
    

LoginTab.png LoginTabLoggedUser.png

Signing up a new EMS User in the EMS Server

The application has a different tab that allows you to sign up a new EMS User in the EMS Server. This tab is call Signup Tab.

  1. In the Structure View, right-click the TabControl | Add TTabItem.
  2. In the Object Inspector, change the following TTabItem properties:
  3. Add a TBackendAuth component to the form and change its Name property to BackendAuthSignup. Use BackendAuthSignup to sign up a new EMS User in the EMS Server.
  4. Open the LiveBindings Designer:
    • Right-click the UserName field of BackendAuthSignup | Link to new control | select TEdit | click the OK button.
    • Right-click the Password field of BackendAuthSignup | Link to new control | select TEdit | click the OK button.
  5. In the Structure View, move the EditUserName2 and the EditPassword2 components to the SignUpTab component.
  6. Add a custom details to the new EMS Users that are created by the EMS client application. In the Structure View, select the BackendAuthSignup component.
    • In the Object Inspector, click the [...] of the UserDetails property of BackendAuthSignup and add a new item.
    • In the Object Inspector, change the Name property of the new item to email.
  7. Use the LiveBindings Designer to link the email user detail to a new TEdit control.
  8. In the Structure View, move the EditUserDetailemail component to the SignUpTab component.
  9. Add a new TButton component to the SignUpTab:
    • Change the Name property to SignUp.
    • Create the OnClick event of the SignUp button by double-clicking the button.
    • Implement the event handler for the OnClick event of the signUp button by adding the following code:
    • For Delphi:
    procedure TForm1.SignUpClick(Sender: TObject);
    begin
        BackendAuthSignup.Signup;
    end;
    
    • For C++:
    void __fastcall TForm1::SignUpClick(TObject *Sender) {
        BackendAuthSignup->Signup();
    }
    
  10. The SignUpTab is only visible when an EMS User has logged in in the EMS Server. To do so, add the following code in the ShowLogin method:
    • For Delphi:
    procedure TForm1.ShowLogin;
    begin
    // previous code goes here
      SignUpTab.Visible := BackendAuthLogin.LoggedIn;
    end;
    
    • For C++:
    void __fastcall TForm1::ShowLogin() {
        //previous code goes here
        SignUpTab->Visible = BackendAuthLogin->LoggedIn;
    }
    
  11. In the Object Inspector, open the Events tab, and double-click the OnSignedUp event.
  12. Implement the event handler for the OnSignedUp event of the BackendAuthSignup component by adding the following code:
    • For Delphi:
    procedure TForm1.BackendAuthSignupSignedUp(Sender: TObject);
    begin
      EditUserName2.Text:= '';
      EditPassword2.Text:='';
      EditUserDetailemail.Text:= '';
    end;
    
    • For C++:
    void __fastcall TForm1::BackendAuthSignupSignedUp(TObject *Sender) {
        EditUserName2->Text = "";
        EditPassword2->Text = "";
        EditUserDetailemail->Text = "";
    }
    

SignupTab.png

Retrieving the EMS Users List from the EMS Server

The EMS Client application retrieves the current list of EMS Users from the EMS Server.

  1. Drop a TBackendQuery component to your form.
  2. In the Object Inspector, select Users as the BackendService property of the TBackendQuery.
  3. Add a TLayout component to the LogIntTab and change its Name property to LayoutUsers.
  4. Drop a TListView component to the LayoutUsers. In the Object Inspector, expand the ItemAppearance property, and select ImageListItemBottomDetail as the ItemAppearance.
  5. Add a new TButton component to the LayoutUsers and change its Name property to GetUsers. The GetUsers button executes the BackendQuery.
  6. Create the OnClick event for the GetUsers button and implement its event handler by adding the following code:
    • For Delphi:
    procedure TForm1.GetUsersClick(Sender: TObject);
    begin
      BackendQuery1.ClearResult;
      BackendQuery1.Execute;
      UpdateListUsers(BackendQuery1.JSONResult);
    end;
    
    • For C++:
    void __fastcall TForm1::GetUsersClick(TObject *Sender) {
        BackendQuery1->ClearResult();
        BackendQuery1->Execute();
        UpdateListUsers(BackendQuery1->JSONResult);
    }
    
  7. Create and implement the UpdateListUsers method.
    • Declare the method in the private section of your code:
    • For Delphi:
    procedure UpdateListUsers(AUsers: TJSONArray);
    
    • For C++:
    private:    // User declarations
        //previous code goes here
        void __fastcall UpdateListUsers(TJSONArray *AUsers);
    
    • Add the following code to implement the method:
    • For 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;
    
    • For 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. Show the LayoutUsers only if an EMS User is properly logged in to the EMS Server. Create and implement the ShowUsersLayout method:
    • Declare the method in the private section of your code:
    • For Delphi:
      private
        // Previous code goes here
        Procedure ShowUsersLayout;
    
    • For C++:
    private:    // User declarations
        //previous code goes here
        void __fastcall ShowUsersLayout();
    
    • Add the following code to implement ShowUsersLayout method:
    • For Delphi:
    procedure TForm1.ShowUsersLayout;
    begin
      LayoutUsers.Visible := BackendAuthLogin.LoggedIn;
      ListView1.Visible := false;
    end;
    
    • For C++:
    void __fastcall TForm1::ShowUsersLayout() {
        LayoutUsers->Visible = BackendAuthLogin->LoggedIn;
        ListView1->Visible = false;
    }
    
  9. Call the ShowUsersLayout method in the OnLoggedIn, OnLoggedOut, and OnCreate event handlers.
  10. Call the GetUsers method in the OnSignedUp event handler:
    • For Delphi:
    procedure TForm1.BackendAuthSignupSignedUp(Sender: TObject);
    begin
        //Previous code goes here
        GetUsersClick(nil);
    end;
    
    • For C++:
    void __fastcall TForm1::BackendAuthSignupSignedUp(TObject *Sender) {
        //previous code goes here
        GetUsersClick(NULL);
    }
    

EMSUsersList.png

Updating the EMS User Password Stored in the EMS Server

The EMS Client application allows you to update the EMS Users password that is stored in the EMS Server.

  1. Drop a TBackendUsers component to your form.
  2. Add a the following components to the LayoutUsers and change the corresponding Name property:
  3. Create the OnClick event for the UpdatePassword button and implement its event handler by adding the following code:
    • For 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;
    
    • For 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. Create and implement the ShowUsersButtons method, to show the fields to update a selected EMS User from the list:
    • Declare the method in the private section of your code:
    • For Delphi:
      private
        // Previous code goes here
        Procedure ShowUserButtons;
    
    • For C++:
    private:    // User declarations
        //Previous code goes here
        void __fastcall ShowUserButtons();
    
    • Add the following code to implement the ShowUsersButtons method:
    • For Delphi:
    procedure TForm1.ShowUserButtons;
    begin
      NewPassword.Visible:= true;
      editedPassword.Visible:=true;
      UpdatePassword.Visible := true;
    end;
    
    • For C++:
    void __fastcall TForm1::ShowUserButtons() {
        NewPassword->Visible = true;
        editedPassword->Visible = true;
        UpdatePassword->Visible = true;
    }
    
  5. Add the following code to the implementation of the ShowUsersLayout method:
    • For Delphi:
    procedure TForm1.ShowUsersLayout;
    begin
      //Previous code goes here
      NewPassword.Visible:= false;
      editedPassword.Visible:=false;
      UpdatePassword.Visible := false;
    end;
    
    • For C++:
    void __fastcall TForm1::ShowUsersLayout() {
        //Previous code goes here
        NewPassword->Visible = false;
        editedPassword->Visible = false;
        UpdatePassword->Visible = false;
    }
    
  6. Call the ShowUsersButtons method at the end of the UpdateListUsers method.

Deleting the EMS Users from the EMS Server

The EMS Client application deletes a selected EMS User from the EMS Server.

  1. Add a new TButton component to the LayoutUsers and change its Name property to DeleteUser.
  2. Create the OnClick event for the DeleteUser button and implement its event handler by adding the following code:
    • For Delphi:
    procedure TForm1.DeleteUserClick(Sender: TObject);
    begin
     if ListView1.Selected <> nil then
      begin
        BackendUsers1.Users.DeleteUser(TListViewItem(ListView1.Selected).Detail);
      end;
      GetUsersClick(nil);
    end;
    
    • For C++:
    void __fastcall TForm1::DeleteUserClick(TObject *Sender) {
        if (ListView1->Selected != NULL) {
            BackendUsers1->Users->DeleteUser(((TListViewItem*)(ListView1->Selected))->Detail);
        }
        GetUsersClick(NULL);
    }
    
  3. Add the following code to implement the ShowUsersButtons method:
    • For Delphi:
    procedure TForm1.ShowUserButtons;
    begin
      //previous code goes here
      UpdatePassword.Visible := true;
    end;
    
    • For C++:
    void __fastcall TForm1::ShowUserButtons() {
        DeleteUser->Visible = true;
    }
    
  4. Add the following code to the implementation of the ShowUsersLayout method:
    • For Delphi:
    procedure TForm1.ShowUsersLayout;
    begin
      //Previous code goes here
      DeleteUser.Visible := false;
    end;
    
    • For C++:
    void __fastcall TForm1::ShowUsersLayout() {
        //Previous code goes here
        DeleteUser->Visible = false;
    }
    

Running the Application

At this point, you can run the application and manage the EMS Users of your EMS Server. You need an existing EMS User to log in.

To run the application, press F9 or choose Run > Run.

EMSManagementRunningApp.png

See Also

Personal tools
RAD Studio 10.2 Tokyo
In other languages
Previous Versions
Assistance