Créer un AVD sous windows 7 et le SDK Android 2.1, ADT r5

Cette semaine je vous ai fait découvrir comment installer le SDK Android avec ADT pour Eclipse. (http://pm-villa.blogspot.com/2010/03/utiliser-le-android-sdk-avec-eclipse.html).

Certain d'entre vous on pu essayer de créer un "virtual device" et se retrouver confronté à ce message:

emulator: ERROR: unknown virtual device name: 'Dream'
emulator: could not find virtual device named 'Dream'

Alors pour ce qui n'ont pas encore franchit le pas, et ceux qui ont eu des soucis, voici la marche à suivre:

• Etape 0: Installation du SDK

Pour cela pas de soucis, si vous avez raté un épisode ça se passe par là:  Utiliser le Android SDK avec Eclipse

•  Etape 1: Lancez le AVD Manager du SDK (Android Virtual Device Manager)

Lancez Eclipse comme installé précédemment. Une icone du SDK apparaît dans votre toolbar. Cliquez dessus:

Une boîte de dialogue qui nous est déjà familière apparaît: Android SDK and AVD Manager. Là vous trouverez la rubrique virtual devices, dans laquelle nous allons ajouter notre fameux émulateur android. Cliquez donc sur New...

Là une nouvelle boîte de dialogue apparaît:

Donnez un nom à votre terminal virtuel (AVD), n'importe quoi fera l'affaire (pour ma part Dream). Dans target choisissez votre version de l'API Android, moi j'ai choisi Google APIs pour profiter de Google maps.
On n'oublie pas la taille de la SD Card, 9 Mo minimum, moi j'ai mis 128 ce qui me semble correct pour une appli normale. Moi je veux émuler un HTC Dream, donc j'ai laissé le Skin par défaut pour la taille d'écran.

Hardware vous permettra de programmer des applications spécifiques à un materiel donné (Accéléromètre, batterie, etc...).

Voilà, vous n'avez plus qu'à cliquer sur create AVD.

• Etape 2: Lancez le virtual device... ou pas!

Moi je suis sous windows 7, et avec la dernière version du SDK 2.1, le SDK Tools r5, et bien impossible de lancer un AVD, le message : emulator: ERROR: unknown virtual device name: 'Dream', emulator: could not find virtual device named 'Dream' s'affiche:

Mais heureusement, j'ai la solution! Il suffit de rajouter une variable d'environnement ANDROID_SDK_HOME comme suit:

Cliquez droit sur "Ordinateur", choisissez "Propriétés" dans le menu contextuel.

Votre "système" apparaît. Cliquez sur "Paramètres Système Avancés":

La boîte des propriétés de votre poste de travail apparaît:

Cliquez sur Variables d'environnement, et là cliquez sur Nouvelle...

Dans le champs "Nom de la Variable" entrez ANDROID_SDK_HOME, et donnez lui pour valeur le chemin vers le SDK, pour moi E:\dev\android-sdk-windows:

Validez tout ça, redémarrez Eclipse, reprenez le tuto à l'étape 1 :)

Si tout s'est bien passé, vous devriez obtenir un résultat de ce type:

Utiliser le Android SDK avec Eclipse

Voici mon premier tuto pour développer pour le système Android!

Pour débuter, rien de vraiment compliqué, juste comment installer le SDK Android et l'extension qui va avec sous l'IDE Eclipse.

• Première étape: Récupérer le SDK Android

Rien de bien compliqué, dans cette étape là, il suffit juste dans un premier temps de récupérer le starter SDK sur le site du developpeur Android:

Platform	Package	Size	MD5 Checksum
Windows	android-sdk_r05-windows.zip	23449838 bytes	cc2c51a24e2f876e0fa652e182ef5840
Mac OS X (intel)	android-sdk_r05-mac_86.zip	19871714 bytes	6fcfeed0e1c36624c926551637eb3308
Linux (i386)	android-sdk_r05-linux_86.tgz	16208523 bytes	1d695d6a31310406f5d49092a1bd9850

Je vous conseille tout de même de vous rendre sur le site, le SDK est en constante évolution. Ci-dessus ce sont les versions disponibles au 21 mars 2010.

Décompressez l'archive dans votre dossier de développement. Nous allons lancer l'utilitaire de téléchargement du SDK Android, ou plutôt devrais-je dire de ses multiples versions:

Bien sûr, nous allons lancer le SDK Setup. Si au premier lancement vous avez ce message d'erreur: Failed to fetch URL https://dl-ssl.google.com/android/repository/repository.xml, reason: HTTPS SSL error. You might want to force download through HTTP in the settings.

Alors il vous faut aller dans les settings et désactiver le téléchargement des repositories par https:

Cliquez ensuite sur Available packages et développez l'arbre:

Comme vous pouvez le voir, une multitude de packages sont disponibles. Il vous faudra au minimum un package de type SDK Platform Android. Les packages Google APIs contiennent les APIs qui vous serviront à manipuler Google Maps par exemple. Les versions que vous choisirez dépendront de vos besoins, sachant que les statistiques d'utilisation d'Android divisées par versions au 4 janvier 2010 étaient les suivantes (source):

Moi à l'heure actuelle, je pense qu'il faut compter sur la version 1.6 et sur la 2.1, qui n'apparaît pas dans ces stats mais va équiper de plus en plus de terminaux HTC comme le Nexus One ou le Hero. Donc cochez ce qui vous semble judicieux (pour ma part API 7 et API 4, mais je développerai en API 4 pour toucher le plus de monde).

Cliquez sur Install Selected et sur la fenêtre suivante choisissez "Accept All" puis validez (Install). Attendez que tout soit téléchargé (ça peut prendre un certain temps).

Si tout s'est bien déroulé vos packages apparaissent désormais dans "Installed Packages". Nous venons de faire 50% du chemin.

• 2ème Etape: Installer Eclipse Android Development Tools : ADT

A l'heure actuelle, ADT est compatible avec Eclipse 3.5 et Eclipse 3.4. Nous utiliserons la dernière version stable d'Eclipse, la 3.5. Vous pouvez la télécharger ici. Une fois lancé, cliquez sur help>Install new software...

Vous cliquez sur Add... et vous ajoutez les site https://dl-ssl.google.com/android/eclipse/ (dans le champs site :) ):

Finalement vous cochez tout le developper tools et vous conduisez le processus jusqu'à la fin de l'installation.


Dans un prochain post je vous expliquerai comment créer votre projet Android, mais la manipulation est assez classique pour ceux qui sont habitués à Eclipse.

Créer une div avec une hauteur minimale et en jQuery

Après moultes modifications de mon site, il s'est avéré que ma première solution de hauteur minimale pour une div a moins bien fonctionné que prévu, tout du moins sous Firefox. Comme je commençait à avoir un CSS complexe, et que j'avais déjà du jQuery à foison dans tout le site, et donc que ce dernier était indispensable au fonctionnement normal du site, je me suis donc penché sur la solution en script plutôt qu'en CSS.

Première bonne nouvelle, pas besoin de plugin pour ça, j'ai trouvé tout ce qu'il me fallait dans l'api de base:

• jquery.height()

Et c'est tout :)


Pour commencer, posons notre squelette:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Redimensionnons nos div</title>


    <!-- Inclusion de jquery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    <!-- votre css -->
    <link type='text/css' href='css/mon.css' rel='stylesheet' media='screen' />

</head>
<body>
    <div id="div_principale">
        <div id="div_gauche">
            <!-- Le contenu de votre div gauche-->
        </div>
        <div id="div_droite">
            <!-- Le contenu de votre div droite-->
        </div>
    </div>
</body>
</html> 

Nous sommes ici face à la problématique suivante: nous devons donner une hauteur fixe à notre div principale, mais nous voulons que notre div de gauche ou notre div de droite à contenu variable ne dépassent pas de la div principale.

Pour ce faire, entre nos deux balises head, nous allons placer ce petit script:

<script type="text/javascript">
    $(document).ready(

        function()
        {
            if($('#div_gauche').height()>$('#div_droite').height())
            {
                $("#div_principale").height($('#div_gauche').height()+30);
            }else
            {
                $("#div_principale").height($('#div_droite').height()+30);
            }
        }
    );
</script>

Et voilà!

$(document).ready va permettre de charger le script après les chargement de la page.
Ensuite le script va déterminer sir la div de gauche est plus grande que la div de droite, si oui la div principale prendra la hauteur de la div de gauche + 30 pixels, si non elle prendra la hauteur de la div de droite + 30 pixels, c'est aussi simple que ça.

Bien sûr ceci n'est qu'un petit exemple, après l'idéal est faire appel à cette fonction dans des callbacks par exemple :)

Créer une div avec une hauteur minimale

Bonjour à tous!

Aujourd'hui je me suis trouvé confronté au problème suivant: créer une div qui devait faire au moins 600px de hauteur sous tous les navigateurs, IE6 inclus, même si le bougre est mort depuis peu ^^.

Après plusieurs essais, voici la solution que j'ai adopté (le site d'origine: http://reignwaterdesigns.com/ad/tidbits/hacks/minimum_height_in_css.shtml) :

Tout d'abord, utiliser la propriété CSS2 min-height:

.monDiv{
    min-height:600px;
}

Ensuite, utiliser la propriété !important de css2 sur un height, qui indique à un navigateur la gérant bien (je veux bien dire autre que Internet Explorer) que pour deux heightidentiques celui noté !important doit être utilisé:

.monDiv{
    min-height:600px;
    height:auto !important;
} 

Enfin, pour notre IE préféré, on rajoute le height qu'il utilisera puisque trouvé en dernier:

.monDiv{
    min-height:600px;
    height:auto !important;
    height:600px;
}

Et voilà, votre div aura une hauteur de 600px au plus :)
Un grand merci à Reign Water, je vous conseille de visiter son blog ne serait-ce que pour le remercier ;)