TP 2 (A rendre 25/10/13 avant minuit)

Dans ce TP nous allons ajouter des fonctionnalités supplémentaires au TP1. 

Nous y ajouterons : 

1. Un menu avec deux options (Créer une Catégorie et Liste des catégories)
2. Une activité qui affichera la liste des catégories
3. Une activité permettant d'ajouter une catégorie
4. Un modèle pour les catégories

Contraintes 

1. La première activité présentera les options de l'application 
2. Chaque option est associée à une activité 
3. Quand l'utilisateur crée un nouvel objet, vous l'ajoutez dans une liste et vous lui proposez deux nouvelles options dans un popup (ajouter un autre ou voir la liste) 
4. La liste ne doit pas être vidée tant que l'application tourne 

Créez un menu pour votre application 

Pour cela vous devez utiliser un gridview qui affichera les options de l'application. 

Créez une nouvelle activité dans le projet du TP 1

Modifiez le layout associé à l'activité afin d'y ajouter un Gridview. 

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

Nous voulons que chaque colonne de la gridview soit composée d'une image et un texte descriptif en dessous de l'image.  Pour cela, nous allons créer un layout correspondant à cet affichage. 

Faites bouton doigt sur le dossier layout --> New --> Other --> Android Layout File --> Next (layout_menu_model) --> Finish

Remplacez le contenu du fichier créé 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"     
    android:orientation ="vertical"
    android:padding="5dp" >
 
    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_marginRight="10px"
        android:src="@drawable/android_logo" >
    </ImageView>
 
    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:layout_marginTop="5px"
        android:textSize="15px" >
    </TextView>
 
</LinearLayout>

Ajoutez un string-array dans le fichier de ressources (strings.xml) avec les deux valeus (Catégorie, A propos de) ainsi que deux icones dans les drawable. 

<string-array name="menu">
        <item>Inscription</item>
        <item>Liste des inscrits</item>
    </string-array>

Créez un adaptateur pour le gridview (ref cours) 

public class ImageAdapter extends BaseAdapter {
    private Context mContext;
    private  String[] menuValues ;
    private Integer[] mThumbIds;
    public ImageAdapter(Context c) {
        mContext = c;
        menuValues =mContext.getResources().getStringArray(R.array.menu);
        mThumbIds = new Integer[]{
                R.drawable.ic_launcher, R.drawable.ic_launcher,
        };
    }
    public int getCount() {
        return mThumbIds.length;
    }
    public Object getItem(int position) {
        return null;
    }
    public long getItemId(int position) {
        return 0;
    }
    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
    	LayoutInflater inflater = (LayoutInflater) mContext
    			.getSystemService(Context.LAYOUT_INFLATER_SERVICE);   
    		View gridView;
    		if (convertView == null) {
    			gridView = new View(mContext);
    			// get layout from mobile.xml
    			gridView = inflater.inflate(R.layout.layout_menu_model, null);
    			// set value into textview
    			TextView textView = (TextView) gridView
    					.findViewById(R.id.grid_item_label);
    			textView.setText(menuValues[position]);
    			// set image based on selected text
    			ImageView imageView = (ImageView) gridView
    					.findViewById(R.id.grid_item_image);
    				imageView.setImageResource(mThumbIds[position]);
    		} else {
    			gridView = (View) convertView;
    		}
    		return gridView;
    } 
}

Modifiez l'activité précedemment créé pour associer la gridview à adapteur! 

GridView gridview = (GridView) findViewById(R.id.gridview);
	    gridview.setAdapter(new ImageAdapter(this));
	    gridview.setOnItemClickListener(new OnItemClickListener() {
	        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
	            Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
	        }
	    });

Compilez!
Cliquez sur une icon et remarquez ce qui se passe!

Associez l'évènement clique sur éléments de la gridview aux activités du TP1! 

Ajoutez une classe Catégorie au projet dans laquelle vous ajouterez des attributs (id, nom, description)

Modifiez le scenario de l'activité inscription du TP1! Quand l'utilisateur valide le formulaire :

• Créez une nouvelle instance de la classe Categorie et ajoutez la dans une liste (d'objets de type Categorie).  
• Proposez lui deux choix :
  • Ajouter une autre catégorie (dans ce cas vous réinitialisez le formulaire)
  • Voir la liste des catégories saisies auquel cas vous demarrez à la deuxième activité que vous avez créé hier! 

Modifiez l'activité 2 que vous avez créé hier afin d'afficher la liste des catégories saisies dans une listview.  Pour cela vous devez modifier le layout associé ainsi que le code source de la classe (inspirez vous des étapes précédentes pour la gridview)