Découvrons DotNet sur différentes plateformes

PCL et dependences

Aktaour — Sun, 28 Dec 2014 15:50:37 +0000

PCL = Portable class Library
Pour pouvoir dans un projet PCL accèder aux API d’un système, il faut utiliser un système de dépendances.

Vous avez plusieurs solutions liées à des interfaces ou à des classes abstraites/virtuelles aux choix

Créer une classe avec des références sur des classes implémentant des interfaces
Utiliser le DependencyService de Xamarin pour plateforme mobile référencant la librairie Xamarin
Créer votre propre DependencyService multi plateforme

Je privilégie la solution 1 et 3. La solution DependencyService de Xamarin ne me plaît pas car elle ne fonctionne pas pour les projets PC.

Je vous expose donc la solution 1 et 3.

Solution 1 avec une classe et un sorte de singleton renseigné par l’application cible (et non par sa propre classe):

public class IO
{
private static IO _current = null;
public static IO Current
{
get { return _current; }
set { _current = value; }
}
public virtual bool FichierExiste(string cheminFichier)
{
return false; // Vous pouvez aussi lever une exception pour indiquer que le code n'a pas été implémenté
}
}

public class IOiOS : IO
{
public override bool FichierExiste(string cheminFichier)
{
return File.Exists(cheminFichier);
}
}

pour l’utiliser, il suffit de faire un
IO.Current = new IOiOS();
puis dans le PCL : IO.Current.FichierExiste(« image.png »);

Solution 3
Créer votre propre DependencyService

using System.Reflection;
using System.Text;
using System.Threading.Tasks;

namespace Aktaour.Core.Framework
{
public class DependencyInjector
{
private static DependencyInjector _instance = null;
private Dictionary<Type,Type> _dependencyList = new Dictionary<Type,Type>();

public static DependencyInjector Instance
{
get
{
if (_instance == null)
_instance = new DependencyInjector();
return _instance;
}
}

public void Register<TBase,T>() where T : TBase
{
if (_dependencyList.ContainsKey(typeof(TBase)))
throw new Exception("Type already register");
else
_dependencyList.Add(typeof(TBase), typeof(T));
}

public TBase Get<TBase>()
{
if (_dependencyList.ContainsKey(typeof(TBase)))
{
return (TBase)Activator.CreateInstance(_dependencyList[typeof(TBase)]);
}
else
return default(TBase);
}
}
}

Dans le projet PCL créer une classe IO

public class IO
{
public virtual bool FichierExiste(string cheminFichier)
{
return false; // Vous pouvez aussi lever une exception pour indiquer que le code n'a pas été implémenté
}
}

Et dans votre application iOS créer une classe IOiOS

public class IOiOS : IO
{
public override bool FichierExiste(string cheminFichier)
{
return File.Exists(cheminFichier);
}
}

et enregistrer votre classe dans le DependencyInjector

DependencyInjector.Instance.Register();

Ensuite, pour créer vos objets, vous utilisez le DependencyInjector via la classe de base

IOiOS io = DependencyInjector.Instance.Get<IO> ();

Pour finir, il suffit d’être inventif pour coller au plus à vos besoins.

Multiplateforme, MVVM, PCL, Xamarin.Forms

Aktaour — Sun, 28 Dec 2014 14:13:11 +0000

Pour l’écriture d’un logiciel multi-plateforme PC et mobile, j’utilise des techniques qui sont nouvelles pour moi et qui m’oblige à remettre en question mes acquis de développeur mono plateforme.

Pour écrire un logiciel sur plusieurs plateformes, il faut un langage de programmation commun, un ou plusieurs EDI compatible et une logique de programmation qui ne dépend pas de la machine cible.

J’ai retenu:

