Gonzague

Tak suka wanita gemuk ! le blog de Gonzague.

Archive pour septembre 2010

1) Menus

Aujourd’hui on va commencer par les menus, ceux très pratiques qui apparaissent quand on appuie sur la touche menu du téléphone. Ca évite d’encombrer l’UI avec des choses pas forcément utile 100% du temps.

Avec android c’est vraiment très simple à mettre en place. File > new > other > Android xml file et choisir menu dans la liste des boutons radios.

Cliquer sur Add pour ajouter une nouvelle entrée et  remplir les champs comme demandé, ils ne sont pas tous obligatoire.

Une fois ce menu créé, il faut assigner à notre Activity ce menu lorsqu’on appuie sur la touche:

      public boolean onCreateOptionsMenu(Menu menu) {
		MenuInflater inflater = getMenuInflater();
		inflater.inflate(R.menu.site_list_menu, menu); //avec l'id de notre menu
		return true;
	}

Ensuite il faut lier des événement à chacun de ces items:

@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		// We have only one menu option
		case R.id.menu_add: //id qu'on a spécifé dans l'éditeur de menu.
			addLink();
			break;
		case R.id.menu_refresh:
			refresh();
			break;
		case R.id.menu_logout:
			finish();
			break;
		}
		return true;
	}

Et voilà ! on a un beau menu

2) Preferences

Pour créer des préférences c’est très simple: File > new > other > Android xml file  (oui encore) et choisir preferences dans la liste des boutons radios.

Ensuite on devrait arriver sur une fenêtre de ce style :

Ca va relativement droit au but, on clic sur add pour ajouter des catégories, des fenêtres etc…  On peut choisir le type de préférence souhaité (checkbox, text…).

Ensuite il faut créer une classe Preferences quelque part dans votre projet et la déclarer dans l’androidManifest.xml (voir plus bas). Cette classe est très simple:

public class Preferences extends PreferenceActivity {

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
	    super.onCreate(savedInstanceState);
	    addPreferencesFromResource(R.xml.preferences);
	}
}

et on y ajoutera rien de plus.

Ensuite il faut lancer la fenêtre des préférences depuis notre Activity principale (exemple prit sur FTPix car je n’ai pas de préférences dans checkthatlater):

//code à placer dans le listener du bouton qui doit lancer les préférences.
Intent i = new Intent(FTPix.this, Preferences.class);
a.startActivity(i); //on considèrera que "a" est de classe Activity

3) Lancer un nouvel écran

De même ici, pas de réel problème c’est relativement simple. On considèrera que “a” est de classe Activity le deuxieme paramètre est la classe de la fenêtre cible

Intent intent = new Intent(a.getApplicationContext(), SiteList.class);
intent.putExtra("apiSession", result); //on transmet le paramètre de nom "apiSession"
a.startActivity(intent);

Ensuite il dans le onCreate(Bundle savedInstanceState) nouvelle Activity, pour récupérer les paramètres:

Bundle extras = getIntent().getExtras();
if (extras != null) {
	apiSession = extras.getString("apiSession");
}else{ //uniquement si les paramètres son indispensable, si on à pas le paramètre on ferme l'écran et retour au précédent.
	finish();
}

4) androidManifest.xml

L’android manifest est la fichier qui regroupe toutes les caractéristiques de notre application. Il faut absolument y ajouter toutes les Activity qu’on utilisera (dans l’onglet application puis dans application nodes), on peut également définir toutes sortes de propriétés comme les résolutions d’écran supportées (onlget manifest > manifest extras) ainsi que les permissions dans l’onglet permission.

Petit truc pour éviter de perdre du temps bêtement, déclarer bien la permission INTERNET si votre application en à besoin, sinon rien ne marchera. J’ai perdu quelques heures la dessus sur FTPix, ça fait bien rager.

Avec les 3 premiers articles on peut déjà faire quelque chose de sympa. Voici ce à quoi ressemble Check that later après quelques heures de taff sans trop de prises de têtes:

Bon, ça tourne sur émulateur d’où l’impression de lenteur, sinon c’est plutôt rapide.

YouTube Preview Image

[FTPix] Enfin sur l’android market

Samedi 18 septembre 2010

