[W8] Afficher du texte avec des colonnes

Très utile (Afficher du texte avec des colonnes)

Christian Kouamé | Tech Blog

Bonjour à tous et à toutes, aujourd’hui nous allons adresser une problématique qui vous a surement emmerdé à fond dans vos app Windows 8 : comment mettre en forme son texte pour avoir des colonnes ?

Le problème

Vous voulez faire une superbe app pour votre blog, mais vous voulez qu’il ai une superbe disposition comme dans cette app :

image

Le soucis est qu’aucun contrôle natif de Windows 8 ne vous permet de faire ce genre de disposition avec colonnes.

L’observation

Alors comment est ce que ces développeurs à USA Today on réussi à le faire ? Si vous êtes un peu fouineurs, vous avez surement remarqué qu’en créant un projet de type grille (sous Visual Studio 2012),  la page ItemsDetailPage est capable de nous afficher le texte en multi-colonnes.

La solution

Comme dit plus haut, si vous essayez avec Visual Studio 2013 (et donc avec une application Windows 8.1)…

View original post 1 713 mots de plus

Présentation de quelques applications 1

J’ai décidé de publier une série d’articles sur quelques applications réalisées par des amis. C’est ma manière à moi de les encourager à continuer de produire des applications.

Les applications sont citées selon l’ordre alphabétique des noms des applications.
Le nom des applications sera accompagné de leur description disponible sur le Windows Phone Store.

  • AstroPunch
    Description :
    Reçoit quotidiennement ton horoscope (Arabe, Chinois et Français) ainsi que chaque mois, ta personnalité suivant ton signe Astrologique….Si tu aimes L’astrologie, AstroPunch est fait pour toi…. Tu vas l’adorer
  • CIV Foot
    Description :
    Avec CIV Foot dans votre poche, consultez l’actualité et suivez les flux Twitter football ivoirien.
  • Distance
    Description :
    Cette application vous permettra de vous géolocaliser et donner la distance de votre position à un lieu géographique de votre choix et la nouveauté c’est que vous pourriez visualiser l’itinéraire de votre position au lieu que vous indiquerez.
  • PlanComptable
    Description :
    Votre plan comptable OHADA (Organisation pour l’Harmonisation en Afrique du Droit des Affaires) est maintenant disponible sur mobile dans sa version 1.0.0.0
    Fonctionnalités:
    -Navigation par classe
    -Recherche des comptes
  • This Day
    Description :
    This Day vous donne l’éphéméride du jour, accompagnée de liens utiles pour chaque évènement historique.
    Une citation journalière est aussi disponible, vous pouvez en outre partager les évènements et la citation à vos contacts.Plus :Cette application est disponible également sur Windows 8 (interface Modern UI).

    N’hésitez pas à télécharger ces applications puis à les évaluer.

LES APPLICATIONS MODULAIRES : Plug-In, Add-In, Add-on (2ème partie et fin)

Dans la 1ère partie de ce tutoriel nous avons vu comment mettre en place un système de plugin pour son application. Dans cette seconde partie nous ferons la même chose mais en utilisant MEF (Managed Extensibility Framework). Commençons sans plus tarder !

Etape 3 : Création des plugins

Ce n’est pas une erreur : en effet les étapes 1 et 2 sont les mêmes que les étapes 1 et 2 de la 1ère partie de ce billet.

Créons le 1er plugin :

  1. Ajoutez un nouveau projet basé sur le template Bibliothèque de classes à la solution et nommer le Plugin1.
  2. Ajoutez une référence au projet PluginContract.
  3. Sélectionnez la référence de projet et dans la fenêtre de propriété mettez Copie
    locale à false.
  4. Renommez la classe par défaut en Plugin1
  5. Faites-la implémenter l’interface IPlugin.
  6. Ajoutez une référence à System.ComponentModel.Composition
  7. Faites un import : using System.ComponentModel.Composition ; dans la classe Plugin1.
  8. Marquez la classe avec l’attribut d’export : Export(typeof(IPlugin))

Créons un autre plugin :

Répétez les étapes 1 à 6 en changeant Plugin1 par Plugin2.

Des explications s’imposent sur le rôle de l’attribut Export(typeof(IPlugin)) mais patientons jusqu’à la prochaine étape qui est juste en dessous.

Etape 4 : Création de l’application hôte

Nous devons charger dynamiquement les plugins au démarrage de l’application.

