{"id":165,"date":"2014-12-01T15:25:29","date_gmt":"2014-12-01T14:25:29","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=165"},"modified":"2014-12-31T14:03:04","modified_gmt":"2014-12-31T13:03:04","slug":"afficher-une-image-de-fond-dans-une-application-cordova-avec-angularjs","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/afficher-une-image-de-fond-dans-une-application-cordova-avec-angularjs\/","title":{"rendered":"Afficher une image de fond dans une application Cordova avec AngularJs"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-166\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large-300x84.png\" alt=\"AngularJS-large\" width=\"300\" height=\"84\" srcset=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large-300x84.png 300w, http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large.png 383w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Un des probl\u00e8mes r\u00e9currents dans une\u00a0application Cordova utilisant\u00a0AngularJs est\u00a0de mettre une image de fond sur l&#8217;ensemble de l&#8217;\u00e9cran peut importe le t\u00e9l\u00e9phone utilis\u00e9.<br \/>\nVous me direz qu&#8217;il suffit de mettre une balise &#8220;background&#8221; et de d\u00e9finir l&#8217;url de l&#8217;image.<br \/>\net bien essayez, mais \u00e7a ne donnera surement pas ce que vous souhaitez !<\/p>\n<p>Je vous propose ici d&#8217;ins\u00e9rer une image et de la redimensionner automatiquement en fonction de la taille de l&#8217;\u00e9cran \u00e0 l&#8217;aide d&#8217;une directive AngularJs.<\/p>\n<p><!--more--><\/p>\n<h3>La m\u00e9thode simple :<\/h3>\n<p>Une m\u00e9thode utilisant seulement du css existe. Je vous la donne ci-dessous.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nhtml {\r\n  background: url(images\/bg.jpg) no-repeat center center fixed;\r\n  -webkit-background-size: cover;\r\n  -moz-background-size: cover;\r\n  -o-background-size: cover;\r\n  background-size: cover;\r\n}\r\n<\/pre>\n<p>Le probl\u00e8me de cette m\u00e9thode est qu&#8217;elle n&#8217;est pas compatible avec tous les navigateurs :<\/p>\n<ul>\n<li>\u00a0Safari 3+<\/li>\n<li>Chrome (tous)<\/li>\n<li>IE 9+<\/li>\n<li>Opera 10+<\/li>\n<li>Firefox 3.6+<\/li>\n<\/ul>\n<h3>Utiliser une directive AngularJs :<\/h3>\n<p>Il existe plusieurs autres m\u00e9thodes CSS pour faire cette manipulation, et \u00e9galement des plugins JQuery.<br \/>\nCes m\u00e9thodes sont tr\u00e8s bien d\u00e9taill\u00e9es sur ce site : <a href=\"http:\/\/css-tricks.com\/perfect-full-page-background-image\/\">http:\/\/css-tricks.com\/<\/a> (en anglais).<\/p>\n<p>Mais dans mon cas, j&#8217;ai essay\u00e9 toutes les m\u00e9thodes et aucune ne r\u00e9solvait mon probl\u00e8me (qui \u00e9tait donc un d\u00e9ploiement de mon application Cordova sur un Galaxy S2 avec Android 4.1.2).<br \/>\nJ&#8217;ai donc \u00e9t\u00e9 amen\u00e9\u00a0\u00e0 utiliser cette fameuse directive dont je parles depuis tout \u00e0 l&#8217;heure.<\/p>\n<p>J&#8217;esp\u00e8re que vous savez cr\u00e9er des directives Angular, parce que \u00a0vous allez en avoir besoin.<br \/>\nJ&#8217;ai donc int\u00e9gr\u00e9 la mienne dans le fichier &#8220;directives.js&#8221; et je vous la pr\u00e9sente ci-dessous :<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nangular.module('monApp.directives', []).\r\n\tdirective('resize', function ($window) {\r\n\t    return function (scope, element) {\r\n\t        var w = angular.element($window);\r\n\t        scope.getWindowDimensions = function () {\r\n\t            return { 'h': w.height(), 'w': w.width() };\r\n\t        };\r\n\t        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {\r\n\t            scope.windowHeight = newValue.h;\r\n\t            scope.windowWidth = newValue.w;\r\n\r\n\t            scope.style = function () {\r\n\t                return {\r\n\t                    'height': (newValue.h) + 'px',\r\n\t                    'width': (newValue.w) + 'px',\r\n\t                    'background-size' : (newValue.w) + 'px ' + (newValue.h) + 'px'\r\n\t                };\r\n\t            };\r\n\r\n\t        }, true);\r\n\r\n\t        w.bind('resize', function () {\r\n\t            scope.$apply();\r\n\t        });\r\n\t    };\r\n\t});\r\n<\/pre>\n<p>A premi\u00e8re vue rien de bien compliqu\u00e9. Et c&#8217;est le cas.<br \/>\nLa directive &#8220;resize&#8221; r\u00e9cup\u00e8re la taille de la fen\u00eatre (avec &#8216;w.height()&#8217; et &#8216;w.width()&#8217;) et set les attributs css suivants :<\/p>\n<ul>\n<li>height<\/li>\n<li>width<\/li>\n<li>background-size<\/li>\n<\/ul>\n<p>Sur l&#8217;\u00e9l\u00e9ment de votre page voulu.<\/p>\n<p>Mais alors comment je choisi mon \u00e9l\u00e9ment de page voulu justement?<br \/>\nEt bien comme ceci :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html ng-app=&quot;monApp&quot;&gt;\r\n\t&lt;head&gt;\r\n\t&lt;\/head&gt;\r\n\t&lt;body ng-style=&quot;style()&quot; resize&gt;\r\n\t\t&lt;!-- CONTENT --&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Il suffit donc d&#8217;ajouter les attributs suivants sur la balise de votre choix (pour moi je l&#8217;ai mis sur body) :<\/p>\n<ul>\n<li>ng-style=&#8221;style()&#8221;<\/li>\n<li>resize<\/li>\n<\/ul>\n<p>Et dans votre css :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nbody {\r\n    background: url('\/images\/bg.jpg') no-repeat center center fixed;\r\n}\r\n<\/pre>\n<p>La directive va ainsi calculer la taille de l&#8217;\u00e9cran du t\u00e9l\u00e9phone et d\u00e9finir la taille de l&#8217;image de fond pour qu&#8217;elle prenne tout l&#8217;\u00e9cran.<\/p>\n<h4>Notes compl\u00e9mentaires :<\/h4>\n<p>&#8211; Cette m\u00e9thode donne la taille de l&#8217;\u00e9cran \u00e0 l&#8217;image de fond. Ce qui veut dire que l&#8217;image va \u00eatre \u00e9tir\u00e9e pour prendre tout l&#8217;\u00e9cran. Il se peut donc qu&#8217;en fonction des d\u00e9finitions d&#8217;\u00e9cran l&#8217;image soit d\u00e9form\u00e9e. Attention \u00e0 votre image !<\/p>\n<p>&#8211; Il se peut que m\u00eame avec cette m\u00e9thode l&#8217;image s&#8217;affiche mal sur certains t\u00e9l\u00e9phones (exemple : on ne voit que le haut de l&#8217;image \u00e9tir\u00e9e sur tout l&#8217;\u00e9cran). Si c&#8217;est le cas et que vous \u00eates sous android, je vous conseille d&#8217;utiliser Crosswalk comme webview en remplacement de la webview standard. Pour installer crosswalk rendez vous sur <a href=\"http:\/\/lalloue.fr\/blog\/remplacer-la-webview-android-par-crosswalk-chromium-sur-une-application-cordova\/\">cet article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un des probl\u00e8mes r\u00e9currents dans une\u00a0application Cordova utilisant\u00a0AngularJs est\u00a0de mettre une image de fond sur l&#8217;ensemble de l&#8217;\u00e9cran peut importe le t\u00e9l\u00e9phone utilis\u00e9. Vous me direz qu&#8217;il suffit de mettre une balise &#8220;background&#8221; et de d\u00e9finir l&#8217;url de l&#8217;image. et bien essayez, mais \u00e7a ne donnera surement pas ce que vous souhaitez ! Je vous &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/lalloue.fr\/blog\/afficher-une-image-de-fond-dans-une-application-cordova-avec-angularjs\/\" class=\"more-link\">Continuer la lecture <span class=\"screen-reader-text\"> \u00ab\u00a0Afficher une image de fond dans une application Cordova avec AngularJs\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,15,9],"tags":[19,24,39],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/165"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":5,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":171,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/165\/revisions\/171"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}