Catégories
Développement Android

Optimisation de la performance dans les listes déroulantes ( filtrage des listes )

Nous allons dans ce tutoriel voir comment optimiser une liste déroulante afin d’en améliorer la performance et nous verrons comment ajouter un filtre sur une liste qui permettra à l’utilisateur de rechercher l’élément qu’il souhaite afficher. 

  Un exemple de liste avec filtre :

 


Optimisation de la liste déroulante ou le recyclage des items :

 

Un solution d’optimisation d’une liste déroulante comme celle-ci est le recyclage des éléments de la liste.

Même si la liste contient plusieurs éléments, elle ne peut parfois pas tous les afficher si on ne scroll pas, les éléments les plus utiles sont ceux qui sont visibles !

Le principe est simple, à chaque fois qu’une ligne sort de l’écran, nous la recyclons et l’affectons au prochain élément de la liste.

 

Un schéma vaut parfois mieux que des explications ! Voilà qui devrait vous aider à comprendre le principe du recyclage !

 

 

Nous allons maintenant voir comment modéliser tout ça au niveau de nos classes,

 


Modélisation :

 

 

 

La liste déroulante est obtenue grâce à la classe ListView.

Les données de la liste et le layout à utiliser pour les éléments de la liste sont définies par l’adapter.

Pour notre exemple, nous allons définir un CustomAdapter qui va hériter d’un ArrayAdapter ( il en existe d’autres mais nous utiliserons celui-là ).

A chaque ligne de la liste, une méthode getView() sera appelée. A chaque appel, une vue composée de deux vues ( ImageView et Textview ) sera générée.

Toutefois la création d’un objet est coûteux en performance, il faudra donc redéfinir cette méthode pour optimiser la liste ! Notre astuce consistera donc à garder en mémoire la vue sortante et de la recycler comme l’illustre le schéma plus haut.

La vue qu’on souhaite recycler est envoyé en paramètre de la méthode getView en tant que convertView.

Il suffit juste de remplacer son contenu avec le nouveau. On éviter ainsi de créer une nouvelle vue. Un test de nullité doit être effectué sur convertView car ce dernier peut être null.

L’utilisation de la classe static ViewHolder va nous apporter une amélioration supplémentaire. En effet, même si les vues sont recyclés, il faut tout de même récupérer chaque élément de la vue ( ImageView et TextView ) avec la méthode findViewById. L’appel à cette méthode est très couteux en performance. Mais grâce à ViewHolder, chaque vue sera référenciée avec la méthode setTag. On peut donc récupérer les vues des éléments recyclées avec la méthode getTag de la classe ViewHolder, on n’a donc pas recours à la méthode findViewById !

Pour pouvoir filtrer la liste, nous alloons mettre un listener sur notre EditText. L’adapter sera notifié à chaque changement de contenu de l’EditText, la méthode filter() de l’adapter sera appelée.

Bon assez parlé, maintenant place à l’implémentation de tout ça !

 

 

 Implémentation :

 

Le main.xml

c’est ici qu’on déclare nos vues

main.xml
<EditText    android:id="@+id/filtre"    android:layout_width="fill_parent"    android:layout_height="wrap_content"/>      <ListView    android:id="@+id/list"    android:layout_width="fill_parent"    android:layout_height="wrap_content" />

 

Le listitem.xml

on définit les vues contenues dans un élément de la liste

Listitem.xml
<ImageView    android:id="@+id/icon"    android:layout_width="50px"    android:layout_height="50px"    android:layout_marginLeft="4px"    android:layout_marginRight="10px"    android:layout_marginTop="4px" >    </ImageView>        <TextView    android:id="@+id/nom" android:gravity="center"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:textSize="20px" >    </TextView>

 

L’activité principale

 C’est ici que toutes les classes dont nous avons besoin seronts instanciées

Activité principale
adapter = new CustomAdapter(this, Listnoms);    listView = (ListView) findViewById(R.id.list);    listView.setAdapter(adapter);     listView.setTextFilterEnabled(true);      EditText filterEditText = (EditText) findViewById(R.id.filtre);    filterEditText.addTextChangedListener(new TextWatcher() {    @Override    public void onTextChanged(CharSequence s, int start, int before,    int count) {     }    @Override    public void beforeTextChanged(CharSequence s, int start, int count,    int after) {    }    @Override    public void afterTextChanged(Editable s) {    adapter.getFilter().filter(s.toString());     }    });

 

 

Le customAdapter

Cette classe contient toutes les méthodes nécessaires pour le recyclage de vue, les méthodes de ViewHolder qui évite qu’on crée un nouvel élément à chaque fois qu’on navigue dans la liste et le filtre.

CustomAdapter
private final Activity context;    List<String> arrayList;     List<String> listeNom;      static class ViewHolder {    public TextView text;    public ImageView image;    }      public CustomAdapter(Activity context, List<String> listeNom) {    super(context, R.layout.listitem, listeNom);    this.context = context;    this.listeNom = listeNom;    this.arrayList= listeNom;    }      @Override    public View getView(int position, View convertView, ViewGroup parent) {    View rowView = convertView;    if (rowView == null) {    LayoutInflater inflater = context.getLayoutInflater();    rowView = inflater.inflate(R.layout.listitem, null);    ViewHolder viewHolder = new ViewHolder();    viewHolder.text = (TextView) rowView.findViewById(R.id.nom);    viewHolder.image = (ImageView) rowView    .findViewById(R.id.icon);    rowView.setTag(viewHolder);    }      ViewHolder holder = (ViewHolder) rowView.getTag();    String s = listeNom.get(position);    holder.text.setText(s);    holder.image.setImageResource(R.drawable.ic_launcher);    return rowView;    }    @Override    public int getCount() {    return listeNom.size();    }        @Override    public String getItem(int position) {    return listeNom.get(position);    }      @Override    public Filter getFilter() {    return new Filter() {      @SuppressWarnings("unchecked")    @Override    protected void publishResults(CharSequence constraint, FilterResults results) {    listeNom = (ArrayList<String>) results.values;    CustomAdapter.this.notifyDataSetChanged();    }    @Override    protected FilterResults performFiltering(CharSequence constraint) {    ArrayList<String> filteredResults = getFilteredResults(constraint);    FilterResults results = new FilterResults();    results.values = filteredResults;    return results;    }    private ArrayList<String> getFilteredResults(CharSequence constraint) {    ArrayList<String> filteredTeams = new ArrayList<String>();    for(int i=0;i< arrayList.size();i++){    if(arrayList.get(i).toLowerCase().startsWith(constraint.toString().toLowerCase())){    filteredTeams.add(arrayList.get(i));    }    }    return filteredTeams;    }    };    }

 

Et c’est ainsi que s’achève notre tuto sur l’optimisation de liste ! Bonne implémentation à tous et n’oubliez pas de VOTER et de PARTAGER cet article! 

Catégories
Développement Android

Utilisation du Geocoder Android

Google Places LogoGeocoding, Google places API, Parsing Json, http request

Le but de ce tuto est de voir le parsing d’un fichier JSON récupéré à partir d’une requette sur un serveur. Mais nous allons également profiter de ce tuto pour voir rapidement l’API de google, places qui permet d’obtenir différents types de lieux (bar, banque…) autour d’un point donnés. Profitons également de ce tuto pour utiliser la classe geocoder afin de transformer une adresse en un point (lat,long).

