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 Eclipse’s editor screen, beside the “main.xml” tab.

Android and the MVC Pattern
In an Android application, it isn’t 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, we’ll build an application that looks like this:


The Model and the Activity

Let’s get the Model out of the way first, and not worry too much about its maintenance of a consistent state. To keep things really simple, let’s put it in the same file 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 find the layout XML file 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 Activity’s methods are going to access the Model, so you should probably store it as a data field; 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 first 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

9 10 LAB 2. The onClick() method takes a View as a parameter. Buttons have a setText() method that allows you to reset the string displayed.setOnClickListener(this). THE MODEL AND THE ACTIVITY • implement the update() method (acting as the View). Then. one of them will match . to make the Activity the listener for the button. The update() method will be called each time the Model changes.id. ANDROID AND THE MVC PATTERN assuming that you id’ed your button with android:id="@+id/yourButtonName" in the XML. and the Model will pass a reference to itself as the first parameter (the second parameter can be ignored).and that tells you which item in the Model should be incremented. which is the component that generated the event. and then call its accessor to tell you what to set each Button string to. If you compare it to each of your buttons.yourButtonName). . you can use myButton. All you need to do here is cast the Object to Model.2.2. You can get each button from the layout with: Button myButton = (Button)findViewById(R.

Sign up to vote on this title
UsefulNot useful