Enfin trouvé, le poster du développeur ultime de Silverlight 2!

Vous pourrez comparer les nouveautés par rapport à Silverlight V1 disponible sur ce billet.

On notera notamment Linq qui est un nouveau concept de programmation, concrètement, il permet d'effectuer des requêtes façon SQL sur des objets, voire de l'XML au sein d'un code C# ou VB. C'est d'ailleurs cette technique qui a été employée dans un Hands-on-Labs qui consiste en récupérer les 15 posts les plus récents à partir de 3 flux RSS (consulter ce blog). Pour avoir un tour d'horizon de Linq je vous suggère de lire cet article très intéressant : Présentation de Linq avec C#.

 

Un avantage que je note : le filtrage des données et le tri en un minimum de code

var mashedItems =
    from feed in feeds
    from item in feed.Items
    where item.PublishDate > minDate // filtrage
    orderby item.PublishDate descending // tri
    select item;

Amazon propose ses Services Web librement exploitables à partir de son site http://docs.amazonwebservices.com/AWSECommerceService/2008-04-07/GSG/ .

Je me suis laissé tenter par l'exploitation de ce service Web. A l'aide de ce blog, j'ai ainsi développer une application Silverlight consommant un WSDL.

• S'inscrire sur http://aws.amazon.com/ afin d'obtenir un AWS Access Key ID
• Créer un nouveau projet Silverlight sous Visual Studio 2008, appelez le par exemple "MyAmazon"
• Dans le projet "MyAmazon", faites un clic droit sur References et Add Service Reference

• Dans le champ "Address" tapper

'http://webservices.amazon.com/AWSECommerceService/FR/AWSECommerceService.wsdl'

(sans les '') et appuyer sur Go.

 

Nommer cette référence "Amazon". (Namespace)

• Si tout se passe bien vous devriez obtenir la fenêtre ci-dessous :
  
   

 

• Dans Page.xaml, nous aurons besoin de 3 objets (modifier les balises initiales <Grid ...> </Grid> par <Canvas ...></Canvas>:
  • Un TextBox nommer le _keyword

<TextBox x:Name="_keyword" Height="26" Width="460" Canvas.Left="29" Canvas.Top="24" FontStyle="Italic" Text="Muse" />

• Un bouton, affectez lui un évènement "Click"

<Button x:Name="_search" Width="100" Height="30" Click="search_Click" Content="Search" Canvas.Top="20" Canvas.Left="520"/>

• Une ListBox pour afficher le résultat, nommer le _listbox

<ListBox x:Name="_listbox" Width="500" Height="400" Canvas.Top="100" Canvas.Left="20" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="400"/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="{Binding SmallImage.URL}"/>
                        <TextBlock Grid.Column="1" Text="{Binding ItemAttributes.Title}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

• Passons au code dans Page.xaml.cs, il faut gérer l'évènement du clic sur le bouton "_search", soit la méthode "search_Click"
  Vérifier que vous avez bien inclus une référence vers le service Amazon importé (voir étape 4) : using MyAmazon.Amazon;
  • Créons le client Amazon (à l'image d'un WebClient version Amazon) :

AWSECommerceServicePortTypeClient client = new AWSECommerceServicePortTypeClient();

• Il faut paramétrer la requête à envoyer :

ItemSearchRequest request = new ItemSearchRequest(); request.SearchIndex = "Music";
request.ResponseGroup = new string[] { "Small", "Images" };
request.Keywords = _keyword.Text; ItemSearchRequest[] requests = new ItemSearchRequest[] { request };

• Ainsi que l'authentification pour pouvoir consommer le service web, pour celà munissez vous de votre AWS Access Key ID ainsi que de votre identifiant (le email utilisé lors de l'inscription) :

ItemSearch itemSearch = new ItemSearch();
itemSearch.SubscriptionId = "monemail@dauthentification.com";
itemSearch.AWSAccessKeyId = "MONACCESSKEYID";
itemSearch.Request = requests;

• Il ne reste plus qu'à demander au client d'effectuer la recherche et actualiser notre listbox avec le résultat renvoyé. On ajoute d'abord un écouteur d'évènement qui se déclenchera lorsque la recherche aura été effectuée :

client.ItemSearchCompleted += new EventHandler<ItemSearchCompletedEventArgs>(client_ItemSearchCompleted);

• Puis il faut lancer la requête :

client.ItemSearchAsync(itemSearch);