Longtemps après avoir commencé le développement, FTPix est enfin sur l’android market ! Il doit rester quelques bugs certes, mais ça marche plutôt bien.

Il suffit de rechercher FTPix sur le market pour le trouver. Bien évidemment, c’est gratuit ! Mais les donations sont toujours le bienvenues :)

qrcode

ou : market://search?q=com.android.ftpix

Demain j’attaque le nouvel article sur le dev android.

Dossier Android dev:

Maintenant que notre projet est structuré on va pouvoir vraiment commencer.

1)  Premier écran

Pour faire noter premier écran on va utiliser l’éditeur WYSIWYG fourni avec le plug-in pour éclipse. pourquoi se faire chier à faire du xml quand les outils sont dispos.
La fenêtre de construction des écran ressemble à ça:

De quoi est composé un écran, d’un Layout principal et des éléments enfants (qui peuvent être d’autres layouts). Je déconseille fortement l’utilisation de l’AbsoluteLayout même Google le déconseille. Ici, je vais utiliser le RelativeLayout que j’aime bien.

Pour ajouter un élément, on le glisse de la palette vers l’aperçu ensuite on le sélectionne pour éditer ses propriété. Petit conseil donnez des ID qui veulent dire quelque chose ça sera utile pour la suite.

On construit peu à peu notre écran pour arriver à ça (relativement simple pour l’instant j’ai pas fait un truc de ouf pour pouvoir sortir le dossier plus tôt):

Ensuite on va ouvrir le fichier com.checkthatlater.android.SignIn.java qui devrait ressembler à ça:

 public class SignIn extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //on change le main en login parce qu'on est des rebels
        setContentView(R.layout.login); // ici on défini quel écran on va utiliser pour notre Activity
    }
}

Les Activity sont des classes très importantes pour une application android. Dans Check that later on va en définir une par écran.

Il faut donc ajouter une action à ce joli bouton “Sign In“. Pour ajouter une action, il suffit de lui attribuer un listener, ce qu’on va faire de ce pas:

public class SignIn extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login);

        addListeners(); //on va créer une méthode dédiée aux listeners histoire de centraliser ça pour cette activité.
    }

    public void logIn(){
    };

    public void addListeners(){
    	Button signIn = (Button) findViewById(R.id.LoginButton);
    	signIn.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				logIn();
			}
		});
    }
}

Hop, des que notre bouton sera “touché” ça lancera la methode logIn() qui ne fait rien pour le moment.

Notez la portion de code:

Button signIn = (Button) findViewById(R.id.LoginButton);

Je vous avez dit plus tôt d’attribuer des ID significatif à vos éléments d’UI car avec la méthode findViewById() on peut les retrouver très facilement et faire ce qu’on veut avec.

Et notre methode logIn() on en fait quoi ? On va la laisser de coté pour l’instant.

2) Première action

Dans Android il y a un Thread dédié pour l’interface (comme avec Swing en java) il est donc relativement déconseillé d’y faire des traitements longs qui feront freezer l’UI. On pourrait utiliser le classique

new Thread(new Runnable() {
	@Override
	public void run() {
		//faire quelque chose
	}
	}).start();

de fainéant mais non. Google nous fourni une classe géniale qui s’appelle AsyncTask. On va donc ouvrir notre fichier LogIn.java dans note package d’actions et lui faire extend la classe AsyncTask

public class LogIn extends AsyncTask< Object, Object, Object >
{
	private Activity a; // rajouté par moi même ça va être utile.

	public LogIn(Activity a){
		this.a = a;
	}

	@Override
	protected Object doInBackground(Object... params) {

	}
}

On peut y voir 3 type Object qui viennent de l’AsyncTask, Le premier est le type du paramètre que l’on passera lors de l’exécution notre tache de fond, le second est le type du paramètre que l’on passera lorsqu’on mettra à jour l’UI dans notre tache de fond et le dernier le type que retournera notre doInBackground.
Dans mon cas ce sera String, Object (car je ne m’en sers pas) et Integer

Cette classe dispose de 3 autres méthodes très intéressantes onPreExecute(), onPostExecute() et onProgressUpdate() leurs nom sont assez explicites et chose importante ces trois méthodes se déroulent dans le Thread UI non dans le Thread dédié à notre tâche. Pour mon cas cela donne ceci.

