Objectives

Build a set of views to support signup/login and navigation, Incorporate suitable models. Explore how flow-synchronisation works in this context.

Setup

This is v2 of the pacemaker-android project from the last android lab:

pacemaker-android-v2.zip

You can import this for reference purposes, or keep working with your own version.

Welcome View

Design a new activity to look like this:

You may end up with new entries in the strings.xml file:

res/values/strings.xml

    <string name="title_activity_welcome">Pacemaker</string>
    <string name="welcomeLogin">Login</string>
    <string name="welcomeSignup">Sign up</string>

And this layout:

res/layout/activity_welcome.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/welcomeLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="102dp"
        android:onClick="loginPressed"
        android:text="@string/welcomeLogin" />

    <Button
        android:id="@+id/welcomeSignup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:onClick="signupPressed"
        android:text="@string/welcomeSignup" />

</RelativeLayout>

Signup View

Design a new activity to look like this:

You may end up with new entries in the strings.xml file:

res/values/strings.xml

    <string name="title_activity_signup">Signup</string>
    <string name="signupTitle">Sign up for the Pacemaker</string>
    <string name="signupSubtitle">Enter details below</string>
    <string name="signupFirstname">First name</string>
    <string name="signupLastName">Last Name</string>
    <string name="signupEmail">Email</string>
    <string name="signupPassword">Password</string>
    <string name="signupRegister">Register</string>

And this layout:

res/layout/activity_signup.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Signup" >

    <TextView
        android:id="@+id/signupTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="28dp"
        android:text="@string/signupTitle"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/signupSubtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/signupTitle"
        android:layout_below="@+id/signupTitle"
        android:layout_marginLeft="55dp"
        android:layout_marginTop="30dp"
        android:text="@string/signupSubtitle"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <EditText
        android:id="@+id/firstName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/signupSubtitle"
        android:layout_marginTop="40dp"
        android:ems="10"
        android:hint="@string/signupFirstname"
        android:inputType="textPersonName"/>

        <requestFocus />

    <EditText
        android:id="@+id/lastName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/firstName"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/firstName"
        android:ems="10"
        android:hint="@string/signupLastName"
        android:inputType="textPersonName" >

    </EditText>

    <EditText
        android:id="@+id/Email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/lastName"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/lastName"
        android:ems="10"
        android:hint="@string/signupEmail"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/Password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Email"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/Email"
        android:ems="10"
        android:hint="@string/signupPassword"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="28dp"
        android:onClick="registerPressed"
        android:text="@string/signupRegister" />

</RelativeLayout>

Login View

Design a new activity to look like this:

You may end up with new entries in the strings.xml file:

res/values/strings.xml

    <string name="title_activity_login">Login</string>
    <string name="loginTitle">Login to Donation</string>
    <string name="loginSubtitle">You must be reigstered</string>
    <string name="loginSignin">Sign in</string>
    <string name="loginEmail">Email</string>
    <string name="loginPassword">Password</string>

And this layout:

res/layout/activity_login.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Login" >

    <TextView
        android:id="@+id/loginTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="18dp"
        android:text="@string/loginTitle"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/loginSubtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/loginTitle"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/loginTitle"
        android:text="@string/loginSubtitle"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <EditText
        android:id="@+id/loginEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/loginSubtitle"
        android:layout_alignRight="@+id/loginSubtitle"
        android:layout_below="@+id/loginSubtitle"
        android:layout_marginTop="17dp"
        android:ems="10"
        android:hint="@string/loginEmail"
        android:inputType="textEmailAddress" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/loginPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/loginEmail"
        android:layout_alignRight="@+id/loginEmail"
        android:layout_below="@+id/loginEmail"
        android:ems="10"
        android:hint="@string/loginPassword"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:onClick="signinPressed"        
        android:text="@string/loginSignin" />

</RelativeLayout>

Activity Classes

These three classes will load the views we have just created. Place them in the org.pacemaker.conrollers package:

Welcome.java

package org.pacemaker.controllers;

import org.pacemaker.R;
import org.pacemaker.main.PacemakerApp;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class Welcome extends Activity
{
  PacemakerApp app;

  @Override
  public void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_welcome);
    app = (PacemakerApp) getApplication();
  }

  public void loginPressed (View view) 
  {
    startActivity (new Intent(this, Login.class));
  }
  public void signupPressed (View view) 
  {
    startActivity (new Intent(this, Signup.class));
  }
}