EDI visual studio Community 2013 (gratuit) et Xamarin Studio (avec licence indie)
Le langage de programmation C# basé sur le frameWork 4.5 avec les mots clés aync/await
Des projets multi plateformes PCL
le pattern de programmation MVVM
un PC sous Windows 8.1
un Mac pour l’émulateur iOS, et pour le développement sous un device Android (ici un galaxy note 1)

MVVM
Le pattern Modèle-Vue-VueModèle est un pattern qui veut séparer la vue de la logique et de l’accès aux données en accentuant les principes de binding et des événements.
Vous écrivez dans le viewModel et le résultat s’affiche dans la vue à l’aide de Binding et la vue interagit avec le viewModel par des événements. et enfin le viewModel agit sur les données en bdd/fichier directement.

C’est simple et efficace.

PCL
Le but du PCL (portable class library) est donc de créer différentes librairies indépendantes de chaque plateforme et de créer un projet pour chaque plateforme cible.
Chaque projet PCL a accès à un framework .Net inter plateforme mais limité par ses fonctionnalités. Toutes dll qui n’est pas multiplateforme et indépendant du systèmes y est rejetés.

En résumé:

un projet library PCL nommé « Message » qui contiendra vos classes strictement de stockage de données en mémoire
un projet library PCL nommé « Core » qui contiendra votre logique applicative, vos viewModel (pour le MVVM)
un projet library PCL nommé « DesktopCore » qui contiendra les view WPF et les viewmodel dérivés de ceux du projet Core
un projet library PCL nommé « MobileCore » qui contiendra les view Xamarin.Forms et les viewmodel dérivés de ceux du projet Core
un projet application WPF nommé « DesktopApp » qui contiendra le premier formulaire et l’accès aux fichiers et aux APi du système PC
un projet application Android nommé « AndroidApp » qui contiendra le premier formulaire et l’accès aux fichiers et aux APi du système Android
un projet application Windows Phone nommé « WPApp » qui contiendra le premier formulaire et l’accès aux fichiers et aux APi du système Windows Phone
un projet application Windows Phone nommé « iOSApp » qui contiendra le premier formulaire et l’accès aux fichiers et aux APi du système iOS

Sur le papier, en lisant des articles je me suis dit hourra, trop facile. La réalité est bien plus compliquée!

Comme je vous l’ai annoncé (vous avez le droit de ne pas me croire) pour faire du multi plateforme, il faut être décoléré du système cible.
Vous devez vous concentrer sur une notion: « Ne t’occupes pas de comment accéder aux API systèmes, part du principe qu’ils ne sont pas accessibles ».
En gros, ne comptes pas sur le système pour t’aider, tu es le seul à pouvoir y accéder et cela par tes propres moyens.

Je m’explique: prenez l’exemple d’un test d’existence d’un fichier.

Sous Windows, Android, iOS
File.Exists(nomFichier);
Sous Windows Phone:
StorageFolder appFolder = ApplicationData.Current.LocalFolder;
var files = Task.Run(async () => await appFolder.GetFilesAsync()).GetAwaiter().GetResult();
var file = files.Where(t => t.Name == nomFichier).FirstOrDefault();
result = file != null;

Mais pourquoi Microsoft nous a pondu une merde pareil sur Windows Phone, je sais pas, c’est chiant mais vu que l’on fait du PCL on s’en moque!

En effet, qui dit library PCL, dit impossibilité d’accéder à File.Exists ou à StorageFolder /StorageFile. il faut passer par sont propres systèmes de dépendances via des pointeurs qui références des objets liés à chaque plateforme.

Xamarin.Forms
Le frameWork Xamarin.Forms est tout nouveau, créé mi 2014 par la société Xamarin (enfin créé par un développeur puis récupéré par Xamarin…).
Il ambitionne de révolutionner la manière dont vous écrivez des interfaces graphiques pour le développement mobile.
Ecrivez une fois (pour iOS) et visualisez partout (WinPhone/Android/iOS).
Xamarin.Forms

