J’ai éprouvé beaucoup de difficultés pour mener à bien ce projet pour la simple raison qu’il s’agit d’une manière totalement différente de ma programmation habituelle, presque révolutionnaire vu le nombre de lignes minimes pour un travail aussi énorme mais vraiment tordue :).

Il m’a été demandé de programmer un générateur d’horaires en tenant compte qu’il fallait :

• 2 séries minimum
• 2 locaux minimum
• Remplir toute une semaine de cours pour les 2 locaux
• Assez de professeurs et de cours pour les remplir

Une tâche quand même ardue compte tenu du fait que nous n’avons pas eu de cours théorique. Nous devions nous documenter par nos propres moyens via la documentation de Scala et la documentation de JaCoP.

Un aperçu est disponible à la suite de ce billet, le rapport qui m’a été demandé et les sources du projet :

• Rapport du projet de programmation par contraintes
• Application du projet de programmation par contraintes

But de ce tutoriel :

• Afficher sur une ligne le titre et le contenu d’une « news »
• Afficher l’url du site quand on clique sur un élément de la liste
• Confectionner son propre adapteur pour afficher sa vue personnalisée

On entre déjà dans un tutoriel un peu plus complexe, nous allons aborder un point très important dans la programmation sous Android. Puisque les ListView sont des « layouts » les plus utilisés, il est indispensable de pouvoir les personnaliser comme bon nous semble.

Dans un premier temps, nous allons créer la vue de notre news. Pour ce faire, déroulez le menu File > New > Android XML File et remplissez la fenêtre de la façon suivante :

Nous avons créé un « layout » que nous pouvons éditer dans res > layout > news_vue.xml. Le but de ce deuxième tutoriel est d’afficher le titre et le contenu de la news. Nous allons donc rajouter 2 « TextView » comme ci-dessous :

<?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="fill_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/tvTitreNews"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Titre de la news" />
    <TextView
        android:id="@+id/tvContenuNews"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Contenu de la news" />
</LinearLayout>

Comment faire maintenant pour intégrer ce « layout » à chacune de nos lignes de notre ListView ? Nous rentrons dans quelque chose d’un peu plus compliqué. Pour y parvenir, il va falloir créer 3 nouvelles classes : News, VueNews et AdapterListeNews.

La News n’est qu’une classe qui va contenir notre news, qui va la représenter. Nous voulons que notre news sauvegarde son id, son titre, son contenu et son url :

/**
* Tutoriel n°2 dans le cadre du blog Randoomz<br />
* Classe du domaine pour représenter une news
*
* @author Gerard
*/
public class News {
    private int id;
    private String titre;
    private String contenu;
    private String url;

    public News(int id, String titre, String contenu, String url) {
        super();
        this.id = id;
        this.titre = titre;
        this.contenu = contenu;
        this.url = url;
    }
    public int getId() {
        return id;
    }
    public String getTitre() {
        return titre;
    }
    public String getContenu() {
        return contenu;
    }
    public String getUrl() {
        return url;
    }
}

La VueNews est la classe qui va utiliser notre « layout » news_vue.xml afin de la mettre en page dans notre ListView.

Nous devons l’étendre à l’élément racine de notre fichier xml, récupérer les « TextView » pour les remplir à partir d’une news qu’on récupère :

/**
* Tutoriel n°2 dans le cadre du blog Randoomz<br />
* Vue qui va utiliser notre layout news_vue.xml afin de la mettre en page dans
* notre ListView
*
* @author Gerard
*/
public class VueNews extends LinearLayout {
    private TextView tvTitre;
    private TextView tvContenu;
    private News news;

    public VueNews(Context context, News news) {
        super(context);

        initLayout(context);
        initComposants();
        setNews(news);
    }
    // suite plus bas ...
}

Il nous reste à initialiser les différents éléments de la classe.

L’initialisation du « layout » doit se faire par déserialisation du fichier xml. Nous ne pouvons utiliser la méthode setContentView, il faut donc utiliser cette alternative :

private void initLayout(Context context) {
    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Conext.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.news_vue, this, true);
}

L’initialisation des composants de la vue sont maintenant récupérable par la méthode findViewById :

private void initComposants() {
    this.tvTitre = (TextView) this.findViewById(R.id.tvTitreNews);
    this.tvContenu = (TextView) this.findViewById(R.id.tvContenuNews);
}

