MATLAB takes you to make your first APP designer program (electronic dictionary)

Note: The way to add the icon in the upper left corner is at the end
Insert picture description here
of the article. The following is the original article:

What I want to do today is a simple electronic dictionary, the effect is as follows:
Insert picture description here

Insert picture description here
Reference article: Do you want to have your own electronic dictionary-a tutorial on writing an electronic dictionary with MATLAB

1 App creation

Since it is zero foundation. . . . We must first start from how open APP designer:
if we are to create a new app program (mlapp file extension), you can create a new → App to create (if it is already created mlapp file, simply double-click the file to):
Insert picture description here
,
After that, we choose to create a new blank App to create a file. After

clicking Run, the app name can be changed here:

2 Control creation and property setting

2.1 Background

Click on the component in the component manager to set its properties:
Insert picture description here
when the properties on the right are edited, the code is automatically generated in the middle and the App display box on the left will change accordingly:

For this App, UIfigure needs to be modified as follows:

Change the background color (Color)
Change the initial position (Position)
App size cannot be adjusted at will (Resize)
Change the name in the upper left corner of the App interface (Name)

Insert picture description here

2.2 Tags (Dictionary Description)

We create other components by dragging:
the text area does not need to be edited when in use, so only the label can be used to complete the task.
Insert picture description here
We can drag and drop to change its position and size, or input through the attribute modifier The value changes its position and size, except for the position, the final attributes that need to be changed are as follows:

Label text (Text)
Text centered (HorizontalAlognment)
Font Size (FontSize)
Text font (FontName)
Text bold (FontWetght)
Text color (FontColor)

Insert picture description here

2.3 Input box and query button

The input box uses an editable text box, and the label on the left can be deleted by Delete.
Insert picture description here
In order to keep it simple, the button and input box are not set with too many attributes:

2.4 Query result box

It is also a text display box, but for the convenience of copying, the TextArea component of the text area is used instead of the Label component. After
creating the text area, it is recommended to cancel the Editable, so that it can still be copied, but the content cannot be modified by means outside the APP:
Insert picture description here

3 Principles of word search

We found that Youdao Dictionary will jump to a link when searching for a word. The link contains the searched vocabulary.
Insert picture description here
In fact, when searching for different vocabulary, the link changes only a small section in the middle. For different search terms, the links to be visited are as follows:

url=[‘http://www.youdao.com/w/’ search_word ‘/#keyfrom=dict2.top’];

search_word is the vocabulary to be searched. After obtaining the link, directly use
urlread(url) to obtain the content of the HTML page. The format for obtaining is like this:
Insert picture description here
We found the content between
<div class="trans-container"> and </ul> That's what we want, so we only need to locate and extract this part of the content through the regexpi function.
This part of the code is as follows (not converted to APP version):

function search_result=search(search_word)
        url=['http://www.youdao.com/w/' search_word '/#keyfrom=dict2.top'];
        complete_code=urlread(url);
        trans=regexpi(complete_code,'<div class="trans-container">');
        trans=trans(1);
        if ~isempty(trans)
            trans_end1=regexpi(complete_code,'</ul>');
            trans_end1(trans_end1<trans)=[];
            trans_end1=trans_end1(1);
            temp_data=complete_code(trans:trans_end1-1);
            delete_pos=regexpi(temp_data,'<li>');
            delete_pos=delete_pos(1);
            temp_data(1:delete_pos+3)=[];
            control=1;
            while(control)
                control=0;
                delete_li_pos=regexpi(temp_data,'<li>');
                if ~isempty(delete_li_pos)
                    delete_li_pos=delete_li_pos(1);
                    temp_data(delete_li_pos:delete_li_pos+3)=[];
                end
                delete_li_pos=regexpi(temp_data,'<li>');
                if ~isempty(delete_li_pos)
                    control=1;
                end
            end
            control=1;
            while(control)
                control=0;
                delete_li_pos=regexpi(temp_data,'</li>');
                if ~isempty(delete_li_pos)
                    delete_li_pos=delete_li_pos(1);
                    temp_data(delete_li_pos:delete_li_pos+4)=[];
                end
                delete_li_pos=regexpi(temp_data,'</li>');
                if ~isempty(delete_li_pos)
                    control=1;
                end
            end
            search_result=temp_data;
            
        end
    end

4 button callback

We want to query the contents of the input box at the push of a button, we need to add a callback function to the query button:
Insert picture description here
in the callback function, we first need to get the text in the input box:

copy the word query part of the code, and present the result in Result box:

The code part is complete!

##########################################################################################################################################

5 APP packaging and installation

Click here to enter the packaging interface.
Insert picture description here
Select the newly written mlapp file as the main file, and change its name. The
name will be displayed under the icon as shown in the figure during installation.

If it keeps spinning here, click a few more times to rerun the analysis. But:

Our program this time did not call other functions or images written by ourselves, so there is no need to fill in shared resources and help files

5.1 Installation package cover

The cover of the installation package can be selected on the right (it doesn’t matter whether it is selected or not). Insert picture description here
For example, the cover of the color extractor installation package looks like this:

5.2 Description

The filled description will be displayed in the following location:
Insert picture description here

5.3 Icon

The software display icon can be changed here:
Insert picture description here

some icons made by yourself:

After the above properties are set, you can click Package to start packaging. When the mlappinstall file is generated, the packaging ends.

5.4 APP installation

You can install the app by selecting mlappinstall in the following way. The
Insert picture description here
installation effect is as follows. After the

installation is complete, you can use it directly by clicking the icon. Note that you cannot have the source file of the app in the current path, otherwise it will cause an error. You can
change the current file Clip to solve.

Also, if
you want to know more about the magical operation of APP designer, you can read the following articles.

The mlapp and installation package file shown in this article:
https://download.csdn.net/download/slandarer/15565335

Another: How
to add the icon in the upper left corner To add the icon in the upper left corner,

First, prepare an ico format picture. You can find a lot of pictures to convert to ico format in the browser.
Put the ico format picture in the same folder as the mlapp file
Create a startupFcn callback for the mlapp file (if you don’t know how to create a startupFcn callback, you can read my blogs about getting started)
Enter the following code in startupFcn (and change the location picture name and uifigure name shown in the code:

%% 更改APP Designer LOGO图标
warning('off');
% 获取当前工程绝对路径（含工程名）
icopath=mfilename('fullpath');
% 查找最后一个斜杆的位置
i=findstr(icopath,'\');
% 去除工程文件名，得到路径
icopath=icopath(1:i(end));
% 加入logo图标文件名
icopath = [icopath,'这里写上ico文件的名字'];
rez = [];
	 while ~strcmp(rez,icopath)
     	try
        % 获取webwindow句柄
        win = struct(struct(struct(struct(app).这里写上UIfigure的名字).Controller).PlatformHost).CEF;
        % 指定LOGO文件路径
        win.Icon=icopath;
        rez = win.Icon;
        catch
        % 给图形（网页）更多时间加载
        pause(1);
        end
end

In this way, the upper left corner icon can be added:
Insert picture description here
This part of the code comes from the Matlab App Designer. How to change the upper left corner matlab icon to your own logo? Amygse's reply under the problem description