QML

QML
기타 용도는 QML(구분)을 참조하십시오.
QML
패러다임멀티패러다임: 선언적, 반응적, 스크립트 작성
개발자Qt 프로젝트
처음 등장한2009년; 13년 전(2009년)
안정된 릴리스
5.15.0[1] / 2020년 5월 26일, 2년 전(2020-05-26)
타이핑 분야다이내믹, 스트롱
웹 사이트qt-project.org/doc/qt-5/qmlapplications.html
영향을 받다
XAML,[2] JSON, JavaScript, Qt
영향받은
Qt, 링[3]
QML
파일 이름 확장자
.qml
인터넷 미디어 유형텍스트/x-qml
개발자Qt 프로젝트
포맷의 종류스크립트 언어
웹 사이트qt-project.org/doc/qt-5/qmlapplications.html

QML(Qt Modeling[4] Language)은 사용자 인터페이스 마크업 언어입니다.사용자 인터페이스 중심의 애플리케이션을 설계하기 위한 선언적 언어(CSS 및 JSON과 유사)입니다.인라인 JavaScript 코드는 필수 요소를 처리합니다.이것은 원래 Qt 프레임워크 내에서 Nokia에 의해 개발된 UI 생성 키트인 Qt Quick과 관련되어 있습니다.Qt Quick은 터치 입력, 유체 애니메이션 및 사용자 경험이 중요한 모바일 애플리케이션에 사용됩니다.QML은 또한 3D 장면과 "프레임 그래프" 렌더링 방법을 설명하기 위해 Qt3D와[5] 함께 사용됩니다.QML 문서는 계층 객체 트리를 기술합니다.Qt와 함께 제공되는 QML 모듈에는[6] 원시 그래픽 구성 요소(예: 직사각형, 이미지), 모델링 구성 요소(예: FolderListModel, XmlListModel), 동작 구성 요소(예: TapHandler, DragHandler, State, Transition, Animation) 및 보다 복잡한 컨트롤(예: Drawer, Drawer 버튼, Drawer)이 포함됩니다.이러한 요소를 조합하여 간단한 버튼 및 슬라이더에서 완전한 인터넷 지원 프로그램에 이르기까지 복잡한 구성 요소를 구축할 수 있습니다.

QML 요소는 인라인 및 포함된 .js 파일을 통해 표준 JavaScript를 통해 확장할 수 있습니다.Qt 프레임워크를 사용하여 C++ 컴포넌트에 의해 요소를 심리스하게 통합 및 확장할 수도 있습니다.

QML은 언어입니다.Qt 5.[8]2 이후 JavaScript 런타임은 커스텀 V4 [7]엔진입니다.Qt Quick은 2D 장면 그래프와 이를 기반으로 한 UI 프레임워크입니다.이것들은 모두 Qt 선언 모듈의 일부이지만, 이 테크놀로지는 Qt 선언이라고 불리지 않게 되었습니다.

QML 및 JavaScript 코드는 Qt Quick [9]컴파일러를 사용하여 네이티브 C++ 바이너리로 컴파일할 수 있습니다.또는 컴파일된 버전의 QML을 동적으로 저장하는 QML 캐시 파일[10] 포맷도 있습니다.이 포맷은 다음 실행 시 보다 빠른 부팅을 위해 사용됩니다.

도입

구문, 의미론

기본 구문

예:

 수입품 Qt퀵 2.9  // Qt 5.9에서 Import   직사각형 {      id: 캔버스      폭: 250      높이:. 200      색상: '파랑'       이미지 {          id: 로고          출처: "pics/png.png"          앵커.센터입력: 부모          x: 캔버스.높이 / 5      }  }

개체는 유형별로 지정되며, 그 뒤에 한 쌍의 중괄호가 표시됩니다.오브젝트 타입은 항상 대문자로 시작합니다.위의 예에서는 직사각형과 하위 개체인 이미지가 두 개 있습니다.중괄호 사이에 속성과 같은 개체에 대한 정보를 지정할 수 있습니다.속성은 property: value로 지정됩니다.위의 예에서는 이미지에 source라는 속성이 할당되어 있는 것을 확인할 수 있습니다.pics/logo.png속성과 값은 콜론으로 구분됩니다.

id 속성

각 오브젝트에는 id라고 불리는 특별한 고유 속성이 부여될 수 있습니다.ID를 할당하면 다른 개체 및 스크립트에서 개체를 참조할 수 있습니다.아래 첫 번째 직사각형 요소에는 ID가 있습니다.myRect두 번째 Rectangle 요소는 다음을 참조하여 자신의 폭을 정의합니다.myRect.width즉, 첫 번째 Rectangle 요소와 동일한 너비 값을 가집니다. 

 아이템 {      직사각형 {          id: myRect          폭: 120          높이:. 100      }      직사각형 {          폭: 마이렉트.폭          높이:. 200      }  }

