Main Content

앱 디자이너에서 콜백 사용하기

콜백은 사용자가 앱의 UI 컴포넌트와 상호 작용할 때 실행되는 함수입니다. 콜백을 사용하여 앱의 동작을 프로그래밍할 수 있습니다. 예를 들어, 앱 사용자가 버튼을 클릭하면 데이터를 플로팅하는 콜백을 작성하거나, 사용자가 슬라이더와 상호 작용하면 계기판 컴포넌트의 바늘을 움직이는 콜백을 작성할 수 있습니다.

대부분의 컴포넌트는 적어도 하나의 콜백을 가지며, 각 콜백에는 그 컴포넌트와의 특정한 상호 작용이 연결되어 있습니다. 그러나 레이블과 램프 같은 일부 컴포넌트에는 정보만 표시되기 때문에 콜백이 없습니다. 컴포넌트가 지원하는 콜백 목록을 확인하려면 컴포넌트를 선택하고 컴포넌트 브라우저에서 콜백 탭을 클릭하십시오.

콜백 함수 만들기

UI 컴포넌트의 콜백을 만드는 방법은 여러 가지입니다. 앱 디자이너에서 작업하는 영역에 따라 다른 접근 방식을 사용할 수 있습니다. 다음 목록 중 가장 편리한 방법을 선택하십시오.

  • 캔버스, 컴포넌트 브라우저 또는 앱 레이아웃 창에서 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 콜백 > (콜백 속성) 콜백 추가를 선택합니다.

    Context menu associated with a slider component. Under the Callbacks menu item, there are options to add a ValueChangedFcn callback or a ValueChangingFcn callback.

  • 컴포넌트 브라우저에서 콜백 탭을 선택합니다. 콜백 탭의 왼쪽에 지원되는 콜백 속성이 표시됩니다. 각 콜백 속성 옆의 드롭다운 목록을 사용하여 콜백 함수의 이름을 지정하거나 꺾쇠 괄호 <>로 묶인 디폴트 이름을 선택할 수 있습니다. 앱에 이미 콜백이 있으면 드롭다운 목록에 이러한 콜백이 포함됩니다. 여러 개의 UI 컴포넌트에서 동일한 코드를 실행하려면 기존 콜백을 선택하십시오.

    Callbacks tab of the Component Browser with a spinner component selected. There are options for a ValueChangedFcn callback and a ValueChangingFcn callback.

  • 편집기 탭에서, 코드의 코드 보기에서 콜백을 클릭합니다. 또는 코드 브라우저 창의 콜백 탭에서 Plus 버튼을 클릭합니다.

    Add Callback Function dialog box. There are options to choose a component and a callback from drop-down lists, and to specify the callback function name.

    콜백 함수 추가 대화 상자에서 다음 옵션을 지정합니다.

    • 컴포넌트 — 콜백을 실행하는 UI 컴포넌트를 지정합니다.

    • 콜백 — 콜백 속성을 지정합니다. 콜백 속성은 콜백 함수를 특정 상호 작용으로 매핑합니다. 일부 컴포넌트에서는 2개 이상의 콜백 속성을 사용할 수 있습니다. 예를 들어, 슬라이더에는 2개의 콜백 속성 ValueChangedFcnValueChangingFcn이 있습니다. ValueChangedFcn 콜백은 사용자가 슬라이더를 이동하고 마우스를 놓으면 실행됩니다. 동일한 컴포넌트의 ValueChangingFcn 콜백은 사용자가 슬라이더를 이동하는 동안 반복적으로 실행됩니다.

    • 이름 — 콜백 함수의 이름을 지정합니다. 앱 디자이너가 디폴트 이름을 제공하지만 텍스트 필드에서 변경할 수 있습니다. 앱에 이미 콜백이 있으면 이름 필드 옆에 드롭다운 화살표가 표시됩니다. 이것은 목록에서 기존 콜백을 선택할 수 있음을 나타냅니다.

콜백 함수 프로그래밍하기

컴포넌트에 대한 콜백을 생성하면 앱 디자이너가 코드 보기에서 콜백 함수를 생성하고 이 함수에 커서를 놓습니다. 이 콜백 함수에서 코드를 작성하여 콜백 동작을 프로그래밍합니다.

콜백 입력 인수

앱 디자이너가 생성하는 모든 콜백 함수의 함수 시그니처에는 다음 입력 인수가 포함됩니다.

  • appapp 객체입니다. 이 객체를 사용하여 앱의 UI 컴포넌트뿐 아니라 속성으로 저장된 다른 변수에도 액세스합니다.

  • event — 앱 사용자와 UI 컴포넌트의 상호 작용에 대한 특정 정보가 포함된 객체입니다.