C’est ce que nous allons faire.

  1. Ajoutez un nouveau projet basé sur le template Application console à la solution et nommer le MyApp.
  2. Ajoutez une référence au projet PluginContract.
  3. Sélectionnez la référence de projet et dans la fenêtre de propriété mettez Copie
    locale à false.
  4. Ajoutez une référence à System.ComponentModel.Composition.
  5. Dans l’explorateur de solution, ajouter une nouvelle classe au projet puis nommez-la : PluginLoader.

Insérez le code ci-dessous :


Les explications :

Si vous avez suivis la 1ère partie de billet vous avez sûrement remarqué un changement énorme dans la classe PluginLoader.cs : elle est beaucoup plus simple et compréhensible et c’est grâce à l’attribut Export(typeof(IPlugin)) de l’étape 3. Cet attribut permet d’indiquer à notre plugin le type de contrat qu’il doit respecter. Ainsi dans notre classe PluginLoader nous n’avons qu’à lui indiquer le chemin à partir duquel il doit charger les plugins et il se charge tout seul de charger les bons plugins c’est-à-dire ceux qui respectent leur contrat.

  1. Dans la classe Program.cs ajoutez le code ci-dessous :

Etape 5 : Création d’un répertoire d’installation

Lorsque vous développez une application modulaire vous devez mettre tous vos plugins dans un dossier particulier qui se trouve généralement dans le dossier d’installation de votre application. Pour simuler ceci nous allons créer les dossiers suivants n’importe où sur notre disque :

MyApp
Plugins
PluginContract

Configuration des options de déploiement :

  1. Pour chacun des projets dans la solution, allez dans l’onglet Générer des propriétés du projet puis changez le chemin de sortie comme suit :
Projet Chemin
MyApp MyApp
Plugin1 MyApp\Plugins
Plugin2 MyApp\Plugins
PluginContract MyApp\PluginContract
  1. Ensuite générez la solution (F6)
  2. Dans l’explorateur de solution, définir MyApp comme projet de démarrage.
  3. Exécuter l’application (F5)

Si tout se déroule sans erreur vous obtiendrai cet écran :


Le même résultat que celui de la 1ère partie mais obtenu de façon beaucoup plus simple grâce à MEF.

LES APPLICATIONS MODULAIRES : Plug-In, Add-In, Add-on (1ère partie)

Les applications que nous développons sont très souvent amenées à évoluer. Lorsque nous désirons ajouter de nouvelles fonctionnalités l’une des solutions est de recompiler l’application et de mettre la nouvelle version à la disposition des utilisateurs. Il leur faudrait donc désinstaller l’ancienne application afin d’installer la nouvelle. L’une des solutions à ce problème est de construire des applications modulaires, c’est-à-dire avec des fonctionnalités qui se rajoutent automatiquement sans avoir besoin de recompiler l’application. Il existe beaucoup d’application utilisant ce fonctionnement :

  • Internet Explorer
  • Visual Studio
  • Word
  • Etc…

Ce billet a pour objectif de vous apprendre à développer vos applications de façon modulaire.

Comment ça marche ?

Le fonctionnement est simple. Vous devez exposer les fonctionnalités de vos applications dans des fichiers dll. Ces dll seront vos plugins. Toute application prenant en charge les plugins doit être capable de :

  • Charger dynamiquement les plugins à son démarrage.
  • Vérifier que les plugins respectent leur contrat (nous y reviendrons).
  • Communiquer avec ces plugins.
  • S’assurer que ces plugins fonctionnent toujours même en cas d’évolution de l’application.

Certains points vous paraissent surement évidents mais ils sont tout de même importants.

Revenons sur le 2ème point :

  • Vérifier que les plugins respectent leur contrat.

En effet, la 1ère étape pour créer un plugin est de définir un contrat (ou modèle) c’est-à-dire la structure que doivent respecter les plugins afin de pouvoir communiquer avec votre application. Du point de vu de la programmation vous avez deux manières de définir ce modèle :

  1. Une classe abstraite
  2. Une interface

Alors classe ou interface ?

Nous n’allons pas nous mettre à faire une étude comparative en classe abstraite et interface. Toutefois sachez qu’en .NET une classe ne peut hériter que d’une seule classe mais peut implémenter plusieurs interfaces.

Nous utiliserons donc les interfaces afin de ne pas obliger les développeurs de plugins à hériter de notre contrat (contrat de plugin).

Etape 1 : Création d’une solution Visual Studio

Commençons par créer une solution pour nos différents projets.

  1. Dans Visual Studio, créer un nouveau projet basé sur le template Bibliothèque de classes et nommer le PluginContract.
  2. Nommer la solution PluginApp.

Etape 2 : Création du contrat

  1. Dans Visual Studio, ouvrez le projet nommé PluginContract.
  2. Dans l’explorateur de solution, supprimez la classe créée par défaut.
  3. Dans l’explorateur de solution, ajoutez une nouvelle interface au projet puis nommez-la : IPlugin.
  4. Insérez le code ci-dessous


    Nos plugins pourront donc faire deux choses : Do et Other.

Etape 3 : Création des plugins

Créons le 1er plugin :

  1. Ajoutez un nouveau projet basé sur le template Bibliothèque de classes à la solution et nommer le Plugin1.
  2. Ajoutez une référence au projet PluginContract.
  3. Sélectionnez la référence de projet et dans la fenêtre de propriété mettez Copie
    locale à false.
  4. Renommez la classe par défaut en Plugin1.
  5. Faites-la implémenter l’interface IPlugin.
  6. Insérer le code ci-dessous

Créons un autre plugin :

Répétez les étapes 1 à 6 en changeant Plugin1 par Plugin2.


Etape 4 : Création de l’application hôte

Les plus attentifs d’entre vous se souviendront de ceci :

Toute application prenant en charge les plugins doit être capable de :

  • Charger dynamiquement les plugins à son démarrage.

C’est ce que nous allons faire.

  1. Ajoutez un nouveau projet basé sur le template Application console à la solution et nommer le MyApp.
  2. Ajoutez une référence au projet PluginContract.
  3. Sélectionnez la référence de projet et dans la fenêtre de propriété mettez Copie
    locale à false.
  4. Dans l’explorateur de solution, ajouter une nouvelle classe au projet puis nommez-la : PluginLoader.

Insérer le code ci-dessous :

public static class PluginLoader
{
  public static ICollection<IPlugin> LoadPlugins(string path)
  {
    string[] dllFileNames = null;
    if (Directory.Exists(path))
    {
      dllFileNames = Directory.GetFiles(path, "*.dll");
      ICollection<Assembly> assemblies = new List<Assembly>(dllFileNames.Length);
      foreach (string dllFile in dllFileNames)
      {
        AssemblyName an = AssemblyName.GetAssemblyName(dllFile);
        Assembly assembly = Assembly.Load(an);
        assemblies.Add(assembly);
      }
      Type pluginType = typeof(IPlugin);
      ICollection<Type> pluginTypes = new List<Type>();
      foreach (Assembly assembly in assemblies)
      {
        if (assembly != null)
        {
          Type[] types = assembly.GetTypes();
          foreach (Type type in types)
          {
            if (type.IsInterface || type.IsAbstract)
            {
              continue;
            }
            else
            {
              if (type.GetInterface(pluginType.FullName) != null)
              {
                pluginTypes.Add(type);
              }
            }
          }
        }
      }
      ICollection<IPlugin> plugins = new List<IPlugin>(pluginTypes.Count);
      foreach (Type type in pluginTypes)
      {
        IPlugin plugin = (IPlugin)Activator.CreateInstance(type);
        plugins.Add(plugin);
      }
      return plugins;
    }
    return null;
  }
}

  1. Dans la classe Program.cs ajoutez le code ci-dessous :

Etape 5 : Création d’un répertoire d’installation

Lorsque vous développez une application modulaire vous devez mettre tous vos plugins dans un dossier particulier qui se trouve généralement dans le dossier d’installation de votre application. Pour simuler ceci nous allons créer les dossiers suivants n’importe où sur notre disque :

MyApp
Plugins
PluginContract

Configuration des options de déploiement :

  1. Pour chacun des projets dans la solution, allez dans l’onglet Générer des propriétés du projet puis changez le chemin de sortie comme suit :
Projet Chemin
MyApp MyApp
Plugin1 MyApp\Plugins
Plugin2 MyApp\Plugins
PluginContract MyApp\PluginContract
  1. Ensuite générez la solution (F6)
  2. Dans l’explorateur de solution, définir MyApp comme projet de démarrage.
  3. Exécuter l’application (F5)

Si tout se déroule sans erreur vous obtiendrai cet écran :


Nous verrons dans un prochain billet une autre approche pour réaliser des applications modulaire. Cette nouvelle autre approche facilitera grandement le chargement dynamique des plugins…

En attendant j’espère que vous avez aimé ce billet.

NOMMER LES GROUPES SUR WINDOWS 8

Nous sommes le 30/05/2013 et je viens de découvrir une fonctionnalité de Windows 8 dont j’ignorais l’existence : NOMMER LES GROUPES.
Vous ne savez toujours pas de quoi je parle ? Voyons donc le résultat, c’est plus parlant.

Windows 8
Résultat final