L’initialisation du contenu de ses composants doivent se faire dans le setter de la news puisque, lorsqu’on change de news, on doit pouvoir modifier les composants de la vue :

private void initContenuComposants(News news) {
    this.tvTitre.setText(news.getTitre());
    this.tvContenu.setText(news.getContenu());
}

public News getNews() {
    return news;
}

public void setNews(News news) {
    this.news = news;
    initContenuComposants(news);
}

Ceci est une bonne chose de faite. Nous avons déjà la classe qui va contenir notre news et la vue pour chaque ligne de notre ListView. Il nous reste une chose à faire avant de modifier la classe principale pour parvenir à intégrer nos nouvelles classes, programmer notre adapter pour nos vues.

L’utilité de coder son adapter est de redéfinir l’une de ses méthodes (getView) pour renvoyer notre vue personnalisée (VueNews). Pour commencer, nous devons récupérer le contexte de l’application, la liste des données (les news) et l’étendre avec la classe BaseAdapter :

/**
* Tutoriel n°2 dans le cadre du blog Randoomz<br />
* Adapter de la ListView de nos news
*
* @author Gerard
*/
public class AdapterListeNews extends BaseAdapter {
    private Context context;
    private List<News> liste;

public AdapterListeNews(Context context, List<News> liste) {
        this.context = context;
        this.liste = liste;
    }
    // suite plus bas ...
}

Ceci étant fait, eclipse vous oblige à devoir implémenter plusieurs méthodes. Générer les et compléter les de la façon suivante :

@Override
public int getCount() {
    return this.liste.size();
}

@Override
public Object getItem(int pos) {
    return this.liste.get(pos);
}

@Override
public long getItemId(int pos) {
    return pos;
}

@Override
public View getView(int pos, View vue, ViewGroup parent) {
    return vue;
}

Vous vous en douter, notre dernière méthode prend tout son sens si on ne renvoi pas la vue qu’il attend mais notre propre vue :

@Override
public View getView(int pos, View vue, ViewGroup parent) {
    VueNews vueNews = (VueNews) vue;
    // La vue n'existe pas encore, on l'a construit
    if (vue == null)
        vueNews = new VueNews(this.context, (News) getItem(pos));
    // La vue existe déjà, on l'a reconstruit
    else
        vueNews.setNews((News) getItem(pos));
    return vueNews;
}

Notez la réutilisation de la vue si elle existe déjà. Android tente de réutiliser le plus possible des éléments créés au préalable afin d’économiser la batterie.

Modifions maintenant notre code de l’activité principale pour remplir une liste de news, initialiser l’adapter créé, l’attacher à notre ListView et afficher l’url du site en cliquant sur l’une des lignes de la liste :

/**
* Tutoriel n°2 dans le cadre du blog Randoomz<br />
* Liste d'affichage des news
*
* @author Gerard
*/
public class Randoomz_TutoActivity extends ListActivity {
    private AdapterListeNews adapter;
    private List<News> items = new ArrayList<News>();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Initialisation de la liste des items
        items.add(new News(1, "Randoomz", "Site web de randoomz", "www.randoomz.org"));
        items.add(new News(2, "Google", "Site web de google", "www.google.be"));
        items.add(new News(3, "Apple", "Site web de Apple", "www.apple.fr"));
        items.add(new News(4, "Facebook", "Site web de Facebook", "www.facebook.com"));
        items.add(new News(5, "Twitter", "Site web de twitter", "www.twitter.com"));

        // Initialise l'adapter et l'ahoute à la ListView
        this.adapter = new AdapterListeNews(this, items);
        this.setListAdapter(adapter);