app 인수는 콜백에 app 객체를 제공합니다. 다음 구문을 사용하면 모든 콜백 내의 어떤 컴포넌트(및 컴포넌트와 관련된 모든 속성에)에도 액세스할 수 있습니다.

app.Component.Property

예를 들어, 다음 명령은 계기판의 Value 속성을 50으로 설정합니다. 이 경우, 계기판 이름은 PressureGauge입니다.

app.PressureGauge.Value = 50;

event 인수는 실행 중인 콜백에 따라 서로 다른 속성을 가진 객체를 제공합니다. 객체 속성에는 콜백이 응답하는 상호 작용 유형과 관련된 정보가 포함됩니다. 예를 들어, 슬라이더의 ValueChangingFcn 콜백에 있는 event 인수에는 Value라는 속성이 포함됩니다. 이 속성은 사용자가 핸들을 이동하면(마우스를 놓기 전) 슬라이더 값을 저장합니다. 다음은 event 인수를 사용하여 계기판이 슬라이더 값을 추적하도록 설정하는 슬라이더 콜백 함수입니다.

function SliderValueChanging(app,event)
      latestvalue = event.Value; % Current slider value
      app.PressureGauge.Value = latestvalue;  % Update gauge   
end
특정 컴포넌트의 콜백 함수에 포함된 event 인수에 대해 자세히 알아보려면 해당 컴포넌트의 속성 페이지를 참조하십시오. 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 선택 항목에 대한 도움말을 선택하여 속성 페이지가 열립니다. 모든 UI 컴포넌트의 속성 목록은 앱 작성 구성요소 항목을 참조하십시오.

콜백 함수 간 데이터 공유하기

여러 콜백에 의해 액세스되어야 하는 데이터를 저장하려면 속성을 생성하십시오. 속성에는 앱에 속한 데이터가 포함되어 있습니다. 앱 내에서만 공유되는 데이터를 저장하려면 프라이빗 속성을 만들고, 앱 외부(예를 들어, 스크립트, 함수, 또는 데이터에 액세스해야 하는 다른 앱)에서 공유되는 데이터를 저장하려면 퍼블릭 속성을 만드십시오.

편집기 탭의 코드 보기에서 속성 버튼을 클릭하여 퍼블릭 속성 또는 프라이빗 속성을 만듭니다. 속성의 이름을 입력합니다. 그러면 구문 app.PropertyName을 사용하여 모든 앱 콜백 내에서 속성값을 할당하고 액세스할 수 있습니다.

자세한 내용은 앱 디자이너로 만든 앱 내부에서 데이터 공유하기 항목을 참조하십시오.

여러 컴포넌트 간에 콜백 공유하기

앱에서 어떤 작업에 대해 여러 방법을 제공하려는 경우 컴포넌트 간에 콜백을 공유하는 것이 유용합니다. 예를 들어, 사용자가 버튼을 클릭하거나 편집 필드에서 Enter 키를 누를 때 앱이 동일한 방식으로 응답할 수 있습니다.

공통의 콜백 유형을 갖는 선택된 여러 컴포넌트에 대해 단일 공유 콜백을 만들 수 있습니다. 예를 들어, 편집 필드와 슬라이더가 있는 앱에서 두 컴포넌트를 선택할 수 있고 그중 하나를 마우스 오른쪽 버튼으로 클릭한 다음 콜백 > ValueChangingFcn 콜백 추가를 선택하면 됩니다. 앱 디자이너는 새 단일 콜백을 만들어 편집 필드와 슬라이더 모두에 할당합니다.

또는 한 컴포넌트에 대한 콜백을 만든 후 다른 컴포넌트에 이를 할당하여 공유할 수 있습니다. 컴포넌트 브라우저에서 다른 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 콜백 > 기존 콜백 선택을 선택합니다. 콜백 함수 선택 대화 상자가 표시되면 이름 드롭다운 목록에서 기존 콜백을 선택합니다.

두 컴포넌트 간에 콜백을 공유하는 앱 예제는 여러 앱 디자이너 컴포넌트에 대해 하나의 콜백 사용하기 항목을 참조하십시오.

콜백을 프로그래밍 방식으로 만들고 할당하기

앱 코드에 프로그래밍 방식으로 콜백 함수를 만들고 할당할 수도 있습니다. 컴포넌트 브라우저에 표시되는 않는 컴포넌트나 그래픽스 객체에 대한 콜백을 만들려면 이 방법을 사용하십시오. 예를 들어, 앱 코드에서 만드는 대화 상자에 프로그래밍 방식으로 콜백을 할당하거나 UIAxes 컴포넌트에서 플로팅하는 Line 객체에 콜백을 할당할 수 있습니다.