Ces groupes vous permettent de mieux organiser votre bureau. Vous pouvez aussi nommer les différents groupes d’applications comme sur la capture ci-dessus. Les catégories Mes amis, représente les applications (This Day et Titrologie) développées par des amis à moi et disponibles sur le store. Bref ! Pour faire pareil suivez les étapes ci-dessous :
1. Placer les curseur en bas à droite de l’écran et faites un clic sur l’icône en jaune sur l’image

Personnalisation du bureau
Personnalisation du bureau

2. Puis faite un clic droit sur le groupe que vous désirez nommez puis cliquez sur Nommer le groupe

Afficher les options
Afficher les options

3. Entrez un nom puis validez.

Resiseignez le champ
Reneignez le champ

4. Répétez à haute voix « WINDOWS 8 c’est génial » wlEmoticon-winkingsmile.png

J’espère que ce petit billet vous aura été utile

WPF: Exploiter Windows 7

Windows 7 est un système d’exploitation de la société Microsoft. Et comme tout nouveau système il apporte aussi son lot de fonctionnalités. Nous parlerons de quelques fonctionnalités qui sont peu exploitées par les développeurs Windows 7 (si je peux le dire ainsi Tire la langue).

Les Jump-Lists, qu’est-ce c’est?

Vous en avez surement déjà vu! Ce sont ces petites listes qui s’affiche lorsque vous faites un clic-droit sur l’icone (dans la barre des tâches) d’une application.

Voici un aperçu de la Jump-List de Firefox:

JumpList_Firefox

Celle de Firefox permet de retenir les sites les plus visités et d’ouvrir une nouvelle session. Celle de VLC permet de retenir les derniers média lus. Quant à vous vous pourrez trouvez un usage bien particulier à votre Jump-List mais avant il faudra lire un peu encore Clignement d'œil.

En WPF 4 la classe System.Windows.Shell.JumList vous permet de définir votre propre Jump-List depuis le code behind ou même depuis le code XAML. Nous n’étudierons ici que le code XAML.

La pratique

Commencez déjà par créer un nouveau projet dans Visual Studio:

1. Fichier –> Nouveau –> Projet

2. Sélectionnez votre langage. Je choisirai le C#.

3. Dans la catégorie Windows, sélectionnez le Template Application WPF

4. Donnez un nom à votre solution, ici je donnerai le nom: Win7App, puis validez.

Si tout s’est bien déroulé vous devriez voir afficher le code XAML. Double-cliquez ensuite sur le fichier App.xaml dans l’explorateur de solution.

Créons enfin notre Jump-List en y insérant dans la balise Application le code suivant:

<JumpList.JumpList>
<JumpList>
 <JumpTask CustomCategory= »Catégorie 1″
Title= »Bloc-note »
 ApplicationPath= »%WINDIR%\system32\notepad.exe »
 IconResourcePath= »%WINDIR%\system32\notepad.exe »
Description= »Démarrer Bloc-note »/>
 <JumpTask CustomCategory= »Catégorie 2″
 Title= »Cmd »
ApplicationPath= »%WINDIR%\system32\cmd.exe »
IconResourcePath= »%WINDIR%\system32\cmd.exe »
Description= »Démarrer cmd.exe »/>
 <JumpTask CustomCategory= »Catégorie 2″
 Title= »Calculatrice »
ApplicationPath= »%WINDIR%\system32\calc.exe »
IconResourcePath= »%WINDIR%\system32\calc.exe »
 Description= »Démarre la calculatrice de Windows »/>
</JumpList>
</JumpList.JumpList>

Voici un aperçu du contenu du fichier App.xaml:

JumpList_Win7App

Lancez votre application (F5) puis faites un clic-droit sur l’icône dans la barre des tâches et vous verrez ceci:

JumpList_Preview

Cliquez sur les Jump-Task et vous verrez que les applications (Notepad, Cmd, Calculatrice) vont apparaitre.

Etudions maintenant les différentes propriétés utilisées:

PROPRIETES DESCRIPTIONS
CustomCategory Définit la catégorie à laquelle appartient la Jump-Task
Title Titre de la Jump-Task
ApplicationPath Chemin de l’application à lancer lors du clic sur la Jump-Task. Ceci peut désigner le chemin d’un fichier également… Dans notre cas nous avons utiliser des applications qui existe nativement sous Windows mais vous auriez pu lancer VLC par exemple.
IconResourcePath Icône associée à la Jump-Task
Description Description à afficher lors du survol de la souris (Tooltip)

Simple hein Clignement d'œil, pas vrai ? Voilà “c’est tout pour le moment”.

