{"id":13162,"date":"2021-12-20T19:05:00","date_gmt":"2021-12-20T11:05:00","guid":{"rendered":"https:\/\/www.finereport.com\/en\/?p=13162"},"modified":"2024-04-09T11:51:56","modified_gmt":"2024-04-09T03:51:56","slug":"nine-patch","status":"publish","type":"post","link":"https:\/\/www.finereport.com\/en\/dashboard-tools\/nine-patch.html","title":{"rendered":"How &#8220;9-Patch&#8221; Helps Dashboard Developers"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Large-Screen-Example.png\"><img loading=\"lazy\" width=\"750\" height=\"505\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Large-Screen-Example.png\" alt=\"An example of using large screen to display dashboards\" class=\"wp-image-13171\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Large-Screen-Example.png 750w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Large-Screen-Example-300x202.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/figure><\/div>\n\n\n\n<p><a style=\"color: #fff; background-color: #2849f7; border: none; border-radius: 20px; width: 180px; height: 40px; font-size: 16px; line-height: 26px; display: block; padding: 6px 12px; margin-left: auto; margin-right: auto; text-align: center;\" href=\"\/en\/activation\">Free Download<\/a><\/p><\/br>\n\n\n\n<p>Normally, developers would insert an image as the border of components in dashboards.<\/p>\n\n\n\n<p>But in the case where significant differences exist between the aspect ratios of components and border assets, the border will be incorrectly displayed.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Change-Aspect-Ratio.png\"><img loading=\"lazy\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Change-Aspect-Ratio.png\" alt=\"The border is distorted\" class=\"wp-image-13163\" width=\"349\" height=\"434\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Change-Aspect-Ratio.png 249w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Change-Aspect-Ratio-241x300.png 241w\" sizes=\"(max-width: 349px) 100vw, 349px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>There&#8217;s no doubt that the management won&#8217;t be satisfied to see such things on the large screen dashboards, and it seems that there&#8217;s nothing can be done with it.<\/p>\n\n\n\n<p>Here it comes! With a complete upgrade for dashboard development:<\/p>\n\n\n\n<ul><li>Component background filling and border can be configured individually.<\/li><li>With the image inserted via &#8220;Border&#8221;, you can further set the &#8220;9-Patch Image Setting&#8221; to keep the pattern exfactly the same.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Component-Settings.png\"><img loading=\"lazy\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Component-Settings.png\" alt=\"You can set background and border individually\" class=\"wp-image-13164\" width=\"300\" height=\"419\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Component-Settings.png 298w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Component-Settings-214x300.png 214w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>But, what is a &#8220;9-Patch&#8221;? And how does it save our day by keeping intact the border pattern?<\/p>\n\n\n\n<p>You can find the answer here.<\/p>\n\n\n\n<p>First, select a component and insert an image in &#8220;Border&#8221; on the attribute pane, then click on &#8220;9-Patch Image Setting&#8221;.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Set-9-patch.png\"><img loading=\"lazy\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Set-9-patch.png\" alt=\"How to set 9-Patch\" class=\"wp-image-13165\" width=\"297\" height=\"331\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Set-9-patch.png 294w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Set-9-patch-269x300.png 269w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>An interactive panel will show.<\/p>\n\n\n\n<p>Here you can drag the lines to set protected areas.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Customize-Patches.mp4\"><\/video><\/figure>\n\n\n\n<p>The protected areas on the 4 corners will be kept the same when adjusting the size of components, while the 4 sides stretched.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/9-Patches.png\"><img loading=\"lazy\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/9-Patches.png\" alt=\"How every patches are processed\" class=\"wp-image-13167\" width=\"845\" height=\"770\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/9-Patches.png 656w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/9-Patches-300x273.png 300w\" sizes=\"(max-width: 845px) 100vw, 845px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>In cases where the aspect ratio of components is nearly the same as image materials, the filling effect of \u201cBody BG\u201d and \u201c9-Patch\u201d will look the same.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Normal-Aspect-Ratio.png\"><img loading=\"lazy\" width=\"665\" height=\"241\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Normal-Aspect-Ratio.png\" alt=\"When the component is displayed in normal aspect ratio\" class=\"wp-image-13168\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Normal-Aspect-Ratio.png 665w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Normal-Aspect-Ratio-300x109.png 300w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>But when the aspect ratios differ greatly, \u201c9-Patch\u201d will have its benefit shown.<\/p>\n\n\n\n<p>For example, the vertical sides of image-filled borders will look unusually thick (as you can see in the red box below) when the component is relatively wide.<\/p>\n\n\n\n<p>\u201c9-Patch\u201d will help you avoid such issues:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Wide.png\"><img loading=\"lazy\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Wide.png\" alt=\"When the component is wide\" class=\"wp-image-13169\" width=\"654\" height=\"408\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Wide.png 672w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/Wide-300x187.png 300w\" sizes=\"(max-width: 654px) 100vw, 654px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>And it works better when the component is higher.<\/p>\n\n\n\n<p>As you can see, the pattern on the top right corner distorted and blurred significantly, which impacted the overall feel of the component.<\/p>\n\n\n\n<p>\u201c9-Patch\u201d, on the other hand, presented the patterns perfectly.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/High.png\"><img loading=\"lazy\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/High.png\" alt=\"When the component is high\" class=\"wp-image-13170\" width=\"582\" height=\"798\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/High.png 477w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/12\/High-219x300.png 219w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Generally speaking, &#8220;9-Patch&#8221; is a simple but effective solution to boost your productivity.<\/p>\n\n\n\n<p>It is a small step for dashboards, but a giant leap for taking off the burden from developers.<\/p>\n\n\n\n<p>Simple and easy-to-use \u201c9-Patch\u201d can help developers keep the border intact, even with the same image material for component borders with various aspect ratios.<\/p>\n\n\n\n<p>The development of this feature shows that at FanRuan, users always come first despite our continuous leading position on large screens. We will keep advancing on improving the user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Free Download Normally, developers would insert an image as the border of components in dashboards. But in the case where significant differences exist between the aspect ratios of components and border assets, the border will be incorrectly displayed. There&#8217;s no doubt that the management won&#8217;t be satisfied to see such things on the large screen&#8230;<\/p>\n","protected":false},"author":1,"featured_media":13163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6927],"tags":[],"yst_prominent_words":[922,4315,2286,373,229,1538,613],"_links":{"self":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/13162"}],"collection":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/comments?post=13162"}],"version-history":[{"count":3,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/13162\/revisions"}],"predecessor-version":[{"id":13174,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/13162\/revisions\/13174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/media\/13163"}],"wp:attachment":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/media?parent=13162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/categories?post=13162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/tags?post=13162"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/yst_prominent_words?post=13162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}