Signup.java

package org.pacemaker.controllers;

import org.pacemaker.R;
import org.pacemaker.main.PacemakerApp;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.widget.TextView;

public class Signup extends Activity 
{
  private PacemakerApp app;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_signup);
    app = (PacemakerApp) getApplication();
  }

  public void registerPressed (View view) 
  {
    TextView firstName = (TextView)  findViewById(R.id.firstName);
    TextView lastName  = (TextView)  findViewById(R.id.lastName);
    TextView email     = (TextView)  findViewById(R.id.Email);
    TextView password  = (TextView)  findViewById(R.id.Password);

    startActivity (new Intent(this, Login.class));
  }
}

Login.java

package org.pacemaker.controllers;

import org.pacemaker.R;
import org.pacemaker.main.PacemakerApp;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.widget.TextView;

public class Login extends Activity
{
  PacemakerApp app;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_login);
  }

  public void signinPressed (View view) 
  {
    app = (PacemakerApp) getApplication();

    TextView email     = (TextView)  findViewById(R.id.loginEmail);
    TextView password  = (TextView)  findViewById(R.id.loginPassword);

    startActivity (new Intent(this, CreateActivity.class));
  }
}

Manifest

These new activities must be registered in the AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.pacemaker"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="18"
        android:targetSdkVersion="18" />

    <application
        android:name="org.pacemaker.main.PacemakerApp"
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

        <activity
            android:name="org.pacemaker.controllers.Welcome"
            android:label="@string/title_activity_welcome" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="org.pacemaker.controllers.Signup"
            android:label="@string/title_activity_signup" >
        </activity>
        <activity
            android:name="org.pacemaker.controllers.Login"
            android:label="@string/title_activity_login">
            android:windowSoftInputMode="adjustResize|stateVisible" >
        </activity>        
        <activity
            android:name="org.pacemaker.controllers.CreateActivity"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name="org.pacemaker.controllers.ActivitiesList"
            android:label="@string/title_activity_activities_list" >
        </activity>
    </application>
</manifest>

Note that we have marked the Welcome activity as the on with the intent-filter MAIN

Run the application now. You should be able to navigate from view to view.

Models

We can simplify the Activity Model class to just this version:

{
  public Long id;
  public String type;
  public String location;
  public double distance;

  public Activity()
  {}

  public Activity(String type, String location, double distance)
  {
    this.type      = type;
    this.location  = location;
    this.distance  = distance;
  }
}

... and introduce a new User class, also kept very simple:

package org.pacemaker.models;

public class User 
{
  public Long   id;
  public String firstname;
  public String lastname;
  public String email;
  public String password;

  public User()
  {}

  public User(String firstname, String lastname, String email, String password)
  {
    this.firstname = firstname;
    this.lastname = lastname;
    this.email = email;
    this.password = password;
  } 
}

We already have a list of activities in the PacemakerApp class - we can introduce a map of users alongside it:

  public List<Activity>    actvities = new ArrayList<Activity>();
  public Map<String, User> users     = new HashMap<String, User>();

In Signup, we can create a new entry in this map :

  public void registerPressed (View view) 
  {
    TextView firstName = (TextView)  findViewById(R.id.firstName);
    TextView lastName  = (TextView)  findViewById(R.id.lastName);
    TextView email     = (TextView)  findViewById(R.id.Email);
    TextView password  = (TextView)  findViewById(R.id.Password);

    User user = new User (firstName.getText().toString(), lastName.getText().toString(), email.getText().toString(), password.getText().toString());
    app.users.put(user.email, user);

    startActivity (new Intent(this, Login.class));
  }

... and in Login we can validate the user against these entries:

  public void signinPressed (View view) 
  {
    app = (PacemakerApp) getApplication();

    TextView email     = (TextView)  findViewById(R.id.loginEmail);
    TextView password  = (TextView)  findViewById(R.id.loginPassword);

    String emailStr    = email.getText().toString();
    String passwordStr = password.getText().toString();

    User user = app.users.get(emailStr);
    if (user != null && user.password.equals(passwordStr))
    {
      startActivity (new Intent(this, CreateActivity.class));
    }
    else
    {
      Toast toast = Toast.makeText(this, "Invalid Credentials", Toast.LENGTH_SHORT);
      toast.show();
    }
  }

