Main Content

앱에서 HTML 콘텐츠 표시하기

앱 열기

앱 디자이너에서 JavaScript®, CSS, 아이콘 같은 HTML 콘텐츠를 앱에 추가할 수 있습니다. 이 앱은 CSS로 스타일이 적용된 HTML 버튼을 표시하는 방법과 JavaScript에서 생성된 데이터를 플로팅하는 방법을 보여줍니다. 또한 이 예제에서는 다음과 같은 앱 작성 작업을 수행하는 방법도 보여줍니다.

  • 앱 내에서 HTML, CSS 및 지원 파일에 액세스합니다.

  • HTML UI 컴포넌트에 대한 콜백 함수를 작성합니다.

HTML 콘텐츠를 생성하여 앱에 추가하기

HTML을 사용하여 다음 파일로 스타일이 적용된 버튼을 만듭니다.

  • dataForm.html — 이 HTML 파일은 HTML 버튼 요소를 만들고 사용자 상호 작용에 반응하는 JavaScript 코드를 구현합니다.

  • inputStyles.css — 이 CSS 파일은 HTML 버튼 요소의 스타일을 지정합니다.

  • gears-icon.png — 이 지원 이미지 파일은 HTML 버튼 요소의 사용자 지정 아이콘을 제공합니다.

CSS 파일 내에서 아이콘 이미지 파일을 배경 이미지로 사용하여 버튼 스타일을 지정합니다. 그런 다음 HTML 파일의 body 태그 내에서 CSS 파일과 이미지 파일을 모두 참조합니다.

<link rel="stylesheet" type="text/css" href="./inputStyles.css">
<link rel="icon" type="image/png" href="gears-icon.png">

CSS로 스타일이 지정된 이 HTML 버튼을 앱 디자이너 앱에 추가하려면 HTML UI 컴포넌트를 컴포넌트 라이브러리에서 디자인 보기의 앱 캔버스로 끌어서 놓습니다. 컴포넌트 브라우저에서 HTML UI 컴포넌트를 선택하고 HTMLSource 속성을 HTML 파일로 설정하여 이 컴포넌트를 HTML 파일에 연결합니다. 앱 코드에서 이러한 파일을 참조할 수 있도록 HTML 파일과 모든 지원 파일이 동일한 폴더와 MATLAB 경로에 있는지 확인하십시오.

HTML 콘텐츠를 HTML UI 컴포넌트에 연결하기

앱에서 HTML 파일의 데이터에 액세스하려면 먼저 HTML 파일의 script 태그 내에 setup이라는 JavaScript 함수를 구현해야 합니다. 이 setup 함수에서 MATLAB HTML 객체에 연결되는 로컬 JavaScript htmlComponent 객체를 정의하고 초기화합니다. 그런 다음 setup 함수에 버튼 콜백을 추가하면 이 JavaScript 객체를 사용하여 난수를 생성할 수 있습니다.

function setup(htmlComponent) {
    var initialData = htmlComponent.Data;
    % Add button callback to generate random number on click
    % ...
}

MATLAB에서 HTML 요소를 사용하는 방법에 대한 자세한 내용은 Create HTML Content in Apps 항목을 참조하십시오.

HTML 컴포넌트에 대한 콜백 함수 만들기

앱에서 난수를 플로팅하기 위해 HTML UI 컴포넌트에 대한 DataChangedFcn 콜백을 생성합니다. HTML 파일의 콜백 함수와 앱 디자이너의 콜백 함수는 함께 작동합니다. 앱에서 HTML 버튼을 클릭하면 JavaScript 버튼 콜백이 실행되어 난수가 생성됩니다. JavaScript 함수는 난수를 MATLAB HTML 객체의 Data 속성과 동기화되는 htmlComponent 객체의 Data 속성에 저장합니다. 데이터 값이 변경되었으므로 MATLAB은 DataChangedFcn 콜백을 실행합니다.

앱 디자이너 콜백 코드에서 점 표기법을 사용하여 동기화된 데이터 값에 액세스합니다.

data = app.JSDataHTML.Data;

그런 다음 HTML 버튼을 클릭함에 따라 변경되는 데이터를 시각화하기 위해 애니메이션된 선을 플로팅합니다.

for k = 1:length(app.numclicks)
    aline = animatedline(app.UIAxes,"MaximumNumPoints",10000,"Marker","*");
    addpoints(aline,app.numclicks,data(k));
    drawnow
end

완전하게 코딩된 앱과 임베드된 HTML 파일을 보려면 앱 디자이너에서 이 예제를 실행하십시오.

참고 항목

함수

속성

관련 항목