Il y a un gros Hic tout de même, Xamarin.Forms permet de faire de belles choses mais il est loin d’être parfait et toujours en chantier actuellement. Des versions sortent toutes les semaines.
Des bugs apparaissent, d’autres disparaissent mais on peut toujours s’en sortir en laissant certaines choses de temporairement de cotées.

Découvrons Xamarin.Forms

Aktaour — Sun, 28 Dec 2014 11:42:05 +0000

Suite à 2 années de travail acharné sur une application de vente et d’aide à la vente pour le retail sous Xamarin.iOS (iOS 5.1 et supérieur).
Je ne suis pas indépendant, je travaille pour une société éditrice de logicielle liée au retail.
iStoreAssistant

L’application en question s’exécute sous iOS et utilise différents matériels essentiellement pour des besoins spécifiques liés à l’activité du retail.

un pinpad monétique : l’iSMP (paiement monétique).

des imprimantes de caisses de type Epson POS

un lecteur de code barre (soit iSMP, soit Captuvo SL22)

Le but des différents billets qui vont suivre est d’appliquer les différentes méthodes qui m’ont permis de créer ce logiciel monoplateforme (sous iOS) pour en faire un logiciel multiplateforme (mobile iOS, Android, Windows phone et PC).
Pour cela, je m’oriente aujourd’hui vers Xamarin.Forms.

Xamarin.Forms est une surcouche graphique multiplateforme mobile garantissant un rendu graphique similaire sous iOS, Android et Windows phone.

Très intéressant sur le papier, vous écrivez en code C# ou en Xaml (fichier XML d’interface) et vous obtenez votre interface graphique.

Si vous avez déjà écrit des logiciels WPF, vous ne serez pas « trop » dépaysé.

[Mono]Asynchrone Mon meilleur ennemi

Aktaour — Wed, 21 Dec 2011 23:27:57 +0000

Tout fier, je me lance dans ma première application à l’aide de Mono for Android.

Je crée un projet sous Visual Studio 2010 et me munis de mon téléphone sous Android.
Pour les imprimes écrans, j’utilise l’option screen capture du logiciel ddms (dalvik debug monitor) fournit avec le sdk de mono.

L’application à créer est simple:

Ouverture d’une activité à partir d’un bouton
Fermeture de l’activité ouverte
Affichage d’un message à l’écran sur fermeture de la seconde activité.

Dans une application standard, la logique reviendrait à exécuter un écran modal et après la fermeture de l’écran, on afficherait le message. Ce qui donnerai en C#:

void MaLoquique()
{
Form ecran2 = new Form();
ecran2.ShowModal();
MessageBox.Show("mon message");
}

En Mono for Android, cela donnerait:

void MaLoquique()
{
this.StartActivity(typeof(ecran2));
Toast.MakeText(this, "Mon message", ToastLength.Short).Show();
}

Et là surprise… l’activité se lance et on voit le message s’afficher en même temps. Que passa???
En lisant la documentation du Android SDK et en surfant, j’arrive à la conclusion qu’Android est entièrement asynchrone.

Pour ceux qui connaisse un peu Flex, c’est la même « bordel », il faut tout synchroniser dans un evenement global.

Cet événement global est expliqué sur beaucoup de site et cela fonctionne bien pour une petite application qui n’a beaucoup d’écran imbriqué.

Parlons maintenant du synchronise entre deux threads, si un thread doit attendre la fin d’un autre Thread pour continuer son traitement. Comment faire?
Un novice ferait une boucle d’attente comme un while. Les développeurs utiliseront un mutex ou un sémaphore.
exemple: thread1 lance le thread2 et thread1 attends la liberation du jeton du mutex.
Pour celà j’utilise l’objet « AutoResetEvent ».

Pour en revenir à notre application, je vais appliquer ceprincipe sans passer par l’événement global.
Pour cela il faudra créer l’écran2 dans un Thread. En effet si je bloque le mutex dans le thread principal, votre application est figé!
Dans l’écran2, j’ai mis un AutoResetEvent en static

