Programmation des Terminaux Mobiles - CodeName One

1/18
100%

<!-- Slide number: 1 -->

![](Shape111.jpg)

![](Shape110.jpg)

Programmation des Terminaux Mobiles-CodeName One-

SUPPORT DE COURS

ESPRT MOBILE TEAM

ESPRIT

Notes:

<!-- Slide number: 2 -->

Connexion

2

Notes:

<!-- Slide number: 3 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape125.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape126.jpg)

![](Shape127.jpg)

3

Notes:

<!-- Slide number: 4 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape134.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape135.jpg)

Contenu de la séance

Télécharger une image

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape139.jpg)

Récupérer un contenu texte

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape140.jpg)

Exemple d’authentification

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape141.jpg)

4

Notes:

<!-- Slide number: 5 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape149.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape150.jpg)

Téléchargement d’une image avec URLImage

URLImage permet de simplifier le téléchargement d’une image sans écrire trop de code .

Elle apporte cependant d’autres fonctionnalités intéressantes comme le fait d’utiliser une image temporaire qui sera automatiquement remplacée par l’image téléchargée, d’adapter la taille de l’image téléchargée à la taille de l’image temporaire, de mettre l’image téléchargée en cache pour pouvoir

la ré-utiliser en cas de besoin sans avoir à la télécharger de nouveau.

Publicité

5

Notes:

<!-- Slide number: 6 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape159.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape160.jpg)

Téléchargement d’une image avec URLImage

La méthode createToStorage() est une méthode statique de la la classe URLImage qui permet de télécharger une image d’une URL vers un Storage.

public static URLImage createToStorage(EncodedImage placeholder, String storageFile, String url, ImageAdapter adapter)

Le premier paramètre représente une image temporaire qui sera affichée pendant que le téléchargement de la nouvelle image sera en cours.

Le deuxième paramètre est le nom du Storage où l’image sera stockée.

Le troisième paramètre est l’URL de l’image à télécharger .

Le dernier paramètre est une valeur qui permet d’adapter la taille de l’image à la taille de l’emplacement où elle sera affichée. Les valeurs possibles de ce paramètre sont RESIZE_SCALE, RESIZE_SCALE_TO_FILL et RESIZE_FAIL.

6

Notes:

<!-- Slide number: 7 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape169.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape170.jpg)

Téléchargement d’une image avec URLImage

![](Shape174.jpg)

![](Shape173.jpg)

7

Notes:

<!-- Slide number: 8 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape180.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape181.jpg)

Téléchargement d’une image avec URLImage

String url="http://localhost:8888/codename/icon.png";

EncodedImage enc=EncodedImage.createFromImage(theme.getImage("load.png"), false); -> le deuxième paramètre =true si l’image est de type jpg

Image img=URLImage.createToStorage(enc, "MaPhoto", url, URLImage.RESIZE_SCALE);

8

Notes:

<!-- Slide number: 9 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape190.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape191.jpg)

NetworkManager et ConnectionRequest

NetworkManager et ConnectionRequest sont les deux classes principales de manipulation du réseau en Codename One.

NetworkManager permet de gérer les requêtes de connexion .

Publicité

ConnectionRequest permet de créer des requêtes.

9

Notes:

<!-- Slide number: 10 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape200.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape201.jpg)

NetworkManager et ConnectionRequest

La plupart du temps, un traitement utilisant le réseau est placé dans un thread parallèle à celui de l’interface graphique. Ainsi, l’un des problèmes les plus fréquents en programmation réseau est la gestion de ces threads multiples.

En Codename One, la classe NetworkManager crée et gère automatiquement les threads en parallèle au thread de l’EDT. Elle nous épargne ainsi certaines contraintes liées à la gestion manuelle de ces threads consacrés au traitement du réseau.

10

Notes:

<!-- Slide number: 11 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape210.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape211.jpg)

NetworkManager et ConnectionRequest

La création d’une requête est gérée par la classe ConnectionRequest et chaque requête peut être envoyée de manière synchrone ou asynchrone. Les erreurs de traitement sont gérées par défaut, mais il est possible de les gérer manuellement en utilisant des listeners.

Une fois des requêtes de connexion créées avec ConnectionRequest, il faut les ajouter à une file d’attente avec NetworkManager, qui se chargera non seulement de les exécuter, mais aussi de créer pour chacune des requêtes un thread.

L’envoi de la requête, la destruction du thread réseau, etc. sont aussi gérés par NetworkManager.

11

Notes:

<!-- Slide number: 12 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape220.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape221.jpg)

NetworkManager et ConnectionRequest

Création de l’objet ConnectionRequest qui servira à créer une requête.

ConnectionRequest con=new ConnectionRequest() ;

Paramétrage de la requête

con.setUrl ("http://localhost/codename/test.txt");

