CODE - Master/Detail with Dialog and skinning

J’ai avancé sur l’exemple du post précédent. En plus de proposer la liste des contacts stockés dans le téléphone et affichés avec leur photo, il est désormais possible de cliquer sur un contact et d’avoir sa fiche « détail ». Ce qui m’intéressait dans cet exercice était de voir comment implémenter une vue master/detail sous Android. Le deuxième objectif étant de voir de quelle manière il est possible de « skinner » ces vues.

Commençons par le résultat. Ici, la liste des contacts. Pas d’option de recherche, juste une liste, qualifiée de bidirectionnelle, qui défile au rythme des frottements de doigts, vers le haut ou vers le bas, c’est selon.

Au passage, vous aurez remarqué mon à-une-lettre-près-homonyme. Le mimétisme est poussé à son comble avec la même coupe de cheveux. Toutefois, y’a un truc pour nous reconnaitre… sur la photo, il porte des lunettes.

Après un contact de promiscuité doigt/écran à la façon « clickabeule », une fenêtre « Dialog » apparaît et je l’en remercie.

Pour éviter tout harcèlement physique ou moral, mon numéro de téléphone n’apparaît pas sur la capture ci-avant, mais ça marche hein ! Toutefois, si tu as le sexe de type féminin et que tu t’intéresses à la libido des informaticiens, en ce compris les relations doigts/souris et doigts/clavier, écris-moi !

Les objectifs de ce tutoriel ne sont, à mon avis, pas très ambitieux. Pourtant, ça n’a pas été une sinécure de le faire. Certes, je débute avec Android et il me faut apprendre le framework et les bonnes « pattern ». Ce n’est pas la même chose de développer une application corporate ou orientée « smartphone ». La façon dont les processus sont démarrés ou arrêtés diffère totalement d’un environnement Windows, par exemple.

Je suis persuadé que le code de ce tutoriel n’est pas conforme au « state of the art ». A sa lecture, vous trouverez probablement que le « tight coupling » mène la danse. C’est tout simplement parce que je manque d’expérience. J’ai dû être inventif pour atteindre les objectifs que je m’étais fixés et j’ai privilégié le résultat à la manière.

Limitation :

1. Rien n’a été fait pour un meilleur affichage sur un smartphone avec une petite résolution;
2. Les boutons d’appels, de SMS et d’envoi d’email ne sont pas opérationnels. Ce n’était pas le but.

Bug connu : plante royalement sa mère quand on change l’orientation alors que la vue détail est affichée.

Vous trouverez le code ici : (https://oliben.googlecode.com/svn/trunk/ContactManagerMasterDetail

Explications codesques… pour la partie « master » :

La classe principale est ContactList.java. A la création de l’activity, la classe est lié à la vue contact_list.xml (dans res/layout) qui elle-même utilise la vue contact_entry.xml pour l’affichage de chaque élément de la liste. Elle est également liée à l’adapter AdpaterList.java qui va s’occuper de récupérer l’image de la DB du smartphone et l’affecter à l’élément contact_image_list de la vue contact_entry.xml. Pour le reste, cette classe étend le SimpleCursorAdapter et fait un appel à super() pour la liaison des données avec les contrôles (TextView).

Pour la partie « detail » :

Un listener est positionné sur la propriété setOnItemClickListener de contactList.
La position de l’élément sélectionné dans la liste est sauvegardée, ainsi que l’ID de l’élément sélectionné.

La Dialog est elle-même une classe Java étendue car je voulais faire du skinning et je ne suis pas parvenu à « skinner » la Dialog de base. C’était surtout nécessaire pour pouvoir faire ressortir la photo du contact de la Dialog elle-même. Il me fallait une Dialog complètement nue, avec un fond transparent. C’est la seule technique que j’ai trouvée.

Je pense que j’aurai du coller un adapter à cette Dialog également… mais :

1. Je ne me sens pas encore à l’aise avec l’implémentation des adapter;
2. Il aurait fallu réinterroger la DB du smartphone alors que les données sont disponibles.

Je ne suis pas parvenu à recopier l’image (Bitmap) de la vue master à la vue detail. Je refais donc un query dans la DB et l’affecte à la vue.

Petite chose à savoir sur les Dialog, au premier appel de showDialog(), la fonction onCreateDialog() est appelée. Mais pas lors des appels successifs. J’ai essayé un dismissDialog, mais sans succès. J’ai alors trouvé que la fonction onPrepareDialog() est toujours appelée. Lors de la création, juste après onCreateDialog(), et à chaque fois que showDialog() est appelée.
C’est donc, dans onPrepareDialog() qu’est exécuté le code pour passer les données de la vue master à la vue detail .

Pour tester le projet, créer un nouveau Workspace dans Eclipse et importer le projet (https://oliben.googlecode.com/svn/trunk/ContactManagerMasterDetail).
S'il y a une erreur du type "Android requires .class compatibility set to 5.0. Please fix project properties.", faites un click droit sur le projet, sélectionnez "Android Tools" et ensuite "Fix Project Properties".

Et voilà...