Activité principale:

void MaLoquique()
{
Thread t = new Thread(() =>
{
this.StartActivity(typeof(ecran2));

ecran2.MonMutex.WaitOne();

this.RunOnUiThread(() =>
{
Toast.MakeText(this, "Mon message", ToastLength.Short).Show();
});
});
t.Start();
}

Ecran2:

[Activity(Label = "ecran2")]
public class ecran2 : Activity
{
public static AutoResetEvent MonMutex = new AutoResetEvent(false);

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);

// Create your application here
}

protected override void OnDestroy()
{
base.OnDestroy();

MonMutex.Set();
}
}

le « RunOnUiThread » sert à intéragir avec le thread de l’activité en cours, néccessaire pour intéragir avec des élément graphiques.

Le miracle opère, le message s’affiche après la fermeture de l’écran2.

Dans le prochain billet, je décrirai un processus plus complet pour passer des variables et les mutex sur chaque activity lancés.

Voici le code source lié à ce billet

[Mono]Asynchrone Mon meilleur ennemi (suite)

Aktaour — Sun, 25 Dec 2011 11:32:59 +0000

Il y a quelques jours j’exposai vulgairement ma façon de développer en ansynchrone entre différentes activity.

Aujourd’hui je vous montre comment faire en mutualisant la génération des mutex et des paramètres passés entre activity.

Pour cela , je crée:

Une classe static nommée BibFrm (Bibliothèque pour les fomulaires) qui contiendra une liste de paramètres liée à chaque activity par un identifiant.
Une classe nommé ParamFrm qui contiendra les paramètres (cle/valeur) de mon activity
Un objet pour accéder de manière unique à mes paramètres (Univers Threadé) nommé mutexParamFrm
Une fonction de recupération de paramètres généric
Une fonction de suppression complète de paramètres
Une fonction d’ajout de paramètres
Une fonction de calcul du prochain identifiant des activity

La génération des identifiants des activity. Noté que l’objet mutexParamFrm sert à locker l’accès interThread a une seul iteration à la fois.

public static object mutexParamFrm = new object();
private static int idFrm = 0;
public static int ProchainIdFrm()
{
int result = 1;
lock (mutexParamFrm)
{
if (idFrm == Int32.MaxValue)
idFrm = 1;
else
idFrm++;
result = idFrm;
}
return result;
}

La classe contenant les paramètres

internal class ParamFrm
{
public string Cle = string.Empty;
public object Obj = null;

public ParamFrm()
{
}
public ParamFrm(string cle, object obj)
{
Cle = cle;
Obj = obj;
}
}

La fonction de récupération de paramètres

public static List recupListeParamFrm(int idFrm)
{
List listeParam = null;
if (listeParamDesFrm.ContainsKey(idFrm)) // récupération de la liste des paramètres par rapport à la clé
listeParam = listeParamDesFrm[idFrm];
else
{
listeParam = new List(); // génération de la liste si non présent
listeParam.Add(new ParamFrm("mutexfrm", new AutoResetEvent(false))); //ajout auto du mutex pour bloquer les activity parentes
listeParamDesFrm.Add(idFrm, listeParam);
}
return listeParam;
}

public static bool recupParamFrm(int idFrm, string nomParam, out T obj)
{
bool result = false;
obj = default(T);
nomParam = nomParam.ToLower();

lock (lockParamFrm)
{
List listeParam = recupListeParamFrm(idFrm);
foreach (ParamFrm paramFrm in listeParam)
{
if (paramFrm.Cle == nomParam) //la cle est toutjours un minuscule
{
result = true;
obj = (T)paramFrm.Obj;
break;
}
}
}
return result;
}

La fonction de vidage des paramètres

public static void viderParamFrm(int idFrm)
{
lock (lockParamFrm)
{
if (listeParamDesFrm.ContainsKey(idFrm))
listeParamDesFrm.Remove(idFrm);
}
}

