반응형 사용자 인터페이스 만들기
⟩
⟩
⟩
⟩
⟩ Create a responsive user interface

반응형 사용자 인터페이스 만들기

다양한 크기의 뷰포트에 맞게 조정된 여러 레이아웃으로
FactoryTalk Optix 응용 프로그램
을 개발합니다.
  1. 다양한 응용 프로그램 레이아웃에 대한 화면 유형을 만듭니다. 화면 항목을 참조하십시오.
    팁: 소형, 중형 및 대형과 같은 다양한 뷰포트에 대한 세 가지 레이아웃을 개발하는 것부터 시작합니다. 자세한 내용은 반응형 디자인의 화면 크기 및 중단점 - Windows 앱 | Microsoft Learn 항목을 참조하십시오.
  2. 창 너비(및 높이)를 읽고 중단점을 기반으로 값을 출력하는 NetLogic을 만듭니다.
    예를 들어 창 너비를 읽고
    소형
    ,
    중형
     또는
    대형
     열거 값을 반환하는 NetLogic을 만듭니다.
    런타임 시 창 크기를 조정하고 중단점 값을 초과하면 NetLogic은 값을 반환합니다.
  3. NetLogic에서 출력된 값을 화면 유형을 대상으로 하는 동적 링크로 변환하는 키-값 컨버터를 사용하여 패널 로더를 만듭니다.
    런타임에 패널 로더는 창 너비에 따라 특정 화면 유형을 표시합니다. 창 크기를 조정하고 중단점 값을 초과하면 응용 프로그램 레이아웃이 변경되어 다양한 뷰포트 크기에 맞게 조정됩니다.
  4. (선택 사항) 지원되는 웹 브라우저에서 반응형 응용 프로그램을 실행하려면:
    1. 웹 프레젠테이션 엔진을 추가합니다. 프레젠테이션 엔진 구성 항목을 참조하십시오.
    2. 웹 브라우저 창에서 프로젝트를 연장합니다.
      프로젝트 보기
      에서
      MainWindow (type)
      를 선택하고 다음을 수행합니다.
      • 속성
        에서
        전체 화면
        과
        별칭
        {세션}
        세션
        UI 세션
        웹 세션
         간에 동적 링크를 만듭니다.
        동적 링크에 대한 자세한 내용은 동적 링크 만들기 항목을 참조하십시오.
        프로젝트가 웹 브라우저에서 실행되는 경우
        {Session}/IsWeb
         별칭은
        참
        으로 확인됩니다. 자세한 내용은 다양한 프레젠테이션 엔진에 대한 개체 프로파일링 항목을 참조하십시오.
        런타임 시 기본 프레젠테이션 엔진은 창 응용 프로그램을 표시하고, 웹 프레젠테이션 엔진은 웹 브라우저 창 너비에 따라 특정 화면 유형을 표시합니다.
      • 속성
        에서
        전체 화면
        을
        참
        으로 설정합니다.
        런타임 시 기본 프레젠테이션 엔진은 전체 화면 응용 프로그램을 표시하고, 웹 프레젠테이션 엔진은 웹 브라우저 창 너비에 따라 특정 화면 유형을 표시합니다.
    웹 브라우저의 크기를 조정하고 중단점 값을 초과하면 응용 프로그램 레이아웃이 변경되어 다양한 뷰포트 크기에 맞게 조정됩니다.
의견을 작성 부탁드립니다.
이 자료에 대한 문의사항이나 요청사항이 있습니까? 여기에 요청사항을 작성 부탁드립니다.
Normal