Utiliser Google API

 
Obtenir une clé pour le service de google places
https://code.google.com/apis/console/b/0/

Dans l’onglet  API Access  créer un nouveau compte puis récupérer l’API Key.
Dans l’onglet services, activer Places API.

Pour pouvoir récupérer les lieux dans les 500m aux environs d’un point (lat/long), il faut appeler une url de ce type en remplaçant le key par le votre
https://maps.googleapis.com/maps/api/place/search/json?location=48.9344042,2.3535862&radius=500&types=food&sensor=false&key=METTRE ICI VOTRE KEY

A la racine du JSON renvoyé se trouve results. Il va contenir une liste de lieux. A chaque lieu est associé un ensemble d’attributs (id, name…)

 

Création de la vue

Dans le cadre de ce tutoriel nous allons nous contenter de demander à un utilisateur de rentrer une adresse, de sélectionner un type de lieu puis de les afficher à l’écran.
 
Créons le layout :
 
<?xmlversion="1.0"encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  >    <EditText android:id="@+id/addr"  android:layout_width="fill_parent"  android:layout_height="wrap_content"/>   <RadioGroup  android:id="@+id/rg1"  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:orientation="horizontal">  <RadioButton  android:id="@+id/option1"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="bank"/>  <RadioButton  android:id="@+id/option2"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="bar"/>  <RadioButton  android:id="@+id/option3"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="restaurant"/> </RadioGroup>   <TextView android:id="@+id/maTextView" android:layout_marginTop="25px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center"/>   </LinearLayout>

 

Redéfinition de la méthode Oncreate

Rédéfinition de la méthode OnCreate
publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); RadioGroup rgroup = (RadioGroup) findViewById(R.id.rg1);      //On écoute un changement d'évènement sur les boutons radio rgroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { publicvoid onCheckedChanged(RadioGroup group, int checkedId) {    try { //on créé une instance degeocoder Geocoder gc = new Geocoder(JsonParsingActivity.this); EditText adress = (EditText) findViewById(R.id.addr); List<Address> foundAdresses; /*On récupère l'adresse saisie par l'utilisateur Pour ceuxquiontsuiviletutodegéolocalisation,ilpeutetreintéressantdevérifier qu'une adresse a étésaisie,sice n'est pas faitalorsprendrecommeadressela position actuellede l'utilisateur */ String addressInput = adress.getText().toString();  //On récupèreuneliste d'adresse grace à laclassegeocoder foundAdresses = gc.getFromLocationName(addressInput, 5);  //On ne s'interesse qu'à lapremièreadressedelaliste,ilestcependant possible d'afficher à l'utilisateur //unelistedéroulante d'adresse possible pour qu'il sélectionnelabonneadresse Address x = foundAdresses.get(0); //on récupèrela latitude et longitude corréspondante à l'adresse finaldouble lat = x.getLatitude(); finaldouble lng = x.getLongitude();    //on récupère le bouton radio sélectionné RadioButton rb = (RadioButton) findViewById(checkedId); //on demande à gogoleleslieuxavoisinantescorrespondantau type sélectionné par l'utilisateur String places = getPlaces(rb.getText().toString(),lat,lng); StringBuilder builder = new StringBuilder(); try {   //On parse leJsonrenvoyé JSONObject jsonObj = new JSONObject(places);  //l'attribut results estuneliste d'objet jsondonc on lerécupèreavec getJsonArray JSONArray results = jsonObj.getJSONArray("results");   for (int i = 0; i < results.length(); i++) { //Pour chaque jsonObjet du jsonArray results on récupèrelavaleurde l'attribut name builder.append(results.getJSONObject(i).getString("name").toString()).append("\n"); } } catch (Exception e) { e.printStackTrace(); }   ((TextView)findViewById(R.id.maTextView)).setText(builder.toString());  } catch (IOException e1) { // TODO Auto-generated catch block e1.printStackTrace(); }  }  });    }

 

Appel de l’API places de google

API Google
//google limite le nombrederequettes à 1000 tous les 24h pour un api key donné public String getPlaces(String type,double lat,double lng) {   //Url pour la requête String url = "https://maps.googleapis.com/maps/api/place/search/json?location="+lat+","+lng+"&radius=500&types="+type+"&sensor=false&key=AIzaSyA5J_JPOa5jtuXaOgbTeHqmNzh61u54hSs";   StringBuilder builder = new StringBuilder(); HttpClient client = new DefaultHttpClient(); HttpGet httpGet = new HttpGet(url); try { HttpResponse response = client.execute(httpGet); StatusLine statusLine = response.getStatusLine(); int statusCode = statusLine.getStatusCode(); //200 pour dire que la requette s'est bien déroulée if (statusCode == 200) { HttpEntity entity = response.getEntity(); InputStream content = entity.getContent(); BufferedReader reader = new BufferedReader( new InputStreamReader(content)); String line; while ((line = reader.readLine()) != null) { builder.append(line); } } else { Log.i(JsonParsingActivity.class.toString(), "Erreur de chargement"); } } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return builder.toString(); }

 

Catégories
Développement Android

Tutoriel google maps de géolocalisation en temps réel

Vous-êtes vous déjà demander comment faire pour afficher sa position en temps réel via un GPS sur son smartphone ? Et bien cet article vous l’expliquera pas à pas !

Attention, ce tuto s’adresse aux gens qui s’y connaissent déjà en programmation android et qui possède certaines bases !

Nous allons développer une application de géolocalisation via Google maps ( rien de très original ). La particularité de notre appli sera de pouvoir savoir à quel adresse on se trouve en temps réel grâce à un simple clic sur l’icône indiquant notre position.

 

Pré-requis pour cette application :

  • Connaissance en programmation orientée objet ( POO )
  • Connaissance du cycle de vie d’une activity
  • Récupérer un apiKey pour l’utilisation du google map ( voir le tuto Obtention d’une clé pour l’api google map )


<p >Rappel de la commande :

keytool -list -alias androiddebugkey \

<p >-keystore <chemin_du_debug_keystore>debug.keystore \

-storepass android -keypass android

 

 Dans le manifest.xml, il vous faudra ajouter les permissions suivantes :

 

– Les permissions pour l’accès à internet : <uses-permission android:name= »android.permission.INTERNET » />

 – Access_fine_location : <uses-permission android:name= »android.permission.ACCESS_FINE_LOCATION » />

– Access-coarse_location : <uses-permission android:name= »android.permission.ACCESS_COARSE_LOCATION » />

– Il faut également ajouter la librairie de google map : <uses-library android:name= »com.google.android.maps » />


Dans votre layout/ main.xml, ajoutez le layout suivant :

main.xml
<com.google.android.maps.MapView     android:id="@+id/mapview"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:apiKey="Votre cle google map" /> 


Modélisation :

 

La classe que nous devons créée héritera de la classe abstraite MapActivity pour pouvoir afficher la carte.

On implémentera également LocationListener qui permettra de mettre à jour la carte lorsqu’une nouvelle position est détectée.

Une instance de la classe LocationManager nous permettra d’accéder aux services de localisation.