La fonction d’ajout de paramètres

public static void ajouteParamFrm(int idFrm, string nomParam, object obj)
{
nomParam = nomParam.ToLower();
lock (lockParamFrm)
{
List listeParam = recupListeParamFrm(idFrm);

bool trouve = false;
foreach (ParamFrm paramFrm in listeParam)
{
if (paramFrm.Cle == nomParam) //la cle est toutjours un minuscule
{
trouve = true;
paramFrm.Obj = obj;
break;
}
}
if (!trouve)
listeParam.Add(new ParamFrm(nomParam, obj));
}
}

Pour plus de clareté, je lance l’activité « ecran2″ dans sa propre class par la méthode static Afficher:

public static void Afficher(Activity activity, string titre)
{
try
{
object obj;
int idFrm = BibFrm.ProchainIdFrm();
if (BibFrm.recupParamFrm(idFrm, BibFrm.nomParamMutexFrm, out obj))
{
BibFrm.ajouteParamFrm(idFrm, "titre", titre);

AutoResetEvent a = (AutoResetEvent)obj;
Intent intent = new Intent(activity, typeof(ecran2));

activity.RunOnUiThread(() =>
{
intent.PutExtra("idfrm", idFrm);
activity.StartActivity(intent);
});

a.WaitOne();
BibFrm.viderParamFrm(idFrm);
}
}
catch
{
}
}

Chaque paramètre sera ajouté dans la liste des paramètres customisé. Je ne préfère pas utiliser les Itent car il est impossible de leur passer des objets complexes sans les sérialiser.
L’itent est utilisé uniquement pour sauvegarder l’identifiant de la fenetre.

Dès lors, le thread est bloqué et attends la fermeture de l’activité.
Pour les plus codeurs d’entre vous, vous pouvez mettre tout ce code dans une activité parente et dérivé toutes vos activity de celle ci et le tour est joué.

Bonne fêtes de fin d’année.

Voici le code source lié à ce billet

[Mono]Orientation de l’écran

Aktaour — Mon, 26 Dec 2011 10:11:33 +0000

Sur Android, l’orientation de l’écran influe sur l’affichage des applications.
L’Android SDK offre la possibilité aux écrans de s’adapter à la résolution par ces systèmes de gravité (sorte de point d’ancrage).
Je crée mon application et je m’amuse à la passer du mode portrait au mode paysage.
Cette application se connecte en TCP à mon PC, et rapidement je me suis rendu compte que mon application se comporte étrangement.

En effet, à chaque changement d’orientation, ma connexion TCP se renouvelle. Après plusieurs heures d’analyses et de recherches j’ai compris et résolu le problème.

Par défaut, à chaque changement d’orientation, l’Activity courante est détruite puis recréé par le système Android.
Imaginez ma frustration en constatant cela, où sont mes objets en mémoires -> disparu….

Je connais deux solutions à ce problème:

Surcharger la méthode onRetainNonConfigurationInstance pour en sauvegarder un seul objet. Je dé-conseil ce n’est vraiment pas pratique
Surchager la méthode OnConfigurationChanged

Le fait de surcharger la méthode OnConfigurationChanged et de définir la propriété ConfigurationChanges au Manifeste permet de ne plus redémarrer l’activité courante en cas de changement d’orientation.

TIPs: en java, les propriétés ConfigurationChanges se trouve dans le fichier AndroidManifest.xml du projet. Sous Mono for Android c’est dans l’entête de votre définition de la classe qu’il se trouve.

Exemple:

[Activity(Label = "FrmTest ", ConfigurationChanges=Android.Content.PM.ConfigChanges.Orientation)]
public class FrmTest : Activity
{
///

/// Permet de ne plus redemarrer l'activité sur un changement de configuration
///

///
public override void OnConfigurationChanged(Configuration newConfig)
{
base.OnConfigurationChanged(newConfig);
}
}

