1. CIS 470 Mobile App Development
Lecture 18
Wenbing Zhao
Department of Electrical Engineering and Computer Science
Cleveland State University
10/5/2019
CIS 470: Mobile App Development

2. Model-View-Controller
Model-View-Controler
GeoQuiz Example
Android Programming: The Big Nerd Ranch Guide, Chapter 2
10/5/2019
CIS 470: Mobile App Development

3. Model-View-Controller
Android applications are designed around an architecture called Model-View-Controller, or MVC
In MVC, all objects in your application must be a model object, a view object, or a controller object
10/5/2019
CIS 470: Mobile App Development

4. CIS 470: Mobile App Development
import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.app.ActionBar; import android.view.View; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.ImageSwitcher; import android.widget.ImageView; import android.widget.Toast; import android.widget.ViewSwitcher; public class MainActivity extends AppCompatActivity { private ImageSwitcher imgSwitcher; private Button btnViewWindows,btnViewButterfly; v) { Toast.makeText(getApplicationContext(), "View Butterfly" , Toast.LENGTH_LONG).show(); imgSwitcher.setImageResource(R.mipmap.butterfly); } }); } }
Model
A model object holds the application’s data and “business logic.”
Model classes are typically designed to model the things your app is concerned with, such as a user, a product in a store, a photo on a server, a television show – or a true-false question
Model objects have no knowledge of the UI; their sole purpose is holding and managing data
In Android applications, model classes are generally custom classes you create
All of the model objects in your application compose its model layer
10/5/2019
CIS 470: Mobile App Development

5. CIS 470: Mobile App Development
import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.app.ActionBar; import android.view.View; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.ImageSwitcher; import android.widget.ImageView; import android.widget.Toast; import android.widget.ViewSwitcher; public class MainActivity extends AppCompatActivity { private ImageSwitcher imgSwitcher; private Button btnViewWindows,btnViewButterfly; v) { Toast.makeText(getApplicationContext(), "View Butterfly" , Toast.LENGTH_LONG).show(); imgSwitcher.setImageResource(R.mipmap.butterfly); } }); } }
View
View objects know how to draw themselves on the screen and how to respond to user input, like touches
A simple rule of thumb is that if you can see it on screen, then it is a view
Android provides a wealth of configurable view classes
You can also create custom view classes
An application’s view objects make up its view layer
10/5/2019
CIS 470: Mobile App Development

6. CIS 470: Mobile App Development
import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.app.ActionBar; import android.view.View; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.ImageSwitcher; import android.widget.ImageView; import android.widget.Toast; import android.widget.ViewSwitcher; public class MainActivity extends AppCompatActivity { private ImageSwitcher imgSwitcher; private Button btnViewWindows,btnViewButterfly; v) { Toast.makeText(getApplicationContext(), "View Butterfly" , Toast.LENGTH_LONG).show(); imgSwitcher.setImageResource(R.mipmap.butterfly); } }); } }
Controller
Controller objects tie the view and model objects together
They contain “application logic”
Controllers are designed to respond to various events triggered by view objects and to manage the flow of data to and from model objects and the view layer
In Android, a controller is typically a subclass of Activity, Fragment, or Service
10/5/2019
CIS 470: Mobile App Development

7. CIS 470: Mobile App Development
Benefits of MVC
An application can accumulate features until it is too complicated to understand
Separating code into classes helps you design and understand the application as a whole; you can think in terms of classes instead of individual variables and methods
Similarly, separating classes into model, view, and controller layers helps you design and understand an application; you can think in terms of layers instead of individual classes
MVC also makes classes easier to reuse. A class with restricted responsibilities is more reusable than one with its fingers in every pie
10/5/2019
CIS 470: Mobile App Development

8. CIS 470: Mobile App Development
GeoQuiz app with MVC
10/5/2019
CIS 470: Mobile App Development