Lecture du flux récupérer suite à la connexion

Il faut faire un listener sur la connexion et convertir les données récupérer avec la méthode getResponseData() qui sont dans un tableau de byte sous forme de String

con.addResponseListener((e)->{

String str=new String(con.getResponseData());

});

12

Notes:

<!-- Slide number: 13 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape230.jpg)

Publicité

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape231.jpg)

NetworkManager et ConnectionRequest

Création d’une instance de NetworkManager et ajout de la requête créée à la file d’attente d’exécution avec la méthode addToQueueAndWait().

NetworkManager.getInstance().addToQueue(con);

13

Notes:

<!-- Slide number: 14 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape240.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape241.jpg)

Exemple: Télécharger un fichier et l’afficher à l’écran

![](Shape250.jpg)

![](Shape251.jpg)

serveur

Connexion au serveur

Fichier TXT

Notes:

<!-- Slide number: 15 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape267.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape268.jpg)

Passage des paramètres

HTTP request peut être accompagnée par des informations passés au serveur pour valider la requête

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape271.jpg)

![](Shape272.jpg)

15

Notes:

<!-- Slide number: 16 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape301.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape302.jpg)

Passage des paramètres

<?php

$name=$_GET['name'];

$pwd=$_GET['password'];

if ($name=="andy" && $pwd=="cat")

echo"OK";

elseif ($name=="paul" && $pwd=="panda")

echo"OK";

elseif ($name=="jacky" && $pwd=="doctor")

Publicité

echo"OK";

elseif ($name=="peter" && $pwd==“dart")

echo"OK";

else

echo"invalid";

?>

16

Notes:

<!-- Slide number: 17 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape301.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape302.jpg)

Passage des paramètres

Si l’url est de type GET , vous pouvez la configurer comme suit :

String url = "http://localhost:8888/codename/login.php"; con.setPost(false);

con.addArgument("name", "paul");

con.addArgument("password", "panda");

17

Notes:

<!-- Slide number: 18 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape279.jpg)

Exemple: Authentification auprès d’un serveur (exécution script PHP)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape280.jpg)

![](Shape293.jpg)

![](Shape291.jpg)

OK

serveur

Connexion au serveur

Invalid

![](Shape294.jpg)

Script PHP

![](Shape289.jpg)

Notes:

Programmation des Terminaux Mobiles - CodeName One

Mobile Programming · course

Browse all programmation documents

<!-- Slide number: 1 -->

![](Shape111.jpg)

![](Shape110.jpg)

Programmation des Terminaux Mobiles-CodeName One-

SUPPORT DE COURS

ESPRT MOBILE TEAM

ESPRIT

Notes:

<!-- Slide number: 2 -->

Connexion

2

Notes:

<!-- Slide number: 3 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape125.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape126.jpg)

![](Shape127.jpg)

3

Notes:

<!-- Slide number: 4 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape134.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape135.jpg)

Contenu de la séance

Télécharger une image

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape139.jpg)

Récupérer un contenu texte

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape140.jpg)

Exemple d’authentification

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape141.jpg)

4

Notes:

<!-- Slide number: 5 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape149.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape150.jpg)

Téléchargement d’une image avec URLImage

URLImage permet de simplifier le téléchargement d’une image sans écrire trop de code .

Elle apporte cependant d’autres fonctionnalités intéressantes comme le fait d’utiliser une image temporaire qui sera automatiquement remplacée par l’image téléchargée, d’adapter la taille de l’image téléchargée à la taille de l’image temporaire, de mettre l’image téléchargée en cache pour pouvoir

la ré-utiliser en cas de besoin sans avoir à la télécharger de nouveau.

Advertisement

5

Notes:

<!-- Slide number: 6 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape159.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape160.jpg)

Téléchargement d’une image avec URLImage

La méthode createToStorage() est une méthode statique de la la classe URLImage qui permet de télécharger une image d’une URL vers un Storage.

public static URLImage createToStorage(EncodedImage placeholder, String storageFile, String url, ImageAdapter adapter)

Le premier paramètre représente une image temporaire qui sera affichée pendant que le téléchargement de la nouvelle image sera en cours.

Le deuxième paramètre est le nom du Storage où l’image sera stockée.

Le troisième paramètre est l’URL de l’image à télécharger .

Le dernier paramètre est une valeur qui permet d’adapter la taille de l’image à la taille de l’emplacement où elle sera affichée. Les valeurs possibles de ce paramètre sont RESIZE_SCALE, RESIZE_SCALE_TO_FILL et RESIZE_FAIL.

6

Notes:

<!-- Slide number: 7 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape169.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape170.jpg)

Téléchargement d’une image avec URLImage

![](Shape174.jpg)

![](Shape173.jpg)

7

Notes:

<!-- Slide number: 8 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape180.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape181.jpg)

