Implementing Model View Controller

0
1914

Hi !!! friends in this tutorial we will learn to implement Model View Controller.

  • Model View Controller is a design pattern for android application .
  • Model is what the application is.
  • View is how the application works.
  • Controller is what the application does.
  • Communication between the Model and the View happens through the Controller by couple of other patterns called Target/Action and Delegation.
  • The overall design pattern is the Model View Controller.
  • So let us implement MVC :
  • Follow the steps :
    1. Create a new project and name it as (for example) “ MVC ”
    2. Your MainActivity.java and activity_main.xml file will be generated.
    3. Similarly create two new java classes which are Model.Java and ModelDelegate.Java
    4. Now in your activity_main.xml file in the graphical layout Take the following :
      1. EdiText
      2. LargeText
      3. Button

    5. Set the text and onClick property of the button as stated :
    6. [code language=”xml”]android : text=”ENTER”
      android : onClick=”btnClicked”’
      [/code]

    7. Also set the text property of the TextView as stated :
    8. [code language=”xml”]android : text = “ ” [/code]

    9. Thus now your graphical layout will look like as shown :
    10. 1

    11. Thus ,this is the View.
    12. Now go to your MainActivity.java extend the class with the Activity and implementing the ModelDelegate class .Also declare Model as private class instantiating as mModel to a new Model the code for which is shown below.
    13. Now in the onCreate( ) method add a statement as
      mModel.setDelegate(this);
    14. The model has a delegate property and we are setting that delegate property to this instance of the
      MainActivity . “ this “ is the object that represents the class MainActivity in our running program.
      It will allow the model to talk to this MainActivity which is the controller of our application and the Model
      is the Model.Java
    15. So the Code for this is given below :
    16. [code language=”java”]public class MainActivity extends Activity implements ModelDelegate
      {
      private Model mModel = new Model();

      @Override
      protected void onCreate(Bundle savedInstanceState)
      {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      mModel.setDelegate(this);
      }
      }
      [/code]

    17. Your window will Look like as shown below :
    18. 2

    19. Now go to your Model.Java class you have created.
    20. Take an integer Array of 5 integers , an integer called Index and set it to 0.
    21. [code language=”java”]public int[] intArray = new int[5];
      public int index = 0;
      public MainActivity delegate = null;
      [/code]

    22. delegate is of the type MainActivity , here it points to the MainActivity’s actual object.
    23. Now set the Delegate to obtain the object of the MainActivity and just calling it “ d ”.
      d ” stands for delegate.
    24. which is done by the code :
    25. [code language=”java”]public void setDelegate(MainActivity d)
      {
      delegate = d;
      }
      [/code]

    26. Now write the code for calculating the Average of all the elements of the array :
    27. [code language=”java”]public float getAverage()
      {
      float average = 0;
      int count =0;
      for(int num : intArray)
      {
      average +=num;
      count ++;
      }
      return average/count;
      }
      [/code]

    28. Now we don’t want to get the average until there are all five elements in the array.So we are going to collect integers in a interface in our View Passing through the controller through the Model in addToArray.
    29. So now go to your MainActivity.java file.when each integer is entered we are going to click on the
      Button and which takes the number out of the EditText and Parses it out as a number and sets the EditText = null
      And then calls addToArray ( ) on the Model.
    30. The code on the button is :
    31. [code language=”java”]public void btnClicked(View v)
      {
      EditText et= (EditText)findViewById(R.id.editText1);
      int num=Integer.parseInt(et.getText( ).toString( ) );
      et.setText("");
      mModel.addToArray(num);
      }
      [/code]

    32. Now go to your Model.java class :
      Write the code in the addToArray ( ) method Which adds the uder provided integers to the Array which is as follows :
    33. [code language=”java”]public void addToArray(int element)
      {
      //go to the index and set the element to Array index and increment the index.
      intArray[index]=element;
      index++;
      //check whether the index is equal to 5
      if(index==5)
      {
      delegate.arrayIsFull();
      index = 0;
      }
      }

      [/code]

    34. Now ModelDelegate is the interface so set it .Go to your ModelDelegate.Java class and write the
      following code :
    35. [code language=”java”]public interface ModelDelegate
      {
      public void arrayIsFull();
      }

      [/code]

    36. Now when the index of the array is equal to 5 It will call the arrayIsFull( ) method so write the Code for the same method in the MainActivity that is the controller of our application.
    37. [code language=”java”]public void arrayIsFull()
      {
      // TODO Auto-generated method stub
      float avg = mModel.getAverage();
      TextView tv = (TextView)findViewById(R.id.textView1);
      tv.setText(String.format("%f", avg));
      }
      [/code]

    38. So the model gets the average and sets it to the TextView.
    39. So your MainActivity.Java file is shown below :
    40. 3

    41. Your Model.Java class is shown below :
    42. 4

    43. Your ModelDelegate.java class is shown below :
    44. 5

    45. Now run your MainActivity.Java file you will get :
    46. 6

    47. Now enter any one number and click on ENTER button ,Similarly enter four more numbers and you will get the Average of the five numbers you have entered.
      So let’s enter 5 for five times and the average is :
    48. 7