Let's move back into the Chat.Droid project; before we create our Activity we need to create the layout using a new XML sheet. Add a new file called LoginView.xml into the Resources | layout
and implement the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#FFFFFF">
<TextView
android:id="@+id/titleTextView"
android:text="Chat"
android:fontFamily="helvetica"
android:textStyle="bold"
android:textSize="22dp"
android:textColor="#000000"
android:paddingBottom="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/descriptionTextView"
android:text="Enter your login name to join the chat room."
android:fontFamily="helvetica"
android:textColor="#000000"
android:paddingBottom="20dp"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/usernameField"
android:textColor="#000000"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:paddingBottom="20dp"
android:hint="Enter Username" />
<EditText
android:id="@+id/passwordField"
android:textColor="#000000"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:hint="Enter Password" />
<LinearLayout
android:id="@+id/tableLayout"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:orientation="horizontal"
android:background="#FFFFFF">
<Button
android:id="@+id/registerButton"
android:text="Register"
android:textColor="#417BB5"
android:background="@android:color/transparent"
android:layout_height="50dp"
android:layout_width="100dp" />
<Button
android:id="@+id/loginButton"
android:text="Login"
android:textColor="#417BB5"
android:background="@android:color/transparent"
android:paddingLeft="20dp"
android:layout_height="50dp"
android:layout_width="100dp" />
</LinearLayout>
</LinearLayout>
The XMLlayout will stack the page vertically, with the two buttons placed side-by-side.
A quick way of checking your layouts in Xamarin.Studio is to click the Designer window:
Now let's create a new folder called Views, add in a new file called LoginActivity.cs, and implement the first section:
[Activity(MainLauncher = true, Label = "Chat", ScreenOrientation = ScreenOrientation.Portrait)]
public class LoginActivity : Activity, LoginPresenter.ILoginView
{
#region Private Properties
private bool _isInProgress = false;
private bool _dialogShown = false;
private LoginPresenter _presenter;
private EditText _loginField;
private EditText _passwordField;
private ProgressDialog progressDialog;
#endregion
#region Protected Methods
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.LoginView);
progressDialog = new ProgressDialog(this);
progressDialog.SetMessage("Loading...");
progressDialog.SetCancelable(false);
_loginField = FindViewById<EditText>(Resource.Id.usernameField);
_passwordField = FindViewById<EditText>(Resource.Id.passwordField);
var registerButton = FindViewById<Button>(Resource.Id.registerButton);
registerButton.Touch += (sender, e) =>
Register(this, new Tuple<string, string>(_loginField.Text, _passwordField.Text));
var loginButton = FindViewById<Button>(Resource.Id.loginButton);
loginButton.Touch += (sender, e) =>
Login(this, new Tuple<string, string>(_loginField.Text, _passwordField.Text));
var app = ChatApplication.GetApplication(this);
var state = new ApplicationState();
_presenter = new LoginPresenter(state, new NavigationService(app));
_presenter.SetView(this);
app.CurrentActivity = this;
}
#endregion
Since we already have the UI logic in our presenter, building the interface for LoginActivity is much easier as the answers all lie in the presenter. This is the advantage of code-sharing using the MVP pattern.
In our OnCreate() function, we will start with setting the ContentView to the XMLlayout we created previously. We will then register the button Touch events to the ILoginViewinterface, very much like the iOS version with the TouchUpInside events. We then retrieve the application from the GetApplication function. We also create an instance of the ApplicationState, and create a new LoginPresenter.
We must also add the requirements of the ILoginView and IView interfaces. The SetErrorMessage will use the AlertDialog.Builder framework to create the same popup as the iOS version. We only set one button for this dialog which will simply close the dialog when we press
OK:.
#region ILoginView implementation
public event EventHandler<Tuple<string, string>> Login;
public event EventHandler<Tuple<string, string>> Register;
#endregion
#region IView implementation
public void SetErrorMessage(string message)
{
if (!_dialogShown)
{
_dialogShown = true;
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder
.SetTitle("Chat")
.SetMessage(message)
.SetNeutralButton("Ok", (sender, e) => { _dialogShown = false ;})
.Show();
}
}
public bool IsInProgress
{
get
{
return _isInProgress;
}
set
{
if (value == _isInProgress)
{
return;
}
// we control the activity view when we set 'IsInProgress'
if (value)
{
progressDialog.Show();
}
else
{
progressDialog.Dismiss();
}
_isInProgress = value;
}
}
#endregion
}
See how the structure is the exact same as iOS?
We just have to match the UI elements for each platform independently. Our final part to the activity is the OnResume function. This function will reset the CurrentActivity in the Application:
protected override void OnResume()
{
base.OnResume();
var app = ChatApplication.GetApplication(this);
app.CurrentActivity = this;
if (_presenter != null)
{
_presenter.SetView(this);
}
}
#endregionExcellent! Now we have created the first screen, presenter, and linked it up with the navigation service. Let's hop back into the Chat.iOS project and build the next screen of our application.