Téléchargement d’une image avec URLImage

String url="http://localhost:8888/codename/icon.png";

EncodedImage enc=EncodedImage.createFromImage(theme.getImage("load.png"), false); -> le deuxième paramètre =true si l’image est de type jpg

Image img=URLImage.createToStorage(enc, "MaPhoto", url, URLImage.RESIZE_SCALE);

8

Notes:

<!-- Slide number: 9 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape190.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape191.jpg)

NetworkManager et ConnectionRequest

NetworkManager et ConnectionRequest sont les deux classes principales de manipulation du réseau en Codename One.

NetworkManager permet de gérer les requêtes de connexion .

Advertisement

ConnectionRequest permet de créer des requêtes.

9

Notes:

<!-- Slide number: 10 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape200.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape201.jpg)

NetworkManager et ConnectionRequest

La plupart du temps, un traitement utilisant le réseau est placé dans un thread parallèle à celui de l’interface graphique. Ainsi, l’un des problèmes les plus fréquents en programmation réseau est la gestion de ces threads multiples.

En Codename One, la classe NetworkManager crée et gère automatiquement les threads en parallèle au thread de l’EDT. Elle nous épargne ainsi certaines contraintes liées à la gestion manuelle de ces threads consacrés au traitement du réseau.

10

Notes:

<!-- Slide number: 11 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape210.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape211.jpg)

NetworkManager et ConnectionRequest

La création d’une requête est gérée par la classe ConnectionRequest et chaque requête peut être envoyée de manière synchrone ou asynchrone. Les erreurs de traitement sont gérées par défaut, mais il est possible de les gérer manuellement en utilisant des listeners.

Une fois des requêtes de connexion créées avec ConnectionRequest, il faut les ajouter à une file d’attente avec NetworkManager, qui se chargera non seulement de les exécuter, mais aussi de créer pour chacune des requêtes un thread.

L’envoi de la requête, la destruction du thread réseau, etc. sont aussi gérés par NetworkManager.

11

Notes:

<!-- Slide number: 12 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape220.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape221.jpg)

NetworkManager et ConnectionRequest

Création de l’objet ConnectionRequest qui servira à créer une requête.

ConnectionRequest con=new ConnectionRequest() ;

Paramétrage de la requête

con.setUrl ("http://localhost/codename/test.txt");

Lecture du flux récupérer suite à la connexion

Il faut faire un listener sur la connexion et convertir les données récupérer avec la méthode getResponseData() qui sont dans un tableau de byte sous forme de String

con.addResponseListener((e)->{

String str=new String(con.getResponseData());

});

12

Notes:

<!-- Slide number: 13 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape230.jpg)

Advertisement

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape231.jpg)

NetworkManager et ConnectionRequest

Création d’une instance de NetworkManager et ajout de la requête créée à la file d’attente d’exécution avec la méthode addToQueueAndWait().

NetworkManager.getInstance().addToQueue(con);

13

Notes:

<!-- Slide number: 14 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape240.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape241.jpg)

Exemple: Télécharger un fichier et l’afficher à l’écran

![](Shape250.jpg)

![](Shape251.jpg)

serveur

Connexion au serveur

Fichier TXT

Notes:

<!-- Slide number: 15 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape267.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape268.jpg)

Passage des paramètres

HTTP request peut être accompagnée par des informations passés au serveur pour valider la requête

![C:\Users\wael\Desktop\fb_icon\poke.png](Shape271.jpg)

![](Shape272.jpg)

15

Notes:

<!-- Slide number: 16 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape301.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape302.jpg)

Passage des paramètres

<?php

$name=$_GET['name'];

$pwd=$_GET['password'];

if ($name=="andy" && $pwd=="cat")

echo"OK";

elseif ($name=="paul" && $pwd=="panda")

echo"OK";

elseif ($name=="jacky" && $pwd=="doctor")

Advertisement

echo"OK";

elseif ($name=="peter" && $pwd==“dart")

echo"OK";

else

echo"invalid";

?>

16

Notes:

<!-- Slide number: 17 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape301.jpg)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape302.jpg)

Passage des paramètres

Si l’url est de type GET , vous pouvez la configurer comme suit :

String url = "http://localhost:8888/codename/login.php"; con.setPost(false);

con.addArgument("name", "paul");

con.addArgument("password", "panda");

17

Notes:

<!-- Slide number: 18 -->

![C:\Documents and Settings\WAEL\Bureau\banner.jpg](Shape279.jpg)

Exemple: Authentification auprès d’un serveur (exécution script PHP)

![C:\Documents and Settings\WAEL\Bureau\fb_icon\home.png](Shape280.jpg)

![](Shape293.jpg)

![](Shape291.jpg)

OK

serveur

Connexion au serveur

Invalid

![](Shape294.jpg)

Script PHP

![](Shape289.jpg)

Notes: