Implementing the Title Screen

The title screen is the first fragment that opens after Kii Balance starts. The user signs up and logs in in this screen by using the features of the Kii Cloud SDK.

Flow of processing

The figure below shows the flow of processing in the title screen.

In the LoginDialogFragment class, buttons and handlers are associated with Butter Knife.

  • The "LOGIN" button is associated with the loginClicked() method that calls the LoginDialogFragment class for login. The request code REQUEST_LOGIN is sent to the dialog.

  • The "REGISTER" button is associated with the registerClicked() method that calls the RegistrationDialogFragment class for user registration. The request code REQUEST_REGISTER is sent to the dialog.

For the usage of the request codes, see Implemented Technique: Fragments. When a login or user registration is completed in the dialog, the onActivityResult() method receives a completion notice and the data listing screen opens. If the request code is REQUEST_REGISTER, a message confirming the user has been registered is displayed.

This topic does not include detailed explanation of the source code because it would be easy to follow the above flow with the knowledge about controlling fragments. Check the following files directly.

Login and user registration

A login is processed in LoginDialogFragment and a user registration is processed in RegistrationDialogFragment.

When the "LOGIN" button or the "REGISTER" button is tapped, the code like below validates the username and password. You can validate the entered strings with the static methods of the KiiUser class before accessing Kii Cloud.

// Get a username and password.
String username = mUsernameEdit.getText().toString();
String password = mPasswordEdit.getText().toString();

// Check if the username and password are valid.
if (!KiiUser.isValidUserName(username)) {
  showErrorMessage(R.string.message_invalid_username);
  return;
}
if (!KiiUser.isValidPassword(password)) {
  showErrorMessage(R.string.message_invalid_password);
  return;
}

After validating the username and password, a login or user registration is processed.

The code to call the Kii Cloud SDK is the same as that for Hello Kii. That is, it calls the non-blocking API with the arguments of the username username and password password. For more information about calling the API, see Login Screen Implementation in the Hello Kii tutorial.

User registration

KiiUser user = KiiUser.builderWithName(username).build();
user.register(new KiiUserCallBack() {
  @Override
  public void onRegisterCompleted(int token, KiiUser user, Exception e) {
    if (e != null) {
      showErrorMessage(MESSAGE_REGISTRATION_FAILED);
      return;
    }

    Fragment target = getTargetFragment();
    if (target == null) {
      dismiss();
      return;
    }
    target.onActivityResult(getTargetRequestCode(), Activity.RESULT_OK, null);
    dismiss();
  }
}, password);

Login

KiiUser.logIn(new KiiUserCallBack() {
  @Override
  public void onLoginCompleted(int token, KiiUser user, Exception e) {
    if (e != null) {
      showErrorMessage(R.string.message_login_failed);
      return;
    }

    Fragment target = getTargetFragment();
    if (target == null) {
      dismiss();
      return;
    }
    target.onActivityResult(getTargetRequestCode(), Activity.RESULT_OK, null);
    dismiss();
  }
}, username, password);

If the processing is successful, the onActivityResult() method is called to notify the completion of the processing in the dialog and open the data listing screen from the TitleFragment class that is the fragment parent.

If the processing fails, the dismiss() method is not called and the dialog remains open so that the user can enter their credentials.


What's Next?

Let us review how to get data in the data listing screen.

Go to Getting the Data List.