        // Récupère la ListView
        ListView lv = getListView();
        // Ajoute une action au clique sur un élément de la liste
        lv.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // Affiche un "Toast" avec l'url de l'élément sélectionné
                Toast.makeText(getApplicationContext(),((VueNews) view).getNews().getUrl(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Nous finissons avec cela notre second tutoriel. Son résultat final ne correspond pas du tout à l’apparence de notre application final. Nous verrons au prochain tutoriel comment changer le fond de notre « Activity », le fond de chacune des lignes et programmer de façon à bien détacher les différentes ressources.

Codes sources du Tutoriel Android n°2

Ils ont peut-être « l’idée » (qui sait) mais pour le reste, ils sont bien loin de la vérité. Il m’a fallu attendre ma 3ème année, dans le cadre du module de programmation graphique, avant de pouvoir réaliser un pacman en 2D et 3D par groupe de 2 constitué de Kévin Moulart et moi-même.

Ceci étant dit, la réalisation de ce projet a été vraiment très productif. Cela m’a permit d’apprendre le C++ et la programmatin graphique avec OpenGL et GLUT (il faut donc avoir installé ces librairies pour faire tourner l’application). Ainsi que de coder au moyen de différents patterns dans le but de rendre un code clair et bien structuré.

Plusieurs aperçus sont disponibles à la suite de ce billet, la faible analyse qui m’a été demandé et les sources du projet :

• Analyse du Pacman
• Application du Pacman
• Executable du Pacman

Le but était de développer un framework complet en Java utilisant une base de données sous PostgreSQL. Ensuite, ce framework était utilisé dans un contexte de carnet de vols de planeurs comportant un espace administrateur pour gérer les vols et les pilotes enregistrés.

Il s’agit sûrement de l’un des projets les plus difficiles de mon apprentissage puisqu’il fallait respecter des délais strictes, fournir régulièrement une analyse poussée et un code le plus propre possible.

Vous pouvez voir un aperçu de l’application en mode « Mock up » en cliquant sur les miniatures ci-dessous et télécharger l’analyse et l’application complète :

• Analyse du projet de PAOO
• Application du projet de PAOO

La chose a un peu changé. N’ayez crainte, le code source sera bien libéré mais pas directement une fois l’application à l’état stable. Je compte fournir des tutoriels expliquant le code de l’application petit à petit. Cela permettra d’aider les débutants et, peut-être, d’apprendre certaines choses aux plus expérimentés.

Le tutoriel d’aujourd’hui porte sur les ListView. Il s’agit d’un « layout » un peu particulier qui vous permet d’afficher une liste de vues. C’est sans doute l’un des « layout » les plus utilisés dans les systèmes Android.

Dans ce premier tutoriel, je présenterai la ListView avec de simples vues pour commencer doucement. Un autre traitera sur la personnalisation de ses vues pour en afficher des plus complexes.

Commençons !

Après avoir créé votre projet android, éditez le fichier res > layout > main.xml en remplaçant son contenu par :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:text="" />

Ce « layout » sera utilisé pour s’appliquer à chaque élément de notre futur ListView.

Maintenant, ouvrez la classe qui a été créé automatique à la création de votre projet. Il y a plusieurs façon d’intégrer une ListView dans une activité. Dans notre cas, nous allons utiliser une méthode qui restreint son contenu puisqu’il ne peut y avoir qu’une ListView.

A la place de Activity, étendez votre classe par ListActivity :

public class Randoomz_TutoActivity extends ListActivity {

Complétez la méthode onCreate de la classe :

@Override
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   // Ajoute automatiquement une ListView qui remplit l'entièreté de l'écran
   this.setListAdapter(new ArrayAdapter<String>(this, R.layout.main, items));
   // Récupère la ListView
   ListView lv = getListView();
   // Ajoute une action au clique sur un élément de la liste
   lv.setOnItemClickListener(new OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent, View view,
         int position, long id) {
         // Affiche un "Toast" avec le texte de l'élément sélectionné
         Toast.makeText(getApplicationContext(), ((TextView) view).getText(), Toast.LENGTH_LONG).show();
      }
   });
}

Attardons nous un peu sur la méthode setListAdapter. Cette méthode prend en paramètre l’instance d’un ArrayAdapter. Le constructeur de cette classe prend 3 paramètres :

1. Le contexte de la classe
2. Une ressource
3. Une liste d’objets

Notre liste d’objet est en faite un simple tableau de String puisque le type générique de ArrayAdapter est de ce même type :

private String[] items = { "Belgique", "France", "Espagne", "Italie", "Angleterre", "Irlande" };

Bien entendu, le contenu du tableau peut être différent du moment qu’il s’agit d’un tableau de String.

Nous avons fini notre application. Vous devriez avoir le résultat suivant :

Codes sources du Tutoriel Android n°1

Une première expérience dans la gestion d’une base de données qui a été à la fois très productive et sympathique. J’avais enfin l’occasion de pouvoir essayer autre chose que MySQL.

Le projet consistait à fournir :

• Une application cliente pour une simple consultation des données.
• Une application serveur pour ajouter, supprimer et consulter les données.
• Des « queries » afin de pouvoir créer une base de données à l’identique sur un autre environnement PostgreSQL.

Puisque le projet côté Java n’est pas graphique, je libère seulement l’analyse et les codes sources et ne vous montre pas de screenshots.

• Analyse du projet de base de données sous PostgreSQL
• Application du projet de base de données sous PostgreSQL

Vous en avez peut être déjà entendu parler à l’état d’une rumeur ou d’une lointaine information. Cependant, selon le site 9to5, Google travaillerait bien sur des lunettes et serait commercialisé pour bientôt.

Même plusieurs caractéristiques sont déjà connues :

• La forme des lunettes devrait se rapprocher dy style de Oakley Thumps
• Un écran de type Head Up Display, c’est-à-dire un affichage tête haute qui consiste à superposer des informations sans gêner la vue
• Un OS mobile intégré basé sur Android
• Une navigation effectuée par des mouvements intuitifs de la tête facile à mémoriser
• Possibilité de prendre des photos et vidéos avec ou sans flash, de téléphoner, intègre un GPS, etc.

On m’a demandé de configurer mon portable pour pouvoir suivre le séminaire en installant le SDK de Windows Phone 7. Ayant déjà Visual Studio 2010 (IDE Microsoft) en version Ultimate installé sur ma partition Windows, j’ai voulu intégrer le SDK à ce dernier. Impossible ! Il ne veut fonctionner qu’avec une autre version de Visual Studio, nommé Express. Pour une version dite Ultimate, c’est déjà un comble.

Passons, le lendemain, après une bonne heure d’attente du représentant myTIC (un partenaire de Microsoft), il nous explique comment va se passer le séminaire : 40 minutes de théorie et 2h d’exercices pratiques.

Les 40 minutes sont totalement inintéressantes. Comparé à Android qui dispose de diagrammes et autres schémas sur l’architecture de son OS et de son fonctionnement, je n’ai eu droit que à des slides remplies de textes et très ennuyantes. Mauvais point, on commence mal.

Ceci étant dit, l’architecture de cet OS n’est pas si mal pensé et règle bon nombre de problèmes liés à la batterie ou de la gestion de la mémoire. Cela permet aux terminaux sous Windows Phone 7 de gagner énormément en autonomie comparé à ses concurrents Android (iOS est à part puisqu’il n’implémente pas non plus un vrai système multitâche).

Pour ce qui est de la partie pratique, ce n’est pas beaucoup mieux. Aucune interactivité avec le représentant. Je n’ai la possibilité que de recopier son code qu’il projette sur l’écran bêtement et de bénéficier d’explications interminables. Déjà que le C# n’est pas très intéressant, c’est encore moins attirant dans ces conditions.

Windows Phone 7 est pour moi un OS très sympathique à l’utilisation pour un certain type d’utilisateur (utilisateur Windows et Xbox au quotidien) mais je pense que programmer pour cette plateforme est une horreur sans nom que je déplore.

J’espère donc n’être jamais amené à programmer pour cette plateforme dans ma carrière de programmeur.

Toutes les fonctionnalités voulues ne sont pas encore implémentées. Elles sont même assez restreintes, l’application permet pour cette alpha :

• De visualiser la liste des derniers billets
• De visualiser les commentaires d’un billet sélectionné
• De partager un billet de la façon que vous voulez

Donc une application très simple mais le but de cette alpha est plus de me donner un retour au niveau du design, de l’ergonomie et de la fluidité sur une large nombre de terminaux android.

Si vous êtes intéressé de participer à cette alpha mais que vous ne savez pas comment installer une application via une apk. Je vous conseil de faire un détour vers l’android market en téléchargent une application comme Astro qui permet d’installer des applications via une apk stocké dans la mémoire de votre smartphone.

Vous êtes interessé ? envoyez moi une demande au mail suivant androwiiid [a] randoomz.org

Pour ceux qui n’ont pas de androphone mais qui désirent avoir un aperçu de l’application, voici deux captures d’écran :

N’hésitez pas à donner votre avis dans les commentaires :)

Regardez par vous même !