Bài trước ta đã tạo thành công 2 API Login và Register phía backend, nay ta trở lại với ứng dụng trên Xamarin để thiết kế 2 trang giao diện và gọi nhận dữ liệu từ API.

Bước 1: Thiết kế giao diện

Ta sử dụng iOS Designer để thiết kế giao diện 2 trang mới, đặt tên lần lượt là LoginView và RegisterView như sau:

LoginView

login

RegisterView

register

Tương tự ta tạo giao diện XML và các Activity trên Android, có thể tham khảo source code bên dưới.

Bước 2: Tạo các View Controler

Trên project Core (PCL), ta tạo 2 View Controller tương tứng với Login và Register View như sau:

Mở file App.cs trên project Core, và thay đổi trang đầu tiên hiện thị của ứng dụng sang LoginView bằng cách thay tham số ở RegisterAppStart

Bước 4: Tạo và sử dụng navigation command

Tiếp theo ta sử lý sự kiện khi người dùng chọn vào button Register thì ứng dụng sẽ chuyển sang trang RegisterView. Đầu tiên ở LoginViewModel ta tạo mới một thuộc tính MvxCommandRegisterCommand như sau:

Phương thức ShowViewModel đã được cài đặt trong MvxViewModel, dùng để gọi các phương thức Navigate (chuyển trang) tương ứng với ViewModel ở mỗi platform.

Command RegisterCommand sẽ được thực thi khi người dùng chọn vào button đã binding tới bằng cách như sau:

Trên LoginView.cs của iOS

Trên LoginView.axml của Android

—Hết Phần 1—

Tham khảo