代写 COMP5216 Mobile Computing 、代写andrio app 、代写app编程

日期：2018-08-26 06:22

LabW02 – Handling Interactions

Objectives:

1. Understand the basics of Model-View-Controller

2. Use click event listener for ListView

3. Use UI element dialog

4. Use Activity navigation

5. Experience Cross-platform app development [Optional]

Tasks:

1. Handle long click event for an item in ListView

2. Pop up a dialog

3. Handle item clicking in ListView with Intent and another Activity

4. Develop Cross-platform app with Xamarin [Optional]

Homework 1

? To develop a basic ToDoList app

? Worth 5 marks

? Due in the lab of Week 05 with project files zipped and submitted in

Canvas

COMP5216 Mobile Computing LabW02

School of IT Page 2 of 8

Good apps provide useful functionality and an easy to use interface. The user interface is

made of various Graphical User Interface (GUI) components and typically waits for user

interaction.

In this tutorial, we will learn about various GUI components, their associated events, and

how to handle events on those components. You should finish LabW01 before proceeding

with the following tasks:

Task 1: Handling item long clicking in ListView

Currently nothing happens when an item is clicked in the ListView. We will first implement

“deleting an item” by long clicking it.

1. Add the following method into the MainActivity.

It sets two listeners for LongClick and Click events.

2. Call this method at the end of the onCreate() method

3. Run it. Click and long click a ToDoItem in the list view.

4. Now update the listener for onItemLongClickListener.

Add two lines of code to remove an item from the ArrayList and notify the ListView

adapter to update the list. Run it.

private void setupListViewListener() {

listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {

public boolean onItemLongClick(AdapterView<?> parent, View view, final int

position, long rowId)

{

Log.i("MainActivity", "Long Clicked item " + position);

return true;

}

});

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long

id) {

String updateItem = (String) itemsAdapter.getItem(position);

Log.i("MainActivity", "Clicked item " + position + ": " + updateItem);

}

});

}

@Override

protected void onCreate(Bundle savedInstanceState) {

XXXXXX

XXXXXX

// Setup listView listeners

setupListViewListener();

}

COMP5216 Mobile Computing LabW02

School of IT Page 3 of 8

Run your code, and long click a ToDoItem, you should able to see the following line

printed on the Android Studio Logcat:

Task 2: Popping up a dialog

1. Add a dialog to let user confirm the delete operation. Replace the existing

OnItemLongClick method.

You will also need to add the following String resources into “res/values/strings.xml”

Run it and long click an item

Log.i("MainActivity", "Long Clicked item " + position);

items.remove(position); // Remove item from the ArrayList

itemsAdapter.notifyDataSetChanged(); // Notify listView adapter to update list

return true;

comp5216.sydney.edu.au.todolist I/MainActivity: Long Clicked item 1

listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {

public boolean onItemLongClick(AdapterView<?> parent, View view, final int

position, long rowId)

{

Log.i("MainActivity", "Long Clicked item " + position);

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

builder.setTitle(R.string.dialog_delete_title)

.setMessage(R.string.dialog_delete_msg)

.setPositiveButton(R.string.delete, new

DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialogInterface, int i) {

items.remove(position); // Remove item from the ArrayList

itemsAdapter.notifyDataSetChanged(); // Notify listView adapter

to update the list

}

})

.setNegativeButton(R.string.cancel, new

DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialogInterface, int i) {

// User cancelled the dialog

// Nothing happens

}

});

builder.create().show();

return true;

}

});

<string name="dialog_delete_title">Delete an item</string>

<string name="dialog_delete_msg">Do you want to delete this item?</string>

<string name="delete">Delete</string>

<string name="cancel">Cancel</string>

<string name="edit">Edit</string>

COMP5216 Mobile Computing LabW02

School of IT Page 4 of 8

2. In order to further customise a dialog, such as adding a third button, or

using your own layout, please refer to the following tutorial:

https://developer.android.com/guide/topics/ui/dialogs

If you do the above steps right, you should able to see the following screenshot once

you long click a ToDoItem:

Task 3: Handling item clicking in ListView with Intent and another

Activity

When clicking an item (NOT long click), we should open another Activity to edit the item.

1. Copy the EditToDoItemActivity.java to the same “src” folder as the

MainActivity.

This Activity receives the data from the MainActivity when an item is clicked, and send

back the updated content to the MainActivity. Read the inline comments for details.

2. Copy activity_edit_item.xml to the “res/layout” folder. This is the layout

for EditToDoItemActivity

COMP5216 Mobile Computing LabW02

School of IT Page 5 of 8

3. Update the onItemClick method in MainActivity to open the

EditToDoItemActivity

When an item is clicked, it creates an Intent to start another activity and wait for its

result. You need to define a variable to remember the request code in the MainActivity.

4. When the EditToDoItemActivity finish, MainActivity will receive the result

by checking the request code first, and then uses its result.

