GUI Designer 슬라이드 컨트롤 사용 설명서

무료무료 기술 자료

이 글은 바로 읽을 수 있으며 기초 학습과 검색 유입에 적합합니다.

GUI Designer 슬라이드 컨트롤 사용 설명서
1. 슬라이드 스크린 컨트롤 및 슬라이드 스크린 하위 컨트롤 소개 슬라이드 컨트롤은 하나의 창에 사용되지만 창 크기가 제한되어 있으며 슬라이드 컨트롤을 추가하면 동일한 창에 더 많은 컨트롤을 저장할 수 있도록 페이지화할 수 있습니다. "슬라이드 스크린 하위 컨트롤" 은 다양한 컨트롤을 저장하기 위해 존재하며 "슬라이드 스크린 컨트롤" 에 부착되어 슬라이드 스크린 컨트롤에 슬라이드 스크린 컨트롤 하위 페이지를 추가하여 특수 중첩 가능한 창으로 이해할 수 있습니다. 슬라이드 스크린 컨트롤과 슬라이드 스크린 하위 컨트롤이 함께 작동하여 동일한 창 페이지화 효과를 달성하여 동일한 창에 더 많은 컨트롤을 저장할 수 있습니다. 2. 슬라이드 스크린 컨트롤 및 슬라이드 스크린 컨트롤 하위 페이지 추가 방법 프로젝트를 열거나 새 프로젝트를 만들려면 도구 상자에서 컨테이너 클래스 컨트롤을 클릭하고 슬라이드 컨트롤 및 슬라이드 컨트롤 하위 페이지 아이콘을 클릭하여 해당 컨트롤을 추가합니다. 슬라이드 컨트롤 하위 페이지는 그림 2. 1 과 같이 슬라이드 컨트롤에 추가되어야 합니다.
GUI Designer 슬라이드 컨트롤 사용 설명서插图
그림 2. 1 슬라이드 컨트롤 및 슬라이드 컨트롤 하위 페이지 추가 주: 슬라이드 스크린 컨트롤 하위 페이지는 슬라이드 스크린 컨트롤에만 배치할 수 있으며 슬라이드 스크린 컨트롤 하위 페이지를 추가하면 슬라이드 스크린 컨트롤 하위 페이지를 이동할 수 있습니다. 슬라이드 컨트롤 하위 페이지에 대한 이미지 대체 방법 슬라이드 스크린 컨트롤 하위 페이지를 선택하고 오른쪽 속성 창에서 이미지를 클릭하여 슬라이드 스크린 컨트롤 하위 페이지를 이미지 대체하고 그림 3. 1 과 같이 슬라이드 스크린 컨트롤 하위 페이지에 해당하는 페이지의 바닥 맵 표시를 설정합니다.
GUI Designer 슬라이드 컨트롤 사용 설명서插图1
GUI Designer 슬라이드 컨트롤 사용 설명서插图2
그림 3. 1 이미지 대체 주: 슬라이드 스크린 컨트롤 하위 페이지는 기본적으로 투명으로 표시되며, 그래픽 설정이 수행되지 않으면 창에 배경 이미지가 표시됩니다. 시뮬레이션 시 화면을 슬라이드하여 그림 3. 2 와 같이 이미지 대체를 수행하는 슬라이드 스크린 컨트롤 하위 페이지를 표시합니다.
GUI Designer 슬라이드 컨트롤 사용 설명서插图3
그림 3. 2 이미지 대체 그림 3. 3 과 같이 이미지 대체가 없는 슬라이드 스크린 컨트롤 하위 페이지.
GUI Designer 슬라이드 컨트롤 사용 설명서插图4
그림 3. 3 이미지 교체 없음 4. 슬라이드 스크린을 설정하는 방법 슬라이드 스크린 컨트롤 및 슬라이드 스크린 컨트롤 하위 페이지 추가 방법 그림 4. 1 과 같이 슬라이드 스크린 컨트롤과 슬라이드 스크린 컨트롤 하위 페이지를 추가합니다. & lt; span class = " ne - vie wer - b - fil ler " >
GUI Designer 슬라이드 컨트롤 사용 설명서插图5
그림 4. 1 컨트롤 추가 슬 라이 드 스크 린 컨트롤 의 크 기를 설정 하는 방법 슬 라이 드 스크 린 컨트롤 을 선택 하고 오른쪽 속 성 창 에서 마 우스 또는 슬 라이 드 스크 린 컨트롤 의 크 기를 공통 으로 설정 하여 슬 라이 드 스크 린 컨트롤 의 크 기를 설정 하여 화 면 슬 라이 드 영역 의 크 기를 설정 하여 슬 라이 드 스크 린 컨트롤 에서 화 면을 슬 라이 드 할 수 있으며 슬 라이 드 스크 린 컨트롤 하 위 페이지 의 크 기는 변경 되며 슬 라이 드 스크 린 컨트롤 하 위 페이지 에 컨트롤 을 추가 하면 그림 4. 2 와 같이 설정 범위 내에 만 컨트롤 을 배치 할 수 있습니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图6
그림 4. 2 슬 라이 드 스크 린 컨트롤 크기 설정 이미지 컨트롤 을 추가 하고 설정 하는 방법 슬 라이 드 컨트롤 을 선택 하고 이미지 컨트롤 추 가를 클릭 하고 이미지 컨트롤 에 대한 이미지 대체 를 수행 합니다 . 이 단계는 그림 4. 3 과 같이 슬 라이 드 효과를 시각 적으로 볼 수 있습니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图7
시 뮬 레이 션 중에 그림 4. 4 와 같이 첫 번째 슬 라이 드 컨트롤 하 위 페이지 인 첫 번째 페이지 가 표시 됩니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图8
GUI Designer 슬라이드 컨트롤 사용 설명서插图9
그림 4. 3 이미지 컨트롤 추가 4, 어떻게 시 뮬 레이 션 작동 , 시 뮬 레이 션 실행 창 이 팝 업 되고 화 면을 슬 라이 드 하여 슬 라이 딩 효과를 봅니다 . 시 뮬 레이 션 실행 버튼 을 클릭 합니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图10
그림 4. 4 첫 페이지 슬 라이 드 컨트롤 설정 의 크기 내에서 슬 라이 드 하여 그림 4. 5 와 같이 두 번째 슬 라이 드 컨트롤 하 위 페이지 (두 페이지 가 슬 라이 드 할 때 루 프) 의 두 번째 페이지 로 슬 라이 드 합니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图11
그림 4. 5 두 번째 페이지 & lt ; span class = " ne - vie wer - b - fi "ller >> 5. 응용 사례 5. 1 슬라이드 스크린 컨트롤 하위 페이지 이벤트 목록 다음 표에 설명된 이벤트 목록:
컨트롤 초기화
컨트롤이 초기화될 때 트리거된 이벤트
컨트롤 제거
컨트롤 제거 시 트리거 이벤트
페이지 전환 발생
페이지 전환이 완료될 때 이벤트가 트리거됨
5. 2 페이지를 올바르게 점프하는 방법 창 컨트롤을 추가하는 방법 일반 컨트롤 모듈의 창 아이콘을 클릭하여 그림 5. 1 과 같이 두 개의 창을 추가하고 1 과 2 로 명명합니다.
GUI Designer 슬라이드 컨트롤 사용 설명서插图12
그림 5. 1 창 추가 버튼 컨트롤을 추가하는 방법 그림 5. 2 에 표시된 것처럼 각 슬라이드 스크린 컨트롤 하위 페이지와 새로 추가된 두 창에 버튼 컨트롤을 추가하여 인터페이스 점프합니다.
GUI Designer 슬라이드 컨트롤 사용 설명서插图13
그림 5. 2 버튼 컨트롤 추가 창 전환을 설정하는 방법 버튼 컨트롤을 선택하여 이벤트를 클릭으로 설정하고 처리 방법은 창 전환입니다. 자세한 설정 및 절차는 버튼 클래스 컨트롤 사용 설명서에서 "창 전환" 을 참조하십시오. 첫 번째 슬라이드 스크린 컨트롤 하위 페이지의 버튼 컨트롤 설정 창은 그림 5. 3 과 같이 창 1 으로 전환됩니다.
GUI Designer 슬라이드 컨트롤 사용 설명서插图14
그림 5. 3 첫 번째 슬라이드 스크린 컨트롤 하위 페이지 버튼 컨트롤 이벤트 설정 매개변수 그림 5. 4 와 같이 두 번째 내 슬라이드 컨트롤 하위 페이지의 버튼 컨트롤 설정 창이 창 2 로 전환됩니다.
< div class = " ne - image - box " >GUI Designer 슬라이드 컨트롤 사용 설명서插图15
그림 5. 4 두 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 버튼 컨트롤 이벤트 설정 매 개 변 수 창 1 또는 2 의 버튼 컨트롤 설정 창 은 그림 5. 5 과 같이 창 NEW 1 (슬 라이 드 컨트롤 이 있는 창) 으로 전환 됩니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图16
그림 5. 5 창 1 / 2 버튼 컨트롤 이벤트 설정 매 개 변 수 참고 : 창 전환 효과를 더 잘 반영 하기 위해 창 1 과 창 2 의 버튼 컨트롤 에 텍스트 표시 를 추가 합니다 . 자세한 작업 방법은 버튼 클래 스 컨트롤 사용 설명 서를 참조 하십시오 . 그림 5. 6 과 같이 창 1 의 버튼 컨트롤 에는 "1 " 이라는 텍스트 가 표시 됩니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图17
그림 5. 6 창 1 버튼 컨트롤 텍스트 표시 창 2 의 버튼 컨트롤 에는 그림 5. 7 과 같이 " 2" 텍스트 가 표시 됩니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图18
그림 5. 7 창 2 버튼 컨트롤 텍스트 표시 슬 라이 드 컨트롤 하 위 페이지 의 이벤 트를 설정 하는 방법 슬 라이 드 스크 린 컨트롤 하 위 페이 지를 선택 하고 오른쪽 속 성 창 에서 이벤 트를 클릭 합니다 → 추가 를 클릭 합니다 → 이벤 트가 " 페 이지 전환 이 발생 " 으로 설정 됩니다 → 처리 방법 아래 에서 " ...→ 선택 " 변 수 작업 -- 변 수 설정 " → 대상 변 수 바 인 딩 " Var 0 " → 값 설정 선택 " 상 수 사용 " → 입력 상 자 입력 "0 " (첫 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 입력 0, 두 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 입력 1) 그림 5. 8 과 같이 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图19
그림 5. 8 슬 라이 드 스크 린 컨트롤 하 위 페이지 이벤트 설정 주 : Var 3 변 수는 다음과 같습니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图20
슬 라이 드 스크 린 컨트롤 의 변 수 바 인 딩 을 설정 하는 방법 슬 라이 드 스크 린 컨트롤 을 선택 하고 오른쪽 속 성 창 에서 변 수 바 인 딩 → 추가 → 바 인 딩 된 컨트롤 속 성은 " 현 재 페이지 " → 데이터 소 스 바 인 딩 " Var 3 " → 변환 모 드는 " 단 방 향 " → 변환 방법은 그림 5. 9 과 같이 " 기 본 값 " 입니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图21
그림 5. 9 변 수 바 인 딩 설정 6 시 뮬 레이 션 하는 방법 시 뮬 레이 션 실행 버튼 을 클릭 하여 시 뮬 레이 션 실행 창 을 팝 업 합니다 . 첫 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 의 버튼 컨트롤 을 클릭 하여 창 1 으로 건너 뛰 고 , 창 1 의 버튼 컨트롤 을 클릭 하여 첫 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 로 건너 뛰 고 , 그림 5. 10 과 같이 두 인터페 이스 가 서로 건너 뛰 고 있습니다 . & lt ; span class = " ne - vie wer - b - fil ler " >
GUI Designer 슬라이드 컨트롤 사용 설명서插图22
그림 5. 10 시 뮬 레이 션 시 연 두 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 의 버튼 컨트롤 을 클릭 하여 창 2 로 점 프 하고 , 창 2 의 버튼 컨트롤 을 클릭 하여 두 번째 슬 라이 드 스크 린 빈 컨트롤 하 위 페이지 로 점 프 하여 그림 5. 11 과 같이 서로 점 프 합니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图23
그림 5. 11 시 뮬 레이 션 5. 3 페이지 수 표시 를 설정 하는 방법 1.텍스트 컨트롤 추가 방법 창 NEW 1 을 선택 하고 일반 컨트롤 모듈 의 텍스트 아이 콘 을 클릭 하여 그림 5. 12 와 같이 텍스트 컨트롤 을 추가 합니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图24
그림 5. 12 텍스트 컨트롤 추가 2.텍스트 컨트롤 변 수 바 인 딩 설정 방법 텍스트 컨트롤 을 선택 하고 오른쪽 속 성 창 에서 변 수 바 인 딩 을 클릭 합니다 → 추가 를 클릭 합니다 → 바 인 딩 된 컨트롤 속 성은 " 텍 스트 인 덱 스 " → 데이터 소 스 바 인 딩 " Var 3 " → 변환 모 드는 " 단 방 향 " → 변환 방법은 " 기 본 값 " 입니다 . 그림 5. 13 과 같이 표시 됩니다 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图25
그림 5. 13 텍스트 컨트롤 변 수 바 인 딩 3.텍스트 표시 를 추가 하는 방법 텍스트 컨트롤 을 선택 하고 오른쪽 속 성 창 에서 속 성을 클릭 합니다 → 모양 아래 의 텍스트 를 클릭 합니다 → 추가 를 클릭 합니다 → 텍스트 1 / 2 를 선택 합니다 → " 정 적 텍스트 " 를 선택 합니다 → 입력 상 자에 "1 " 을 입력 합니다 (텍 스트 1 입력 "1 ", 텍스트 2 입력 "2 "), 그림 5. 14 와 같이 .
GUI Designer 슬라이드 컨트롤 사용 설명서插图26
그림 5. 14 텍스트 표시 추가 4.슬 라이 드 컨트롤 하 위 페이지 의 이벤트 설정 방법 구체적인 설정 방법은 위의 " 페 이지 점 프를 설정 하는 방법 " 과 동일 하며 , 여기서 더 이상 반복 하지 않습니다 . 5.슬 라이 드 스크 린 컨트롤 에 대한 변 수 바 인 딩 을 설정 하는 방법 구체적인 설정 방법은 위의 " 페 이지 점 프를 설정 하는 방법 " 과 동일 하며 , 여기서 더 이상 반복 하지 않습니다 . 6.프레 젠 테 이션 을 시 뮬 레이 션 하려면 시 뮬 레이 션 실행 을 클릭 하여 시 뮬 레이 션 실행 창 을 팝 업 하여 첫 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 아래에 1 페이지 가 표시 되고 두 번째 슬 라이 드 스크 린 컨트롤 하 위 페이지 아래에 2 페이지 가 표시 됩니다 (그 림 5. 15 와 같이).
GUI Designer 슬라이드 컨트롤 사용 설명서插图27
& lt ; div class = " ne - image - w rap ne -image - loaded ne - image - style - none " 데이터 - testid =" ne - card - image ">
GUI Designer 슬라이드 컨트롤 사용 설명서插图28
그림 5. 15 시뮬레이션
相关标签
실제 프로젝트에 이 자료를 활용하시겠습니까?

도구 센터에서 프레임 분석, CRC 검증, 장비 디버깅을 진행하거나 요청을 제출하여 선정 및 연동 제안을 받아보세요.

디버깅 도구 열기 관련 제품 보기
엔지니어 회원

이 글을 실행 가능한 디버깅 자료로 활용하세요

가입하면 고급 프레임 분석, 자료 패키지 다운로드, 코드 예제, 엔지니어링 사례, 우선 기술 지원을 이용할 수 있어 실제 프로젝트 납품에 적합합니다.

고급 도구 무제한 이용
자료 패키지와 코드 패키지
완전한 엔지니어링 사례 라이브러리
우선 기술 지원 채널

답글 작성

이메일 주소는 공개되지 않습니다. 必填项已用 * 标注