public class LogIn extends AsyncTask{
	private Activity a;
	private final int ERROR = -1, SUCCESS = 1, FAIL = 0;
	private ProgressDialog dialog;

	public LogIn(Activity a){
		this.a = a;
	}

	@Override
	protected Integer doInBackground(String... params) {
		String data = "paramètres pour ma requête";
		try {
			String result = URLTools.post("http://urlversmonsite", data);
			return Integer.parseInt(result);
		} catch (IOException e) {
			e.printStackTrace();
			return ERROR;
		}
	}

	@Override
	protected void onPreExecute() {
		super.onPreExecute();
		dialog = ProgressDialog.show(a, "Please wait...", "Signing in...", true);
	}

	@Override
	protected void onPostExecute(Integer result) {
		dialog.dismiss();
		super.onPostExecute(result);
		switch(result){
			case ERROR:
				DialogTools.ok("Can't connect to server", a);
				break;
			case SUCCESS:
				DialogTools.ok("Log in success", a);
				//TODO Launch link list activity
				break;
			case FAIL:
				DialogTools.ok("Wrong login/password", a);
				break;
		}
	}

}

Ici, je n’ai pas besoin de la methode onProgressUpdate:

  • onPreExecute(): j’initialise un indeterminate dialog que j’affiche. Il faut savoir qu’un dialog faisant parti de l’UI ne peut être qu’appelé depuis le thread UI.
  • onPostExecute(): je récupère le résultat de ma tâche de fond avec le dialog correspondant.
  • doInBackground(): Tache de fond, je me connecte à mon serveur, lis le résultat (avec une méthode de mes URLTools) et le retourne

Petite note sur la méthode onProgressUpdate(): Cette méthode est appelée quand on appelle la méthode publishProgress() et là où cette c’est génial ce que cette méthode ( publishProgress() ) ne peux être qu’appelée dans le thread de fond donc dans doInBackground. On à donc une façon ultra simple et intuitive de faire une tâche de fond tout en mettant à jour  l’UI !

Il ne nous donc reste plus qu’a implémenter la methode logIn() de notre Activity (nous ne somme plus dans la l’AsyncTask maintenant) :

public void logIn(){
    	EditText user = (EditText) findViewById(R.id.LoginField); // récuperer les text fields
    	EditText password = (EditText) findViewById(R.id.PasswordField); 

    	new LogIn(this).execute(user.getEditableText().toString(), password.getEditableText().toString());
    };

Lancer une AsyncTask est simple, on construit en construit une nouvelle instance et on appelle la méthode execute() avec les paramètres nécessaires.

On lance notre appli et on regarde si tout marche bien.

android dev

Et voila, ça fonctionne, pas de prises de têtes de fou, tout est super simple !

Vous avec donc tout ce qu’il faut ou presque pour faire une application !

Prochaine étape je parlerais des préférences ainsi que comment lancer une nouvelle activité (écran) et lui passer des paramètres puis du manifest pour les permissions accordées à l’application (Ce dernier point si vous voulez commencer le dev de votre app maintenant est très facilement trouvable sur le net).

Comme dit dans les commentaires du précédant, je vais faire un petit dossier en même temps que je développerais l’application android pour checkthatlater pour ceux qui sont intéressé par le dev android mais qui ne savent pas trop par où commencer. Petite préface: Tout ce dossier n’est pas ce qu’il faut  absolument faire, mais plutôt la façon dont je vois les choses et ce que j’ai retenu en développant FTPix pour cette plateforme et ce que je vais appliquer pour le dev de check that later qui sera une application relativement simple.  On verra à la fin si c’était une si bonne idée. En écrivant ceci je considère que vous savez développer un minimum en java, avez installé le SDK/Eclipse et les plug-ins android pour Eclipse qui permettent de gagner un temps fou.

1) Définir son application

