{"id":651,"date":"2014-06-11T00:12:18","date_gmt":"2014-06-10T22:12:18","guid":{"rendered":"http:\/\/dev.bratched.fr\/fr\/?p=651"},"modified":"2014-06-11T00:12:18","modified_gmt":"2014-06-10T22:12:18","slug":"http-et-images-sous-windows-phone","status":"publish","type":"post","link":"https:\/\/bratched.com\/fr\/2014\/06\/11\/http-et-images-sous-windows-phone\/","title":{"rendered":"HTTP et images sous Windows Phone"},"content":{"rendered":"<p>Je continue avec l\u2019affichage des Images et je vous propose cette fois de voir les impl\u00e9mentations possibles pour r\u00e9cup\u00e9rer des images depuis le Web avec le protocole http.<\/p>\n<h1>L\u2019impl\u00e9mentation classique\u00a0:<\/h1>\n<pre class=\"lang:default decode:true\">public static void GethttpImage1(string urlImage, Action&lt;BitmapImage&gt; action)  \n{\n  var request = (HttpWebRequest)WebRequest.Create(urlImage);\n  request.BeginGetResponse(result =&gt;\n  {\n    using (var sr = request.EndGetResponse(result))\n    {\n        Deployment.Current.Dispatcher.BeginInvoke(() =&gt;\n            {\n                var image = new BitmapImage();\n                image.SetSource(sr.GetResponseStream());\n                if (action != null)\n                    action(image);\n                sr.Close();\n            });\n    }\n  }\n}\n<\/pre>\n<p>urlImage contient l\u2019url de l\u2019image sous forme d\u2019une ch\u00e2ine de caract\u00e8re\u00a0: exemple\u00a0: <a href=\"http:\/\/dev.bratched.fr\/download\/testimage1.png\">http:\/\/dev.bratched.fr\/download\/testimage1.png<\/a><\/p>\n<p>La m\u00e9thode utilise un WebRequest et lit la r\u00e9ponse de la requ\u00eate sous forme d\u2019un stream avec le request.EndGetResponse.<\/p>\n<p>La partie<\/p>\n<pre class=\"lang:default decode:true\">Deployment.Current.Dispatcher.BeginInvoke(() =&gt;\n<\/pre>\n<p>est tr\u00e8s importante car elle va permettre d\u2019utiliser le BitmapImage dans le Thread Principal m\u00eame lorsque la m\u00e9thode est appel\u00e9e dans un Thread tournant en t\u00e2che de fond.<\/p>\n<p><!--more--><\/p>\n<p>L\u2019appel de la m\u00e9thode retourne donc l\u2019image dans une action.<\/p>\n<p>Elle pourra ensuite \u00eatre appel\u00e9e de cette fa\u00e7on pour alimenter une propri\u00e9t\u00e9 de type BitmapImage\u00a0:<\/p>\n<pre class=\"lang:default decode:true\">HttpImageService.GethttpImage1(\"http:\/\/dev.bratched.fr\/download\/testimage1.png\", b =&gt;\n    {\n       Image = b;\n    });<\/pre>\n<h1>L\u2019impl\u00e9mentation avec Async \/ Await<\/h1>\n<p>Microsoft fournit une biblioth\u00e8que \u00ab\u00a0Microsoft Async\u00a0\u00bb qui va permettre d\u2019utiliser le Async\/Await dans des m\u00e9thodes courantes de Windows Phone<\/p>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackagesAsync.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-652\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackagesAsync.jpg\" alt=\"NuGetPackagesAsync\" width=\"829\" height=\"560\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackagesAsync.jpg 829w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackagesAsync-300x203.jpg 300w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackagesAsync-768x519.jpg 768w\" sizes=\"(max-width: 829px) 100vw, 829px\" \/><\/a><\/p>\n<p>Ce paquet va permettre l\u2019utilisation du WebRequest de fa\u00e7on simplifi\u00e9e et de retourner un Task&lt;BitmapImage&gt;<\/p>\n<pre class=\"lang:default decode:true\">using (WebResponse response = await request.GetResponseAsync())<\/pre>\n<p>&nbsp;<\/p>\n<p>remplace les \u00e9l\u00e9ments ci dessus<\/p>\n<pre class=\"lang:default decode:true\">request.BeginGetResponse(result =&gt;\n  {\n    using (var sr = request.EndGetResponse(result))\n    {<\/pre>\n<p>La fonction retourne directement une tache de type BitmapImage (\u00e0 la place du retour par action)<\/p>\n<pre class=\"lang:default decode:true\">public static async Task&lt;BitmapImage&gt; GethttpImage2(string urlImage)\n{\n    try\n    {\n        var request = (HttpWebRequest)WebRequest.Create(urlImage);\n        using (WebResponse response = await request.GetResponseAsync())\n        {\n            BitmapImage image = null;\n            DispatcherSynchronizationContext dsc = new DispatcherSynchronizationContext(Deployment.Current.Dispatcher);\n            await Task.Factory.StartNew(() =&gt;\n            {\n                dsc.Send(_ =&gt;\n                {\n                    image = new BitmapImage();\n                    image.SetSource(response.GetResponseStream());\n                }, null);\n            });\n            return image;\n        }\n    }\n    catch (Exception)\n    {\n        return null;\n    }\n}\n<\/pre>\n<p>Remarque importante\u00a0:<\/p>\n<pre class=\"lang:default decode:true\">DispatcherSynchronizationContext dsc = new DispatcherSynchronizationContext(Deployment.Current.Dispatcher);\n            await Task.Factory.StartNew(() =&gt;\n            {\n                dsc.Send(_ =&gt;\n                {\n<\/pre>\n<p>remplace l\u2019ancien<\/p>\n<pre class=\"lang:default decode:true\">Deployment.Current.Dispatcher.BeginInvoke(() =&gt;<\/pre>\n<p>C\u2019est toujours le m\u00eame\u00a0objectif\u00a0: Utiliser le Thread Principal obligatoire pour BitmapImage dans le cas d\u2019appel dans un thread tournant en t\u00e2che de fond.<\/p>\n<p>La syntaxe utilis\u00e9e ici est plus \u00e0 la mode et permet une gestion plus fine du syst\u00e8me de synchronisation entre Thread. Vous pouvez la remplacer sans soucis par l\u2019ancien code.<\/p>\n<p>L\u2019utilisation de cette fonction\u00a0se fait de la fa\u00e7on suivante\u00a0: (Image \u00e9tant une propri\u00e9t\u00e9 de type BitmapImage)<\/p>\n<pre class=\"lang:default decode:true\">Image = await HttpImageService.GethttpImage2(\"http:\/\/dev.bratched.fr\/download\/testimage1.png\");\n<\/pre>\n<h1>HttpClient<\/h1>\n<p>Il faut ajouter le paquet Nuget\u00a0\u00ab\u00a0Microsoft\u00a0HTTP Client Libraries\u00a0\u00bb pour pouvoir utiliser la classe HttpClient. L\u2019avantage de ce paquet est de proposer une syntaxe identique \u00e0 l\u2019impl\u00e9mentation Windows 8.<\/p>\n<p><a href=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackageshttpClient.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-653\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackageshttpClient.jpg\" alt=\"NuGetPackageshttpClient\" width=\"813\" height=\"516\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackageshttpClient.jpg 813w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackageshttpClient-300x190.jpg 300w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/06\/NuGetPackageshttpClient-768x487.jpg 768w\" sizes=\"(max-width: 813px) 100vw, 813px\" \/><\/a><\/p>\n<p>L\u2019impl\u00e9mentation ressemble ensuite \u00e0 celle-ci.<\/p>\n<p>Remarque importante, il est obligatoire de passer par un buffer au lieu du Stream propos\u00e9 car\u00a0:<\/p>\n<ul>\n<li>BitmapImage n\u00e9cessite d\u2019\u00eatre utilis\u00e9 dans le Thread principal<\/li>\n<li>Le Thread principal ne peut pas \u00eatre utilis\u00e9 dans le AsyncStream<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<pre class=\"lang:default decode:true\">public static async Task&lt;BitmapImage&gt; GethttpImage3(string urlImage)\n{\n    try\n    {\n\n        HttpClient httpClient = new HttpClient() { MaxResponseContentBufferSize = 100000000 };\n        var ImageData = await httpClient.GetByteArrayAsync(urlImage);\n        {\n            using (var s = new MemoryStream(ImageData))\n            {\n                BitmapImage image = null;\n                DispatcherSynchronizationContext dsc = new DispatcherSynchronizationContext(Deployment.Current.Dispatcher);\n                await Task.Factory.StartNew(() =&gt;\n                {\n                    dsc.Send(_ =&gt;\n                    {\n                        image = new BitmapImage();\n                        image.SetSource(s);\n                    }, null);\n                });\n                return image;\n            }\n        }\n    }\n    catch\n    {\n        return null;\n    }\n}\n\n<\/pre>\n<p>L\u2019utilisation de cette fonction ce fait de la m\u00eame fa\u00e7on que pr\u00e9c\u00e9demment\u00a0:<\/p>\n<pre class=\"lang:default decode:true\">Image = await HttpImageService.GethttpImage3(\"http:\/\/dev.bratched.fr\/download\/testimage1.png\");<\/pre>\n<h1>Tests de performance.<\/h1>\n<p>Les 3 m\u00e9thodes sont utilisables mais quelle est la m\u00e9thode la plus performante dans le cas d&rsquo;un chargement de plusieurs images ?<\/p>\n<p>J\u2019ai adapt\u00e9 le pr\u00e9c\u00e9dent programme de <a title=\"Utilisation des Images resources avec Windows Phone\" href=\"http:\/\/dev.bratched.fr\/fr\/utilisation-des-images-resources-avec-windows-phone\/\">Tests de performances d&rsquo;images statiques<\/a> pour<\/p>\n<ul>\n<li>afficher les 3 m\u00e9thodes dans des listes<\/li>\n<li>faire un Benchmark en chargeant 10 fois la grosse image png (400ko 1000&#215;1000) du pr\u00e9c\u00e9dent article.<\/li>\n<\/ul>\n<p>J\u2019ai \u00e9galement ajout\u00e9 le MemoryCounter de Coding4Fun afin de visualiser la consommation et lib\u00e9ration m\u00e9moire.<\/p>\n<p>Voici les r\u00e9sultats sur un r\u00e9seau Wifi (moyennes sur 20 passages).<\/p>\n<ul>\n<li>M\u00e9thode 1\u00a0: Classique HttpRequest\/Response avec Action\u00a0: <span style=\"color: #00ff00\">6 sec<\/span><\/li>\n<li>Methode 2 : Avec Async HttpRequest\/Response\u00a0: <span style=\"color: #ff0000\">9 sec<\/span><\/li>\n<li>Methode 3\u00a0: Avec HttpClient\u00a0: <span style=\"color: #ff9900\">8,5 sec<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Durant les tests, j\u2019ai \u00e9galement invers\u00e9 l\u2019ordre de passage pour ne pas influencer les r\u00e9sultats.<\/p>\n<p>La consultation des listes donne un r\u00e9el aper\u00e7u des 3 diff\u00e9rentes m\u00e9thodes.<\/p>\n<p>C&rsquo;est encore une fois la m\u00e9thode \u00ab\u00a0classique\u00a0\u00bb avec HttpRequest qui donne le meilleur r\u00e9sultat.<\/p>\n<p>Le syst\u00e8me d&rsquo;Action permet d\u2019\u00e9viter l&rsquo;attente de la fin du traitement du thread pour interroger le r\u00e9seau et permet ainsi une meilleure parall\u00e9lisassions des t\u00e2ches.<\/p>\n<p>Le code Source est accessible ici<\/p>\n<p><a title=\"Code source SampleHttpImage\" href=\"http:\/\/1drv.ms\/1lp4j4T\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-633\" src=\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/2014\/05\/download-10-icon-256.png\" alt=\"download-10-icon-256\" width=\"256\" height=\"256\" srcset=\"https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/05\/download-10-icon-256.png 256w, https:\/\/bratched.com\/fr\/wp-content\/uploads\/sites\/2\/2014\/05\/download-10-icon-256-150x150.png 150w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je continue avec l\u2019affichage des Images et je vous propose cette fois de voir les impl\u00e9mentations possibles pour r\u00e9cup\u00e9rer des images depuis le Web avec le protocole http. L\u2019impl\u00e9mentation classique\u00a0: public static void GethttpImage1(string urlImage, Action&lt;BitmapImage&gt; action) { var request = (HttpWebRequest)WebRequest.Create(urlImage); request.BeginGetResponse(result =&gt; { using (var sr = request.EndGetResponse(result)) { Deployment.Current.Dispatcher.BeginInvoke(() =&gt; { var [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63],"tags":[68,69,77,78,79,80,81,82],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/651"}],"collection":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/comments?post=651"}],"version-history":[{"count":0,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/651\/revisions"}],"wp:attachment":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/media?parent=651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/categories?post=651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/tags?post=651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}