툴스트립의 편집기 탭에서 함수 > 프라이빗 함수를 선택하여 콜백 함수를 프라이빗 함수로 만듭니다. 이 함수의 처음 세 개의 인수는 app, srcevent여야 합니다. 다음은 프라이빗 함수로 작성된 콜백의 한 예입니다.

methods (Access = private)
    
        function myclosefcn(app,src,event)
            disp('Have a nice day!');
        end
        
end

구문 @app.FunctionName을 사용해서 콜백 속성값을 콜백 함수에 대한 핸들로 지정하여 콜백 함수를 컴포넌트에 할당합니다. 예를 들어, 다음 코드는 myclosefcn 함수를 CloseFcn 콜백 속성에 할당하는 알림 대화 상자를 만듭니다. 이 함수는 대화 상자가 닫힐 때 실행됩니다.

uialert(app.UIFigure,"File not found","Alert", ...
    "CloseFcn",@app.myclosefcn);

추가 입력 인수를 받는 콜백 함수를 작성하려면 처음 세 개 인수 다음에 추가 인수를 지정하십시오. 예를 들어, 다음 콜백은 하나의 추가 입력값 name을 받습니다.

methods (Access = private)
    
        function displaymsg(app,src,event,name)
            msg = name + " dialog box closed";
            disp(msg);
        end
        
end

이 콜백을 컴포넌트에 할당하려면 컴포넌트의 콜백 속성을 셀형 배열로 지정하십시오. 셀형 배열의 첫 번째 요소는 함수 핸들이어야 합니다. 그 다음 요소들은 추가 입력값이어야 합니다. 예를 들면 다음과 같습니다.

uialert(app.UIFigure,"File not found","Alert", ...
    "CloseFcn",{@app.displaymsg,"Alert"});

자세한 내용은 프로그래밍 방식으로 UI 컴포넌트를 앱 디자이너에 추가하기 항목을 참조하십시오.

코드에서 콜백 검색하기

앱에 콜백이 많은 경우, 코드 브라우저콜백 탭 상단에 있는 검색 표시줄에 이름의 일부를 입력하여 특정 콜백을 빠르게 검색하고 해당 콜백으로 이동할 수 있습니다. 입력을 시작하면 검색어와 일치하는 콜백을 제외하고는 콜백 창에서 사라집니다.

Callbacks tab of the Code Browser. The search bar has the text "Slider" and the pane lists the SliderValueChanging function.

검색 결과를 클릭하면 콜백이 있는 위치로 스크롤됩니다. 검색 결과를 마우스 오른쪽 버튼으로 클릭하고 이동을 선택하면 커서가 콜백 함수로 이동합니다.

콜백을 변경하거나 연결 끊기

컴포넌트에 서로 다른 콜백을 할당하려면 컴포넌트 브라우저에서 해당 컴포넌트를 선택하십시오. 그런 다음 콜백 탭을 클릭하고 드롭다운 목록에서 다른 콜백을 선택합니다. 드롭다운 목록에는 기존 콜백만 표시됩니다.

Callbacks tab for an edit field component in the Component Browser. The ValueChangedFcn drop-down list is expanded, and two existing callback functions are listed.

컴포넌트와 공유되는 콜백과의 연결을 끊으려면 컴포넌트 브라우저에서 해당 컴포넌트를 선택하십시오. 그런 다음 콜백 탭을 클릭하고 드롭다운 메뉴에서 <콜백 없음>을 선택합니다. 이 옵션을 선택하면 해당 컴포넌트에서만 콜백의 연결이 끊어집니다. 코드에서 함수 정의가 삭제되거나 다른 컴포넌트에서 콜백의 연결이 끊어지지는 않습니다. 콜백의 연결을 끊은 후에는 컴포넌트에 대해 새 콜백을 생성하거나 콜백 함수 없이 컴포넌트를 유지할 수 있습니다.

콜백 삭제하기

코드에 앱의 어떠한 컴포넌트에서도 사용 중이지 않은 콜백 함수가 포함되어 있는 경우 이 함수를 완전히 삭제할 수 있습니다. 코드 브라우저콜백 탭에서 콜백을 마우스 오른쪽 버튼으로 클릭하고 상황별 메뉴에서 삭제를 선택하여 콜백을 삭제합니다.

Callbacks tab of the Code Browser. The context menu associated with the StopButtonPushed callback function has options to delete, rename, insert at cursor, and go to.

예제: 슬라이더 콜백이 있는 앱

이 앱에는 사용자가 핸들을 이동할 때 슬라이더 값을 추적하는 계기판이 포함되어 있습니다. 슬라이더의 ValueChangingFcn 콜백은 event 인수에서 슬라이더의 현재 값을 가져옵니다. 그런 다음, 계기판 바늘을 이 값으로 이동합니다.

관련 항목