ID는 소문자 또는 밑줄로 시작해야 하며 문자, 숫자 및 밑줄 이외의 문자를 포함할 수 없습니다.

속성 바인딩

속성 바인딩은 선언적인 방식으로 속성 값을 지정합니다.반응형 프로그래밍 패러다임에 따라 다른 속성 또는 데이터 값이 변경되면 속성 값이 자동으로 업데이트됩니다.

속성 바인딩은 속성이 JavaScript 식을 할당할 때마다 QML에 암묵적으로 생성됩니다.다음 QML은 두 가지 속성 바인딩을 사용하여 직사각형의 크기를 otherItem의 크기에 연결합니다. 

 직사각형 {      폭: otherItem.폭      높이:. otherItem.높이  }

QML은 표준 준거 JavaScript 엔진을 확장하므로 유효한 JavaScript 식을 속성 바인딩으로 사용할 수 있습니다.바인딩은 오브젝트 속성에 액세스하여 함수 호출을 할 수 있습니다.또, Date 나 Math 등의 짜넣기 JavaScript 오브젝트를 사용할 수도 있습니다.

예제:

 직사각형 {      기능. 계산 마이높이() {          돌아가다 수학.맥스.(otherItem.높이, 세 번째 항목.높이);      }      앵커.센터입력: 부모      폭: 수학.분(otherItem.폭, 10)      높이:. 계산 마이높이()      색상: 폭 > 10 ? '파랑' : "빨간색"  }

미국.

상태는 속성 변경을 의미 단위로 결합하는 메커니즘입니다.예를 들어 버튼은 누름 및 비누름 상태를 가지며 주소록 애플리케이션은 연락처에 대해 읽기 전용 및 편집 상태를 가질 수 있다.모든 요소에는 "암묵적인" 기본 상태가 있습니다.다른 상태는 기본 상태와 다른 요소의 속성 및 값을 나열하여 설명합니다.

예제:디폴트 상태에서는 myRect는 0.0으로 배치됩니다.「이동」상태에서는, 50, 50 에 배치됩니다.마우스 영역 내를 클릭하면 상태가 기본 상태에서 "이동" 상태로 변경되어 직사각형이 이동합니다. 

 수입품 Qt퀵 2.0   아이템 {      id: myItem      폭: 200; 높이:. 200       직사각형 {          id: myRect          폭: 100; 높이:. 100          색상: "빨간색"      }      상태: [          주 {              이름: "실패"              속성 변경 {                  대상: 마이렉트                  x: 50                  y: 50              }          }      ]      마우스 영역 {          anchors.fill: 부모          클릭: myItem.주 = '실패'      }  }

상태 변경은 Transitions를 사용하여 애니메이션화할 수 있습니다.

예를 들어 위의 항목 요소에 이 코드를 추가하면 "이동" 상태로 전환됩니다.

 이행: [      전이 {          송신원: "*"          대상: "실패"          숫자 애니메이션 { 속성: "x, y"; 지속 시간: 500 }      }   ]

애니매이션

QML의 애니메이션은 객체의 속성을 애니메이션화함으로써 수행됩니다.유형 real, int, color, rect, 점, 크기 및 벡터3d의 속성을 모두 애니메이션화할 수 있습니다.

QML은 기본 속성 애니메이션, 전환 및 속성 동작의 세 가지 주요 애니메이션을 지원합니다.

애니메이션의 가장 간단한 형태는 PropertyAnimation으로, 위에 나열된 모든 속성 유형을 애니메이션으로 만들 수 있습니다.속성 구문에 대한 애니메이션을 사용하여 속성 애니메이션을 값 소스로 지정할 수 있습니다.이것은 특히 애니메이션을 반복할 때 유용합니다.

다음으로 바운스 효과를 작성하는 예를 나타냅니다.

 직사각형 {      id: rect(직장)      폭: 120; 높이:. 200       이미지 {          id: img          출처: "픽스/qt.png"          x: 60 - img.폭/2          y: 0           시퀀셜 애니메이션 에 y {              루프: 애니매이션.인피니트              숫자 애니메이션 { 대상: 200 - img.높이; easing.type: 이완화.아웃바운스; 지속 시간: 2000 }              일시정지 애니메이션 { 지속 시간: 1000 }              숫자 애니메이션 { 대상: 0; easing.type: 이완화.아웃쿼드; 지속 시간: 1000 }          }      }  }

QT/C++ 통합

QML을 사용하기 위해서는 Qt/C++ 지식이 필요하지 않지만 Qt를 [28][29]통해 쉽게 확장할 수 있습니다.QObject에서 파생된 C++ 클래스는 QML에서 인스턴스화할 수 있는 유형으로 쉽게 등록할 수 있습니다.

익숙한 개념

QML은 Qt에서 다음 개념에 직접 액세스할 수 있습니다.

  • QObject 신호– JavaScript에서 콜백을 트리거할 수 있습니다.
  • QObject 슬롯– JavaScript 호출 함수로 사용 가능
  • QObject 속성– JavaScript 및 바인딩에서 변수로 사용 가능
  • QIndow – 창에 QML 장면이 생성됩니다.
  • Q*모델 – 데이터 바인딩에 직접 사용 (QAbstractItemModel [30][31][32]등)

신호 핸들러

시그널 핸들러는 JavaScript 콜백으로 이벤트에 대한 응답으로 필수 액션을 수행할 수 있습니다.예를 들어, MouseArea 요소에는 마우스 누름, 해제 및 클릭을 처리하는 신호 핸들러가 있습니다.

 마우스 영역 {      눌림: 콘솔.로그.("버튼을 눌렀다")  }

모든 신호 핸들러 이름은 "on"으로 시작합니다.

개발 도구

QML과 JavaScript는 매우 유사하기 때문에 JavaScript를 지원하는 거의 모든 코드 에디터가 작동합니다.그러나 구문 강조 표시, 코드 완성, 통합 도움말 및 WYSIWYG 편집기는 버전 2.1 이후 무료 크로스 플랫폼 IDE Qt Creator 및 기타 많은 IDE에서 사용할 수 있습니다.

QML 실행 파일은 스크립트로 QML 파일을 실행하기 위해 사용할 수 있습니다.QML 파일이 shebang으로 시작하는 경우 직접 실행할 수 있습니다.단, (특히 모바일플랫폼에서) 어플리케이션을 패키징하려면 일반적으로 간단한 C++ 런처를 작성하여 필요한 QML 파일을 리소스로 패키징해야 합니다.

레퍼런스

  1. ^ "Qt 5.15 Released".
  2. ^ "Which interface for a modern application?". scriptol.
  3. ^ Ring Team (5 December 2017). "The Ring programming language and other languages". ring-lang.net. ring-lang.
  4. ^ "Qt Declarative API Changes Qt Blog". March 25, 2014. Archived from the original on March 25, 2014.
  5. ^ "Qt 3D Overview Qt 3D 5.13.1". doc.qt.io.
  6. ^ "All QML Types Qt 5.13". doc.qt.io. Retrieved September 7, 2019.
  7. ^ Knoll, Lars (2013-04-15). "Evolution of the QML engine, part 1". Retrieved 2018-05-11.
  8. ^ "What's New in Qt 5.2". Retrieved 2018-05-11.
  9. ^ "Qt Quick Compiler". Retrieved September 7, 2019.
  10. ^ "Deploying QML Applications Qt 5.13". doc.qt.io. Retrieved September 7, 2019.
  11. ^ "Development/Tutorials/Plasma4/QML/GettingStarted". KDE TechBase. KDE.
  12. ^ Dragly, Svenn-Arne (December 2017). "Developing for the reMarkable tablet". dragly.
  13. ^ "QML Demo for the reMarkable Paper Tablet". GitHub. 9 March 2022.
  14. ^ "Ubuntu's Unity Written In Qt/QML For "Unity Next"". Michael Larabel.
  15. ^ "Combining C++ with QML in Sailfish OS applications".
  16. ^ "Tutorial - QML Live Coding With Qt QmlLive".
  17. ^ "QML to C++ and C++ to QML". Jolla.
  18. ^ "QML fundamentals". Blackberry.
  19. ^ "Intro to QML for Meego". Nokia.
  20. ^ "MeeGo and Qt / QML demos assault MWC". IoT Gadgets.
  21. ^ "QML on N900". maemo.org. Maemo Community.
  22. ^ "Qt Launches on Tizen with Standard Look and Feel". 20 May 2013.
  23. ^ "Mer".
  24. ^ "Mer wiki".
  25. ^ "Lipstick QML UI on MeeGo CE / Mer". IoT Gadgets.
  26. ^ "QML - the best tool to unlock your creativity". Ubuntu.
  27. ^ "Looking at Lumina Desktop 2.0". TrueOS.
  28. ^ Alpert, Alan. "The Qt/QML User Story". Incorrigible Imaginings.
  29. ^ Alpert, Alan. "The many ways to unite QML and C++". Qt Developer Days. BlackBerry.
  30. ^ Dahlbom, J (22 April 2010). "QAbstractItemModels in QML views". The missing pieces.
  31. ^ "Sorting and filtering a TableView". The Qt Company.
  32. ^ Brad, van der Laan (11 July 2014). "How to use Qt's QSortFilterProxyModel". ImaginativeThinking.

외부 링크

사용법