We should be able to register and log in now. And if we provide invalid credentials, we should be kept out.

Facade

There are, of course, some serious problems with our app. The list of activities is not associated with any specific user, the user and activities themselves are not persisted.

These issues could be tackled piecemeal - in each of the respective views for instance, but we might be more advised strengthen some of the abstractions around user/activity management first.

This pattern here may be appropriate:

http://sourcemaking.com/design_patterns/facade

Instead of a very exposed set of data structures in PacemakerApp:

public class PacemakerApp extends Application
{
  public List<Activity>    actvities = new ArrayList<Activity>();
  public Map<String, User> users     = new HashMap<String, User>();

  @Override
  public void onCreate()
  {
    super.onCreate();
    Log.v("Pacemaker", "Pacemaker App Started");
  }
}

We could remodel this class to provide a encapsulated perspective - a Facade - to the these models:

public class PacemakerApp extends Application
{
  private List<Activity>    activities = new ArrayList<Activity>();
  private Map<String, User> users      = new HashMap<String, User>();
  private User              loggedInUser;

  public void registerUser(User user)
  {
    users.put(user.email, user);
  }

  public boolean loginUser(String email, String password)
  {
    loggedInUser = users.get(email);
    if (loggedInUser != null && !loggedInUser.password.equals(password))
    {
      loggedInUser = null;
    }
    return loggedInUser != null;
  }

  public void createActivity (Activity activity)
  {
    activities.add(activity);
  }

  public List<Activity> getActivities()
  {
    return activities;
  }

  @Override
  public void onCreate()
  {
    super.onCreate();
    Log.v("Pacemaker", "Pacemaker App Started");
  }
}

This will require a refactoring of most of the controllers:

Signup

  public void registerPressed (View view) 
  {
    TextView firstName = (TextView)  findViewById(R.id.firstName);
    TextView lastName  = (TextView)  findViewById(R.id.lastName);
    TextView email     = (TextView)  findViewById(R.id.Email);
    TextView password  = (TextView)  findViewById(R.id.Password);

    User user = new User (firstName.getText().toString(), lastName.getText().toString(), email.getText().toString(), password.getText().toString());
    app.registerUser(user);

    startActivity (new Intent(this, Login.class));
  }

Login

  public void signinPressed (View view) 
  {
    app = (PacemakerApp) getApplication();

    TextView email     = (TextView)  findViewById(R.id.loginEmail);
    TextView password  = (TextView)  findViewById(R.id.loginPassword);

    boolean loggedIn = app.loginUser(email.getText().toString(), password.getText().toString());
    if (loggedIn)
    {
      startActivity (new Intent(this, CreateActivity.class));
    }
    else
    {
      Toast toast = Toast.makeText(this, "Invalid Credentials", Toast.LENGTH_SHORT);
      toast.show();
    }
  }

CreateActivity

  public void createActivityButtonPressed (View view) 
  {  
    double distance = distancePicker.getValue();
    Activity activity = new Activity (activityType.getText().toString(), activityLocation.getText().toString(), distance);

    app.createActivity(activity);
  }

ActivitiesList

~~java protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activities_list);

app = (PacemakerApp) getApplication();

activitiesListView = (ListView) findViewById(R.id.activitiesListView);

List<Activity> activities  = app.getActivities();

ActivityAdapter activitiesAdapter = new ActivityAdapter(this,  activities);
activitiesListView.setAdapter(activitiesAdapter);
activitiesAdapter.notifyDataSetChanged();

} ~~~

This should work now as expected.

Exercises

Exercise 1:

Currenty, once logged in, there is no way for a user to log out again. Introduce this facility.

Exercise 2:

There is only a single activities list - and all activities are inserted into this list. Refactor such that we are seeing the activities associated with the logged in user.

As we are using a Facade, this should not require extensive changes on any of the controllers.

Objectives

Setup

Welcome View

res/values/strings.xml

res/layout/activity_welcome.xml

Signup View

res/values/strings.xml

res/layout/activity_signup.xml

Login View

res/values/strings.xml

res/layout/activity_login.xml

Activity Classes

Welcome.java

Signup.java

Login.java

Manifest

Models

Facade

Signup

Login

CreateActivity

ActivitiesList

Archive

Exercises

Exercise 1:

Exercise 2: