Tuesday, June 2, 2015

MV200 - MyVolunteers Apps Project Template


.
MV200 - MyVolunteers Apps Project Template
In the previous tutorials, we have learned to…
1) Create REST API
2) Create Web Request using Get Method
3) Create Web Request using Post Method
In the first Android example, we have used HTTPClient. There are some more ways of sending and receiving data through network communication. We will see more examples in the next tutorials.
In this tutorial, we are going to create a standard project template for the User Interface so that we can reuse it in the coming exercises.

1) Prepare the REST API Scripts

We will use the REST API Scripts developed in Tutorial MV101.
Download the PHP Framework Scripts and upload to your website.
This tutorial uses a demo url http://notarazi.esy.es/myvolunteers/api/volunteers that provides both GET and POST method. For implementation details, refer http://android-steps.blogspot.my/2015/06/mv101-create-web-api-for-online.html .

2) Prepare the Apps UI and Navigation Template

2.1) Create a new project MyVolunteers200

By default, the project creates an activity, MainActivity.
If you are not sure on the steps to create an Android Project, refer http://android-steps.blogspot.my/2015/06/mv102-android-httpclient-get-method-and.html 
Next, add a second activity, VolunteerActivity.

2.2) Add a second activity

Give the name, VolunteerActivity.
If you are not sure on the steps to add an activity, refer http://android-steps.blogspot.my/2015/06/mv103-android-httpclient-post-method.html .

2.3) Edit the Resources.

2.3.1) Drawable

Download the following drawable files and place to your resource folder.

2.3.2) Layouts

File: res/layout/activity_main_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="10dp"
   android:paddingLeft="10dp"
   android:paddingRight="10dp" >
   <!-- Name Label -->
   <TextView
       android:id="@+id/name"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:paddingBottom="2dip"
       android:paddingTop="6dip"
       android:textColor="#43bd00"
       android:textSize="16sp"
       android:textStyle="bold"
       android:text="Name"/>
   <!-- Email label -->
   <TextView
       android:id="@+id/email"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:paddingBottom="2dip"
       android:textColor="#acacac"
       android:text="Email"/>
</LinearLayout>
File: res/layout/activity_main.xml
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <ListView
        android:id="@+id/lvw_persons"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_world" />
    <ImageView
        android:id="@+id/imv_person"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/person_add_small" />
   
</RelativeLayout>
File: res/layout/activity_volunteer.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SettingsActivity" >
   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/person_small"
        android:layout_marginTop="20dp"
       android:layout_gravity="center_horizontal"
       />
    <EditText
        android:id="@+id/etx_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Name" />
    <EditText
        android:id="@+id/etx_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Email" />
    <Button
        android:id="@+id/btn_register"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Register"
        android:background="#e6e6e6" />
     
</LinearLayout>
File:res/menu/activity_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
   <item
        android:id="@+id/menu_refresh"
        android:orderInCategory="90"
        android:showAsAction="always"
        android:icon="@drawable/refresh"
        android:title="Refresh"/>
    <item
        android:id="@+id/menu_settings"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="@string/menu_settings"/>
</menu>
File: res/menu/activity_volunteer.xml (no changes)
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/menu_settings"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="@string/menu_settings"/>
</menu>

2.4) Edit Controller Codes

File: MainActivity.java
package com.example.myvolunteers200;
import java.util.ArrayList;
import java.util.HashMap;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.os.AsyncTask;
import android.os.Bundle;
import android.app.Activity;
import android.app.ProgressDialog;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
public class MainActivity extends Activity {
           // JSON Node names
           private static final String TAG_PERSONS= "result";
           private static final String TAG_ID = "id";
           private static final String TAG_NAME = "name";
           private static final String TAG_EMAIL = "email";
           // persons JSONArray
           JSONArray persons = null;
           // Hashmap for ListView
           ArrayList<HashMap<String, String>> alsPersons = new ArrayList<HashMap<String, String>>();
           SimpleAdapter adpPersons;
           
           @Override
           protected void onCreate(Bundle savedInstanceState) {
               super.onCreate(savedInstanceState);
               setContentView(R.layout.activity_main);
               setViewObjects();
           }
           @Override
               public void onResume() {
                   super.onResume();  // Always call the superclass method first
                   refreshList();
               }
           
                private void setViewObjects() {
                   //bind ListView
           ListView mListView = (ListView) findViewById(R.id.lvw_persons);
           //set adapter
           adpPersons = new SimpleAdapter(MainActivity.this, alsPersons,
                   R.layout.activity_main_list_item, new String[] { TAG_NAME, TAG_EMAIL,}
                                   , new int[] { R.id.name,R.id.email}
           );
           
           //plug adapter to ListView
           mListView.setAdapter(adpPersons);                
           //bind ImageView
           ImageView imvPerson =(ImageView) findViewById(R.id.imv_person);
           
           //attach onClickListener to ImageView
           imvPerson.setOnClickListener(new View.OnClickListener() {
               public void onClick(View v) {
                       //Toast.makeText(getApplicationContext(), "Add Person", Toast.LENGTH_SHORT).show();
                        startActivity(new Intent(MainActivity.this, VolunteerActivity.class));
               }
           });          
           }
        @Override
           public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.activity_main, menu);
            return true;
           }
           @Override
           public boolean onOptionsItemSelected(MenuItem item) {
               // Handle item selection
               switch (item.getItemId()) {
                   case R.id.menu_settings:
                       //
                   case R.id.menu_refresh:
                       refreshList();
                   default:
                       return super.onOptionsItemSelected(item);
               }
           }
           private void refreshList() {
               Toast.makeText(getApplicationContext(), "Refresh List", Toast.LENGTH_SHORT).show();
                        
                }
}
VolunteerActivity.java
package com.example.myvolunteers200;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class VolunteerActivity extends Activity {
         EditText etxName;
         EditText etxEmail;
         Button btnRegister;
         String strName="", strEmail="";
         
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_volunteer);
                setViewObjects();
        }
        private void setViewObjects() {
                 etxName = (EditText) findViewById(R.id.etx_name);
                 etxEmail = (EditText) findViewById(R.id.etx_email);
                 
                  btnRegister = (Button) findViewById(R.id.btn_register);
                  btnRegister.setOnClickListener(new OnClickListener() {
                   @Override
                   public void onClick(View view) {
                    if (isValidFormData()) {
                            strName=etxName.getText().toString();
                            strEmail=etxEmail.getText().toString();
                            registerData();
                    }
                   }
                   private boolean isValidFormData() {
                            boolean isName = false, isEmail = false;
                            String emailPattern = "[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+";
                            String strTestValue = "";
                            //get field values
                            strTestValue = etxName.getText().toString();
                            //check field values validity
                            if (isEmptyString(strTestValue)) {
                             etxName.setError("Name must not be empty");
                             Toast.makeText(getApplicationContext(), "Name error", Toast.LENGTH_SHORT).show();
                            } else {
                             isName = true;
                            }
                            //get field values
                            strTestValue = etxEmail.getText().toString();
                            //check field values validity
                            if (isEmptyString(strTestValue)) {
                             etxEmail.setError("Email must not be empty");
                             Toast.makeText(getApplicationContext(), "Email error", Toast.LENGTH_SHORT).show();
                            } else {
                             if (strTestValue.matches(emailPattern)) {
                              isEmail = true;
                             } else {
                              etxEmail.setError("Enter valid Email format");
                              Toast.makeText(getApplicationContext(), "Email error", Toast.LENGTH_SHORT).show();
                             }
                            }
                            return (isName && isEmail);
                           }
                           // validating empty string
                           public boolean isEmptyString(String text) {
                            return (text == null || text.trim().equals("null") || text.trim()
                             .length() <= 0);
                           }
                          });
                         }
         private void registerData() {
                 // TODO Auto-generated method stub
             Toast.makeText(getApplicationContext(), "Registering...", Toast.LENGTH_SHORT).show();
                 
                 }
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
                // Inflate the menu; this adds items to the action bar if it is present.
                getMenuInflater().inflate(R.menu.activity_volunteer, menu);
                return true;
        }
}

2.5) Edit AndroidManifest

Insert a permission to use the Internet.
File: AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myvolunteers200"
    android:versionCode="1"
    android:versionName="1.0" >
  <uses-permission android:name="android.permission.INTERNET" />
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.myvolunteers200.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
OUTCOME.
MainActivity.
Empty List
Stub method to refresh the list.
VolunteerActivity.
Stub method to register a person.

DOWNLOAD


.

No comments:

Post a Comment