Cette petite astuce vous permettra sans doute de gagner du temps :).

Mono for Android

Aktaour — Wed, 21 Dec 2011 21:15:03 +0000

Bonjour,

Je suis passé d’un Iphone à un Samsung Note sous Android 2.3.6, je pars donc à la découverte de Mono for Android.

Pour information, Mono for Android permet de développer des applications en C#. Il est basé sur le runtime Mono et est propriété de la société Xamarin .

L’interface graphique est basé sur les fichiers axml de l’android sdk. Il est donc assez aisé de trouver de la documentation sur la partie graphique sur le site officiel.

Ce qui va m’intéresser pour le moment c’est de comprendre et de détourner la logique du tout asynchrone de l’Android SDK qui pour tout dire m’horripile grandement.
L’application se décompose en Activity, Widget et d’autres choses que je ne connais pas encore.
-Les Activity sont les écrans de votre application.
-Les Widgets sont les composants utilisateurs affichés dans les Activity.

Pour ce qui est du développement, vous écrivez du code .Net en C# dans Visual Studio 2010 ou/et MonoDevelop sous Windows/Linux/MacOSX.

Un émulateur existe pour tester vos applications mais il est extrêmement long à la détente tout du moins sous Windows.
La seule solution pour pouvoir développer correctement est d’acheter une licence de développement (399 euros pour un développeur).
Je sais que c’est cher payé pour développer en C# alors que le développement en Java est totalement gratuit.

La puissance de Xamarin c’est que le code hors écran est compatible sous Iphone/IPad. Il suffit de refaire les écrans de vos applications et de fusionner le code métier sous les différentes plateforme.

En poussant le vice, vous pouvez même avec une certaine organisation étendre cette réutilisation de code sous Windows PC/Mobile/Phone.

Par exemple pour mon entreprise, il y a plusieurs années j’ai porté une application de vente écrite en C# CF (Windows mobile/CE) sous Windows XP. En réorganisant tout simplement l’application, avec une directive de compilation.

Il y a quelques jours, je me suis mis en tête de récidiver en m’attaquant à la plateforme Android. Pour ce faire, j’ai bien évidemment choisi Mono for Android et après 3 soirées, j’ai porté environ 80% du code métier en modifiant moins de 5% de sont code.
Le plus gros changement fut au niveau des requetes vers la base de données. J’ai du retravailler les requêtes et les connexions à la base pour utiliser une base SqLite au lieu de SQLCe database.

Une fois le code données et métier portés, je me suis attaqué à l’interface graphique et la au mon Dieu « tout est asynchrone »

Quel casse tête!

Au fil des entrées du blog, je vous expliquerai comment contourner assez facilement le mode asynchrone pour le rendre synchrone.
Beaucoup d’entre vous me dirons que c’est une hérésie, moi je parlerai plutôt de logique d’application.
Comme je le dis souvent, la simplicité est le maître mot de la durabilité.

QML Cursor

Aktaour — Wed, 26 Jan 2011 09:45:26 +0000

Un petit billet pour vous montrer comment changer le curseur de la souris lors du survole d’un bouton dans une application Qt mixte C++/QML.

Il n’existe apparemment pas de fonction QML pour changer le curseur de l’application, je vous propose donc de le faire manuellement.

Résultat :

Bibliothèque C++ :

Je crée une classe de bibliothèque nommé Biblio.
Dans cette classe, je crée une méthode AfficheCurseur qui récupère le nom du curseur et qui affiche le curseur correspondant.

Biblio.h

#ifndef BIBLIO_H
#define BIBLIO_H
#include
#include

class Biblio : public QObject
{
Q_OBJECT
public:
explicit Biblio(QObject *parent = 0);
Q_INVOKABLE void AfficheCurseur(QString);
signals:
public slots:

};
#endif // BIBLIO_H