• Finalement lorsque la recherche aura été effectuée, on actualise la listbox via la méthode client_ItemSearchCompleted :

public void client_ItemSearchCompleted(object sender, ItemSearchCompletedEventArgs e)
{
    _listbox.ItemsSource = e.Result.Items[0].Item;
}

L'ensemble du code est :

using System.Collections.Generic;
using System.Linq;
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 MyAmazon.Amazon;
using System;

namespace MyAmazon
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
        private void search_Click(object sender, RoutedEventArgs e)
        {            AWSECommerceServicePortTypeClient client = new AWSECommerceServicePortTypeClient();

            // parametrage de la requete
            ItemSearchRequest request = new ItemSearchRequest();
            request.SearchIndex = "Music";
            request.ResponseGroup = new string[] { "Small", "Images" };
            request.Keywords = _keyword.Text;

            ItemSearchRequest[] requests = new ItemSearchRequest[] { request };

            ItemSearch itemSearch = new ItemSearch();
            itemSearch.SubscriptionId = "monemail@dauthentification.com";
itemSearch.AWSAccessKeyId = "MONACCESSKEYID";
            itemSearch.Request = requests;

            client.ItemSearchCompleted += new EventHandler<ItemSearchCompletedEventArgs>(client_ItemSearchCompleted);
            client.ItemSearchAsync(itemSearch);
        }

        public void client_ItemSearchCompleted(object sender, ItemSearchCompletedEventArgs e)
        {
            _listbox.ItemsSource = e.Result.Items[0].Item;
        }
    }
}

Un aperçu en image de l'application :

La démo ici et les sources là

Au cours de quelques recherches sur le net, j'ai trouvé un schéma fort intéressant concernant la programmation autour de Silverlight.

Cela pourra vous aider à vous positionner dans les multiples librairies en faisant par exemple les hands-on-labs de Silverlight.

Je vous parlais lors d'un précédent billet de JavaFX, une RIA version JAVA, visant à concurrencer AIR/Flex d'Adobe et Silverlight de Microsoft. Le site de JavaFX présente quelques tutoriels intéressants.

Une application JavaFX peut être exécutée sur toutes plateformes où une JRE munie de Java SE ou Java ME est installée. Autant dire que son champ d'action est important.

Peut être un inconvénient pour ceux qui n'ont jamais mis les pieds dans Java : toujours la difficulté d'approche.

Cependant, pour avoir tenté de développer des applications Swing avec des effets de transitions (un simple SplashScreen avec effet de transparence et apparition fade-in), je pense que JavaFX simplifie énormément la réalisation des effets et c'est tant mieux!

Lors de la réalisation d'un projet Java, nous devions développer un logiciel se rapprochant le mieux possible de la philosophie Modèle-Vue-Contrôleur Pour la gestion d'un ChatRoom et de diverses listes, il m'est venu à l'idée de créer des Vecteurs qui étaient capable de propager un évènement lors de l'ajout ou du retrait d'un objet d'un vecteur.

C'est pourquoi j'ai développé en premier lieu l'interface des écouteurs

public interface VectorListener extends EventListener {
    /**
     * dispatch an event whenever an object is added to the vector
     */
    void vectorAddObjectListener();
    /**
     * dispatch an event wehenever an object is removed from the vector
     */
    void vectorRemoveObjectListener();
}

ensuite un adaptateur, dans le cas où la gestion des évènements devient plus complexe :

public abstract class VectorAdapter implements VectorListener, Serializable{
 
 
    public void vectorAddObjectListener() {}
    public void vectorRemoveObjectListener() {}
}

et finalement, surcharger la classe Vector<E> en propageant les évènements correspondants quelques exemples de ma classe VectorEventListener<E>:

@Override
    public void add(int index, E e){
        super.add(index, e);
        fireAddObject();  
    }
 
    @Override
    public boolean remove(Object o){
        if(super.remove(o)){
            fireRemoveObject();
            return true;
        }
        return false;
    }
 
 
    /**
     * dispatch an event whenever an object is added to the vector
     */
    protected void fireAddObject(){
        for(VectorListener listener : getVectorListener()){
            listener.vectorAddObjectListener();
        }
    }
 
    /**
     * dispatch an event wehenever an object is removed from the vector
     */
    protected void fireRemoveObject(){
        for(VectorListener listener : getVectorListener()){
            listener.vectorRemoveObjectListener();
        }
    }
 
 
    /**
     * add a listener event
     * @param listener to add
     */
    public void addVectorListener(VectorListener listener) {
        listeners.add(VectorListener.class, listener);
    }
    /**
     *  remove a listener event
     * @param listener to be removed
     */
    public void removeVectorListener(VectorListener listener) {
        listeners.remove(VectorListener.class, listener);
    }