Une des phases les plus importantes évidemment. Se poser un tas de question, savoir si l’application vaut la peine d’être développée et surtout de se rendre compte si elle est réalisable parce qu’on a bien l’air con une fois qu’on a passé xxx heures à faire son bazar et qu’au final on se dit qu’on va jamais y arriver… Pour cela il faut s’imaginer les actions importantes que fera l’application ainsi que les écran devant lesquels l’utilisateur sera confronté. Dans le cas de check that later il y aura 5 actions principales:

  • Se connecter avec son compte
  • S’enregistrer
  • rappatrier les liens lu/non lu/ favoris à partir du serveur où le site check that later se trouve
  • modifier un lien en lu/ajouter favoris/enlever favoris
  • Ajouter un nouveau lien

Donc relativement simple. J’ai groupé plusieurs choses dans les deux dernières actions car c’est vraiment très similaire. Juste quelques variables changeront… Pour les écran, l’idéal est de les dessiner ou représenter avec un logiciel quelconque. Nous avons donc ceci (la dernière a un peu merdee mais c’est un écran comme les autres):

android devclick

Donc 4 écrans:

  • Le login
  • Les listes
  • Une web view pour visiter un des liens avec un bouton pour le mettre vu ou en favori
  • Le dernier est un peu particulier. L’application va apparaître dans le menu de partage lorsqu’on fait un long clic sur un lien (je parlerais plus tard de comment avoir son application dans ces menus) donc très simple.

Une fois cette étape faite On peut lancer Eclipse plus sereinement…

2) L’organisation des fichiers

Pour commencer il faut créer un nouveau projet android (File>new>other>android>android project):

Pour l’Activity mettez le nom de la première fenêtre qui apparaîtra dans votre app, on reparlera des Activities plus tard. Une application android a une organisation des fichiers propre a elle même. En créant un nouveau projet vous devrez tomber face à un truc de ce genre (sans le dossier Extras):

android dev

Nous avons donc:

  • src: qui contiendra vos fichiers source (java)
  • gen: Ce sont les fichiers généré par le plug-in android pour Eclipse. On ne touchera pas au contenu de celui-la
  • Android 2.1: L’api utilisée par notre application: On n’y touchera pas également
  • assets: Je sais pas trop ce que c’est mais il n’y a pas besoin d’y mettre le nez
  • res: Dossier très important, il contient toutes les ressources hors java qui seront utilisées par l’application: Drawable: les images, layout: les écrans, menu: les menus lorsqu’on presse la touche menu du téléphone, values est un fourre tout à constantes et  xml: les autres fichiers xml comme la hierarchie des préférences dans FTPix par exemple
  • AndroidManifest.xml C’est ici qu’on définira la version de l’appli le nom affiché, les activités (on y viendra plus tard), les authorisation de l’appli (la liste de chose qu’on peut voir lorsqu’on installe une application comme acces internet, acces vibreur etc…)
  • default.properties porte assez bien son nom, on y touchera pas.

3) Organiser SES propres fichiers

Ici c’est chacun fait comme il le souhaite mais voici comment je compte faire pour check that later. Je pense qu’il est nécessaire de définir des modèles (voir structure MVC d’un application). Les plus attentifs auront remarqué que “liens” et “compte” était en gras dans la liste des actions. On va donc définir deux modèles pour l’instant (d’autres pourront s’ajouter plus tard lors de la conception de l’application, mais je pense qu’il vaut mieux tout définir dès que possible). Donc dans mon package src, je vais créer un nouveau package models ainsi que deux sous-packages link et user (je mets en anglais parce que c’est plus cool) Ensuite j’ai parlé d’actions plus tôt. on va mettre ça la dedans également. donc sous src, un nouveau package actions et des fichiers java pour chacune des actions: Register.java, Login.java, FetchLinks.java, ModifiyLink.java et AddLink.java Un dernier qu’on va appeller tools, sous src également. Là dedans on va regrouper toutes les fonctions récurrentes qu’on a pas envie de copier/coller recoder à chaque fois, j’ai pas d’idée encore précise mais dans mon cas ce sera des choses du genre lire le contenu d’une url, afficher des dialogues etc… Ensuite on va mettre nos écrans dans le dossier res/layout/ avec les noms montrés plus tôt sur la capture d’écran. File> New > other > android>android XML file:

La magie du plugin android intervient dans ce genre de situation, en choisissant le type de ressource il va mettre le fichier là où il le faut On a donc quelque chose dans le genre: ( j’ai rajouté register.xml dans les layouts, j’expliquerais la prochaine fois)

