프로그래밍 방식으로 UI 컴포넌트를 앱 디자이너에 추가하기

대부분의 UI 컴포넌트는 앱 디자이너 컴포넌트 라이브러리에서 캔버스로 끌어서 놓을 수 있습니다. 경우에 따라 코드 보기에서 프로그래밍 방식으로 컴포넌트를 추가해야 할 수도 있습니다. 다음은 흔히 발생할 수 있는 몇 가지 상황입니다.

컴포넌트 라이브러리에서 찾을 수 없는 컴포넌트를 만들려는 경우. 예를 들어, 대화 상자를 표시하는 앱은 적합한 함수를 호출하여 대화 상자를 표시해야 합니다.
런타임 조건에 따라 동적으로 컴포넌트를 만들려는 경우.

프로그래밍 방식으로 UI 컴포넌트를 추가하는 경우 적합한 함수를 호출하여 컴포넌트를 만들고, 해당 컴포넌트에 콜백을 할당한 후 헬퍼 함수로 콜백을 작성해야 합니다.

컴포넌트를 만들고 콜백 할당하기

기존 콜백 내에서 컴포넌트를 만드는 함수를 호출해 보겠습니다(UI 컴포넌트 함수 목록은 uifigure 기반 앱 개발하기 참조). StartupFcn 콜백은 앱이 시작될 때 실행되므로 컴포넌트를 만들기에 좋습니다. 반면, 다른 콜백 함수 내에서 컴포넌트를 만드는 경우도 있을 수 있습니다. 예를 들어, 사용자가 버튼을 누르면 대화 상자를 표시하도록 하려면 버튼의 콜백 함수 내에서 대화 상자 함수를 호출하십시오.

컴포넌트를 만드는 함수를 호출할 때는 Figure 또는 해당 자식 컨테이너 중 하나를 부모 객체로 지정하십시오. 예를 들어, 다음 명령은 버튼을 만들고 부모 객체로 Figure를 지정합니다. 이 경우, Figure에는 앱 디자이너가 할당하는 디폴트 이름이 지정됩니다(app.UIFigure).

b = uibutton(app.UIFigure);

이제, 컴포넌트의 콜백 속성을 @app.callbackname 형식의 함수 핸들로 지정하십시오. 예를 들어, 다음 명령은 버튼 b의 ButtonPushedFcn 속성을 mybuttonpress라는 이름의 콜백 함수로 설정합니다.

b.ButtonPushedFcn = @app.mybuttonpress;

콜백 작성하기

컴포넌트의 콜백 함수를 프라이빗 헬퍼 함수로 작성합니다. 이 함수의 처음 세 개의 인수는 app, src 및 event여야 합니다. 다음은 프라이빗 헬퍼 함수로 작성된 콜백의 한 예입니다.

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

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

methods (Access = private)
    
        function addxy(app,src,event,x,y)
            disp(x + y);
        end
        
end

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

b.ButtonPushedFcn = {@app.addxy,10,20};

예제: close 함수를 사용하는 확인 대화 상자

앱 열기

이 앱은 대화 상자가 닫힐 때 콜백을 실행하는 확인 대화 상자를 표시하는 방법을 보여줍니다.

사용자가 창의 닫기 버튼(X)을 클릭하면 사용자에게 앱을 닫기를 원하는지 확인하는 대화 상자가 표시됩니다. 사용자가 대화 상자를 무시하면 CloseFcn 콜백이 실행됩니다.

예제: 데이터 파일을 기반으로 하여 트리 노드를 채우는 앱

앱 열기

이 앱은 런타임에 동적으로 트리 노드를 추가하는 방법을 보여줍니다. 앱이 실행되기 전에는 트리에 세 개의 병원 노드가 있습니다. 하지만 런타임에 이 앱은 각 병원 이름 아래에 여러 개의 자식 노드를 추가합니다. 자식 노드 개수와 자식 노드의 레이블은 patients.xls 스프레드시트의 내용에 따라 결정됩니다.

사용자가 트리에서 환자 이름을 클릭하면 Patient Information(환자 정보) 패널에 연령, 성별, 건강 상태 같은 데이터가 표시됩니다. 앱은 데이터의 변경 사항을 table형 배열에 저장합니다.