자바스크립트를 사용하여 스피너 표시 및 숨기기

Chrome 브라우저에서 http://localhost:3000으로 이동합니다.

2. 내 프로젝트 페이지에서 상단 오른쪽 코너의 녹색 + 기호를 클릭하여 새 프로젝트를 만듭니다.

3. 프로젝트 만들기 페이지에서 프로젝트 이름 필드에 프로젝트의 이름을 입력하고 서버 필드에 사용자의 experience service URL을 입력합니다.

4. 프로젝트 유형으로 2D를 선택하고 만들기를 클릭합니다.

5. 눈금 레이아웃 위젯을 캔버스로 드래그 앤 드롭합니다.

7. 세부 정보 창의 눈금 작업 아래에서 열 추가를 두 번 클릭합니다.

8. 다음 위젯을 눈금 레이아웃 열로 드래그 앤 드롭합니다.

열	위젯	속성
1	단추	텍스트 필드에 Start를 입력합니다.
2	단추	텍스트 필드에 Cancel를 입력합니다.
3	스피너	표시 확인란을 선택 취소합니다.

본 자습서에서는 단추 색상에 기본 제공되는 스타일을 적용했습니다. 자세한 내용은 테마 항목을 참조하십시오.

9. 이번에는 새 응용 프로그램 매개변수를 만들어 스피너 위젯의 속성에 바인딩합니다. 데이터 창에서 응용 프로그램 매개 변수 옆의 녹색 + 아이콘을 클릭합니다.

10. 응용 프로그램 매개 변수 추가 창의 이름 필드에 spinnerVisible를 입력하고 추가를 클릭합니다.

11. spinnerVisible 옆의

바인딩 아이콘을 프로젝트 창의 spinner-1에 드래그 앤 드롭하여 spinnerVisible 응용 프로그램 매개변수를 스피너에 바인딩합니다.

바인딩 대상 선택 창에서 Y 표시를 선택합니다.

12. 프로젝트 창에서 Home.js를 클릭합니다. 자바스크립트 편집기에 다음을 입력합니다.

$scope.hideSpinner = function() {
$scope.app.params.spinnerVisible = false;
};
$scope.start = function() {
$scope.app.params.spinnerVisible = true;
$scope.timeoutPromise = $timeout($scope.hideSpinner, 3000);
};
$scope.cancel = function() {
$timeout.cancel($scope.timeoutPromise);
};

13. 프로젝트 창의 홈을 클릭하여 캔버스로 돌아갑니다.

14. 시작 단추를 선택하여 속성을 확인합니다.

15. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 start();를 표현식 상자에 입력합니다.

이 단추를 클릭하면 start 자바스크립트 함수가 실행됩니다.

16. 취소 단추를 선택하여 속성을 확인합니다.

17. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 cancel();를 표현식 상자에 입력합니다.

이 단추를 클릭하면 cancel 자바스크립트 함수가 실행됩니다.

18. 미리 보기를 클릭합니다. 이제 “시작” 단추를 클릭하여 스피너를 호출할 수 있습니다.