Plus tard viendra l’explication sur les dossiers drawable-hdpi/mdpi/ldpi, un des bonnes idée d’android. Mais si vous voule absolument commencer à dev, mettez vos fichiers dans drawable-mdpi Donc voilà on est prêt à se lancer dans le développement ! Avec une bonne base il y a moyen de gagner énormément de temps, on verra ça dans la suite sur quoi on a gagné du temps. La suite dès que j’ai commencé à travailler réellement sur la chose !

[FTPix android] Jour 3.

Dimanche 12 septembre 2010

La fin de mon week-end de trois jours, où je m’étais dis que j’avancerais sur FTPix pour android, est tombé. Les derniers ajouts avant la sortie de cette semaine:

On peut partager l’url d’une image de la liste très simplement grâce aux outils fournis par android:
ftpix androidftpix android

On peut également effacer une image. Et j’ai aussi ajouté un menu sur la “page” d’une image pour effacer / partager.

Petit truc utile, j’ai ajouté une fenêtre d’aide qui explique les termes et comment les remplir. Ca permettra d’éviter les confusion à propos de la synchronisation par exemple

ftpix android

Doit surement y rester des fautes… et je vais m’atteler à la version française également.

Bon tout ça pour dire que développer sur android est vraiment plaisant, les outils mis à la disposition des développeurs permettent de faire des choses vraiment sympa rapidement, simplement et efficacement. Il manque juste un peu de doc et surtout des exemples, il faut donc arpenter un peu plus le web car certaines explications ne sont pas super claires…

Utiliser Eclipse est également un gros gain de temps avec les plug-in créés par Google, moi qui ne suis pas fan d’Eclipse, je n’ai pas trop le choix du coup… mais ça vaut vraiment la peine de se faire du mal.

FTPix pour android, bientôt sur le market !

[FTPix android] Version de test

Samedi 11 septembre 2010

Petit ajout depuis hier: la possibilité d’envoyer plusieurs images de la galerie, ou autre application permettant de partager des images, dans la liste d’attente:

ftpix android ftpix android

J’ai uploadé une version de test ici. Si les icônes de l’application sont floues sur vos smartphones dernière génération, c’est normal.

J’attends vos retours !

[FTPix] Android, très bientôt.

Vendredi 10 septembre 2010

Ce week-end (oui c’est ferié chez moi aujourd’hui) j’ai décidé de mettre un bon coup de boost dans mes projets, du FTPix et du checkthatlater !

Et aujourd’hui j’ai bossé sur la version Android de FTPix qui arrive bientôt à terme. Ce que j’ai ajouté depuis la dernière fois :

L’application apparaît dans la zone de notification lors de la synchronisation des images via le FTP et lors de l’upload évidemment:

FTPix androidFTPix android

Ensuite j’ai ajouté FTPix dans la liste des application lorsqu’on partage une image:

FTPix androidFTPix androidFTPix android

J’ai également résolu les bugs signalé lors de la mini-beta. Par contre mauvaise nouvelle, je vais devoir passer l’appli en 2.1 minimum.

Demain je m’attaque au design général, adapter l’icône à la petite taille de l’écran, gérer les grandes et petites résolutions. Pour ensuite peut être la publier sur le market !

checkthatlater icon 256
Bonjour bonjour,

Cet article est un peu une sorte appel à l’aide. J’ai vraiment envie de développer ce projet mais je manque clairement de temps en ce moment (sans parler de FTPix en mode pause) et j’aimerais bien y mettre un petit coup de boost. Je dois toujours finaliser les extensions chrome et safari, finir le site web, faire une application Android et faire (puisque en l’état il n’y a pas grand chose) l’extension Firefox.

C’est pour cela que je fais appel à la super mega communauté ici présente Wefrag/Nofrag car si possible j’aurais besoin d’une personne pour terminer (ok… faire 90% de) l’extension FireFox. Bon, ça reste du bénévolat puisque le site ne génère pas de revenus… Car ce n’est pas son but premier.

Si des âmes charitables sont intéressées de participer (et pourquoi pas pas uniquement sur l’extension FireFox) faites moi signe ici !  J’en serais vraiment extrêmement reconnaissant.

http://www.checkthatlater.com