{"id":9598,"date":"2018-03-30T11:41:14","date_gmt":"2018-03-30T15:41:14","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=9598"},"modified":"2018-05-22T09:23:31","modified_gmt":"2018-05-22T13:23:31","slug":"guide-to-app-designer-migration-tool","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2018\/03\/30\/guide-to-app-designer-migration-tool\/","title":{"rendered":"GUIDE to App Designer Migration Tool"},"content":{"rendered":"<div class=\"content\"><p><a href=\"https:\/\/www.mathworks.com\/\/matlabcentral\/profile\/authors\/869871\">Jiro<\/a>&#8216;s pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/66087-guide-to-app-designer-migration-tool-for-matlab\">GUIDE to App Designer Migration Tool (for R2018a)<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/5775824\">MathWorks App Designer Team<\/a>.<\/p><p>The <a href=\"https:\/\/www.mathworks.com\/products\/matlab\/app-designer.html\">App Designer<\/a> was initially introduced in R2016a, and since then we&#8217;ve been adding new, shiny components to it every release. It is now our recommended tool for anyone who wants to build an interactive app. As of R2018a, you can now easily deploy your apps built with App Designer <a href=\"https:\/\/www.mathworks.com\/help\/compiler\/webapps\/create-and-deploy-a-web-app.html\">to the web<\/a>, with the <a href=\"https:\/\/www.mathworks.com\/products\/compiler.html\">MATLAB Compiler<\/a>.<\/p><p>Many of you may have used <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/guide-or-matlab-functions.html\">GUIDE<\/a> to build interactive apps in MATLAB before R2016a. Now that App Designer provides most of the features that GUIDE provides, plus many more newer components, you may be interested in porting your old GUIDE apps to App Designer apps. But laying out the components and rewriting callback functions can be tedious.<\/p><p>That&#8217;s where this &#8220;GUIDE to App Designer Migration Tool&#8221; comes to the rescue. It will help with the migration process and will also give you a report to assist you with additional modifications and inform you of any incompatibilities.<\/p><p>I gave it a try with a GUIDE app I had from a long time ago.<\/p><p><b>GUIDE Version<\/b><\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_guide2app\/potw_Energy_GUIDE.png\" alt=\"\"> <\/p><p><b>App Designer Version<\/b><\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_guide2app\/potw_Energy_App.png\" alt=\"\"> <\/p><p>Now, I did need to do some modifications, such as create new properties for data management and change some of the plotting syntax. Many of these modifications were explained in the report that it created.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_guide2app\/potw_Energy_report.png\" alt=\"\"> <\/p><p><b>Comments<\/b><\/p><p>Give it a try and let us know what you think <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=9598#respond\">here<\/a> or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/66087-guide-to-app-designer-migration-tool-for-matlab#comment\">comment<\/a> for MathWorks App Designer Team.<\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_13da13e1b2fd4bb9b1ecb46cf7cad60b() {\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='13da13e1b2fd4bb9b1ecb46cf7cad60b ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 13da13e1b2fd4bb9b1ecb46cf7cad60b';\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        copyright = 'Copyright 2018 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 copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\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     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_13da13e1b2fd4bb9b1ecb46cf7cad60b()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; R2018a<br><\/p><p class=\"footer\"><br>\r\n      Published with MATLAB&reg; R2018a<br><\/p><\/div><!--\r\n13da13e1b2fd4bb9b1ecb46cf7cad60b ##### SOURCE BEGIN #####\r\n%%\r\n% <https:\/\/www.mathworks.com\/\/matlabcentral\/profile\/authors\/869871 Jiro>'s\r\n% pick this week is\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/66087-guide-to-app-designer-migration-tool-for-matlab GUIDE to App\r\n% Designer Migration Tool (for R2018a)> by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/5775824\r\n% MathWorks App Designer Team>.\r\n%\r\n% The <https:\/\/www.mathworks.com\/products\/matlab\/app-designer.html App\r\n% Designer> was initially introduced in R2016a, and since then we've been\r\n% adding new, shiny components to it every release. It is now our\r\n% recommended tool for anyone who wants to build an interactive app. As of\r\n% R2018a, you can now easily deploy your apps built with App Designer\r\n% <https:\/\/www.mathworks.com\/help\/compiler\/webapps\/create-and-deploy-a-web-app.html\r\n% to the web>, with the <https:\/\/www.mathworks.com\/products\/compiler.html\r\n% MATLAB Compiler>.\r\n%\r\n% Many of you may have used\r\n% <https:\/\/www.mathworks.com\/help\/matlab\/guide-or-matlab-functions.html\r\n% GUIDE> to build interactive apps in MATLAB before R2016a. Now that App\r\n% Designer provides most of the features that GUIDE provides, plus many\r\n% more newer components, you may be interested in porting your old GUIDE\r\n% apps to App Designer apps. But laying out the components and rewriting\r\n% callback functions can be tedious.\r\n%\r\n% That's where this \"GUIDE to App Designer Migration Tool\" comes to the\r\n% rescue. It will help with the migration process and will also give you a\r\n% report to assist you with additional modifications and inform you of any\r\n% incompatibilities.\r\n%\r\n% I gave it a try with a GUIDE app I had from a long time ago.\r\n%\r\n% *GUIDE Version*\r\n%\r\n% <<potw_Energy_GUIDE.png>>\r\n%\r\n% *App Designer Version*\r\n%\r\n% <<potw_Energy_App.png>>\r\n%\r\n% Now, I did need to do some modifications, such as create new properties\r\n% for data management and change some of the plotting syntax. Many of\r\n% these modifications were explained in the report that it created.\r\n%\r\n% <<potw_Energy_report.png>>\r\n%\r\n% *Comments*\r\n%\r\n% Give it a try and let us know what you think\r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=9598#respond here> or leave a\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/66087-guide-to-app-designer-migration-tool-for-matlab#comment\r\n% comment> for MathWorks App Designer Team.\r\n\r\n##### SOURCE END ##### 13da13e1b2fd4bb9b1ecb46cf7cad60b\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img decoding=\"async\"  class=\"img-responsive\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_guide2app\/potw_Energy_GUIDE.png\" onError=\"this.style.display ='none';\" \/><\/div><p>Jiro&#8216;s pick this week is GUIDE to App Designer Migration Tool (for R2018a) by MathWorks App Designer Team.The App Designer was initially introduced in R2016a, and since then we&#8217;ve been&#8230; <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2018\/03\/30\/guide-to-app-designer-migration-tool\/\">read more >><\/a><\/p>","protected":false},"author":35,"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\/9598"}],"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=9598"}],"version-history":[{"count":5,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/9598\/revisions"}],"predecessor-version":[{"id":9743,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/9598\/revisions\/9743"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=9598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=9598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=9598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}