{"id":8512,"date":"2017-04-14T09:00:06","date_gmt":"2017-04-14T13:00:06","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=8512"},"modified":"2017-04-18T08:23:49","modified_gmt":"2017-04-18T12:23:49","slug":"guide-to-object","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2017\/04\/14\/guide-to-object\/","title":{"rendered":"Guide To Object"},"content":{"rendered":"<div xmlns:mwsh=\"https:\/\/www.mathworks.com\/namespace\/mcode\/v1\/syntaxhighlight.dtd\" class=\"content\">\n   <introduction><\/p>\n<p><a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/3208495\">Sean<\/a>&#8216;s pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/4879-mri-brain-segmentation\">Guide To Object<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/5301603\">Neil Hopcroft<\/a>.\n      <\/p>\n<p>   <\/introduction><\/p>\n<h3>Contents<\/h3>\n<div>\n<ul>\n<li><a href=\"#1\">GUIDE<\/a><\/li>\n<li><a href=\"#2\">App Designer<\/a><\/li>\n<li><a href=\"#3\">Comments<\/a><\/li>\n<\/ul><\/div>\n<h3>GUIDE<a name=\"1\"><\/a><\/h3>\n<p>Have you ever used GUIDE to build a user interface in MATLAB?  If yes, I&#8217;m curious to hear about the experience.  When I started using it for my undergrad research, it was a great way to get user interfaces off the ground quickly and relatively intuitively.  However, as user interfaces became more complex, and I had to interact with hardware, programming it became difficult.  The  problem was that there was no good way to manage state in GUIDE outside of setting everything to the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/setappdata.html\">Application Data<\/a> which felt a lot like using globals.\n   <\/p>\n<p>That was when I started developing user interfaces from scratch using <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/examples\/nested-functions.html\">nested functions<\/a>.  Nested functions work well for small user interfaces but for large ones you end up with many shared variables and it becomes confusing.  Additionally, it&#8217;s difficult to separate things into separate files so the file sizes become overwhelming.  This is where <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/object-oriented-programming.html\">object oriented programming<\/a> becomes really useful.  You can componentize different parts of the application, separate the user interface from the algorithm, and make reusable tools.\n   <\/p>\n<p>Neil&#8217;s &#8220;Guide To Object&#8221; tool helps take GUIDE UIs and move them into the object oriented world.  Let&#8217;s start with the simple example user interface you can select when you open GUIDE.\n   <\/p>\n<p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/mainguide2object\/simpleUI.png\"> <\/p>\n<p>We then need to take export it to just a function from the file menu drop down in GUIDE.  From there we call <tt>GuideToObject<\/tt> with the export and then name of the class we want.\n   <\/p>\n<pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">GuideToObject(<span style=\"color: #A020F0\">'SimpleUI_export.m'<\/span>, <span style=\"color: #A020F0\">'Blog.SimpleUI'<\/span>, 0)<\/pre>\n<p>This builds the classes that we can then work from.  Algorithmic pieces should be written after so that they can reference the properties of the object directly rather than indexing into handles.  It&#8217;s not perfect and there are a few things you may have to do to the generated code as you develop the algorithm.  Neil has also given tools to recreate the class in case you make enhancements in GUIDE.\n   <\/p>\n<p>So what has MathWorks done for the user interface development world?<\/p>\n<h3>App Designer<a name=\"2\"><\/a><\/h3>\n<p>In R2016a MathWorks released <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/app-designer.html\">App Designer<\/a>. This is a completely new way to build apps in MATLAB that supercedes GUIDE.  It provides an interactive environment like GUIDE for laying out your apps and the code framework for your algorithm right alongside. This code is object oriented and the environment provides programming aids like tab completion to help you develop your algorithms quickly. Additionally, there are many more user interface components you can add and all are more modern looking.\n   <\/p>\n<p>You can get started with it by running <tt>appdesigner<\/tt> or selecting &#8220;New -&gt; App&#8221; from the Home Tab in MATLAB.\n   <\/p>\n<p>Here is an example of the design view and the code view for an app I developed in App Designer.  You will see how the code is object oriented with properties for both the components and any other data or state I need to manage.\n   <\/p>\n<p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/mainguide2object\/appdesignerdesignview.png\"> <\/p>\n<p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/mainguide2object\/appdesignercodeview.png\"> <\/p>\n<p>The other neat thing here is that when I run the app (or create a <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/uifigure.html\"><tt>uifigure<\/tt><\/a>, the basis for the app) and look at my task manager you will see a few <i>MATLABWindows<\/i>.\n   <\/p>\n<p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/mainguide2object\/taskmanager.png\"> <\/p>\n<p>That MATLAB window is a lightweight browser and the app canvas and components are javascript based.  I&#8217;ll let you extrapolate as to what that could mean for the future.\n   <\/p>\n<p>At this point, I&#8217;d recommend using App Designer instead of GUIDE for most use cases.  It supports pretty much everything except 3d plots and some of the more advanced charting operations from the toolboxes.  Even for those, if they are a small part of the app, you can open a classic MATLAB figure and plot the unsupported things there.  A bonus is that because you can have app properties, it&#8217;s much easier to manage a second figure from the main application!\n   <\/p>\n<h3>Comments<a name=\"3\"><\/a><\/h3>\n<p>Give it a try and let us know what you think <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=8512#respond\">here<\/a> or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/4879-mri-brain-segmentation#comments\">comment<\/a> for Neil.\n   <\/p>\n<p><script language=\"JavaScript\">\n<!--\n\n    function grabCode_f6b2f27a8b81459da9adb41e61062232() {\n        \/\/ Remember the title so we can use it in the new page\n        title = document.title;\n\n        \/\/ Break up these strings so that their presence\n        \/\/ in the Javascript doesn't mess up the search for\n        \/\/ the MATLAB code.\n        t1='f6b2f27a8b81459da9adb41e61062232 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\n        t2='##### ' + 'SOURCE END' + ' #####' + ' f6b2f27a8b81459da9adb41e61062232';\n    \n        b=document.getElementsByTagName('body')[0];\n        i1=b.innerHTML.indexOf(t1)+t1.length;\n        i2=b.innerHTML.indexOf(t2);\n \n        code_string = b.innerHTML.substring(i1, i2);\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\n\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \n        \/\/ in the XML parser.\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\n        \/\/ doesn't go ahead and substitute the less-than character. \n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\n\n        author = 'Sean de Wolski';\n        copyright = 'Copyright 2017 The MathWorks, Inc.';\n\n        w = window.open();\n        d = w.document;\n        d.write('\n\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>\n\n\\n');\n      \n      d.title = title + ' (MATLAB code)';\n      d.close();\n      }   \n      \n-->\n<\/script><\/p>\n<p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><a href=\"javascript:grabCode_f6b2f27a8b81459da9adb41e61062232()\"><span style=\"font-size: x-small;        font-style: italic;\">Get<br \/>\n            the MATLAB code<br \/>\n            <noscript>(requires JavaScript)<\/noscript><\/span><\/a><\/p>\n<p>      Published with MATLAB&reg; R2017a<\/p>\n<\/div>\n<p><!--\nf6b2f27a8b81459da9adb41e61062232 ##### SOURCE BEGIN #####\n%% Guide To Object\n%\n% <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/3208495 Sean>'s pick this week is\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/4879-mri-brain-segmentation Guide To Object> by\n% <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/5301603 Neil Hopcroft>.\n% \n\n%% GUIDE\n%\n% Have you ever used GUIDE to build a user interface in MATLAB?  If yes,\n% I'm curious to hear about the experience.  When I started using it for my\n% undergrad research, it was a great way to get user interfaces off the\n% ground quickly and relatively intuitively.  However, as user interfaces\n% became more complex, and I had to interact with hardware, programming it\n% became difficult.  The problem was that there was no good way to manage\n% state in GUIDE outside of setting everything to the\n% <https:\/\/www.mathworks.com\/help\/matlab\/ref\/setappdata.html Application\n% Data> which felt a lot like using globals.\n%\n% That was when I started developing user interfaces from scratch using\n% <https:\/\/www.mathworks.com\/help\/matlab\/examples\/nested-functions.html\n% nested functions>.  Nested functions work well for small user interfaces\n% but for large ones you end up with many shared variables and it becomes\n% confusing.  Additionally, it's difficult to separate things into separate\n% files so the file sizes become overwhelming.  This is where\n% <https:\/\/www.mathworks.com\/help\/matlab\/object-oriented-programming.html\n% object oriented programming> becomes really useful.  You can componentize\n% different parts of the application, separate the user interface from the\n% algorithm, and make reusable tools.\n%\n% Neil's \"Guide To Object\" tool helps take GUIDE UIs and move them into the\n% object oriented world.  Let's start with the simple example user\n% interface you can select when you open GUIDE.  I have not programmed the\n% callbacks yet.\n%\n% <<simpleUI.png>>\n%\n% We then need to take export it to just a function from the file menu drop\n% down in GUIDE.  From there we call |GuideToObject| with the export and\n% then name of the class we want.\n% \n%   GuideToObject('SimpleUI_export.m', 'Blog.SimpleUI', 0)\n%\n% This builds the classes that we can then work from.  Algorithmic pieces\n% should be written after so that they can reference the properties of the\n% object directly rather than indexing into handles.  It's not perfect and\n% there are a few things you may have to do to the generated code as you\n% develop the algorithm.  Neil has also given tools to recreate the UI in\n% case you make enhancements in GUIDE.\n%\n% So what has MathWorks done for the user interface development world?\n\n%% App Designer\n% \n% In R2016a MathWorks released\n% <https:\/\/www.mathworks.com\/help\/matlab\/app-designer.html App Designer>.\n% This is a completely new way to build apps in MATLAB that supercedes\n% GUIDE.  It provides an interactive environment like GUIDE for laying out\n% your apps and the code framework for your algorithm right alongside.\n% This code is object oriented and the environment provides programming\n% aids like tab completion to help you develop your algorithms quickly.\n% Additionally, there are many more user interface components you can add\n% and all are more modern looking.\n%\n% You can get started with it by running |appdesigner| or selecting \"New ->\n% App\" from the Home Tab in MATLAB.\n%\n% Here is an example of the design view and the code view for an app I\n% developed in App Designer.  You will see how the code is object oriented\n% with properties for both the components and any other data or state I\n% need to manage.\n%\n% <<appdesignerdesignview.png>>\n%\n% <<appdesignercodeview.png>>\n%\n% The other neat thing here is that when I run the app (or create a\n% <https:\/\/www.mathworks.com\/help\/matlab\/ref\/uifigure.html |uifigure|>, the\n% basis for the app) and look at my task manager you will see a few\n% _MATLABWindows_.\n%\n% <<taskmanager.png>>\n%\n% That MATLAB window is a lightweight chrome browser and the app canvas and\n% components are javascript based.  I'll let you extrapolate as to what\n% that could mean for the future.\n%\n% At this point, I'd recommend using App Designer instead of GUIDE for most\n% use cases.  It supports pretty much everything except 3d plots and some\n% of the more advanced charting operations from the toolboxes.  Even for\n% those, if they are a small part of the app, you can open a classic MATLAB\n% figure and plot the unsupported things there.  A bonus is that because you\n% can have app properties, it's much easier to manage a second figure from\n% the main application!\n\n%% Comments\n% \n% Give it a try and let us know what you think\n% <https:\/\/blogs.mathworks.com\/pick\/?p=8512#respond here> or leave a\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/4879-mri-brain-segmentation#comments\n% comment> for Neil.\n%\n \n\n##### SOURCE END ##### f6b2f27a8b81459da9adb41e61062232\n--><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img decoding=\"async\"  class=\"img-responsive\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/mainguide2object\/simpleUI.png\" onError=\"this.style.display ='none';\" \/><\/div>\n<p>Sean&#8216;s pick this week is Guide To Object by Neil Hopcroft.<\/p>\n<p>Contents<\/p>\n<p>GUIDE<br \/>\nApp Designer<br \/>\nComments<\/p>\n<p>GUIDE<br \/>\nHave you ever used GUIDE to build a user interface in MATLAB?  If yes,&#8230; <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2017\/04\/14\/guide-to-object\/\">read more >><\/a><\/p>\n","protected":false},"author":87,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/8512"}],"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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=8512"}],"version-history":[{"count":7,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/8512\/revisions"}],"predecessor-version":[{"id":8534,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/8512\/revisions\/8534"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=8512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=8512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=8512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}