8

LAB 2. ANDROID AND THE MVC PATTERN http://developer.android.com/guide/tutorials/views/hello-linearlayout.html for an overview of LinearLayout http://developer.android.com/guide/tutorials/views/hello-relativelayout. html for examples of TextViews and Buttons (and an overview of RelativeLayout)

Lab 2

http://developer.android.com/guide/topics/ui/layout-objects.html for a quick intro to the Layout objects available in Android Now, you need to create a layout that will store the TextViews and Buttons as shown in the picture above (or laid out some other way, if you prefer). One way of doing this is to put each label/button pair into a vertical LinearLayout, and then put the three vertical LinearLayouts into a single horizontal LinearLayout. You can tweak the layout_width, layout_height and gravity properties of every XML element until things are sitting where you want them. Hint: if you want to take a quick look at your layout without loading up the emulator, click on the Layout tab at the bottom left of the Eclipses editor screen, beside the main.xml tab.

Android and the MVC Pattern

In an Android application, it isnt always clear which bits are the view, and which bits are the controller. Google would like you to treat each Activity as a UI - which means it probably is expected to take care of both the View and Controller tasks. To demonstrate, well build an application that looks like this:

2.2

The Model and the Activity

Lets get the Model out of the way rst, and not worry too much about its maintenance of a consistent state. To keep things really simple, lets put it in the same le with the Activity, and give it package scope. The Model just needs to: Inherit from the Observable class. Every time you click one of the buttons, the count for that button increments by one. The Activity is clearly a Controller here: it responds to clicks on buttons, and tells the Model (presumably an array of integers) that something needs to be changed. However, it is also a View: whenever the Model changes (whether due to a button click or something else) the labels on the buttons should be updated. So, get a new Android project going (following the instructions from last week), and nd the layout XML le in res > layout > main.xml. Contain an array of int as its state. Provide an accessor for getting state from the array. Provide a mutator for incrementing the value at a particular index in the array. The mutator, after changing the state, should call setChanged() and notifyObservers(). The Android Activity will be our View-and-Controller, so as the View it will need to implement the Observer interface. As the Controller, it will need to implement the OnClickListener interface. Several of the Activitys methods are going to access the Model, so you should probably store it as a data eld; same for the buttons (which should probably be kept in an array). The Activity will have to: initialise a new Model. add itself as an Observer to the Model. grab each button from the XML layout, and add itself as a clickListener to it. implement the onClick() method (acting as the Controller).

2.1 Layout
The rst thing to do is get an XML layout for the buttons and labels done. Fortunately, the layout is pretty simple: a LinearLayout can run vertically or horizontally; the components can have widths and height set to fill_parent or to wrap_content or to widths in pixels (sp for scaled pixels). Most of what you need to know is in the Android Developer tutorials: http://developer.android.com/guide/tutorials/views/index.html for an overview of Android Views (not the same as MVC Views) 7

2.2. THE MODEL AND THE ACTIVITY implement the update() method (acting as the View). You can get each button from the layout with:
Button myButton = (Button)findViewById(R.id.yourButtonName);

10

LAB 2. ANDROID AND THE MVC PATTERN

assuming that you ided your button with android:id="@+id/yourButtonName" in the XML. Then, you can use
myButton.setOnClickListener(this);

to make the Activity the listener for the button. The onClick() method takes a View as a parameter, which is the component that generated the event. If you compare it to each of your buttons, one of them will match - and that tells you which item in the Model should be incremented. The update() method will be called each time the Model changes, and the Model will pass a reference to itself as the rst parameter (the second parameter can be ignored). All you need to do here is cast the Object to Model, and then call its accessor to tell you what to set each Button string to. Buttons have a setText() method that allows you to reset the string displayed.