Biblio.cpp

#include "biblio.h"
#include
#include

Biblio::Biblio(QObject *parent) :
QObject(parent)
{
}
void Biblio::AfficheCurseur(QString typeCurseur)
{
QCursor curseur;
if(typeCurseur.toUpper() == "HAND")
curseur = QCursor(Qt::PointingHandCursor);
else
curseur = QCursor(Qt::ArrowCursor);
QApplication::setOverrideCursor(curseur);
}

Connexion C++ vers QML :

Pour rendre accessible la méthode AfficheCurseur en QML, il faut référencer un objet Biblio dans l’objet QDeclarativeView.

Dans le fichier MainWindow.h, je crée mon objet Biblio.

private:
QDeclarativeView *ui;
Biblio biblio;

Dans le fichier MainWindow.cpp j’ajoute la référence de mon objet Biblio sur le contexte du QDeclarativeView.
Dans mon code QML, il sera appelable par le nom donné dans la méthode setContextProperty

ui->rootContext()->setContextProperty("Biblio", &biblio);

Création du composant Bouton :

Je m’appuie sur les boutons de l’exemple fourni dans Qt sdk 4.7 disponible à cette adresse

Je crée un fichier QML nommé Bouton.qml.
Dans ce bouton, je crée une surface de capture d’événement de la souris MouseArea. Sur cette surface, je me connecte au signal onEntered et onExited qui respectivement capture l’entrée et la sortie du la souris sur la surface d’exposition.
Attention, la propriété hoverEnabled doit être active, sinon l’événement est appelé uniquement lors du clique de la souris.

Sur ces signaux, j’appelle la fonction AfficheCurseur de mon objet Biblio.

Ce qui donne :

import Qt 4.7
BorderImage {
id: button
property alias text: buttonText.text
property alias font: buttonText.font
property string color: ""
property string hint: ""
property int bordure: 8;
property int tag: 0;
signal boutonClick(int idBouton)
source: "images/button-" + color + ".png"; clip: true
border { left: 10; top: 10; right: 10; bottom: 10 }
width: buttonText.width + bordure*2;
Rectangle {
id: shade
anchors.fill: button; radius: 10; color: "black"; opacity: 0
}
Text {
id: buttonText
anchors.centerIn: parent; anchors.verticalCenterOffset: -1
font.pixelSize: 20;
style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
button.boutonClick(button.tag)
}
onEntered: {
Biblio.AfficheCurseur("hand")
}
onExited: {
Biblio.AfficheCurseur("none")
}
}
states: State {
name: "pressed"; when: mouseArea.pressed == true
PropertyChanges { target: shade; opacity: .4 }
}
}

Installation Qt / Qt Creator / Qt Quick

Aktaour — Fri, 21 Jan 2011 09:31:21 +0000

Le but de ce billet est de présenter l’installation de Qt, Qt creator et Qt Quick sur un environnement Windows XP.

Mes Pré requis :

Plateforme Windows Xp
Installation de Qt SDK: Complete Development Environment 4.7.0 à partir de cette adresse : http://qt.nokia.com/downloads
Doc d’installation Qt windows : http://doc.qt.nokia.com/latest/install-win.html

Installation :

J’installe Qt 4.7.0 dans le répertoire C:\Qt\2010.05 puis je renseigne la variable d’environnement %PATH%= … ; C:\Qt\2010.05\bin;C:\Qt\2010.05\qt\bin

Je lance Qt Creator et j’obtiens ce résultat.

Pour activer le designer de fenêtre QML, il faut activer le plugin dans QtCreator.
Aller dans le menu « Aide/A propos des plugins » et dans la fenêtre « Plugins installés » il faut tout activer dans le sous menu « Qt Quick ».

Premier projet :

Pour tester la configuration, je crée un projet via la menu « Fichier/Nouveau Fichier ou projet » et sélectionner le type de projet « QML Application ».

