{"id":12350,"date":"2021-06-11T09:00:36","date_gmt":"2021-06-11T13:00:36","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=12350"},"modified":"2021-06-11T13:01:52","modified_gmt":"2021-06-11T17:01:52","slug":"widgets-toolbox-matlab-app-building-components","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2021\/06\/11\/widgets-toolbox-matlab-app-building-components\/","title":{"rendered":"Widgets Toolbox &#8211; MATLAB App Building Components"},"content":{"rendered":"<div xmlns:mwsh=\"http:\/\/www.mathworks.com\/namespace\/mcode\/v1\/syntaxhighlight.dtd\" class=\"content\">\r\n   <introduction>\r\n      <p><a href=\"http:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/3208495\">Sean<\/a>'s pick this week is <a href=\"http:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/83328\">Widgets Toolbox<\/a> by <a href=\"http:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/870106\">Robyn Jackey<\/a>.\r\n      <\/p>\r\n   <\/introduction>\r\n   <h3>Contents<\/h3>\r\n   <div>\r\n      <ul>\r\n         <li><a href=\"#1\">Instagram Live<\/a><\/li>\r\n         <li><a href=\"#2\">Widgets<\/a><\/li>\r\n         <li><a href=\"#3\">Comments<\/a><\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <h3>Instagram Live<a name=\"1\"><\/a><\/h3>\r\n   <p>This week I tried something new and picked the file live on Instagram a couple days ago.  You can watch it here: <a href=\"https:\/\/www.instagram.com\/tv\/CP5tHdMAUGJ\/\">https:\/\/www.instagram.com\/tv\/CP5tHdMAUGJ\/<\/a><\/p>\r\n   <h3>Widgets<a name=\"2\"><\/a><\/h3>\r\n   <p>Starting in R2020b, the ability to <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/developing-custom-ui-component-classes.html\">build reusable components<\/a> that show up in the graphics tree for a uifigure-based app was added.  Then in R2021a, it's possible to add these to the app designer component gallery so others can add them interactively and set them.\r\n   <\/p>\r\n   <p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/pick\/files\/widgetstbx.png\"> <\/p>\r\n   <p>Robyn's toolbox provides a bunch of common things you might want.  My two favorite are the File Selector and the Password Field.  File selection (for reading and\/or writing) is something I do in almost every app I build.\r\n   <\/p>\r\n   <p>You can get the toolbox either as a toolbox through the add-on manager in MATLAB or by cloning the repository or referencing the project on GitHub.\r\n   <\/p>\r\n   <p>During the live video I showed how to build a simple app with a file selector that loads a table and then shows it in the app.\r\n   <\/p>\r\n   <p>Here's the final view of it.  I used the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/exportapp.html\"><tt>exportapp<\/tt><\/a> function, new in R2020b, to export it.\r\n   <\/p>\r\n   <p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/pick\/files\/instagramliveapp.png\"> <\/p>\r\n   <h3>Comments<a name=\"3\"><\/a><\/h3>\r\n   <p>Give it a try and let us know what you think <a href=\"http:\/\/blogs.mathworks.com\/pick\/?p=12350#respond\">here<\/a> or leave a <a href=\"http:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/83328#comments\">comment<\/a> for Robyn.\r\n   <\/p><script language=\"JavaScript\">\r\n<!--\r\n\r\n    function grabCode_c85ffbc2f6f844e88cedb480dcd53940() {\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='c85ffbc2f6f844e88cedb480dcd53940 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' c85ffbc2f6f844e88cedb480dcd53940';\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 = 'Sean de Wolski';\r\n        copyright = 'Copyright 2021 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><br>\r\n      Published with MATLAB&reg; R2021b<br><\/p>\r\n<\/div>\r\n<!--\r\nc85ffbc2f6f844e88cedb480dcd53940 ##### SOURCE BEGIN #####\r\n%% Widgets Toolbox - MATLAB App Building Components\r\n%\r\n% <http:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/3208495 Sean>'s pick this week is\r\n% <http:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/83328 Widgets Toolbox> by\r\n% <http:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/870106 Robyn Jackey>.\r\n%\r\n\r\n%% Instagram Live\r\n%\r\n% This week I tried something new and picked the file live on Instagram a\r\n% couple days ago.  You can watch it here: <https:\/\/www.instagram.com\/tv\/CP5tHdMAUGJ\/>\r\n\r\n%% Widgets\r\n%\r\n% Starting in R2020b, the ability to\r\n% <https:\/\/www.mathworks.com\/help\/matlab\/developing-custom-ui-component-classes.html\r\n% build reusable components> that show up in the graphics tree for a\r\n% uifigure-based app was added.  Then in R2021a, it's possible to add these\r\n% to the app designer component gallery so others can add them\r\n% interactively and set them.\r\n%\r\n% <<widgetstbx.png>>\r\n%\r\n% Robyn's toolbox provides a bunch of common things you might want.  My two\r\n% favorite are the File Selector and the Password Field.  File selection\r\n% (for reading and\/or writing) is something I do in almost every app I\r\n% build.\r\n%\r\n% You can get the toolbox either as a toolbox through the add-on manager in\r\n% MATLAB or by cloning the repository or referencing the project on GitHub.\r\n%\r\n% During the live video I showed how to build a simple app with a file\r\n% selector that loads a table and then shows it in the app.\r\n%\r\n% Here's the final view of it.  I used the\r\n% <https:\/\/www.mathworks.com\/help\/matlab\/ref\/exportapp.html\r\n% |exportapp|> function, new in R2020b, to export it.\r\n%\r\n% <<instagramliveapp.png>>\r\n\r\n\r\n%% Comments\r\n%\r\n% Give it a try and let us know what you think\r\n% <http:\/\/blogs.mathworks.com\/pick\/?p=12350#respond here> or leave a\r\n% <http:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/83328#comments\r\n% comment> for Robyn.\r\n%\r\n\r\n\r\n##### SOURCE END ##### c85ffbc2f6f844e88cedb480dcd53940\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/pick\/files\/widgetstbx.png\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div><p>\r\n   \r\n      Sean's pick this week is Widgets Toolbox by Robyn Jackey.\r\n      \r\n   \r\n   Contents\r\n   \r\n      \r\n         Instagram... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2021\/06\/11\/widgets-toolbox-matlab-app-building-components\/\">read more >><\/a><\/p>","protected":false},"author":87,"featured_media":12359,"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\/12350"}],"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=12350"}],"version-history":[{"count":2,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/12350\/revisions"}],"predecessor-version":[{"id":12362,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/12350\/revisions\/12362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media\/12359"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=12350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=12350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=12350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}