Adieu PhoneGap : Bonjour Cordova !

PhoneGap, le framework crossplatform HTML/CSS racheté récemment par la société Adobe, connait un nouveau bouleversement de fond en intégrant la fondation Apache sous le nom  Cordova.

Logo Cordova

 

Corodova (ex-Phonegap) est l’un de ses outils dit « magique » car capable, à partir d’un même bout de code, de pouvoir générer des applications Android, iOS, Windows ou bien encore Blackberry. C’est ce que l’on nommera alors une application « cross-platform« . Le développeur utilise du code HTML et surtout des librairies Javascript et CSS qui seront en mesure de reproduire une interface graphique proche de l’environnement natif. L’application web est alors encapsulée dans une application native afin de pouvoir être exécuter par le moteur de rendu HTML (ou webkit) embarqué sur le système d’exploitation cible.

Cordova, distribuée sous licence Open Source Apache,  est l’une des solutions les plus connues pour la production d’application de ce type (à l’instar de Titanium).

Fonctionnement de Phonegap Cordova…

La grande question, avant même de savoir quel outil cross-platform utiliser, est d’identifier les fonctionnalités que vous avez à développer dans votre application. En fonction des fonctionnalités, de la complexité de votre application vous envisagerez d’élaborer votre application en code natif (un code par système d’exploitation cible, permettant une meilleure intégration, une plus grande rapidité d’exécution, une meilleure expérience utilisateur) ou en « web crossplatform » (HTML/JS/CSS) (code unifié, coût faible).

Source : Cordova (PhoneGap)

Facebook profite d’une refonte en code natif sous Android

En fin de journée, l’équipe de développeurs de Facebook a publié une mise à jour à destination de son application Android.

android-facebook-nouvelle-interface-en-code-natif-image-1

Il y a quelques mois maintenant, Mark Zuckerberg avait déclaré que l’équipe en charge du développement de l’application Android travaillait sur une refonte de l’application en code natif. Aujourd’hui, ce rêve devient réalité avec la toute dernière mise à jour de l’application qui utilise désormais son propre code natif, au lieu de l’interface HTML5 qui était précédemment présente dans celle-ci.

Dès lors, on retrouve une application bien plus fluide et ergonomique, notamment dans les performances, la refonte et l’apport de nouvelles fonctionnalités dans l’intégralité de son interface. Comme vous pourrez le découvrir, le fil d’actualités  est plus rapide à charger avec son push instantané, les invitations, les messages et les notifications s’ouvrent désormais dans un nouvel onglet, et il est également possible de glisser entre eux très facilement.

Les efforts qui ont été réalisés sur cette dernière mise à jour sont considérables, et si jamais vous rencontrez quelques ralentissements, n’hésitez pas à en nettoyer le cache dans les paramètres du système Android.

Nous l’attendions. Cet été, Facebook avait déployé une mise à jour de l’application iOS (iPhone et iPad), étonnamment les détails de la mise à jour étaient assez légers. En réalité, les changements n’étaient pas vraiment visible, Facebook avait re-écrit toute son application en langage « natif ». Le résultat était bluffant : l’application était devenue très performante dans les chargements. Nous attendions donc que Facebook retravaille l’application Android… c’est chose faite.

Pourquoi Facebook a autant traîné ? En réalité, Facebook ne croyait pas beaucoup au mobile jusqu’à récemment. L’énorme réseau social se concentrait sur le web et faisait évoluer rapidement les fonctionnalités du site : applications, messenger… Sur mobile, Facebook avait opté pour du HTML5 encapsulé dans des applications mobiles. Cela permettait à Facebook de déployer plus facilement des mises à jour et des ajouts de fonctionnalités, sans avoir à pousser une nouvelle version sur les markets d’applications. Les choses ont ensuite changé, Facebook a compris que le mobile était un enjeu crucial : ils ont racheté Instagram pour 1 milliard de dollars et ont lancé ensuite de nombreuses applications, dont Facebook Messenger. Enfin, il se pourrait que la firme de Mark Zuckerberg mette la main sur What Apps, spécialiste de la messagerie instantanée sur mobile.

En quelques mots, voici les principales nouveautés :

  • Le fil d’actualité et votre journal s’ouvrent plus rapidement
  • Les photos s’ouvrent d’un simple contact du doigt pour vous permettre d’indiquer que vous aimez et de commenter
  • La barre Nouvelles actualités vous permet d’afficher plus d’actualités sans actualiser l’écran