Je nomme le projet « InstallQml » et Qt Creator crée le projet.

Le code Qml ressemble à ceci :

import Qt 4.7
Rectangle {
width: 200
height: 200
Text {
x: 66
y: 93
text: "Hello World"
}
}

Si je clique sur le menu de gauche Design, j’obtiens le rendu de mon application :

Tout à l’air de bien fonctionner

———————————
Edit: Ajout du chemin C:\Qt\2010.05\qt\bin dans la variable d’environnement

Traduction interface QML

Aktaour — Fri, 21 Jan 2011 15:08:50 +0000

Le but de ce billet est de tester l’internationalisation des applications QML.

Je m’appuie sur la documentation Qt « QML Internationalization » disponible sur ce lien http://doc.qt.nokia.com/4.7-snapshot/qdeclarativei18n.html.

Mot clés :

L’internationalisation d’une application classique Qt passe par l’utilisation de la balise tr().
Exemple : tr(« bonjour »).

En QML, le mot clé « tr » a été remplacé par « qsTr« .
Exemple : qsTr(« bonjour »).

Le mot clé « qsTr » peut être remplacé d’après la documentation par « qsTranslate« , « QT_TR_NOOP » et « QT_TRANSLATE_NOOP« .

Dans le code C++, j’utiliserai toujours le mot clé « tr » et dans mes fichiers QML, j’utiliserai le mot clef « qsTr ».

Tests :
Je crée un projet de type QML Application.

Le fichier QML généré est le suivant.

import Qt 4.7
Rectangle {
width: 200
height: 200
Text {
x: 66
y: 93
text: "Hello World"
}
}

Je modifie la chaîne HelloWorld par qsTr(« Bonjour »).

import Qt 4.7
Rectangle {
width: 200
height: 200
Text {
x: 66
y: 93
text: qsTr("Bonjour")
}
}

Ce qui donne ceci en mode design :

Et cela en exécution:

Interrogation :

Je n’ai pas traduit mon application mais j’ai quand même la chaîne « Bonjour » affichée.
Pourquoi ?

Tout simplement car le module de traduction de Qt affiche par défaut le texte non traduit s’il ne trouve pas de traduction.

Traduction de l’application QML:

La traduction de l’application fonctionne grâce à plusieurs logiciels : lupdate.exe, lrelease.exe et linguist.exe

lupdate sert à générer un fichier xml d’extension « .ts » contenant les traductions de plusieurs fichiers QML.
Exemple : lupdate fic1.qml fic2.qml –ts trad.ts
lrelease sert à compiler le fichier ts en un fichier binaire d’extension « *.qm »
Exemple : lrelease trad.ts
linguist est une application graphique d’aide à la traduction.

Tests :

J’applique la traduction au projet ci-dessus :

Etape 1 : J’ouvre une ligne de commande dos et je me place dans le répertoire de mon application

Etape 2 : Je génère le fichier QtTraduction.ts

Le fichier ressemble à ceci :

QtTraduction

Bonjour

Etape 3 : Qt linguist

Je lance la commande : liguist QmlTraduction.ts et je choisi la langue cible de ma traduction.

Ici je renseigne la traduction française par une autre traduction française pour l’exemple.

Ensuite je valide la traduction par le bouton entouré sur l’image.

J’enregistre et je quitte l’application.

Dès lors, le fichier QmlTraduction est complété par la traduction.

QtTraduction

Bonjour
Salut

Etape 4 : Génération du fichier de traduction compilé

Je lance la commande : lrelease QtTraduction et j’obtiens un fichier QtTraduction.qm.

Etape5 : Lancement de l’application traduite.
Pour appliquer la traduction via qmlviewer, il faut préciser les fichiers de traduction via la commande :
Qmlviewer –translation QtTraduction.qm QtTraduction.qml

Voilà, je n’ai plus qu’à appliquer ce principe pour mes traductions d’applications QML.