Si on souhaite également afficher une boussole et un rond bleu autour de notre point, on devra utiliser une instance de la carte MyLocationOverlay.

 

voici un diagramme de classe présentant les interactions entre les classes :

 

 

Implémentation :

 Voici donc le code de notre activité principale !

Activité principale
public class GmapActivity extends MapActivity implements LocationListener{        private MapController mapController;    private MapView mapView;    private LocationManager locationManager;    MyLocationOverlay myLocationOverlay;   private MyOverlays itemizedoverlay;       public void onCreate(Bundle bundle) {    super.onCreate(bundle);    setContentView(R.layout.main);       mapView = (MapView) findViewById(R.id.mapview);    mapView.setBuiltInZoomControls(true);    mapView.setSatellite(true);         mapController = mapView.getController();     mapController.setZoom(18);         locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE);        locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 5000, 10, this);         myLocationOverlay = new MyLocationOverlay(this, mapView);    mapView.getOverlays().add(myLocationOverlay);        myLocationOverlay.runOnFirstFix(new Runnable() {    public void run() {    mapView.getController().animateTo(    myLocationOverlay.getMyLocation());    }    });        Drawable drawable = this.getResources().getDrawable(R.drawable.ic_launcher);    itemizedoverlay = new MyOverlays(drawable, mapView);    afficherMarker();    }         @Override    protected void onResume() {    super.onResume();    myLocationOverlay.enableMyLocation();    myLocationOverlay.enableCompass();    }        @Override    protected void onPause() {    super.onResume();    myLocationOverlay.disableMyLocation();    myLocationOverlay.disableCompass();    }       @Override    protected boolean isRouteDisplayed() {     return false;    }         @Override     public void onLocationChanged(Location location) {     int lat = (int) (location.getLatitude() * 1E6);     int lng = (int) (location.getLongitude() * 1E6);     GeoPoint point = new GeoPoint(lat, lng);         mapController.animateTo(point);    mapController.setCenter(point);     afficherMarker();    }        @Override    public void onProviderDisabled(String provider) {    }         @Override     public void onProviderEnabled(String provider) {     }         @Override     public void onStatusChanged(String provider, int status, Bundle extras) {     }     private void afficherMarker() {    GeoPoint p = mapView.getMapCenter();     Geocoder gcd = new Geocoder(GmapActivity.this, Locale.getDefault());    String addr ="";    List<Address> addresses;    try {    addresses = gcd.getFromLocation( (p.getLatitudeE6() / 1E6) , (p.getLongitudeE6() / 1E6) ,1);        if (addresses.size() > 0 && addresses != null) {    addr = addresses.get(0).getAddressLine(0);     OverlayItem overlayitem = new OverlayItem(p, "Adress",addr);    itemizedoverlay.addOverlay(overlayitem);    mapView.getOverlays().add(itemizedoverlay);    }    } catch (IOException e) {    e.printStackTrace();    }     }    }

 

Voici maintenant la classe MyOverLays qui hérite de la classe abstraite ItemizedOverlay<OverlayItem>. Cette classe permet de gérer l’affichage des overlays sur la carte ( curseur, etc … )

Deux méthodes abstraites ( createItem et size ) de la classe Itemized<OverlayItem> ainsi que la méthode onTap ( détection du clic sur l’overlay ) devront être redéfinies.

 

Modélisation de ces classes :

 

 

 

 

Implémentation :

 

public class MyOverlays extends ItemizedOverlay<OverlayItem> {    private OverlayItem overlays[] = new OverlayItem[1];     //private ArrayList<OverlayItem> m_overlays = new ArrayList<OverlayItem>();    private Context c;        public MyOverlays(Drawable defaultMarker, MapView mapView) {    super(boundCenterBottom(defaultMarker));    c = mapView.getContext();    }        public void addOverlay(OverlayItem overlay) {    overlays[0] = overlay;     populate();    }        @Override    protected OverlayItem createItem(int i) {    return overlays[i];    }        @Override    public int size() {    return overlays.length;    }        @Override    protected boolean onTap(int index) {    OverlayItem overlayItem = overlays[index];    Toast.makeText(c,overlayItem.getSnippet() , Toast.LENGTH_LONG)    .show();    return true;    };       }

 

Ainsi s’achève ce tuto sur la géolocalisation sur google maps ! Bonne implémentation à vous !

Il est possible de récupérer le zip du projet associé à ce tuto sur demande ! ( Postez des commentaires 😉 )

Catégories
Développement iPhone OS

Comment récupérer des coordonnées géographiques (Latitude et longitude) sur iPhone/iPad

iOS Geolocation