les sources sont disponibles ici. La librairie ici.

L'exemple d'utilisation en pratique est lors de la réception d'un message, au niveau IHM :

• un String s'ajoute au vecteur,
• un évènement est délenché,
• une fenêtre s'ouvre et affiche les messages

ClientSocket.getClient().addMessageListener(new VectorAdapter() {
 
            // chose a faire lorsque le client recoit un nouveau message
            @override
            public void vectorAddObjectListener() {
                MessageChatVector mcv = ClientSocket.getClient().getMesMessages();
 
                for (Iterator<Message> it = mcv.iterator(); it.hasNext();) {
                    Message message = it.next();
 
                    chatWindow.addConversation(message);
 
                }
 
                mcv.clear();
 
            }
 
 });

Suite du Hands-On-Labs Silverlight, intitulé "Networking and Data". Ce premier exercice consiste en effectuer une simple requête auprès du serveur pour afficher l'heure du serveur. Concretement on va consommer un service web à travers une application Silverlight

1. Je commence par créer un nouveau projet Silverlight avec un TextBlock "_serverTimeText" qui se contentera d'afficher l'heure.

<TextBlock x:Name="_serverTimeText"
     Canvas.Top="60" Canvas.Left="10"
     Width="400" Height="300" Text="HELLO"
     FontSize="52" TextAlignment="Center"
     VerticalAlignment="Center" />

Pour la suite, il faut ajouter ce qu'on appelle un "Handler" au projet que nous appelerons ServerTime.ashx. Typiquement, ce fichier s'apparente aux Servlets en Java. On y retrouve une unique méthode qui sera exécutée lors de l'invocation de ce Handler.

Petite comparaison entre une servlet et un Handler

La servlet de JAVA

