{"id":2572,"date":"2010-06-18T13:31:40","date_gmt":"2010-06-18T13:31:40","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/2010\/06\/18\/gui-layout-part-7\/"},"modified":"2011-01-31T17:53:10","modified_gmt":"2011-01-31T17:53:10","slug":"gui-layout-part-7","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2010\/06\/18\/gui-layout-part-7\/","title":{"rendered":"GUI Layout (Part 7)"},"content":{"rendered":"<div xmlns:mwsh=\"https:\/\/www.mathworks.com\/namespace\/mcode\/v1\/syntaxhighlight.dtd\" class=\"content\">\r\n   <p><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\/27758-gui-layout-toolbox\">GUI Layout Toolbox<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/80363\">Ben Tordoff<\/a> and David Sampson, who are MathWorks consultants from our UK office.\r\n   <\/p>\r\n   <p>It's been a while since I highlighted a GUI layout entry. For those interested in looking at my previous posts, here they\r\n      are: <a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/\">Part 1<\/a>, <a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/\">Part 2<\/a>, <a href=\"https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/\">Part 3<\/a>, <a href=\"https:\/\/blogs.mathworks.com\/pick\/2009\/02\/27\/gui-layout-part-4\/\">Part 4<\/a>, <a href=\"https:\/\/blogs.mathworks.com\/pick\/2009\/03\/06\/gui-layout-part-5\/\">Part 5<\/a>, <a href=\"https:\/\/blogs.mathworks.com\/pick\/2009\/03\/27\/gui-layout-part-6\/\">Part 6<\/a>.\r\n   <\/p>\r\n   <p>This is the ultimate GUI Layout Toolbox. This toolbox contains layout utilities that integrate seamlessly with MATLAB UI components.\r\n      In addition, it allows components to resize dynamically (by draggable dividers) and comes with a highly-requested tab component.\r\n      The toolbox is fully developed using the MATLAB Class system.\r\n   <\/p>\r\n   <p>If you think you're impressed with all the capabilities that it offers, wait until you take a look at the full documentation\r\n      that it comes with. The documentation includes Examples, Function Reference Pages, and Getting Started section -- all the\r\n      sections you see in our documentation.\r\n   <\/p>\r\n   <p>Let's see this thing in action!<\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">fh = figure(<span style=\"color: #A020F0\">'Units'<\/span>, <span style=\"color: #A020F0\">'Pixels'<\/span>, <span style=\"color: #0000FF\">...<\/span>\r\n   <span style=\"color: #A020F0\">'OuterPosition'<\/span>, [100 100 500 500], <span style=\"color: #0000FF\">...<\/span>\r\n   <span style=\"color: #A020F0\">'Toolbar'<\/span>, <span style=\"color: #A020F0\">'none'<\/span>, <span style=\"color: #A020F0\">'Menu'<\/span>, <span style=\"color: #A020F0\">'none'<\/span>);\r\np = uiextras.TabPanel(<span style=\"color: #A020F0\">'Parent'<\/span>, fh, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">      % Tab Component<\/span>\r\n   <span style=\"color: #A020F0\">'Padding'<\/span>, 5 );\r\naxes(<span style=\"color: #A020F0\">'Parent'<\/span>, p);                           <span style=\"color: #228B22\">% 1st Tab<\/span>\r\nb1 = uiextras.HBox(<span style=\"color: #A020F0\">'Parent'<\/span>, p, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">          % 2nd Tab - Horiz Box<\/span>\r\n   <span style=\"color: #A020F0\">'Spacing'<\/span>, 5);\r\nload <span style=\"color: #A020F0\">table_data<\/span>\r\nuitable(<span style=\"color: #A020F0\">'Parent'<\/span>, b1, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">                    %   Left Box<\/span>\r\n   <span style=\"color: #A020F0\">'Data'<\/span>, d, <span style=\"color: #0000FF\">...<\/span>\r\n   <span style=\"color: #A020F0\">'RowName'<\/span>, <span style=\"color: #A020F0\">''<\/span>, <span style=\"color: #0000FF\">...<\/span>\r\n   <span style=\"color: #A020F0\">'ColumnName'<\/span>, {<span style=\"color: #A020F0\">'Property'<\/span>, <span style=\"color: #A020F0\">'Value'<\/span>}, <span style=\"color: #0000FF\">...<\/span>\r\n   <span style=\"color: #A020F0\">'ColumnWidth'<\/span>, {150,100});\r\nb2 = uiextras.VBoxFlex(<span style=\"color: #A020F0\">'Parent'<\/span>, b1, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">     %   Right Box - Flex Vert Box<\/span>\r\n   <span style=\"color: #A020F0\">'Spacing'<\/span>, 5);\r\nuicontrol(<span style=\"color: #A020F0\">'Parent'<\/span>, b2, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">                  %     Top Box<\/span>\r\n   <span style=\"color: #A020F0\">'Style'<\/span>, <span style=\"color: #A020F0\">'listbox'<\/span>);\r\nuicontrol(<span style=\"color: #A020F0\">'Parent'<\/span>, b2, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">                  %     Middle Box<\/span>\r\n   <span style=\"color: #A020F0\">'Style'<\/span>, <span style=\"color: #A020F0\">'listbox'<\/span>);\r\nb3 = uiextras.HButtonBox(<span style=\"color: #A020F0\">'Parent'<\/span>, b2, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">   %     Bottom Box - Horz Button<\/span>\r\n   <span style=\"color: #A020F0\">'ButtonSize'<\/span>, [100 25]);\r\nuicontrol(<span style=\"color: #A020F0\">'Parent'<\/span>, b3, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">                  %       Left Button<\/span>\r\n   <span style=\"color: #A020F0\">'String'<\/span>, <span style=\"color: #A020F0\">'Set'<\/span>);\r\nuicontrol(<span style=\"color: #A020F0\">'Parent'<\/span>, b3, <span style=\"color: #0000FF\">...<\/span><span style=\"color: #228B22\">                  %       Right Button<\/span>\r\n   <span style=\"color: #A020F0\">'String'<\/span>, <span style=\"color: #A020F0\">'Clear'<\/span>);\r\n\r\n<span style=\"color: #228B22\">% Set Tab Names<\/span>\r\nset(p, <span style=\"color: #A020F0\">'TabNames'<\/span>, {<span style=\"color: #A020F0\">'Main Plot'<\/span>, <span style=\"color: #A020F0\">'Settings'<\/span>});\r\n\r\n<span style=\"color: #228B22\">% Set sizes of boxes<\/span>\r\nset(b1, <span style=\"color: #A020F0\">'Sizes'<\/span>, [-1 205]);\r\nset(b2, <span style=\"color: #A020F0\">'Sizes'<\/span>, [-1 -1 25]);<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/potw_guitoolbox_01.png\"> <p><b>Comments<\/b><\/p>\r\n   <p>Let us know what you think <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=2572#respond\">here<\/a>.\r\n   <\/p><script language=\"JavaScript\">\r\n<!--\r\n\r\n    function grabCode_01010f49ade74c68af48704d854ece79() {\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='01010f49ade74c68af48704d854ece79 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 01010f49ade74c68af48704d854ece79';\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 2010 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<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>\\n');\r\n      \r\n      d.title = title + ' (MATLAB code)';\r\n      d.close();\r\n      }   \r\n      \r\n-->\r\n<\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_01010f49ade74c68af48704d854ece79()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n            the MATLAB code \r\n            <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; 7.10<br><\/p>\r\n<\/div>\r\n<!--\r\n01010f49ade74c68af48704d854ece79 ##### SOURCE BEGIN #####\r\n%%\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/15007\r\n% Jiro>'s pick this week is\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/27758-gui-layout-toolbox\r\n% GUI Layout Toolbox> by <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/80363 Ben Tordoff> and David Sampson, who are MathWorks consultants from our UK office.\r\n%\r\n% It's been a while since I highlighted a GUI layout entry. For those\r\n% interested in looking at my previous posts, here they are:\r\n% <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/15\/gui-layout-part-1\/ \r\n% Part 1>, <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/22\/gui-layout-part-2\/\r\n% Part 2>, <https:\/\/blogs.mathworks.com\/pick\/2008\/02\/29\/gui-layout-part-3\/\r\n% Part 3>, <https:\/\/blogs.mathworks.com\/pick\/2009\/02\/27\/gui-layout-part-4\/ \r\n% Part 4>, <https:\/\/blogs.mathworks.com\/pick\/2009\/03\/06\/gui-layout-part-5\/ \r\n% Part 5>, <https:\/\/blogs.mathworks.com\/pick\/2009\/03\/27\/gui-layout-part-6\/ \r\n% Part 6>.\r\n%\r\n% This is the ultimate GUI Layout Toolbox. This toolbox contains layout\r\n% utilities that integrate seamlessly with MATLAB UI components. In\r\n% addition, it allows components to resize dynamically (by draggable\r\n% dividers) and comes with a highly-requested tab component. The toolbox is\r\n% fully developed using the MATLAB Class system.\r\n%\r\n% If you think you're impressed with all the capabilities that it offers,\r\n% wait until you take a look at the full documentation that it comes with.\r\n% The documentation includes Examples, Function Reference Pages, and\r\n% Getting Started section REPLACE_WITH_DASH_DASH all the sections you see in our documentation.\r\n%\r\n% Let's see this thing in action!\r\n\r\nfh = figure('Units', 'Pixels', ...\r\n   'OuterPosition', [100 100 500 500], ...\r\n   'Toolbar', 'none', 'Menu', 'none');\r\np = uiextras.TabPanel('Parent', fh, ...      % Tab Component\r\n   'Padding', 5 );\r\naxes('Parent', p);                           % 1st Tab\r\nb1 = uiextras.HBox('Parent', p, ...          % 2nd Tab - Horiz Box\r\n   'Spacing', 5);\r\nload table_data\r\nuitable('Parent', b1, ...                    %   Left Box\r\n   'Data', d, ...\r\n   'RowName', '', ...\r\n   'ColumnName', {'Property', 'Value'}, ...\r\n   'ColumnWidth', {150,100});\r\nb2 = uiextras.VBoxFlex('Parent', b1, ...     %   Right Box - Flex Vert Box\r\n   'Spacing', 5);\r\nuicontrol('Parent', b2, ...                  %     Top Box\r\n   'Style', 'listbox');\r\nuicontrol('Parent', b2, ...                  %     Middle Box\r\n   'Style', 'listbox');\r\nb3 = uiextras.HButtonBox('Parent', b2, ...   %     Bottom Box - Horz Button\r\n   'ButtonSize', [100 25]);\r\nuicontrol('Parent', b3, ...                  %       Left Button\r\n   'String', 'Set');\r\nuicontrol('Parent', b3, ...                  %       Right Button\r\n   'String', 'Clear');\r\n\r\n% Set Tab Names\r\nset(p, 'TabNames', {'Main Plot', 'Settings'});\r\n\r\n% Set sizes of boxes\r\nset(b1, 'Sizes', [-1 205]);\r\nset(b2, 'Sizes', [-1 -1 25]);\r\n\r\n%%\r\n% *Comments*\r\n%\r\n% Let us know what you think\r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=2572#respond here>.\r\n\r\n##### SOURCE END ##### 01010f49ade74c68af48704d854ece79\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n   Jiro's pick this week is GUI Layout Toolbox by Ben Tordoff and David Sampson, who are MathWorks consultants from our UK office.\r\n   \r\n   It's been a while since I highlighted a GUI layout entry.... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2010\/06\/18\/gui-layout-part-7\/\">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\/2572"}],"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=2572"}],"version-history":[{"count":0,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/2572\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=2572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=2572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=2572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}