스피너 표시 및 숨기기
1. 새 모바일 프로젝트를 만듭니다.
2. 2D 캔버스에서 눈금 레이아웃 위젯을 캔버스로 끌어 놓습니다.
3. 프로젝트 창에서 row-1을 클릭합니다.
4. 세부 정보 창의 눈금 작업 아래에서 열 추가를 두 번 클릭합니다.
5. 다음 위젯을 눈금 레이아웃 열로 끌어서 놓습니다.
|
열
|
위젯
|
속성
|
|---|---|---|
|
1
|
버튼
|
텍스트 필드에 Start를 입력합니다.
|
|
2
|
버튼
|
텍스트 필드에 Cancel를 입력합니다.
|
|
3
|
스피너
|
표시 확인란을 선택 취소합니다.
|
 |
본 자습서에서는 버튼 색상에 기본 제공되는 스타일을 적용했습니다. 자세한 내용은 테마 항목을 참조하십시오.
|
6. 이번에는 새 응용 프로그램 매개변수를 만들어 스피너 위젯의 속성에 바인딩합니다. 데이터 창에서 응용 프로그램 매개 변수 옆의 녹색 + 아이콘을 클릭합니다.
7. 응용 프로그램 매개 변수 추가 창의 이름 필드에 spinnerVisible를 입력하고 추가를 클릭합니다.
8. spinnerVisible 옆의 
바인딩 아이콘을 프로젝트 창의 spinner-1에 끌어 놓아 spinnerVisible 응용 프로그램 매개변수를 스피너에 바인딩합니다.
바인딩 아이콘을 프로젝트 창의 spinner-1에 끌어 놓아 spinnerVisible 응용 프로그램 매개변수를 스피너에 바인딩합니다.
바인딩 대상 선택 창에서 Y 표시를 선택합니다.
9. 프로젝트 창에서 Home.js를 클릭합니다. JavaScript 편집기에 다음을 입력합니다.
$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);
};
10. 프로젝트 창의 홈을 클릭하여 캔버스로 돌아갑니다.
11. 시작 버튼을 선택하여 속성을 확인합니다.
12. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 start();를 표현식 상자에 입력합니다.
이 버튼을 클릭하면 start JavaScript 함수가 실행됩니다.
13. 취소 버튼을 선택하여 속성을 확인합니다.
14. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 cancel();를 표현식 상자에 입력합니다.
이 버튼을 클릭하면 cancel JavaScript 함수가 실행됩니다.
15. 미리 보기를 클릭합니다. 이제 “시작” 버튼을 클릭하여 스피너를 호출할 수 있습니다.
