辅导 COMP5216 Mobile Computing 、辅导andrio app 、辅导app编程辅导Database|解析C/C++编程

School of IT Page 1 of 8
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
CanvasCOMP5216 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;
}
});
Delete an item
Do you want to delete this item?
Delete
Cancel
EditCOMP5216 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 EditToDoItemActivityCOMP5216 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 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/
android:name=".EditToDoItemActivity"
android:label="@string/app_name" >
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-ListViewCOMP5216 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.

辅导 COMP5216 Mobile Computing 、辅导andrio app 、辅导app编程 辅导Database|解析C/C++编程

辅导 COMP5216 Mobile Computing 、辅导andrio app 、辅导app编程辅导Database|解析C/C++编程