9. CIS 470: Mobile App Development
GeoQuiz app with MVC
Add a class named Question to the GeoQuiz project
An instance of this class will encapsulate a single true-false question
Then, you will create an array of Question objects for QuizActivity to manage
public class Question {
private int mTextResId;
private boolean mAnswerTrue;
public Question(int textResId, boolean answerTrue) {
mTextResId = textResId;
mAnswerTrue = answerTrue; }
public int getTextResId() {
return mTextResId;
public void setTextResId(int textResId) {
public boolean isAnswerTrue() {
return mAnswerTrue;
public void setAnswerTrue(boolean answerTrue) {
10/5/2019
CIS 470: Mobile App Development

10. CIS 470: Mobile App Development
GeoQuiz app with MVC
10/5/2019
CIS 470: Mobile App Development

11. GeoQuiz app: View Layer
The view layout in GeoQuiz is defined in activity_quiz.xml
10/5/2019
CIS 470: Mobile App Development

12. GeoQuiz app: View Layer
<LinearLayout ... >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
...
</LinearLayout>
<Button
/>
10/5/2019
CIS 470: Mobile App Development

13. GeoQuiz app: View Layer
res/values/strings.xml
<string name="app_name">GeoQuiz</string>
<string name="question_australia">Canberra is the capital of Australia.</string>
<string name="true_button">True</string>
<string name="false_button">False</string>
<string name="next_button">Next</string>
<string name="correct_toast">Correct!</string>
<string name="question_oceans">The Pacific Ocean is larger than
the Atlantic Ocean.</string>
<string name="question_mideast">The Suez Canal connects the Red Sea
and the Indian Ocean.</string>
<string name="question_africa">The source of the Nile River is in Egypt.</string>
<string name="question_americas">The Amazon River is the longest river
in the Americas.</string>
<string name="question_asia">Lake Baikal is the world\'s oldest and deepest
freshwater lake.</string>
10/5/2019
CIS 470: Mobile App Development

14. GeoQuiz app: Controller Layer
QuizActivity.java
public class QuizActivity extends AppCompatActivity {
private Button mTrueButton;
private Button mFalseButton;
private Button mNextButton;
private TextView mQuestionTextView;
private Question[] mQuestionBank = new Question[] {
new Question(R.string.question_australia, true),
new Question(R.string.question_oceans, true),
new Question(R.string.question_mideast, false),
new Question(R.string.question_africa, false),
new Question(R.string.question_americas, true),
new Question(R.string.question_asia, true), };
private int mCurrentIndex = 0;
// ...
10/5/2019
CIS 470: Mobile App Development

15. GeoQuiz app: Controller Layer
QuizActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_quiz);
mQuestionTextView = (TextView) findViewById(R.id.question_text_view);
mTrueButton = (Button) findViewById(R.id.true_button);
mTrueButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) { checkAnswer(true); }
});
mFalseButton = (Button) findViewById(R.id.false_button);
mFalseButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) { checkAnswer(false); }
mNextButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
mCurrentIndex = (mCurrentIndex + 1) % mQuestionBank.length;
updateQuestion(); }
private void updateQuestion() {
int question = mQuestionBank[mCurrentIndex].getTextResId();
mQuestionTextView.setText(question);
You are going to use mQuestionBank, mCurrentIndex, and the accessor methods in Question to get a parade of questions on screen.
10/5/2019
CIS 470: Mobile App Development

16. GeoQuiz app: Controller Layer
QuizActivity.java
Check for answer
private void checkAnswer(boolean userPressedTrue) {
boolean answerIsTrue = mQuestionBank[mCurrentIndex].isAnswerTrue();
int messageResId = 0;
if (userPressedTrue == answerIsTrue) {
messageResId = R.string.correct_toast;
} else {
messageResId = R.string.incorrect_toast; }
Toast.makeText(this, messageResId, Toast.LENGTH_SHORT).show();
} // to close the entire class
10/5/2019
CIS 470: Mobile App Development

17. CIS 470: Mobile App Development
Homework #21
GeoQuiz has a bug. While the app is running, press the NEXT button to show another question. Then rotate the device. After you rotate, you will see the first question again. Please fix this bug.
Add a Listener to the TextView. Your NEXT button is nice, but you could also make it so that a user could press the TextView itself to see the next question.
Hint: You can use the View.OnClickListener listener for the TextView that you have used with the Buttons, because TextView also inherits from View
Add a button that the user can press to go back one question.
10/5/2019
CIS 470: Mobile App Development