HKUSTx: COMP107x Introduction to Mobile Application Development using Android

Week1-01.ipynb

Week1-02.ipynb

Week1-03.ipynb

Week1-04.ipynb

Week1-05.ipynb

Week2-01.ipynb

Week2-02.ipynb

Week2-03.ipynb

Week2-04.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Exercise: Chat Client App\n",
    "---\n",
    "## Objectives\n",
    "\n",
    "In this exercise, we will learn about ListView, custom Array Adapters and more complex UI layouts. At the end of this exercise, you will be able to:\n",
    "\n",
    "* Create UI with more complex layouts including the use of Linear Layouts and Relative Layouts\n",
    "* Design a UI to include a ListView\n",
    "* Design a custom ArrayAdapter to be used with the ListView\n",
    "\n",
    "\n",
    "## Introduction\n",
    "\n",
    "In this exercise, you will complete the first step in designing the UI of a Chat Client application. As part of the UI design, we will see how we can layout the messages on the UI using a ListView and update the UI when new messages are added.\n",
    "\n",
    "## Textual Instructions\n",
    "---\n",
    "### Step 1: Examining the Project Files\n",
    "\n",
    "1. Download the [SimpleChatClient.zip](http://w02.hkvu.hk/edX/COMP107x/w2/SimpleChatClient.zip) file to your projects folder. Unzip it and import the SimpleChatClient project into Android Studio.\n",
    "\n",
    "2. Open the **activity_chat_client.xml** and **message.xml** layout files and see the use of LinearLayout, RelativeLayout and the positioning of the views on the UI.\n",
    "\n",
    "3. Open the **Message.java** file to see the implementation of the Message class that is used to create message objects.\n",
    "\n",
    "---\n",
    "### Step 2: Modifying the Custom Array Adapter\n",
    "\n",
    "Update the getView() method in the **MyArrayAdapter.java** as shown below.\n",
    "\n",
    "        // This method constructs the ListItem's view from the data obtained\n",
    "        // from the Message object. This will be called by ListView while it\n",
    "        // is being drawn.\n",
    "        @Override\n",
    "        public View getView(int position, View convertView, ViewGroup parent) {\n",
    "\n",
    "            View messageView;\n",
    "\n",
    "            // Get a reference to the LayoutInflater. This helps construct the\n",
    "            // view from the layout file\n",
    "            LayoutInflater inflater = (LayoutInflater) context\n",
    "                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);\n",
    "\n",
    "            // The messageView is constructed by inflating the message.xml layout file\n",
    "            messageView = inflater.inflate(R.layout.message, parent, false);\n",
    "\n",
    "            // Get the reference to the two TextViews in the message layout and set them\n",
    "            // to the time and message string respectively\n",
    "            TextView timeView = (TextView) messageView.findViewById(R.id.timeTextView);\n",
    "            timeView.setText(messages.get(position).getTime());\n",
    "            TextView msgView = (TextView) messageView.findViewById(R.id.messageTextView);\n",
    "            msgView.setText(messages.get(position).getMessage());\n",
    "\n",
    "            return messageView;\n",
    "        }\n",
    "\n",
    "### Step 3: Modifying the ChatClient Activity\n",
    "\n",
    "1. First, modify the onCreate() method of the ChatClient activity as shown below.\n",
    "\n",
    "        @Override\n",
    "        protected void onCreate(Bundle savedInstanceState) {\n",
    "            super.onCreate(savedInstanceState);\n",
    "            setContentView(R.layout.activity_chat_client);\n",
    "\n",
    "            sendButton = (Button) findViewById(R.id.sendButton);\n",
    "            sendButton.setOnClickListener(this);\n",
    "\n",
    "            messageText = (EditText) findViewById(R.id.messageText);\n",
    "\n",
    "            // Get the reference to the ListView on the UI\n",
    "            messageList = (ListView) findViewById(R.id.messageList);\n",
    "\n",
    "            // Create a new ArrayList of Message objects\n",
    "            messages = new ArrayList<Message>();\n",
    "\n",
    "            // Create a new custom ArrayAdapter. This custom Adapter is\n",
    "            // implemented by us, and illustrates how an ArrayAdapter is\n",
    "            // constructed given the data (from the Message objects)\n",
    "            mAdapter = new MyArrayAdapter(this, messages);\n",
    "\n",
    "            // Set the ListView's adapter to be the adapter that we just constructed.\n",
    "            messageList.setAdapter((ListAdapter) mAdapter);\n",
    "        }\n",
    "\n",
    "2. Then, modify the onClick() method of the ChatClient activity as shown below.\n",
    "\n",
    "        @Override\n",
    "        public void onClick(View view) {\n",
    "\n",
    "            switch (view.getId()) {\n",
    "                case R.id.sendButton:\n",
    "\n",
    "                    String messString = messageText.getText().toString();\n",
    "\n",
    "                    // If the message is not empty string\n",
    "                    if (!messString.equals(\"\")) {\n",
    "\n",
    "                        // Create a new Message object and initialize it with the information\n",
    "                        Message message = new Message(\"\", messString, true, new Date());\n",
    "\n",
    "                        // Add the Message object to the ArrayList\n",
    "                        messages.add(message);\n",
    "\n",
    "                        // Notify the adapter that the data has changed due to the addition\n",
    "                        // of a new message object. This triggers an update of the ListView\n",
    "                        mAdapter.notifyDataSetChanged();\n",
    "\n",
    "                        message = null;\n",
    "                        messageText.setText(\"\");\n",
    "\n",
    "                    }\n",
    "\n",
    "                    break;\n",
    "\n",
    "                default:\n",
    "                    break;\n",
    "            }\n",
    "        }\n",
    "\n",
    "3. Once completed, run the application and see the result."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}

Week2-05.ipynb

Week3-01.ipynb

Week3-02.ipynb

Week3-03.ipynb

Week3-04.ipynb

Week3-05.ipynb

Week4-01.ipynb

Week4-02..ipynb

Week4-03.ipynb

Week4-04.ipynb

Week5-01.ipynb

Week5-02.ipynb

Week5-03.ipynb

Week5-04.ipynb