Add the following method into MainActivity:

To learn more about using intents to create flows, please read:

https://github.com/codepath/android_guides/wiki/Using-Intents-to-Create-Flows

You may also notice the use of Toast. It is a simple pop-up notification method in

Android. Learn more at:

https://developer.android.com/guide/topics/ui/notifiers/toasts

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

String updateItem = (String) itemsAdapter.getItem(position);

Log.i("MainActivity", "Clicked item " + position + ": " + updateItem);

Intent intent = new Intent(MainActivity.this, EditToDoItemActivity.class);

if (intent != null) {

// put "extras" into the bundle for access in the edit activity

intent.putExtra("item", updateItem);

intent.putExtra("position", position);

// brings up the second activity

startActivityForResult(intent, EDIT_ITEM_REQUEST_CODE);

itemsAdapter.notifyDataSetChanged();

}

}

public final int EDIT_ITEM_REQUEST_CODE = 647;

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

if (requestCode == EDIT_ITEM_REQUEST_CODE) {

if (resultCode == RESULT_OK) {

// Extract name value from result extras

String editedItem = data.getExtras().getString("item");

int position = data.getIntExtra("position", -1);

items.set(position, editedItem);

Log.i("Updated Item in list:", editedItem + ",position:"

+ position);

Toast.makeText(this, "updated:" + editedItem, Toast.LENGTH_SHORT).show();

itemsAdapter.notifyDataSetChanged();

}

}

}

COMP5216 Mobile Computing LabW02

School of IT Page 6 of 8

5. Lastly, the application manifest must include the new

EditToDoItemActivity, otherwise this Activity cannot be used.

Open AndroidManifest.xml and add the following code inside the <Application> tag.

6. Run it. Test the above steps. If all the steps are correct, your app now are

able to handle the click and long click events:

Task 4: Using Xamarin Studio [Optional]

Xamarin is a tool for cross-platform app development. It is free for students at:

https://xamarin.com/student

In the Windows platform, Xamarin is part of the latest Visual Studio. In the Mac platform,

Xamarin Studio is the development environment.

1. Windows Visual Studio for Xamarin:

https://developer.xamarin.com/guides/android/getting_started/hello,android/

<activity

android:name=".EditToDoItemActivity"

android:label="@string/app_name" >

</activity>

COMP5216 Mobile Computing LabW02

School of IT Page 7 of 8

2. Xamarin Studio in Mac:

https://developer.xamarin.com/guides/mac/getting_started/hello,_mac/

Please refer to the following URL for more details on Xamarin:

http://developer.xamarin.com/

Homework 1 [5 marks, due in the lab Week 05]

In this homework, you need to design an app which contains at least two

views.

1. The Main view should contain [1 mark]:

? [0.5 mark] A ListView which displays all the saved ToDoItems, each ToDoItem

consists of ToDoItem title and the creation/last edited datetime. Clicking a

ToDoItem will switch to the “Edit/Add Item” view.

? [0.5 mark] An “ADD NEW” button. Once this button is clicked, the app will switch to

the “Edit/Add Item” view.

2. The “Edit/Add Item” view should contain [2 marks]:

? [0.5 mark] A Text field which allows user to type or edit the title of a ToDoItem to

add or update the ListView.

? A “Save” button used for adding new, or updating the title and datetime of

ToDoItem in the ListView:

o [0.5 mark] If adding a new item, capture both the item and creation datetime

of the ToDoItem. The creation datetime is the current system datetime.

o [0.5 mark] If updating an existing item, display both the item and creation/last

edited datetime of the ToDoItem. Upon saving, update the item and datetime

with the current system datetime.

? [0.5 mark] A “Cancel” button next to the “Save” button, used to close the Activity

without updating the ToDoItem. When this button is clicked, the app will pop up a

dialog that asks user: ”Are you sure to give up this edit? Your unsaved edit will be

discarded if you click YES”.

Hint: You should customise the ListView and the adapter. Read the following tutorial, and

replace the current ArrayAdapter with your own-defined Adapter class. Also replace the list

item layout “android.R.layout.simple_list_item_1” with your own layout.

https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

COMP5216 Mobile Computing LabW02

School of IT Page 8 of 8

Your app should also be able to handle the following data persistence tasks

[2 marks]:

? [0.5 mark] Every time user launches this app, the app loads the ToDoList from the

local Database.

? [0.5 mark] The ToDoList should be sorted and displayed based on the most recent

creation/last edited datetime i.e. the most recent ToDoItem shown at the top

? [0.5 mark] When clicking the “Save” button in the “Edit/Add Item” view, the app

should add or update the ToDoItem to both the ListView and local Database.

? [0.5 mark] Add a long click event to delete a ToDoItem from the ListView. When

user tries to delete the selected ToDoItem, the app will pop up a message that asks

user: ”Do you want to delete this item?” If the user clicks “YES”, this ToDoItem will

be deleted from both the ListView and local Database.