{"id":2120,"date":"2008-02-29T15:24:59","date_gmt":"2008-02-29T20:24:59","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/"},"modified":"2016-05-10T15:08:14","modified_gmt":"2016-05-10T19:08:14","slug":"gui-layout-part-3","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/","title":{"rendered":"GUI Layout (Part 3)"},"content":{"rendered":"<div class=\"content\">\r\n\r\nThis is Part 3 of 3 Pick of the Week entries on GUIs.\r\n\r\nIn <a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/\">Part 1<\/a> of the series, I talked about using <tt>ResizeFcn<\/tt> to create a GUI that resizes well. In <a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/\">Part 2<\/a>, I introduced a nifty function that provided more control of specifying the positions of UI controls. Just recently, one\r\nof our fellow MathWorkers, Brian, who works in the UI Building Team, posted a nice utility, <a title=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadFile.do?objectId=18577&amp;objectType=file (link no longer works)\">BorderLayout<\/a>, that does what my <tt>ResizeFcn<\/tt> in <a title=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadFile.do?objectId=18769&amp;objectType=file (link no longer works)\">this entry<\/a> does. It is modeled after Java's BorderLayout and is quite flexible. It allows you to partition the GUI into regions, and\r\nby placing the <tt>uicontrols<\/tt> inside those regions, you can control the size of those components.\r\n\r\nHere's how you would create a right panel (with fixed width), that contains a smaller panel at the bottom with fixed height.\r\nThe remaining panels adjust appropriately to fill the space.\r\n<pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid #c8c8c8;\">figH = figure;\r\n\r\n<span style=\"color: #228b22;\">% East panel has a fixed width of 100 pixels<\/span>\r\npanel1 = BorderLayout(figH, 0, 0, 100, 0);\r\n\r\n<span style=\"color: #228b22;\">% The South panel (within the East panel)<\/span>\r\n<span style=\"color: #228b22;\">% has a fixed width of 80 pixels<\/span>\r\npanel2 = BorderLayout(panel1.East, 0, 80, 0, 0);\r\n\r\nuicontrol(<span style=\"color: #0000ff;\">...<\/span>\r\n  <span style=\"color: #a020f0;\">'String'<\/span>  , <span style=\"color: #a020f0;\">'I''m fixed in size'<\/span>, <span style=\"color: #0000ff;\">...<\/span>\r\n  <span style=\"color: #a020f0;\">'Units'<\/span>   , <span style=\"color: #a020f0;\">'Normalized'<\/span>        , <span style=\"color: #0000ff;\">...<\/span>\r\n  <span style=\"color: #a020f0;\">'Position'<\/span>, [0 0 1 1]           , <span style=\"color: #0000ff;\">...<\/span>\r\n  <span style=\"color: #a020f0;\">'Parent'<\/span>  , panel2.South        );<\/pre>\r\n<img decoding=\"async\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/gui_layout3_01.png\" alt=\"\" hspace=\"5\" vspace=\"5\" \/>\r\n\r\nBrian also made this <a href=\"https:\/\/blogs.mathworks.com\/community\/2007\/12\/17\/managing-layout-in-the-absence-of-layout-management\/\">post<\/a> to the MATLAB Desktop Blog.\r\n\r\n<b>Comments?<\/b>\r\n\r\nTell us about other GUI building utility tools from the File Exchange that you found useful.\r\n\r\n<i>Written by Jiro Doke, Senior Applications Engineer, The MathWorks, Inc.<\/i>\r\n\r\n<script>\/\/ <![CDATA[\r\nfunction grabCode_2acfd6ca8efc45f3b55de0e744d1b484() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='2acfd6ca8efc45f3b55de0e744d1b484 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 2acfd6ca8efc45f3b55de0e744d1b484';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        author = 'Jiro Doke';\r\n        copyright = 'Copyright 2008, The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('\r\n\r\n<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add author and copyright lines at the bottom if specified.\r\n        if ((author.length > 0) || (copyright.length > 0)) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (author.length > 0) {\r\n                d.writeln('% _' + author + '_');\r\n            }\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\r\n\r\n\r\n\\n');\r\n      \r\n      d.title = title + ' (MATLAB code)';\r\n      d.close();\r\n      }\r\n\/\/ ]]><\/script>\r\n<p style=\"text-align: right; font-size: xx-small; font-weight: lighter; font-style: italic; color: gray;\">\r\n<a><span style=\"font-size: x-small; font-style: italic;\">Get\r\nthe MATLAB code\r\n<noscript>(requires JavaScript)<\/noscript><\/span><\/a>\r\n\r\nPublished with MATLAB\u00ae 7.5<\/p>\r\n\r\n<\/div>\r\n<!--\r\n2acfd6ca8efc45f3b55de0e744d1b484 ##### SOURCE BEGIN #####\r\n%%\r\n% This is Part 3 of 3 Pick of the Week entries on GUIs.\r\n%\r\n% In <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/ Part 1>\r\n% of the series, I talked about using |ResizeFcn| to create a GUI that\r\n% resizes well. In <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/ Part 2>,\r\n% I introduced a nifty function that provided more control of specifying\r\n% the positions of UI controls. Just recently, one of our fellow\r\n% MathWorkers,\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadAuthor.do?objectType=author&objectId=1097778 Brian>,\r\n% who works in the UI Building Team, posted a nice utility,\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadFile.do?objectId=18577&objectType=file BorderLayout>,\r\n% that does what my |ResizeFcn| in\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadFile.do?objectId=18769&objectType=file this entry>\r\n% does. It is modeled after Java's BorderLayout and is quite flexible. It\r\n% allows you to partition the GUI into regions, and by placing the\r\n% |uicontrols| inside those regions, you can control the size of those\r\n% components.\r\n%\r\n% Here's how you would create a right panel (with fixed width), that\r\n% contains a smaller panel at the bottom with fixed height. The remaining\r\n% panels adjust appropriately to fill the space.\r\n\r\nfigH = figure;\r\n\r\n% East panel has a fixed width of 100 pixels\r\npanel1 = BorderLayout(figH, 0, 0, 100, 0);\r\n\r\n% The South panel (within the East panel)\r\n% has a fixed width of 80 pixels\r\npanel2 = BorderLayout(panel1.East, 0, 80, 0, 0);\r\n\r\nuicontrol(...\r\n'String'  , 'I''m fixed in size', ...\r\n'Units'   , 'Normalized'        , ...\r\n'Position', [0 0 1 1]           , ...\r\n'Parent'  , panel2.South        );\r\n\r\n%%\r\n% Brian also made this\r\n% <https:\/\/blogs.mathworks.com\/community\/2007\/12\/17\/managing-layout-in-the-absence-of-layout-management\/ post>\r\n% to the MATLAB Desktop Blog.\r\n%\r\n% *Comments?*\r\n%\r\n% Tell us about other GUI building utility tools from the File Exchange\r\n% that you found useful.\r\n%\r\n% _Written by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/loadAuthor.do?objectType=author&objectId=1094142 Jiro Doke>, Senior Applications Engineer, The MathWorks, Inc._\r\n##### SOURCE END ##### 2acfd6ca8efc45f3b55de0e744d1b484\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n\r\nThis is Part 3 of 3 Pick of the Week entries on GUIs.\r\n\r\nIn Part 1 of the series, I talked about using ResizeFcn to create a GUI that resizes well. In Part 2, I introduced a nifty function that... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/\">read more >><\/a><\/p>","protected":false},"author":68,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,16],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2120"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=2120"}],"version-history":[{"count":1,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2120\/revisions"}],"predecessor-version":[{"id":7090,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2120\/revisions\/7090"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=2120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=2120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=2120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}