Néanmoins, vous aurez compris que la nouveauté réside dans les performances. L’application se charge désormais bien plus rapidement… Qu’en pensez-vous ?

Toujours disponible en téléchargement gratuit sur Google Play :

Dev tips #1

IntelliJ passe la douzième

Si pour développer vous utilisez un IDE, Eclipse est très certainement votre choix, car il possède un plugin officiel de Google (ADT). Mais il y a également un concurrent : IntelliJ IDEA ! Cette semaine la douzième version a été mise en ligne et apporte une multitude de nouveautés : meilleure gestion du multicoeurs, support du JDK 8…
La fonctionnalité qui nous intéresse plus particulièrement est la présence d’un outil de création d’interfaces Android, qui offre des fonctionnalités similaires à ce que l’on retrouve sur Eclipse avec ADT.

Pour le télécharger, deux choix : la Community Edition (gratuite et opensource) ou Ultimate (payante mais avec des fonctionnalités supplémentaires).

Améliorer les performances

Si vous êtes un « twittos », vous connaissez probablement le nouveau client Twitter Falcon Pro. L’application se démarque par son double sliding-menu, mais aussi une réactivité hallucinante de l’interface. Malgré les excellentes performances, Romain Guy s’est rendu compte de quelques petits problèmes et en profite pour montrer simplement comment une application peut être améliorée via les différents outils du SDK. L’article est très intéressant et mérite d’être lu par tous les développeurs.

Afin de vous entrainer à éviter l’effet d’overdraw (redessiner plusieurs fois un composant inutilement), Romain Guy propose un projet d’exemple.

Checklist du Google Play

Aujourd’hui, être présent sur le Google Play est une nécessité pour être visible sur Android. Il ne faut absolument pas négliger la présentation ou même de petits détails. Cette liste de 8 points vous permet de vérifier que tout est prêt afin que votre application soit la plus attractive possible.

Communautés Google+

Depuis cette semaine, on retrouve sur Google+ une nouvelle fonctionnalité : les Communautés. Il s’agit d’espaces où les utilisateurs peuvent échanger sur des sujets particuliers. Google+ étant fréquenté par les Googlers, mais aussi de nombreux développeurs du monde entier, c’est un excellent endroit pour poser vos questions. Voici quelques communautés :

  • Android Development : la communauté officielle avec notamment une partie « Check out my app! » qui permet de recueillir des avis sur votre application
  • Android Design : comme son nom l’indique, il est ici question de design d’applications, où vous pourrez également demander des avis sur vos apps
  • Développeurs Android francophones : difficile d’avoir un nom plus explicite !527524_388531191216528_1748457099_n-copie1.png

La nouvelle Xperia Tablet S démontée par… Sony

Alors qu’elle vient de sortir au Royaume-Uni, la nouvelle Xperia Tablet S fait parler d’elle pour une autre raison. Son fabricant, Sony, vient de la désosser afin de montrer tous les éléments qui la composent. Sur le blog du constructeur japonais, on peut notamment voir la différence avec les éléments de la Tablet S qui sont plus volumineux.

<

Le site iFixIt fait des émules ! Tout le monde se met au Tear Down, le démontage en français. Ces vidéos sont très prisées des geeks bricoleurs et font donc le buzz sur les sites et blogs hi-tech. Un bon moyen pour les marques de faire parler de leurs produits. Sony a donc pris les devants et a décidé de démonter sa propre tablette. C’est l’ingénieur Inaba Takuya, qui a évidemment travaillé sur la tablette, qui s’y colle.

Inaba Takuya, ingénieur chez Sony, s’amuse à démonter le dernier joujou de la marque nippone, la Xperia Tablet S

Le blog de la marque nippone diffuse ainsi une série d’images de sa tablette entièrement désossée. Une tâche d’autant plus compliquée que la tablette possède des fixations renforcées afin d’en augmenter l’étanchéité. Pour rappel, la Xperia Tablet S est résistante aux « ploufs ». Sony explique ensuite comment ils ont miniaturisé la plupart des éléments (batterie, caméra, mémoire flash, etc.) pour faire gagner quelques millimètres et quelques grammes à sa tablette. Le post du blog conclu sur cette petite phrase : tout le monde se demande évidemment s’il (Inaba Takuya) est capable de tout remettre en place. La réponse est dans la vidéo.

ViewPager sous Android : Comment slider d’un fragment à un autre

