{"id":5270,"date":"2014-02-26T14:30:20","date_gmt":"2014-02-26T13:30:20","guid":{"rendered":"http:\/\/blogs.wittwer.fr\/whiler\/?p=5270"},"modified":"2014-02-26T14:44:06","modified_gmt":"2014-02-26T13:44:06","slug":"splitback","status":"publish","type":"post","link":"https:\/\/blogs.wittwer.fr\/whiler\/2014\/02\/26\/splitback\/","title":{"rendered":"Application Mobile FMX : SplitBack"},"content":{"rendered":"<p>Tous les vendredis, <a href=\"https:\/\/blogs.embarcadero.com\/tlaborde\/\" title=\"Le blog de Thierry\" target=\"_blank\">Thierry<\/a> publie un design d\u00e9velopp\u00e9 avec <a href=\"https:\/\/www.embarcadero.com\/fr\/products\/delphi\" title=\"Page Web officielle Delphi\" target=\"_blank\">Delphi<\/a>.<\/p>\n<p>Cherchant des id\u00e9es sympas de concept de navigation, je demande \u00e0 un ami s&rsquo;il connait des applications o\u00f9 il change d&rsquo;\u00e9crans de fa\u00e7on intuitive, originale et sympa&#8230; C&rsquo;est ainsi qu&rsquo;il me donne l&rsquo;id\u00e9e de faire application o\u00f9 l&rsquo;on peut revenir sur les \u00e9crans pr\u00e9c\u00e9dents en visualisant l&rsquo;\u00e9cran pr\u00e9c\u00e9dant en m\u00eame tant que l&rsquo;\u00e9cran en cours tant que l&rsquo;on n&rsquo;a pas rel\u00e2ch\u00e9 son doigt.<\/p>\n<p><div id=\"attachment_5271\" style=\"width: 190px\" class=\"wp-caption aligncenter\"><a title=\"D\u00e9partement vers R\u00e9gion\" href=\"\/whiler\/wp-content\/uploads\/2014\/02\/region_department.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5271\" src=\"\/whiler\/wp-content\/uploads\/2014\/02\/region_department-180x300.jpg\" alt=\"D\u00e9partement vers R\u00e9gion\" width=\"180\" height=\"300\" class=\"size-medium wp-image-5271\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/region_department-180x300.jpg 180w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/region_department.jpg 480w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><p id=\"caption-attachment-5271\" class=\"wp-caption-text\">D\u00e9partement vers R\u00e9gion<\/p><\/div><br \/>\n<!--more--><br \/>\nPlut\u00f4t que de partir dans de longues explications sur la description des transitions entre les \u00e9crans, je publie ci-dessous une vid\u00e9o illustrant la navigation entre les diff\u00e9rentes pages&nbsp;:<br \/>\n<center>\n<div class=\"youtube-embed\" itemprop=\"video\" itemscope itemtype=\"https:\/\/schema.org\/VideoObject\">\n\t<meta itemprop=\"url\" content=\"https:\/\/www.youtube.com\/v\/f0ufVfVgGiY\" \/>\n\t<meta itemprop=\"name\" content=\"Application Mobile FMX : SplitBack\" \/>\n\t<meta itemprop=\"description\" content=\"Application Mobile FMX : SplitBack\" \/>\n\t<meta itemprop=\"uploadDate\" content=\"2014-02-26T14:30:20+01:00\" \/>\n\t<meta itemprop=\"thumbnailUrl\" content=\"https:\/\/i.ytimg.com\/vi\/f0ufVfVgGiY\/default.jpg\" \/>\n\t<meta itemprop=\"embedUrl\" content=\"https:\/\/www.youtube.com\/embed\/f0ufVfVgGiY\" \/>\n\t<meta itemprop=\"height\" content=\"340\" \/>\n\t<meta itemprop=\"width\" content=\"560\" \/>\n\t<iframe loading=\"lazy\" style=\"border: 0;\" class=\"youtube-player\" width=\"560\" height=\"340\" src=\"https:\/\/www.youtube.com\/embed\/f0ufVfVgGiY\" allowfullscreen><\/iframe>\n<\/div>\n<\/center><\/p>\n<p>D\u00e8s que l&rsquo;utilisateur scrolle \u00e0 plus de 60% sur la page pr\u00e9c\u00e9dente, celle-ci s&rsquo;affiche enti\u00e8rement ; sinon, on reste sur la page en cours.<\/p>\n<p>Le code source est disponible depuis <a href=\"https:\/\/www.whiler.com\/freewares\/download?splitback.zip\" title=\"T\u00e9l\u00e9charger le code source\">ce lien<\/a>.<\/p>\n<p>Comme toujours, si vous avez des questions, n&rsquo;h\u00e9sitez pas \u00e0 laisser un commentaire.<\/p>\n<p>L&rsquo;application utilise une base de donn\u00e9es SQLite que j&rsquo;ai rapidement cr\u00e9\u00e9e avec une table qui contient les <a target=\"_blank\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Liste_des_communes_de_France_les_plus_peupl%C3%A9es\" title=\"page source Wikipedia\">100 communes les plus peupl\u00e9es de France<\/a> (donn\u00e9es Wikipedia 2011).<\/p>\n<p>Sur la <a href=\".\/2\/\" title=\"Aller sur la seconde page\">page suivante<\/a>, quelques captures d&rsquo;\u00e9cran de l&rsquo;application.<br \/>\n<!--nextpage--><\/p>\n<table style=\"width: 100%;\">\n<tr>\n<td style=\"text-align: center; width: 50%;\"><div id=\"attachment_5275\" style=\"width: 190px\" class=\"wp-caption aligncenter\"><a title=\"R\u00e9gion\" href=\"\/whiler\/wp-content\/uploads\/2014\/02\/region.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5275\" src=\"\/whiler\/wp-content\/uploads\/2014\/02\/region-180x300.jpg\" alt=\"R\u00e9gion\" width=\"180\" height=\"300\" class=\"size-medium wp-image-5275\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/region-180x300.jpg 180w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/region.jpg 480w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><p id=\"caption-attachment-5275\" class=\"wp-caption-text\">R\u00e9gion<\/p><\/div><\/td>\n<td style=\"text-align: center; width: 50%;\"><div id=\"attachment_5276\" style=\"width: 190px\" class=\"wp-caption aligncenter\"><a title=\"D\u00e9partement\" href=\"\/whiler\/wp-content\/uploads\/2014\/02\/department.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5276\" src=\"\/whiler\/wp-content\/uploads\/2014\/02\/department-180x300.jpg\" alt=\"D\u00e9partement\" width=\"180\" height=\"300\" class=\"size-medium wp-image-5276\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/department-180x300.jpg 180w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/department.jpg 480w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><p id=\"caption-attachment-5276\" class=\"wp-caption-text\">D\u00e9partement<\/p><\/div><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center; width: 50%;\"><div id=\"attachment_5277\" style=\"width: 190px\" class=\"wp-caption aligncenter\"><a title=\"Ville\" href=\"\/whiler\/wp-content\/uploads\/2014\/02\/town.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5277\" src=\"\/whiler\/wp-content\/uploads\/2014\/02\/town-180x300.jpg\" alt=\"Ville\" width=\"180\" height=\"300\" class=\"size-medium wp-image-5277\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/town-180x300.jpg 180w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/town.jpg 480w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><p id=\"caption-attachment-5277\" class=\"wp-caption-text\">Ville<\/p><\/div><\/td>\n<td style=\"text-align: center; width: 50%;\"><div id=\"attachment_5278\" style=\"width: 190px\" class=\"wp-caption aligncenter\"><a title=\"Carte\" href=\"\/whiler\/wp-content\/uploads\/2014\/02\/map.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5278\" src=\"\/whiler\/wp-content\/uploads\/2014\/02\/map-180x300.jpg\" alt=\"Carte\" width=\"180\" height=\"300\" class=\"size-medium wp-image-5278\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/map-180x300.jpg 180w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/map.jpg 480w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><p id=\"caption-attachment-5278\" class=\"wp-caption-text\">Carte<\/p><\/div><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center; width: 50%;\"><div id=\"attachment_5279\" style=\"width: 190px\" class=\"wp-caption aligncenter\"><a title=\"Carte vers Ville\" href=\"\/whiler\/wp-content\/uploads\/2014\/02\/town-map.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5279\" src=\"\/whiler\/wp-content\/uploads\/2014\/02\/town-map-180x300.jpg\" alt=\"Carte vers Ville\" width=\"180\" height=\"300\" class=\"size-medium wp-image-5279\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/town-map-180x300.jpg 180w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/town-map.jpg 480w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><p id=\"caption-attachment-5279\" class=\"wp-caption-text\">Carte vers Ville<\/p><\/div><\/td>\n<td style=\"text-align: center; width: 50%;\"><div id=\"attachment_5280\" style=\"width: 190px\" class=\"wp-caption aligncenter\"><a title=\"Ville vers D\u00e9partement\" href=\"\/whiler\/wp-content\/uploads\/2014\/02\/department-town.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5280\" src=\"\/whiler\/wp-content\/uploads\/2014\/02\/department-town-180x300.jpg\" alt=\"Ville vers D\u00e9partement\" width=\"180\" height=\"300\" class=\"size-medium wp-image-5280\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/department-town-180x300.jpg 180w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2014\/02\/department-town.jpg 480w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><p id=\"caption-attachment-5280\" class=\"wp-caption-text\">Ville vers D\u00e9partement<\/p><\/div><\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<blockquote><p>Application d\u00e9velopp\u00e9e avec <a target=\"_blank\" href=\"https:\/\/www.embarcadero.com\/fr\/products\/delphi\">Embarcadero Delphi XE5<\/a>.<\/p><\/blockquote>\n<p><center><a href=\"\/whiler\/category\/computer\/delphi\/\" title=\"Articles concernant Delphi\"><img loading=\"lazy\" decoding=\"async\" src=\"\/whiler\/wp-content\/uploads\/2009\/10\/built_with_delphi.png\" alt=\"D\u00e9velopp\u00e9 en Delphi\" title=\"D\u00e9velopp\u00e9 en Delphi\" width=\"125\" height=\"51\" class=\"size-full wp-image-2721\" \/><\/a><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tous les vendredis, Thierry publie un design d\u00e9velopp\u00e9 avec Delphi.<\/p>\n<p>Cherchant des id\u00e9es sympas de concept de navigation, je demande \u00e0 un ami s\u2019il connait des applications o\u00f9 il change d\u2019\u00e9crans de fa\u00e7on intuitive, originale et sympa\u2026 C\u2019est ainsi qu\u2019il me donne l\u2019id\u00e9e de faire application o\u00f9 l\u2019on peut revenir sur les \u00e9crans pr\u00e9c\u00e9dents en visualisant l\u2019\u00e9cran pr\u00e9c\u00e9dant en m\u00eame tant que l\u2019\u00e9cran en cours tant que l\u2019on n\u2019a pas rel\u00e2ch\u00e9 son doigt.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[132,7],"tags":[158,154,44,146],"class_list":["post-5270","post","type-post","status-publish","format-standard","hentry","category-android","category-delphi","tag-android","tag-delphi","tag-embarcadero","tag-firemonkey"],"_links":{"self":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/posts\/5270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/comments?post=5270"}],"version-history":[{"count":0,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/posts\/5270\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/media?parent=5270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/categories?post=5270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/tags?post=5270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}