{"id":2390,"date":"2009-02-27T13:47:00","date_gmt":"2009-02-27T13:47:00","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/2009\/02\/27\/gui-layout-part-4\/"},"modified":"2016-05-18T11:13:41","modified_gmt":"2016-05-18T15:13:41","slug":"gui-layout-part-4","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2009\/02\/27\/gui-layout-part-4\/","title":{"rendered":"GUI Layout (Part 4)"},"content":{"rendered":"<div class=\"content\">\r\n\r\n<a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/15007\">Jiro<\/a>'s pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/22968-gridbaglayout\"><tt>GridBagLayout<\/tt><\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/45863\">Jason<\/a>.\r\n\r\n&nbsp;\r\n\r\nThis is another entry in our collection of GUI-oriented Picks-of-the-Week. Here are 3 that I highlighted about a year ago:\r\n<div>\r\n<ul>\r\n\t<li><a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/\">Part 1<\/a><\/li>\r\n\t<li><a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/\">Part 2<\/a><\/li>\r\n\t<li><a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/\">Part 3<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\nI love these entries because 1) I love GUIs and 2) these tools make GUI building fun and easy.\r\n\r\n<tt>GridBagLayout<\/tt> is a rich set of tools implemented using the <a href=\"https:\/\/www.mathworks.com\/help\/releases\/R2008b\/techdoc\/matlab_oop\/ug_intropage.html\">MATLAB Class System<\/a>. It has a nice set of properties and methods to perform sophisticated layout of graphical components.\r\n\r\nAs you can see from the following set of commands, you can add components and provide individual constraints or let the layout\r\nobject handle everything. When you resize the figure, the components maintain the appropriate size\/location based on the settings.\r\n<pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid #c8c8c8;\">hl = layout.GridBagLayout(figure);\r\nhl.add(uicontrol(<span style=\"color: #a020f0;\">'String'<\/span>, <span style=\"color: #a020f0;\">'Button 1'<\/span>), 1, 2)\r\nhl.add(uicontrol(<span style=\"color: #a020f0;\">'String'<\/span>, <span style=\"color: #a020f0;\">'Button 2'<\/span>), 1, 3)\r\nhl.add(axes, 2, [1 3], <span style=\"color: #a020f0;\">'Fill'<\/span>, <span style=\"color: #a020f0;\">'Both'<\/span>)\r\nhl.VerticalWeights = [0 1];\r\nhl.VerticalGap = 20;\r\nhl.HorizontalGap = 20;\r\nhl.HorizontalWeights = [1 0 0];\r\n\r\nhl.setConstraints(1, 2, <span style=\"color: #a020f0;\">'MinimumWidth'<\/span>, 80, <span style=\"color: #a020f0;\">'MinimumHeight'<\/span>, 25);\r\nhl.setConstraints(1, 3, <span style=\"color: #a020f0;\">'MinimumWidth'<\/span>, 80, <span style=\"color: #a020f0;\">'MinimumHeight'<\/span>, 25);\r\nhl.setConstraints(2, [1 3], <span style=\"color: #a020f0;\">'LeftInset'<\/span>, 30);\r\nhl.setConstraints(2, [1 3], <span style=\"color: #a020f0;\">'BottomInset'<\/span>, 30);<\/pre>\r\n<img decoding=\"async\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/guilayout4_01.png\" alt=\"\" hspace=\"5\" vspace=\"5\" \/>\r\n\r\nHere's an animation of how each command affects the GUI.\r\n\r\n<img decoding=\"async\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/guilayout4anim.gif\" alt=\"\" hspace=\"5\" vspace=\"5\" \/>\r\n\r\nAlso check out the published document that Jason included with his entry. Stay tuned for Part 5. We'll look at another entry that simplifies the GUI building process\r\neven more.\r\n\r\n<a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=2390#respond\"><b>Comments?<\/b><\/a>\r\n\r\n<script>\/\/ <![CDATA[\r\nfunction grabCode_a7e892ac0d3c4cd4b27fc73bef48734c() {\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='a7e892ac0d3c4cd4b27fc73bef48734c ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' a7e892ac0d3c4cd4b27fc73bef48734c';\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 2009 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.7<\/p>\r\n\r\n<\/div>\r\n<!--\r\na7e892ac0d3c4cd4b27fc73bef48734c ##### SOURCE BEGIN #####\r\n%%\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/15007 % Jiro>'s pick this week is\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/22968-gridbaglayout % |GridBagLayout|> by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/45863 % Jason>.\r\n\r\n%%\r\n% This is another entry in our collection of GUI-oriented\r\n% Picks-of-the-Week. Here are 3 that I highlighted about a year ago:\r\n%\r\n% * <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/ Part 1>\r\n% * <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/ Part 2>\r\n% * <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/ Part 3>\r\n%\r\n% I love these entries because 1) I love GUIs and 2) these tools make GUI\r\n% building fun and easy.\r\n%\r\n% |GridBagLayout| is a rich set of tools implemented using the\r\n% <https:\/\/www.mathworks.com\/help\/releases\/R2008b\/techdoc\/matlab_oop\/ug_intropage.html % MATLAB Class System>. It has a nice set of properties and methods to\r\n% perform sophisticated layout of graphical components.\r\n%\r\n% As you can see from the following set of commands, you can add components\r\n% and provide individual constraints or let the layout object handle\r\n% everything. When you resize the figure, the components maintain the\r\n% appropriate size\/location based on the settings.\r\n\r\nhl = layout.GridBagLayout(figure);\r\nhl.add(uicontrol('String', 'Button 1'), 1, 2)\r\nhl.add(uicontrol('String', 'Button 2'), 1, 3)\r\nhl.add(axes, 2, [1 3], 'Fill', 'Both')\r\nhl.VerticalWeights = [0 1];\r\nhl.VerticalGap = 20;\r\nhl.HorizontalGap = 20;\r\nhl.HorizontalWeights = [1 0 0];\r\n\r\nhl.setConstraints(1, 2, 'MinimumWidth', 80, 'MinimumHeight', 25);\r\nhl.setConstraints(1, 3, 'MinimumWidth', 80, 'MinimumHeight', 25);\r\nhl.setConstraints(2, [1 3], 'LeftInset', 30);\r\nhl.setConstraints(2, [1 3], 'BottomInset', 30);\r\n\r\n%%\r\n% Here's an animation of how each command affects the GUI.\r\n%\r\n% <<guilayout4anim.gif>>\r\n%\r\n% Also check out the <https:\/\/www.mathworks.com\/matlabcentral\/fx_files\/22968\/2\/content\/html\/eGridBagLayout.html % published document> that Jason included with his entry.\r\n% Stay tuned for Part 5. We'll look at another entry that simplifies\r\n% the GUI building process even more.\r\n%\r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=2390#respond *Comments?*>\r\n##### SOURCE END ##### a7e892ac0d3c4cd4b27fc73bef48734c\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n\r\nJiro's pick this week is GridBagLayout by Jason.\r\n\r\n&nbsp;\r\n\r\nThis is another entry in our collection of GUI-oriented Picks-of-the-Week. Here are 3 that I highlighted about a year ago:\r\n\r\n\r\n\tPart... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2009\/02\/27\/gui-layout-part-4\/\">read more >><\/a><\/p>","protected":false},"author":35,"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\/2390"}],"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\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=2390"}],"version-history":[{"count":1,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2390\/revisions"}],"predecessor-version":[{"id":7318,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2390\/revisions\/7318"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=2390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=2390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=2390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}