Nous revoici pour un nouveau tutoriel, le premier à aborder la notion de Fragment. Les Fragments ont été introduits dans la version Android 3.0 (également utilisable avec des versions antérieures) avec pour objectif de permettre une plus grande flexibilité pour les écrans larges tel que les tablettes tactiles (ce que nous verrons dans un prochain tutoriel). Notre objectif aujourd’hui est simplement de créer un joli effet « slide » entre des pages.

Qu’est-ce qu’un Fragment ?

C’est certainement la question que vous devez vous poser. On peut voir un Fragment comme une « mini-Activity » ou une portion d’une activité qui ne peut pas vivre en dehors d’une Activity. Un des aspects pratiques du Fragment est qu’il peut être facilement réutilisé d’une Activity à l’autre.

Notre projet

Comme d’habitude, je vous invite à créer un projet dédié à ce tutoriel, que j’ai baptisé TutoFragment. Je l’ai volontairement créé pour la version Android 2.2 pour y intégrer le package de compatibilité, puisqu’à la base, les Fragments viennent sont une fonctionnalité de la version 3.0.
Nous allons donc premièrement télécharger la librairie complémentaire. Pour cela, allez dans le SDK Manager en cliquant sur l’icône suivante et télécharger « Android Support ».

sdk_manager

Ajoutons ensuite cette librairie au projet. Pour cela, sélectionnez votre projet sous Eclipse, clic droit/Android tools/Add support library. La librairie s’intègre automatiquement au projet, ce qui nous permet d’utiliser la classe Fragment !

Les fichiers xml

Le layout principal, que j’ai renommé viewpager.xml, se présente de la manière suivante:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.view.ViewPager
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:id="@+id/viewpager">
</android.support.v4.view.ViewPager>

La balise du composant utilisé ici a une syntaxe particulière puisqu’elle fait référence à un composant de la librairie ajoutée précédemment.

Les trois autres layouts seront les pages affichées successivement lors du slide et possèdent un code similaires. Voici le code de page_gauche_layout.xml, je vous laisse créer les deux autres par vous même (page_milieu_layout et page_droite_layout).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        android:text="Page de gauche" />

</LinearLayout>

Le code Java

J’ai renommé la classe principale en FragmentsSliderActivity. Celle-ci dérive de la classe FragmentActivity qui est simplement une Activity permettant de gérer les Fragments. Le code est commenté, je vous laisse regarder.

import java.util.List;
import java.util.Vector;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

public class FragmentsSliderActivity extends FragmentActivity {

	private PagerAdapter mPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.viewpager);

		// Création de la liste de Fragments que fera défiler le PagerAdapter
		List fragments = new Vector();

		// Ajout des Fragments dans la liste
		fragments.add(Fragment.instantiate(this,PageGaucheFragment.class.getName()));
		fragments.add(Fragment.instantiate(this,PageMilieuFragment.class.getName()));
		fragments.add(Fragment.instantiate(this,PageDroiteFragment.class.getName()));

		// Création de l'adapter qui s'occupera de l'affichage de la liste de
		// Fragments
		this.mPagerAdapter = new MyPagerAdapter(super.getSupportFragmentManager(), fragments);

		ViewPager pager = (ViewPager) super.findViewById(R.id.viewpager);
		// Affectation de l'adapter au ViewPager
		pager.setAdapter(this.mPagerAdapter);
	}
}

Pour passer d’une page à une autre, nous avons besoin d’un adapter (à la manière des ListView). L’adapter, appelé MyPagerAdapter dérive de FragmentPagerAdapter. Rien de compliqué, il fonctionne sur le même principe que les Adapters de ListViews.

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyPagerAdapter extends FragmentPagerAdapter {

	private final List fragments;

	//On fournit à l'adapter la liste des fragments à afficher
	public MyPagerAdapter(FragmentManager fm, List fragments) {
		super(fm);
		this.fragments = fragments;
	}

	@Override
	public Fragment getItem(int position) {
		return this.fragments.get(position);
	}

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

Enfin, la classe PageGaucheFragment, qui dérive de la classe Fragment possède des méthodes différentes de la classe Activity.

Ici, nous allons surcharger la méthode onCreateView. Cette méthode retourne un type View, on va donc lui indiquer notre layout par le biais de l’inflater. Les classes PageMilieuFragment et PageDroiteFragment sont quasi-identiques, je vous laisse vous en occuper.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PageGaucheFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.page_gauche_layout, container, false);
	}
}

Rendu final:
page 1page 2page 2

Conclusion

Ainsi se termine notre premier tutoriel sur les Fragments, en espérant que tout soit clair. Vous pouvez trouver le code source ici.

source :tutos-android.com