DATA BINDING, KESAKO?

Le Data Binding ou Liaison de données consiste à lier un contrôle à une source de données. Il suffit d’indiquer au contrôle où trouver les données et il se débrouille pour les afficher. Ainsi les propriétés de vos contrôles se mettrons à jour automatiquement en fonction des mise à jours apportées sur la source de données. Inversement si des modifications sont apportées sur votre interface alors la source de données peut aussi être mise à jour. Cette technique permet donc d’automatiser votre interface (ce qui est automatisable bien sur) et aussi de réduire les risques d’erreurs. Bon un exemple vaut mieux qu’un long discourt, commençons sans plus tarder.

Les différents mode du binding

Dans la pratique le binding se fait sur une ou plusieurs propriétés d’un contrôle. Vous pouvez par exemple lier la propriété Text d’un Label au champ Nom d’une table de votre base de données. La propriété sur laquelle porte le binding est appelé cible et la source de données est appelé source (évident non). Cependant il existe des modes permettant définir la façon dont les mises à jour seront appliquées aux propriétés de votre contrôle.

Mode Description
OneWay Dans ce mode la propriété est mise à jour lorsque la propriété change.
TwoWay La propriété est mise à jour lorsque la propriété change, et inversement la source de données est mise à jour lorsque la propriété est modifiée.
OneWayToSource Ce mode est le même que le mode OneWay mais dans le sens inverse. Autrement dit si la propriété est modifiée,  la source de donnée est mise à jour.

Pour pouvoir faire le binding il faut créer une classe. Nous allons donc supposer que nous devons faire une application de gestion de contact. Créons donc la classe contact.

Code C#: Contact.cs

Contact

Ensuite rendez vous dans le fichier MainPage.xaml/cs. Nous allons Peupler notre notre application. Pour cela créons une liste de contacts comme suit:

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace WinPhoneApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        List<Contact> contacts;
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
            contacts = new List<Contact>()
            {
                new Contact(){
                    email = « email@example.com »,
                    FirstName = « Mekoundé »,
                    LastName = « Olivier Cloataire »,
                    Picture = “/Images/img1.png »
                },
                new Contact(){
                    email = « email@example.com »,
                    FirstName = « Kouamé »,
                    LastName = « Kakou Christian »,
                    Picture = “/Images/img2.png »
                },
                new Contact(){
                    email = « email@example.com »,
                    FirstName = « N’guessan »,
                    LastName = « Bogui Jean-Martin »,
                    Picture = « /Images/img3.png »
                },
                new Contact(){
                    email = « email@example.com »,
                    FirstName = « N’guessan »,
                    LastName = « Bogui Jean-Martin »,
                    Picture = « /Images/img4.png »
                }
            };
        }
    }
}

Maintenant que nous avons des données dans notre application, il faut définir comment ces données seront affichées. Pour cela nous aurons recours au fichier MainPage.xaml.

Insérer le code suivant dans le composant Grid ayant pour nom ContentPanel:

MainPage_3

Comme on peut le voir sur l’image précédente, certaines propriétés d’un contrôle sont sous la forme: ControlProperty=”{Binding ClassProperty}”.

  • ControlProperty correspond à la propriété (d’un control) sur laquelle vous désirez réaliser le binding.
  • ClassProperty correspond à la propriété (d’une classe, ici Contact) qui va jouer le rôle de source de données pour le ControlProperty auquel il est lié.

NB: La ClassProperty doit être public.

Voyons où nous en sommes:

  • Nous avons des données pour peupler notre application.
  • Nous avons défini un modèle pour l’affichage de nos données.

Il nous maintenant lier notre modèle d’affichage à nous données.

pour cela insérez ce bout de code dans le constructeur de la classe MainPage:

public MainPage()
        {
            InitializeComponent();
            …
            …
            /*Code pour les données contacts = new List(){…}*/
            this.contactListView.ItemsSource = contacts;
         }

 

 

Normalement c’est fini mais, pour que l’affichage soit correcte il faut ajouter des images pour les contacts. Ajoutez donc un dossier Images dans l’explorateur de solution et insérez y 5 images (img1.png, img2.png, img3.png, img4.png, img5.png) et assurer vous que leur propriété Action de génération  a pour valeur Contenu.

Votre explorateur de solution devrait ressembler à ceci:

ExplorateurSolution

Ensuite exécutez votre application (F5) pour voir le résultat.

J’ai le résultat suivant:

ContactWin

Pas fameux hein mes images Tire la langue, mais vous aurez compris le principe (enfin,je l’espère).