 Dans ce article nous allons voir comment obtenir de façon programmatique les coordonnées géographique d’un lieu depuis votre application iOS. La localisation est en enjeu important au sein d’une application. Elle a fait le succès de start-up comme Foursquare. Une bonne géolocalisation fait toute la différence, l’expérience utilisateur en est directement impactée.

 

 

Créer un nouveau projet Xcode:

Ouvrir Xcode, Créer un nouveau projet en choisissant View Base application. Nommons cette application “GPS_Location”.

Xcode Welcome page

Xcode View Based Application

Xcode crée automatiquement la structure du projet, et charge toutes les librairies nécessaires au fonctionnement de base d’une application de type View. Vous pourrez vérifier qu’une classe ViewController a bien été créée. De plus dans le dossier Resources des fichiers portant l’extension xib ont été générés.

Importer la classe de géolocalisation

Il suffit pour cela d’ajouter au projet le Core Location framework (CoreLocation.framework). Pour ce faire, il vous faut modifier le fichier GPS_LocationViewController.h  et ajouter :

GPS_LocationViewController.h
1 2 3 4 5 6 7 8 
#import <UIKit/UIKit.h> #import <CoreLocation/CoreLocation.h> @interface GPS_LocationViewController : UIViewController { CLLocationManager *locationManager; } @property (nonatomic, retain) CLLocationManager *locationManager; -(IBAction)Button:(id)sender; @end

 

Utiliser l’interface Builder

Faites un double-clique sur le fichier GPS_LocationViewController.xib pour l’ouvrir avec l’interface Builder. On va faire simple ici. On va juste afficher un bouton, qui au clic nous renverra les coordonnées géographique de la position courante.

Dans la liste à gauche (ou droite si vous l’avez déplacée 🙂 de l’interface builder, Faites donc un glisser-déposer d’un bouton (Round Rect Button) et placez le sur la page :

Xcode Bouton


Modifier le fichier GPS_LocationViewController.m

C’est le coeur même de l’application. C’est d’ici que nous allons gérer le comportement du controlleur associé au bouton. Modifier donc ce fichier et ajouter simplement :

GPS_LocationViewController.m
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 
#import "Current_LatLongViewController.h" @implementation Current_LatLongViewController @synthesize locationManager; - (void)dealloc { [super dealloc]; } - (void)didReceiveMemoryWarning { // Releases the view if it doesn’t have a superview. [super didReceiveMemoryWarning]; // Release any cached data, images, etc that aren’t in use. } #pragma mark – View lifecycle - (void)viewDidUnload { [super viewDidUnload]; } -(IBAction)Button:(id)sender { locationManager = [[CLLocationManager alloc] init]; locationManager.delegate = self; locationManager.desiredAccuracy = kCLLocationAccuracyBest; locationManager.distanceFilter = kCLDistanceFilterNone; [locationManager startUpdatingLocation]; CLLocation *location = [locationManager location]; // Configure the new event with information from the location CLLocationCoordinate2D coordinate = [location coordinate]; NSString *latitude = [NSString stringWithFormat:@"%f", coordinate.latitude]; NSString *longitude = [NSString stringWithFormat:@"%f", coordinate.longitude]; NSLog(@"dLatitude : %@", latitude); NSLog(@"dLongitude : %@",longitude); UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 40, 250, 50)]; UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(50, 80, 200, 50)]; UILabel *myLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(50, 120, 200, 100)]; myLabel.textColor = [UIColor blackColor]; myLabel1.textColor = [UIColor blackColor]; label.backgroundColor = [UIColor clearColor]; myLabel.backgroundColor = [UIColor clearColor]; myLabel1.backgroundColor = [UIColor clearColor]; [myLabel setText:latitude]; [myLabel1 setText:longitude]; label.text = @"Current Latitude And Longitude"; [self.view addSubview:label]; [self.view addSubview:myLabel]; [self.view addSubview:myLabel1]; } - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { // Return YES for supported orientations return (interfaceOrientation == UIInterfaceOrientationPortrait); } @end

 

En compilant vous devriez connaitre rapidement votre localisation actuelle. Au fait, vous êtes où là ? 🙂

Catégories
Développement Android

Optimiser son site mobile pour les téléphones Android

Android pour le Web MobileIl est important, en développant un site mobile, de tenir compte de l’expérience utilisateur. Votre application se démarquera toujours de celles des autres grâce à ce petit truc en plus que ressent le mobinaute en utilisant votre application. Vous souhaitez passer de…rien du tout, au top 10 ? Alors pensez à vos utilisateurs. Cette idée s’applique au développement d’applications en générale, mais dans cet article nous nous limiterons au développement de sites mobiles, en étudiant ce que préconise Google en la matière.

Tous les smartphones actuels, et Android en particulier, parlent couramment le HTML, le CSS et bien sûr, le Javascript. Cependant, et à la différence de l’iPhone, la résolution d’écran d’un smartphone est variable d’un constructeur à l’autre. Rappelons que Google ne propose d’un OS, et non le smartphone tout en entier. Donc, il faut pouvoir gérer ces nombreuses résolutions d’écran, qui souvent posent des soucis d’esthétiques.

Deux facteurs fondamentaux sont a étudier de près quand on souhaite optimiser sa page web pour Android :

  • La taille de l’écran et l’échelle de la page
  • La densité de l’écran

Gérer la taille de l’écran et l’échelle de la page avec la métadonée viewport

Par défaut, lorsque le navigateur d’Android charge une page Web, elle est chargé en mode « Vue d’ensemble » (Overview mode), qui demande bien souvent de cliquer sur le bouton de zoomage pour mieux afficher ce que l’on souhaite regarder. Il est très facile surcharger ce comportement par défaut en précisant la taille initiale de la page, tout en offrant la possibilité ou non de zoomage.

Pour ce faire, on utilise une métadonnée nommée viewport. Le viewport en lui-même est l’espace dans lequel votre page web est dessinée (canvas), c’est à dire le nombre de pixels de la page web. Il est toujours supérieur ou égal à la taille de l’écran lui-même. Cependant, la partie visible du viewport est toujours égale à la taille de l’écran. Ce qui fait que pour un viewport supérieur à la taille de l’écran on ait un affichage peu visible, nécessitant un zoom de la page.

Ce problème se résout facilement en décidant que la taille du viewport soit exactement égale à la taille de l’écran du device (width=device-width). Dans l’entête HTML il suffit d’écrire :

Metadonnée viewport
1 2 3 4 
<head>  <title>Une page optimisée pour Android</title>  <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>

Le paramètre user-scalable=no précise qu’il n’est pas possible de zoomer ou même de dézoomer. la métadonnée viewport peut prendre plusieurs paramètres, chacun étant séparé par une virgule.

Utilisation avancée du viewport
1 2 3 4 5 6 7 8 9 10 11 
<meta name="viewport"  content="  height = [valeur_en_pixel | device-height] ,  width = [valeur_en_pixel | device-width ] ,  initial-scale = valeur_numérique_float ,  minimum-scale = valeur_numérique_float ,  maximum-scale = valeur_numérique_float ,  user-scalable = [yes | no] ,  target-densitydpi = [dpi_value | device-dpi |  high-dpi | medium-dpi | low-dpi]  " />

Il en résulte un affichage automatique de la page, fonction du viewport. Ci-dessous, le résultat de l’affichage d’une image pour des d’écrans différentes, grande (gauche) et petite (droite) :

Android viewport

Il dans ce cas important de mettre l’échelle de l’écran à 1, ce qui permet un affichage direct du contenu de la page. On aura donc finalement :

Utilisation de la metadonnée viewport
1 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

valeur_en_pixel

Gérer la densité de l’écran

L’OS Android gère trois densités d’écran différentes en dpi (dots per inch, point par pouce en français), fonctions du device utilisé :

  • ldpi
  • mdpi
  • hdpi

Par défaut, le navigateur Android utilise la densité mdpi pour afficher une page web. Ainsi, si l’on essai d’afficher une image basse résolution, sur un smartphone de densité mdpi ou hdpi, on aura un affichage semblable au dessin de gauche, contre celui de droite pour une optimisation de l’affichage :

Android densité

Pour optimiser sa page, en fonction de la densité ciblée, on utilise des propriétés CSS particulières appelées media queries:

Optimisation en fonction de la densité
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
#contenu {  background:url(medium-density-image.png); }   @media screen and (-webkit-device-pixel-ratio: 1.5) {  /* CSS optimisé pour un affichage hdpi */  #contenu {  background:url(high-density-image.png);  } }   @media screen and (-webkit-device-pixel-ratio: 0.75) {  /* CSS optimisé pour un affichage ldpi */  #contenu {  background:url(low-density-image.png);  } }

 

On peut également utiliser la métadonnée viewport, pour un affichage automatique fonction de la densité du device :

Optimisation de la densité en HTML
1 
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

 

Pour en savoir plus :

Catégories
Développement multiplateforme

Titanium – Créer un tableview avec rajout des events !

Logo TitaniumNous allons voir aujourd’hui comment créer un tableview dans lequel le clic sur un item déclenche une action ( Event ).

Commençons par le commencement, c’est-à-dire, créons notre window :

var win = Titanium.UI.createWindow();

 

Un tableview affiche des données, il faut donc créer ces données, nous allons créer un array contenant des items pour notre tableview.

 On appellera cet array « data », chaque item aura un titre et une image, ici, j’ai pris une image d’un des héros phare, boule de chewing-gum de Nintendo, Kirby !

var data = [
{ title: « kirby ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
{ title: « kirby 2 ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
{ title: « kirby 3 ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
];

L’attribut leftImage place automatiquement l’image à gauche de l’item, rightImage le place à droite.

Ceci étant fait, on peut maintenant créer notre tableview, mais avant, nous allons créer le header et le footer du tableview, pour que ça soit plus classe 😉

 

Voilà pour le header :

 
var headerLabel = Ti.UI.createLabel({
  color: »black »,
  font:{ fontSize: 16, fontWeight: »bold » }, // le style des caractères, la police
  text: »Kirby en folie ! », // le texte de notre header qui est très philosophique comme vous le constatez 😛
  textAlign: »center », // l’alignement
  height:35, // la hauteur …
  width:320 … et la longueur !
});

 

Maintenant le footer :

 

var footerLabel = Ti.UI.createLabel({
color: »black »,
font:{ fontSize:10 },
text: »[attention ces données sont protégées par copyright !] »,
textAlign: »center »,
height:25,
width:320
});

 

Il ne reste plus qu’à créer le tableview !

 

var table = Ti.UI.createTableView({
backgroundColor: »white »,
data: data,  //les données à afficher, donc data
headerView:headerLabel, //le header …
footerView:footerLabel,   //… et le footer !
top:10,
width:320
});

 

On associe maintnant un EventListener de type click sur note tableview, nous allons créer une alertDialog qui affiche le titre de l’item sur lequel on aura cliqué tout simplement !

 

table.addEventListener(‘click’, function(e))   //l’évènement se déclenchera au clic de l’utilisateur sur l’item

{

var alertDialog = Titanium.UI.createAlertDialog({
title: ‘Titre de l\’item’,
message: e.row.title,   //pour accéder à l’attribut « title » de l’item, on fait e.row.title, pour avoir l’url de l’image on aurait fait e.row.leftImage
buttonNames: [‘Valider’,’Annuler’]
});
alertDialog.show(); //on affiche l’alerte

});

 

De cette manière, on peut par exemple, au clic sur l’item, être renvoyé à une autre page, lire une video, et j’en passe !

 

Et maintenant le « Finish him » !

On ajoute la table ainsi créée à la fenêtre !

win.add(table);
win.open();

 

Quelques screens de ce que vous devriez obtenir à l’écran :

 

 

Et l’alerte !

 

 

 

Ainsi s’achève ce tuto ! J’espère qu’il vous a été utile ^^ A très bientôt, amis mobinautes 😉

 

 

 

 

Catégories
Développement iPhone OS

Notification sur un Iphone

 

Iphone notification


Comment faire pour avoir des notifications sur son application Iphone ? C’est ce que nous allons voir tout de suite ! Cool

Avant de commencer à coder, il faut d’abord comprendre le fonctionnement et connaître les différents acteurs qui contribuent à ce service.


Les APNS sont des serveur Apple permettant de notifier une application présente sur un Iphone.

Le provider se charge d’envoyer à l’APNS, le « device token« , identifiant du téléphone à notifier
et le message à envoyer (payload).

La notification d’un terminal mobile comprends deux étapes distinctes : la récupération du device token ( lorsqu’on utilise pour la première fois ) et l’envoi d’une notification à partir du provider.

 

 

1. Comment s’effectue la récupération du token ?


Tout d’abord, l’application envoie une requête une requête à l’APNS par le device ( le téléphone ). Une fois cela effectué, l’APNS renvoie le token au device. Ne pas confondre un device token avec l’UDID qui est l’identifiant du téléphone !

Un device Token se présente sous cette forme là :

C9D4C07C FBBC26D6 EF87A44D 53E16983 1096A5D5 FD825475 56659DDD F715DEFC

ATTENTION : Le device token est unique pour chaque application utilisée sur un device particulier. Chaque application présente dans le device peut recevoir une notification d’un provider !

Le token doit donc être différent pour que l’APNS notifie la bonne application.

Voilà comment on peut illustrer les acteurs intervenant dans une demande de device token auprès de l’APNS:


 

 

2. Comment envoyer une notification ?

 

Le provider se connecte à l’APNS pour notifier une application présente sur un device. Il peut également notifier plusieurs devices à la fois, il faut donc spécifier le device token à notifier !

Un message à afficher doit également être fourni.

Voici comment on peut représenter une demande de notification auprès de l’APNS


 

Pour voir la liste des device tokens qui ne sont pas disponibles, il faut consulter ce qu’on appelle le feedback service. En effet, lorsqu’on désinstalle une appli sur son téléphone, il est normal de ne plus envoyer de notifications !

 

Bon tout ça c’est bien beau mais … comment mettre en place ce service ? Oo

Et bien il est temps de se pencher sur la mise en place de tout ça 😉

 

 

3. Mise en place du service

 

Le provider a besoin d’un certificat pour fonctionner, pour cela il faut :

– créer un compte développeur chez Apple (http://developer.apple.com/iphone/).

– UN MAC !

 

 

3.1 Création d’un certificat

 

Cette manipulation est à faire depuis un mac :

 

Il faut aller dans Keychain Access -> Certificat Assistance -> Request a certificat from a certificat authority.

Il vous faudra ensuite renseigner les champs Nom et Email. En veillant à ce que la case « Save to disk » est bien cochée, enregistrer le certificat là où vous le souhaitez sur votre ordinateur.

 

 

3.2. Avoir son App ID !

 

Chaque application sur Iphone a son App ID unique.

Depuis la page de votre compte développeur chez Apple, il faudra aller dans « App IDs » et cliquer sur « New App ID« .

Remplissez les différents champs ( Description et Bundle Identifier ).

 

 

3.3 Configurer le push


Il faut maintenant configurer le push notification de l’application.

Sélectionnez l’App Id qui vous intéresse dans la liste d’app Ids puis cliquez sur « Configurer« .


Maintenant il vous faut cocher Enable for Apple Push Notification service, cliquez maintenant sur le bouton « Configurer » à coté de Developpement Push SSL certificate.

Il faudra entrer le certificat que vous avez obtenu précédemment avec le keychain, cliquez ensuite sur « Generate » et sauvegardez le certificat quelque part sur votre ordinateur 😉

Le provider utilisera à l’avenir ce certificat (fichier aps_developer_identity.cer) pour faire la liaison avec l’APNS qui renverra une notification !

 

Il est maintenant d’attaquer la configuration du device !

 

 

4 Ajout d’un device

 

Pour tester nos applis sur notre Iphone, il faut d’abord enregistrer celui-ci, on peut utiliser autant de devices qu’on veut pour effectuer ses tests !

Première étape de l’enregistrement, la récupération de l’identifiant unique du device ( l’UDID) obtenu depuis xcode en faisant Window -> Organizer.

L’UDID se trouve à coté du libellé identifier.

 

 

Deuxième étape : il faut maintenant ajouter un device sur votre page développeur en se rendant dans la rubrique Devices puis sur « Add device« .

Entrez ensuite le nom et l’UDID du device avant de confirmer l’enregistrement !

 

 

 

5 Création d’un profil provisoire

 

Ce profil nous permettra d’utiliser notre device pour faire des tests. Il faudra impérativement l’installer sur chaque device sur lequel on veut tester notre appli !

Pour cela, allez sur votre page développeur dans la rubrique Provisioning et cliquez sur « New Profile« .

 

Spécifiez le nom de profil puis sélectionnez l‘app ID. On utilisera l’app ID qu’on a utilisé, « App_ID« . Il faut ensuite préciser la liste de devices que vous voulez associer à ce profil puis confirmer !

A l’apparition du profil sur votre écran, enregistrez le sur votre ordinateur, il aura pour extension mobileprovision.


 

6 Installation de l’application sur votre smartphone


Premièrement, il faut evidemment … connecter le device !

Déplacez votre profil créé ( le fichier .mobileprovision ) sur l’icôone Xcode dans votre Doc.

Dans Xcode, allez dans Window puis dans Organizer, vous devriez voir le profil installé sur le device une fois que vous le sélectionnez dans la liste à gauche !

 

 

 

7. Xcode ( coté client ) :

 

On peut, en plus du messaage texte de notification, avoir un son à jouer et un numéro de badge à afficher.

 

 

7.1 Comment ajouter un fichier son ?

 

Pour jouer un son, il est mieux d’ajouter un fichier .wav dans le répertoire Ressources de votre projet Xcode !

 

 

7.2 Configuration pour la notification

 

Sélectionnez le nom de votre appli sur Xcode puis faites Command-l . Dans l’onglet Properties, mettre le bundle identifier utilisé pour la création de l’app ID sur votre compte développeur (com.aptea.lbp).

 

Allez maintenant dans l’onglet Build, cherchez Code signing Identity. Faites Sélectionnez « Any Iphone OS device » puis sélectionnez le profil.

 

 

7.3 Demande de Device Token

 

Sous Xcode, ouvrir le fichier Delegate et ajouter les lignes de code suivante :

 

– (void)applicationDidFinishLaunching:(UIApplication *)application {

 

[window addSubview:viewController.view];

[window makeKeyAndVisible];

 

NSLog(@ »Registering for push notifications… »);

 

[[UIApplication sharedApplication]

registerForRemoteNotificationTypes:

(UIRemoteNotificationTypeAlert |

UIRemoteNotificationTypeBadge |

UIRemoteNotificationTypeSound)];

 

}

 

– (void)application:(UIApplication *)app didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {

 

NSString *str = [NSString

stringWithFormat:@ »Device Token=%@ »,deviceToken];

NSLog(str);

 

}

 

– (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {

application.applicationIconBadgeNumber = 0;

 

self.textView.text = [userInfo description];

 

if (application.applicationState == UIApplicationStateActive) {

 

// en cas d’application d’inactive, on ne fait rien, l’alerte va s’afficher toute seule !

 

UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@ »Notification récue »

message:[NSString stringWithFormat:@ »Cette application vient de recevoir cette notification :\n%@ »,

[[userInfo objectForKey:@ »aps »] objectForKey:@ »alert »]]

delegate:self

cancelButtonTitle:@ »OK »

otherButtonTitles:nil];

[alertView show];

[alertView release];

}

}

 

– (void)application:(UIApplication *)app didFailToRegisterForRemoteNotificationsWithError:(NSError *)err {

 

NSString *str = [NSString stringWithFormat: @ »Error: %@ », err];

NSLog(str);

}

 

– (void)dealloc {

[viewController release];

[window release];

[super dealloc];

}

Les lignes de code ci-dessus permettent d’afficher le device token du device sur lequel on teste l’application.

En cas de succès, on a :

Alors qu’en cas d’échec, un message d’erreur est généré !

Regardons maintenant comment ça se passe….

 

 

8. ….du coté serveur !

 

Afin d’envoyer une notification de push à l’APNS, il faut tout d’abord communiquer avec celui-ci en envoyant le certificat SSL créé,

construire le payload ( message à envoyer ) et envoyer la notification à l’APNS.

 

 

8.1 Comment générer Le certificat


Retrouvez le fichier aps_developer_identity.cer que vous avez généré et double-cliquez dessus pour l’importer dans Keychain !

Ouvrez maintenant Keychain sur votre mac, une fois dans l’onglet « Login« , filtrez tout ça selon la catégorie « Certificates« .

Puis, clic droit sur Apple Development Push Service -> Export Apple Development Push Service ID123 et sauvegardez le fichier sous format p12 ( nom_fichier.p12 ). Il n’est pas nécessaire de rentrer de mot de passe !

Faites la même manipulation pour la private key et enregistrez le dans le même format !

 

Il faut maintenant convertir ces fichiers dans un format spécifique, le format pem. Pour cela, l’utilisation de ligne de commande est nécessaire !

 

openssl pkcs12 -clcerts -nokeys -out apns-dev-cert.pem -in apns-dev-cert.p12

openssl pkcs12 -nocerts -out apns-dev-key.pem -in apns-dev-key.p12

 

openssl rsa -in apns-dev-key.pem -out apns-dev-key-noenc.pem

cat apns-dev-cert.pem apns-dev-key-noenc.pem > apns-dev.pem

 


8.2 Comment créer le payload

 

Le payload est un fichier Json qui contient :

– le message d’alerte à afficher sur le device ( Alert )

– Le badge, nombre à afficher dans le badge pour l’icône de l’application sur la page d’accueil du device

– Le texte indiquant le nom du son qui est activé au moment de l’alerte ( Sound )

 

Et maintenant un exemple de payload qui affiche un message d’alerte, « 1 » comme badge pour l’icône d’application et jouer le son spécifié lors de l’alerte.

{

« aps » : { « alert » : « This is the alert text », « badge » : 1, « sound » : « default » }

}

 

 

8.3 Générer le payload depuis un serveur php

 

Sur votre serveur, créez un fichier .php qu’on appellera par exempleapns.php . Placez dans le même répertoire le fichier .pem généré par ligne de commande, on l’appellera par exemple apns_dev.pem

Veillez bien à ce que le port 2195 soit bien ouvert.

 

 

 

Pour tester le service de push, on peut utiliser une URL de ce genre là :

 

http://mon_nom_de_domaine/apns.php?message=Hello%20from%20toto&badge=1&sound=sound.wav

 

Il est également possible de générer un payload sur un serveur C#/.NE.

Pour cela, une librairie open source de github est téléchargeable à cette adresse là :

https://github.com/Redth/APNS-Sharp


Surtout n’oubliez pas de consulter régulièrement le résultat du feedback service. En effet, ce service liste les devices où la notification est impossible, dans la plupart des cas, cela est dû à la désinstallation de l’application par l’utilisateur.

 

 

Ainsi s’achève ce long tuto sur la notification sur Iphone en espérant qu’il vous a été d’une grande aide et vous a éclairé sur certains mystères de la notification ! 😀

A très bientôt !

Catégories
Développement Android

Titanium Android – Faire son parseur Json

JSONBonjour tout le monde ! Aujourd’hui encore une fois un tuto sur Titanium ! Nous allons voir Comment parser un fichier json sur notre plateforme adorée 😀 

Le parseur sur Titanium est plus simple à réaliser que le parseur Android, en effet il suffit de quelques fonctions et le tour est joué !

Pour parser un fichier json, la règle de base c’est ….

1. Avoir un fichier json à parser !

Pour ce tutoriel, nous allons utiliser le fichier json suivant :

 

{« Id »: »221″, »Nom »: »video_221″, »Url_miniature »: »http://www.interieurs.fr/hwdvideos/thumbs/remote-1277.jpg », »Url_video »: »http://www.pocketjourney.com/downloads/pj/video/famous.3gp », »Date_publication »: »27/06/11″, »Categorie »: »Relooking »},
{« Id »: »220″, »Nom »: »video_220″, »Url_miniature »: »http://www.interieurs.fr/hwdvideos/thumbs/remote-1277.jpg », »Url_video »: »http://www.pocketjourney.com/downloads/pj/video/famous.3gp », »Date_publication »: »27/06/11″, »Categorie »: »Sortie »}]

 

le fichier json est disponible à cette url : http://www.michaelfabien.com/interieurs/video.json.

Un item de ce fichier json se présente avec les attributs suivants :id, nom, url_miniature, url_video, date_publication.

Pour ce tuto, nous allons utiliser uniquement les attributs nom, url_miniature et date de publication. 

 

Afin de récupérer ces données dans notre appli, il est maintenant temps d’utiliser ….

 

 

2. Le parseur !

Nous allons maintenant attaquer la fonction du parseur json, nous allons procéder comme ceci : la fonction va prendre le fichier json, le parser, puis présenter les données dans un tableview.

Voilà le début de notre code :

 

var win = Titanium.UI.createWindow(); //on crée une fenêtre

 

Voilà la fonction qui va tout faire !

function loadVideos(){

var loader = Titanium.Network.createHTTPClient(); //la méthode createHttpClient() de Titanium qui va nous permettre de faire des requêtes sur le serveur ou est stocké le fichier json.

var rowData = []; //l’array où sera stocké chaque ligne du tableview.

//on indique quel type de requête on va utiliser et l’url de notre fichier json
loader.open(« GET », »http://www.michaelfabien.com/interieurs/video.json »);

 

//une fois le fichier json récupéré, on éxécute une fonction
loader.onload = function()
{

On stocke le fichier json dans une variable, à ce stade le fichier Json est DEJA PARSE !!!

var res = eval(‘(‘+this.responseText+’)’);

 

Maintenant que nous avons notre json parsé dans la variable res, il serait bien de pouvoir récupérer les attributs qui nous intéressent pour chaque video, c’est-à-dire le nom de la video, la miniature et la date de publication,

Pour se faire nous allons utiliser une boucle for !

 

//on fait une boucle afin de récupérer les attributs qu’on veut de chaque item
for (var i = 0; i < res.length; i++)    
{

//on récupère uniquement le attributs qui nous intéressent
var nom_video = res[i].Nom;//on récupère le nom
var url_image = res[i].Url_miniature;//l’url de la miniature
var date = res[i].Date_publication;//on récupère la date de publication

 

Nous avons les variables pour le nom, la miniature et la date de publication de la video, il nous faut maintenant le présenter dans une vue qu’on va appeler post_view,

La miniature se situera à gauche, le nom et la date à sa droite.

Nous ajouterons ensuite le post_view à une variable appelée row.

 

//on crée une row et on définit sa taille sur auto
var row = Titanium.UI.createTableViewRow({height:’auto’});

//on crée une vue qui va contenir le nom et la miniature de la video
var post_view = Titanium.UI.createView({ height:’auto’ });

 

Une fois post_view et row prêt, il nous faut maintenant créer un ImageView pour afficher une miniature de video, créer des labels pour afficher le nom et la date de publication.

 

//on crée une ImageView qui contiendra la miniature de la video 
var video_image = Titanium.UI.createImageView({ 
url:url_image, //url_image, c’est l’attribut qu’on a récupéré plus haut
top:0, 
left:0, 
height:75, 
width:75 
});

//on ajoute video_image à post_view
post_view.add(video_image); 

 

//on crée maintenant le label avec le nom de la video 
var nom_label = Titanium.UI.createLabel({ 
text:nom_video, //nom_video a été récupéré plus haut également
left:100, 
width:120, 
top:5, 
height:’auto’, 
textAlign:’left’, 
color:’black’, 
font:{ 
fontSize:20,fontWeight:’bold’ 

});

post_view.add(nom_label); // on ajoute au postview également

 

//On crée le label pour une date
var date_label = Titanium.UI.createLabel({ 
text: date,//la variable date plus haut 
color:’black’,
left: 100, 
top: 30,  
height: ‘auto’, 
width: 120, 
textAlign: ‘left’, 
color:’black’, 
font:{ fontSize:16 } 
}); 

post_view.add(date_label);

 

Une fois le post_view « complet », on l’ajoute à la row ! Row est ensuite ajouté à rowData à chaque fois que la boucle for tourne !

row.add(post_view);

//on ajoute row dans notre tableau rowData
rowData[i] = row;

 

Ceci marque la fin de notre boucle !

}

Et pour finir !

On crée le tableview qui montrera toutes les lignes stockées dans rowData, il ne restera plus qu’à ajouter le tableview à notre window. Attention le code suivant n’est plus dans la boucle for mais est toujours dans la fonction onload !

 

//On crée le tableview avec comme données celles contenues dans rowData 
var table_video = Titanium.UI.createTableView( { data : rowData });

//On ajoute la tableview à la window 
win.add(table_video);

}

Il ne reste plus qu’à envoyer la requête pour finir la fonction loadVideos !

loader.send();

}

Et surtout ne pas oublier d’appeler la fonction loadVideos à la fin 😉

loadVideos();

Vous devriez maintenant avoir un tableau qui s’affiche avec toutes les données contenues dans rowData de manière assez bien présenté 😀

 

Merci d’avoir suivi ce tuto j’espère qu’il vous a été très utile ! A vous de coder maintenant !

Catégories
Développement Android

Titanium Android – Créer un formulaire et l’envoyer

Salut tout le monde ! Aujourd’hui nous allons voir comment créer un formulaire tout simple sur Titanium et envoyer le contenu de ce formulaire sur une autre page ! Rapellons très rapidement que Titanium est un framework de développement d’applications mobiles cross-plateform. Il est possible en effet grâce à Titanium de développer une application native iPhone et Android, à partir d’un seul projet.

Ici nous allons faire simple, en créant un simple formulaire, histoire de voir comment un mecanisme d’authentification peut être implémenter avec Titanium

Rien de bien compliqué en somme, voyons d’abord comment faire un login/mot de passe avec bouton d’envoi !

 

Premièrement on crée notre window et notre vue dans un fichier form.js :

form.js
1 2 3 
var win = Titanium.UI.createWindow();   var view_form = Titanium.UI.createView();

 

On crée ensuite nos 2 Textfields, un pour le login et un pour le mot de passe !

 

form.js – textfields
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 
//textfield pour le login   var login = Titanium.UI.createTextField({   hintText:"Login" // permet d'indiquer à quel valeur correspond le champ de textte à l'utilisateur, ici au login borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, // on applique un style au bordure du textfield width:200, // taille horizontal du textfield top:180 // on place le textfield à 180 pixels du haut de la fenêtre   });   //textfield pour le mot de passe   var password = Titanium.UI.createTextField({   hintText:"Password", //on indique que la valeur à entrer est le mot de passe borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, width:200, top:250, passwordMask:true //on masque les caractères qui seront tapés ( comme les mots de passe en génréral )   });   //bouton d'envoi   var button = Titanium.UI.createButton({   title:'Se connecter', // le nom du bouton top:340, height:'auto' // on lui attribue une taille automatique   });

 

Voila pour le formulaire, maintenant il faut pouvoir gérer le passage de variables vers une autre page:

Il faut créer un évènement qui s’active au clic de la souris sur le bouton d’envoi du formulaire, pour cela on fait :

 

button.addEventListener(‘click’,function(){

 

On récupère ensuite les valeurs des textfields dans des variables :

var loginUser = login.value ; //on attribue le login entré par l’utilisateur à cette variable

var passwordUser = password.value ; // on attribue le mot de passe entré par l’utilisateur à cette variable

 

Cela se passe comme ceci, on crée un array, ici myArray

var myArray = [value1,value2 ]; // avec value1 et value2 les variables qu’on souhaite faire passer

Dans notre cas, cela donne :

var myArray = [loginUser,passwordUser];

 

On crée ensuite la window à laquelle nous allons envoyer les variables :

Passage de variables
1 2 3 4 5 6 7 8 
var win_confirmation = Titanium.UI.createWindow({   url:'confirmation.js', //on précise la page vers laquelle on va être redirigé myarray:myArray // on passe en paramètre myArray, l'autre page devrait être en mesure de récupérer les données !   });   win_confirmation.open(); // on ouvre ensuite la fenêtre.

 

Et voilà on en a donc fini pour l’envoi de paramètres !!! Voilà le code global de la page form.js :

form.js – Code complet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 
var view_form = Titanium.UI.createView();

var win = Titanium.UI.createWindow();
  //textfield pour le login   var login = Titanium.UI.createTextField({   hintText:"Login" // permet d'indiquer à quel valeur correspond le champ de textte à l'utilisateur, ici au login borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, // on applique un style au bordure du textfield width:200, // taille horizontal du textfield top:180 // on place le textfield à 180 pixels du haut de la fenêtre   });   //textfield pour le mot de passe   var password = Titanium.UI.createTextField({   hintText:"Password", //on indique que la valeur à entrer est le mot de passe borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, width:200, top:250, passwordMask:true //on masque les caractères qui seront tapés ( comme les mots de passe en génréral )   });   //bouton d'envoi   var button = Titanium.UI.createButton({   title:'Se connecter', // le nom du bouton top:340, height:'auto' // on lui attribue une taille automatique   });   button.addEventListener('click',function(){   var loginUser = login.value ; //on attribue le login entré par l'utilisateur à cette variable   var passwordUser = password.value ; // on attribue le mot de passe entré par l'utilisateur à cette variable   var myArray = [loginUser,passwordUser];   var win_confirmation = Titanium.UI.createWindow({   url:'confirmation.js', //on précise la page vers laquelle on va être redirigé myarray:myArray // on passe en paramètre myArray, l'autre page devrait être en mesure de récupérer les données !   });   win_confirmation.open(); // on ouvre ensuite la fenêtre.   });   //on oublie pas d'ajouter le tout à la vue !   view_form.add(login);   view_form.add(password);   view_form.add(button);   // ... et la vue à la window !   win.add(view_form);   win.open(); // on ouvre la fenêtre

 

Il nous reste maintenant à faire la page où les données seront récupérés, ne vous inquiétez pas, c’est loin d’être le plus compliqué ! 😀

1 2 3 4 5 6 7 8 
var win = Titanium.UI.currentWindow;   //On récupère les paramètres de notre variable myArray var data = win.myarray; //on attribue l'array qu'on récupère à la variable data   var login = data[0]; // data[0] correspond au login, on l'attribue à une variable   var password = data[1]; // data[1] correspond au mot de passe, on l'attribue à une variable également

 

Maintenant il faut afficher le tout 😉

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 
//on crée une vue   var view = Titanium.UI.createView();   //on affiche le login var message_login = Titanium.UI.createLabel({   text:login, //la valeur du texte est égale à login top:100, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });   //on affiche le mot de passe var message_password = Titanium.UI.createLabel({   text:password, //on affiche le mot de passe top:150, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });

 

Ce qui donne au final ce code là 😀

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 
var win = Titanium.UI.currentWindow;   //On récupère les paramètres de notre variable myArray var data = win.myarray; //on attribue l'array qu'on récupère à la variable data   var login = data[0]; // data[0] correspond au login, on l'attribue à une variable   var password = data[1]; // data[1] correspond au mot de passe, on l'attribue à une variable également   //on affiche le login var message_login = Titanium.UI.createLabel({   text:login, //la valeur du texte est égale à login top:100, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });   //on affiche le mot de passe var message_password = Titanium.UI.createLabel({   text:password, //on affiche le mot de passe top:150, color:'black', textAlign:'center', font:{fontSize:20,fontStyle:'bold'},   });   view.add(message_login);   view.add(message_password);   win.add(view);   win.open();

 

Et voilà ainsi s’achève ce tuto sur comment envoyer des données d’un formulaire ( ou les données en général ) vers une autre page sur Titanium !!! Néanmoins, vous remarquerez que dans ce tuto, nous n’avons pas vraiment insisté sur la sécurité, le but étant avant tout de montrer comment ça marche 😛

Je vous dis donc à la prochaine pour unnouveau tuto sur Titanium chers mobinautes !

var view_form = Titanium.UI.createView();
Catégories
Développement Android

Publier une application sur le market

Android Market LogoAfin de publier une application sur le market, il faut avoir au préalable un compte Android Market. Si ce n’est pas le cas, referez-vous au tutoriel concernant l’ouverture d’un compte Market –> ici !.

Tout d’abord, rendez-vous à l’adresse suivante : https://market.android.com/publish/

Vous devez être connecté sur le compte google avec lequel vous avez ouvert le compte market. De toute façon si ce n’est pas le cas, il vous sera demandé de vous connecter.

Enfin si vous n’avez pas de compte Market, il vous proposera d’en créer un.

 

 

 

Vous pouvez donc ajouter une nouvelle appli en cliquant sur le bouton « Publier une application » comme il est indiqué ci-dessus.

 

 

 

On se trouve maintenant sur l’interface de publication d’une application, il vous sera demandé de renseigner « quelques » informations avant de publier votre article ( et oui sinon ça serait trop facile Content ) :

 

 

  1. Sélectionnez votre fichier apk ( bien sélectionné le fichier signé avec la clé privée et non celui signé par défaut avec le debug ). J’insiste une nouvelle fois signez votre application avec une clé privée avant de faire cette opération ( tuto –> ici ) .
  2. Importez le fichier apk.
  3. Il vous faut quelques captures d’écran de votre application, ces captures seront visibles sur la page dédiée à votre application sur le market.
  4. Importez vos captures d’écran.
  5. Tout comme les captures d’écran, il vous faut une icône pour votre application !!!
  6. Importez votre icône.

 

 

 

 

Il vous faudra également renseigner certaines informations sur l’application.

7. Choisissez la langue de l’application.

8. Un titre pour votre application ( logique me direz-vous !)

 

 

9. Sélectionner le type d’application, donc « applications »

10. Choisissez dans quel catégorie se situe votre application ( jeux, santé et remise en forme, etc…  )

11. Pour la suite, à vous de mettre ce que bon vous semble, en fonction de votre application.

 

 

 

 

Acceptez ensuite les deux conditions imposées en bas puis cliquez sur le bouton « Publier ».

Et voilà votre application est disponible maintenant sur le Market et téléchargeable !

Rendez-vous donc sur le market avec votre mobile pour rechercher votre application !

 

Je vous dis donc salut et à très bientôt pour de prochaines tutos ! Cool