Nous revoici pour un nouveau tutoriel, le premier à aborder la notion de Fragment. Les Fragments ont été introduits dans la version Android 3.0 (également utilisable avec des versions antérieures) avec pour objectif de permettre une plus grande flexibilité pour les écrans larges tel que les tablettes tactiles (ce que nous verrons dans un prochain tutoriel). Notre objectif aujourd’hui est simplement de créer un joli effet « slide » entre des pages.

Qu’est-ce qu’un Fragment ?

C’est certainement la question que vous devez vous poser. On peut voir un Fragment comme une « mini-Activity » ou une portion d’une activité qui ne peut pas vivre en dehors d’une Activity. Un des aspects pratiques du Fragment est qu’il peut être facilement réutilisé d’une Activity à l’autre.

Notre projet

Comme d’habitude, je vous invite à créer un projet dédié à ce tutoriel, que j’ai baptisé TutoFragment. Je l’ai volontairement créé pour la version Android 2.2 pour y intégrer le package de compatibilité, puisqu’à la base, les Fragments viennent sont une fonctionnalité de la version 3.0.
Nous allons donc premièrement télécharger la librairie complémentaire. Pour cela, allez dans le SDK Manager en cliquant sur l’icône suivante et télécharger « Android Support ».

sdk_manager

Ajoutons ensuite cette librairie au projet. Pour cela, sélectionnez votre projet sous Eclipse, clic droit/Android tools/Add support library. La librairie s’intègre automatiquement au projet, ce qui nous permet d’utiliser la classe Fragment !

Les fichiers xml

Le layout principal, que j’ai renommé viewpager.xml, se présente de la manière suivante:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.view.ViewPager
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:id="@+id/viewpager">
</android.support.v4.view.ViewPager>

La balise du composant utilisé ici a une syntaxe particulière puisqu’elle fait référence à un composant de la librairie ajoutée précédemment.

Les trois autres layouts seront les pages affichées successivement lors du slide et possèdent un code similaires. Voici le code de page_gauche_layout.xml, je vous laisse créer les deux autres par vous même (page_milieu_layout et page_droite_layout).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        android:text="Page de gauche" />

</LinearLayout>

Le code Java

J’ai renommé la classe principale en FragmentsSliderActivity. Celle-ci dérive de la classe FragmentActivity qui est simplement une Activity permettant de gérer les Fragments. Le code est commenté, je vous laisse regarder.

import java.util.List;
import java.util.Vector;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

public class FragmentsSliderActivity extends FragmentActivity {

	private PagerAdapter mPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.viewpager);

		// Création de la liste de Fragments que fera défiler le PagerAdapter
		List fragments = new Vector();

		// Ajout des Fragments dans la liste
		fragments.add(Fragment.instantiate(this,PageGaucheFragment.class.getName()));
		fragments.add(Fragment.instantiate(this,PageMilieuFragment.class.getName()));
		fragments.add(Fragment.instantiate(this,PageDroiteFragment.class.getName()));

		// Création de l'adapter qui s'occupera de l'affichage de la liste de
		// Fragments
		this.mPagerAdapter = new MyPagerAdapter(super.getSupportFragmentManager(), fragments);

		ViewPager pager = (ViewPager) super.findViewById(R.id.viewpager);
		// Affectation de l'adapter au ViewPager
		pager.setAdapter(this.mPagerAdapter);
	}
}

Pour passer d’une page à une autre, nous avons besoin d’un adapter (à la manière des ListView). L’adapter, appelé MyPagerAdapter dérive de FragmentPagerAdapter. Rien de compliqué, il fonctionne sur le même principe que les Adapters de ListViews.

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyPagerAdapter extends FragmentPagerAdapter {

	private final List fragments;

	//On fournit à l'adapter la liste des fragments à afficher
	public MyPagerAdapter(FragmentManager fm, List fragments) {
		super(fm);
		this.fragments = fragments;
	}

	@Override
	public Fragment getItem(int position) {
		return this.fragments.get(position);
	}

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

Enfin, la classe PageGaucheFragment, qui dérive de la classe Fragment possède des méthodes différentes de la classe Activity.

Ici, nous allons surcharger la méthode onCreateView. Cette méthode retourne un type View, on va donc lui indiquer notre layout par le biais de l’inflater. Les classes PageMilieuFragment et PageDroiteFragment sont quasi-identiques, je vous laisse vous en occuper.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PageGaucheFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.page_gauche_layout, container, false);
	}
}

Rendu final:
page 1page 2page 2