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

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

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

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

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

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

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

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

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

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

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

GeoQuiz app: View Layer <LinearLayout ... > <TextView android:id="@+id/question_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="24dp" ... </LinearLayout> <Button android:id="@+id/next_button" android:text="@string/next_button" /> 10/5/2019 CIS 470: Mobile App Development

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

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

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

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

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