public class NewServlet extends HttpServlet {
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            /* TODO output your page here
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet NewServlet</title>"); 
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>Servlet NewServlet at " + request.getContextPath () + "</h1>");
            out.println("</body>");
            out.println("</html>");
            */
        } finally {
            out.close();
        }
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }
 
    /**
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }
}

Le Handler de C#

public class Handler : IHttpHandler {
 
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Write("Hello World");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
 
}

Là où Java manipule séparément le request et response, C# nous propose le contexte accessible de HTML.

vous pourrez trouver une liste de comparaison entre les 2 langages sur ce site : C# versus JAVA

2. On veut afficher l'heure du serveur, il faut rajouter une simple fonction

context.Response.Write(DateTime.Now.ToLongTimeString());

le code devient alors

using System;
using System.Web;
 
public class ServerTime : IHttpHandler {
 
    public void ProcessRequest (HttpContext context) {
        context.Response.Write(DateTime.Now.ToLongTimeString());
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
 
}

A partir de ce moment, on vient de créer un premier service web qui a pour fonction de donner l'heure du serveur. Il faut maintenant que notre application Silverlight puisse appeler ce service web pour afficher l'heure du serveur.

3. On va consommer le service en simulant dans notre application un WebClient :

d'où le code à fournir dans Page.xaml.cs

WebClient client = new WebClient();
 
//on récupère notre service web
Uri endpoint = new Uri("http://localhost:8080/BasicCommunication_Web/ServerTime.ashx");
 
//on gère l'évenement lorsque une page a été complètement chargée
 
client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
 
// on consomme notre service web
client.DownloadStringAsync(endpoint);

finalement il ne reste plus qu'à gérer l'évenement lorsque le service web a été complètement consommé à savoir, il faut changer notre TextBlock avec l'heure envoyée par le service web

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e){
    _serverTimeText.Text = e.Result;
}

Comme tout bon IDE, Microsoft nous propose sa technologie d'auto-complétion IntelliSense

Beaucoup d'éditeurs proposent à ce jour une technologie d'auto-complétion, c'est l'occasion de tester celle de Microsoft : IntelliSense. Dans mes précédant billets je vous parlais des possibilités interessantes d'Expression Blend et de ses StoryBoard, mais aussi de la possibilité de couplage entre VS2008 et Expression Blend. Je me suis donc amusé à coupler le projet du TP Fundamentals avec un Storyboard créé sous Expression Blend. L'idée est que lorsque la souris entre dans mon ellipse il change de couleur, sous VS2008 je commence à tapper "Mouse" et là IntelliSense me propose tout un choix d'attribut :

Remarquez l'icône en forme d'éclair, il correspond à un évènement supporté par l'objet! Ma connaissance en Anglais porte mon choix sur l'évènement MouseEnter. Ensuite IntelliSense me propose de sélectionner une action correspondante ou, s'il n'y en a aucune d'en créer une nouvelle :



le code XAML de notre ellipse est désormais de la forme :

<Ellipse Canvas.Left="60" Canvas.Top="20"
   Width="220" Height="220" MouseEnter="ellipse_MouseEnter"
   Fill="#FF3685BB" Stroke="#FF0F588A"
   StrokeThickness="10" x:Name="ellipse" />

Il ne reste plus qu'à éditer le code C# correspondant à la fonction ellipse_MouseEnter :
Tout en abusant des possibilités IntelliSense, je recherche mon StoryBoard nommé "newcolor".



Et également les méthodes proposées :



Pour finalement obtenir le code suivant qui sera appliqué à l'évènement "MouseEnter" de l'objet ellipse :

        private void ellipse_MouseEnter(object sender, MouseEventArgs e)
        {
            newcolor.Begin();
        }

Avec une étonnante facilité, on vient de réaliser une gestion d'évènement sur un objet en y ajoutant un effet de transition (créé sous Expression Blend).

Le résultat est visible ici.

En conclusion, sans réelle connaissance du formalisme XAML et C#, IntelliSense guide comme il se doit les développeurs que nous sommes, l'avantage étant la rapidité d'accès aux attributs, fonctions etc. sans se perdre dans la recherche de documentation.

Avez vous déjà un jour été confronté au problème de positionnement de vos objets graphiques sous Java (IDE NetBeans 5.X et +) ? Des replacements à tout va, parfois même on s'arrache les cheveux... Et on se dit alors, modifier le code en dur il n'y a que ça de vrai, à ce moment à quoi nous servent ces IDE façon WYSIWYG?

quant à Microsoft, il nous propose des outils dédiés, c'est ainsi qu'on a la possibilité de créer un projet Silverlight 2 sous Visual Studio 2008 :



et de l'éditer dans un environnement dédié tel qu'Expression Blend



Pour ainsi avoir accès à toutes les fonctionnalités d'Expression Blend



encore une fois on remarquera l'avantage du format XAML qui est très lisible, ainsi, un minimum de compréhension en anglais et on peut éditer facilement les objets

<Rectangle Canvas.Left="60" Canvas.Top="60"
   Width="280" Height="180"
   Fill="#FFBB8536" Stroke="#FF8A580F"
   StrokeThickness="10" RadiusX="70" RadiusY="76.5" />

En Java on aurait alors fait par exemple rectangle.setPosition(new Position(60,60)); et encore, pour dessiner de simples formes, bonjour le calvaire

Je fais mes premiers pas dans Silverlight en m'appuyant sur ce TP. Ma première opinion est que Expression dispose d'une interface très moderne. En suivant précisément le TP, je m'aperçois que fondamentalement, il n'y a rien de bien compliqué. Tout est clair, Silverlight s'appuie sur de l'XAML (eXtensible Application Markup Language). On génère aisément des "StoryBoard" ou effets de transition qu'on applique aussi facilement à un évènement :

voici le code XAML de la transition générée par Expression Blend :

<Storyboard x:Name="fadeOutPlayButton">
   <DoubleAnimationUsingKeyFrames
           BeginTime="00:00:00"
           Storyboard.TargetName="playButton"
           Storyboard.TargetProperty="(UIElement.Opacity)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
           <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

Ce StoryBoard va être inclus dans une fonction JavaScript qui est complètement personnalisable.

function  mediaelement_play(sender, args) {    
       sender.findName("mediaElt").play();
       sender.findName("fadeOutPlayButton").begin();    
       sender.findName("pauseButton").Opacity = 0.85;
}

et lorsqu'on reçoit l'évènement clic de souris il suffit alors de spécifier l'action voulue, pour celà il faut rajouter l'attribut MouseLeftButtonDown

retour à l'XAML :

<Canvas x:Name="playButton"  Width="66.955" Height="36.271" Canvas.Top="251.729" Canvas.Left="313.045" 
                 MouseLeftButtonDown="mediaelement_play" >
       <Rectangle Width="60" Height="30" Fill="#FF9B2C2C" RadiusY="10.5" RadiusX="10.5" Opacity="0.43" 
                         Canvas.Top="2.361" Canvas.Left="3.148"/>
       <Polygon Points="0,0 0,24 24,12" Opacity="0.70" Fill="#FF000000" Canvas.Top="5.509" Canvas.Left="23.61" />
       <Rectangle Width="66.334" Height="34.668" Opacity="0.68" RadiusX="10.5" RadiusY="10.5">
           <Rectangle.Fill>
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#FF000000" Offset="0"/>
                   <GradientStop Color="#FFD82020" Offset="1"/>
               </LinearGradientBrush>
           </Rectangle.Fill>
       </Rectangle>
   </Canvas>

Ainsi lorsque le "playButton" recevra un clic gauche de la souris, la fonction "mediaelement_play" sera exécutée et la suite d'évènements spécifiés sera déclenchée :

sender.findName("mediaElt").play();

l'objet "mediaElt" reçoit l'ordre de mise en lecture (ici notre video au format wmv)

sender.findName("fadeOutPlayButton").begin();

l'objet "fadeOutPlayButton" (notre storyboard) reçoit l'ordre de s'exécuter.

sender.findName("pauseButton").Opacity = 0.85;

puis on change l'opacité de l'objet "pauseButton" à 0.85

aussi simple que celà. => le résultat

Aussi, Silverlight se dit multi-plateforme, j'ai testé et effectivement ma page se lance sur Firefox et sur Safari en ayant préalablement installé le plugin Silverlight.

Ce format est tant ouvert, on peut alors se demander si il est possible de faire communiquer des applications Java avec des interfaces Silverlight.

Reprenons, Expression Blend m'a généré plusieurs fichiers, parmi eux, de l'XAML et du JavaScript,

une petite recherche permet d'affirmer qu'il est possible de faire communiquer du Java et du JavaScript.

Imaginez les possibilités : exploitez votre modèle métier avec une interface Silverlight, vous aurez l'avantage de disposer de la richesse graphique de Silverlight tout en conservant vos Frameworks Java.

Des travaux d'intégration ont déjà débuté, je vous invite à visiter ce site.

• Soyatec
• les WebDemos

Une peau neuve pour Java ?

(En attendant JavaFx...)

Etant étudiant en école d'ingénieur Informatique, j'ai été amené à développer différents programmes sous différents langages (C,C++,Pascal,Lisp, Maple, Shell, etc.). S'il y en a bien un qui m'a séduit (lors d'un stage durant l'été 2007) c'est Java. Accompagné d'un bon IDE, Java se révèle performant et plus malléable que bien d'autres langages. C'est aussi avec Java que j'expérimente pour la première fois le développement d'IHM.

C'est pourtant au fil de mes expériences en développement Swing que je constate certaines complexités voire certaines limites de développement, je fais mon premier bilan :

1. Difficulté à prendre en main : pour créer une JTable, il faut paramétrer son model avec des tableaux d'objets. Pour ajouter un évènement, il faut ajouter un écouteur d'évènement qu'il faut paramétrer avec un adapter ou une interface d'évènements pour ensuite pouvoir manipuler le bon évènement... Enfin, pour arriver à quelque chose que l'on pensait simple au départ il faut parcourir les tuto de Sun, rien n'est intuitif.
2. Le design : Sans doute vous l'aurez remarqué, Swing utilise par défaut le skin (LookAndFeel) de l'OS sur lequel on lance l'application. Bien évidemment, on se lasse très vite de l'apparence finale. Bien vite on se lance dans l'installation de nouveaux LookAndFeel et si l'on veut entièrement redéfinir l'interface, on va se mettre à surcharger de nombreux composants Swing à ne plus compter les heures (voir : le projet Aerith )
3. La portabilité : Ouf! S'il y a bien un maître mot de Java c'est la portabilité, encore faut-il que la bonne JRE soit disponible pour l'OS concerné et qu'une JVM supporte cette JRE... Un maître mot qui perd tout son sens dès lors qu'une plateforme ne dispose pas de la version mise à jour (Merci LaPomme d'avoir dispensé et freiné les utilisateurs Mac de JAVA 6).