생짜

https://wikidocs.net/book/2957

MAC mini에 QT와 QT Creator를 성공적으로 설치했다.

이제 설치된 QT Creator을 입맛대로 바꾸기 위해 메뉴에서 

'Tools -> Option'을 선택해 'Environment'와 'Text Editor'를 꾸며보자

일단 'Text Editor'에서 D2Coding Font를 설정한다.

D2Coding Font Download 한 후 OS X의 '서체 관리자'를 사용하여 폰트를 설치한다.

D2Coding Font를 다운 받은 후 'Finder->응용프로그램->서체관리자'를 찾아 실행시킨 후 서체관리자를 통해 D2Coding 서체를 설치한다.

서체관리자를 실행 시킨 후 '+' 버튼을 클릭하여 '이름없는 모음' 폴더 생성, 이름을 'Coding'으로 만들었다. 'Coding' 을 선택 하 옆의 빈 공간에 오른쪽 마우스 클릭 '서체추가'를 선택 후 추가할 서체를 찾아 추가해주면 된다. 참고로 팝업 메뉴 중 '중복해결'을 선택하면 중복된 서체를 찾아 삭제해준다. 

서체관리자에서 서체를 추가 한 후에 재부팅을 해야지 추가된 서체가 인식된다.

재부팅을 한 후  QT Creator에서 추가된 서체를 폰트로 지정한다.

QT Creator를 실행 시킨 후( QT Creator는 Launchpad에 설치되는게 아니라 QT가 설치된 폴더에 있다. ) File menu의 'Tool->External->Configure' 를 선택 한다.

Font 설정 화면

interface 설정

이제 기본적인 환경 setting 은 끝났다. 

앞으로 본격적으로 QT, QML & JavaScript에 대해 공부를 하자.

꿈에 그리던( 진짜 ? )   MAC OS X 에 QML 개발환경을 설치하기로 했다.

OS X  버전은 10.10.5 Yosemite 이다.

한동안  QML로 밥을 먹고 살것 같다.

회사에서는 Windows 에   VirtualBox 를 설치하고 Linux에서 개발하고 있다.

Linux, Windows 모두에  QML 개발 환경을 설치해 봤으니 집에 있는  MAC mini에도 QML 개발 환경을 설치한 후 매일매일 조금씩 보기로 결정했다.

보통 Linux같은 경우 QT 를 설치하고 QT Creator를 따로 설치했다. Windows의 경우 QT install 파일 하나만 설치하면 QT 와 QT Creator가 모두 설치됐다.

OS X도 Windows 처럼 install 프로그램 하나, 원클릭으로 모두 설치 할 수 있다. Windows도 OS X 도  Linux 보다는 설치가 편하다.

먼전 사이트에서 OS X 용 프로그램을 다운 받는다.

다운로드 사이트 URL은 http://download.qt.io/ 이다.

QT  다운로드 사이드에 접속 후 'development_release -> qt -> 5.8 -> 5.8.0-rc' 페이지에 접속( URL 클릭 시 이동 ) 후 qt-opensource-mac-x64-clang-5.8.0-rc_687.dmg 를 선택해 다운 받으면 된다. 

dmg 파일을 다운 후 실행 실행, Next 만 클릭해 주면 끝난다. 중간에 Register에 등록하는 화면이 나오는데 ID/Password를 만든 후 로그인 하면 된다.

설치시 설치 경로를 변경하지 않았다고 하면( 나처럼 무식하게 Next 만 선호 한다면 ) 아래 경로에  QT가 설치 되었을 것이다.

QT 를 설치하면 자동으로 Launchpad에 등록되지 않는다. 

install을 완료하고 QML로 'Hello QT' 프로그램을 작성하고 실행 시킨 화면이다.

이로써 간략하게 OS X 에 QML 개발환경을 설치해 봤다.

QML 개발 환경을 설치했으니 다음은 QT의 IDE Tool인 QT Creator 의 환경 설정에 대해 알아보자

<< Previous

QML이 객체들은 Parent - Child 관계를 가질 수 있다. 

이 깊이는 무제한으로 할 수 있다.

각 Parent와 Child가 서로의 control에 접근을 할 수 있는데 Parent와 Child간에는 접근할 수 있는 권한이 있다.

child 에서 parent에 접근할 때는 깊이에 상관없이 무제한으로 접근할 수 있지만 반대로 parent에서 child에 접근할 때는 1 depth이상으로는 접근 할 수가 없다.

1 depth만 접근할 수 있음

그럼 parent의 입장에서 child의 child에 접근하려면 어떻게 해야 할까?

이때 필요한 propert가 ailas 이다. ails는 말 그대로 child 또는 객체의 레퍼런스 별명이다. ailas property 이외에 child 객체에 함수를 만들고 함수를 통해 접근할 수 있고 parent 객체에 선언한 변수를 child 객체에서 사용할 수도 있다.

Next >>

<< Previous

QML도 마우스와 키보드 입력 및 event를 처리할 수 있는 여러 객체( 인터페이스 )를 제공한다.

QML에서 이벤트는 객체 단위로 정의 사용할 수 있다. 

각각의 객체 안에 사용할 이벤트를 자식 객체로 선언하여 사용하는 방법이다.

Mouse와 Key, TextInput 의 예제를 살펴보자.

하나의 프로그램 중 여려개의 객체가 있다면 각 객체마다 마우스 / 키 이벤트를 가질 수 있다.

마우스 / 키 이벤트는 꼭 parent 객체를 가지고 있어야 하고 키 이벤트의 경우 parent 객체의 속성인 'focus'의 값이 'true'로 되어 있어야 한다.

MouseEvent Object Type

MouseArea Object에 대해서는 간략하게 알아봤으니 이번에는 MouseEvent Object를 살펴보자.

MouseArea 객체가 마우스를 핸들링하는 객체라면 MouseEvent 객체는 마우스 이벤트에 대한 정보를 제공하는 객체로서 마우스의 위치는 x 및 y 속성을 통해 찾을 수 있고 이벤트를 발생시키는 버튼은 button 속성을 통해 사용할 수 있다.

그렇다 MouseArea 객체는 onPress, onRelease, onClick 등의 특정 아이템 내의 마우스 이벤트에 대한 핸들링 객체이고 MouseEvent 객체는 마우스에 대한 정보를 제공한다. 마우스 휠에 대한 이벤트를 핸들링 하는 WheelEvent 객체는 또 따로 있다.

Keys Object Type

Item 의 Key 핸들링을 제공하는 객체다.

가장 기본적인 Item 객체를 포함하여 모든 시각적 Object Type은 Keys 객체를 사용하여 키 처리를 지원한다. 

Keys 객체는 onPressed 및 onReleased signal 속성을 통해 처리 할 수 있다.

signal 속성에는 이벤트의 세부 정보가 들어있는 event라는 이름의 KeyEvent 매개 변수가 있다. 

키가 처리되는 경우 event.accepted를 true로 설정하여 이벤트가 항목 계층을 따라 전파되지 않도록해야합니다.

TextInput Object Type

편집 가능한 텍스트 줄을 표시하는 객체로 한행을 표시한다. 멀티라인은 표시하지 않는다.

echoMode를 적절한 값으로 설정하면 TextInput을 암호 입력 필드로 사용할 수 있다.

생성 초기 기본적인 모슴,                                       키 입력을 받은 모습

Next >>

<< Previous

아래 링크는 QML의 모든 Object Type들이 정의되어 있다.

All QML Types

가장 많이 사용하고 기본적인 Object들은 아래 링크에 나와 있다.

Basic QML Visual Elements

 QML Basic Elements

Basic Elements 중에서 몇 개의 Example Code이다.

Rectangle Object

Rectangle Object는 사각형을 나타내는 Object Type이다. 기본적인 Property로는 위치를 나타내는 x, y, width, height와 색깔을 표시하는 color, 모서리의 라운드를 나타내는 radious, 외곽선을 나타내는 border 속성이 있다.

border 속성은 객체로서 자식 속성을 가지고 있다.

import 키워드는 java의 import 키워드와 같은 역활을 한다.

이외에 더 많은 속성은 링크를 따라 확인하면 된다.

Image Object

Image Object는 이미지 파일을 나타내는 객체이다. 로드할 수 있는 이미지 파일은 png, jpg, bmp등 종류는 다양하다. Image Object의 기본적인 property는 다른 객체들과 유사하다. 이미지 객체의 고유 property로 이미지 source의 path를 지정할 수 있는 'source' property가 있다. source property의 이미지 파일 경로명은 두 가지 방법으로 기술 할 수가 있다.

첫 째, 이미지를 리소스에 등록하는 방법이다.

이미지를 리소스에 등록하게 되면 "qrc:/폴더 경로 명" 으로 기술한다. ex) source: "qrc:/home/user/test.png"

둘 째, 이미지를 리소스에 등록하지 않고 경로명을 기술해주는 방법으로 경로명은 "file:///폴더 경로 명"로 기술한다.

ex) source: "file://home/user/test.png" 이 경우 file: 뒤에 슬래쉬가 3개가 들어가는게 포인트다.

두 가지 방법의 차이점은 딱히 없다. 리소스에 등록할 때는 컴파일된 실행 파일에 이미지까지 같이 묶여질 뿐이다.

Text Object

Text Object는 텍스트를 나타내는 객체다. Text Object의 property인 text에 기본적인 string으로 텍스트값을 줄 수도 있지만 HTML 형식으로도 텍스트 값을 줄 수 있다. 그 외에 폰트의 종류와 사이즈 등을 설정할 수 있는 font property 객체도 property 로 가지고 있다.

MouseArea Object

MouseArea Object는 Mouse event 객체이다. 이 객체는 단독으로 생성될 수는 없고 꼭 parent 객체가 필요하다. 예제 소스에서는 Rectangle 객체의 child 객체로 생성했다. MouseArea 객체는 이벤트( 여기서는 마우스 클릭 )를 받을 영역을 꼭 지정해야 동작한다. 즉 x, y, width, height 를 꼭 설정해줘야 한다.

anchors.fill: parent 라는 구문은 MouseArea 객체의 x, y, width, height 영역을을 부모 객체와 동일하게 지정한다는 뜻이다. 이벤트 받을 영역을 부모 객체인 Rectangle 객체의 크기로 지정한 후 클릭 이벤트가 왔을 경우 부모의 색깔을 red로 바꾼 다는 뜻이다.

onClicked: { parent.color = 'red' }

anchors property 는 이해하고 나면 UI를 그리는데 여러가지로 편한 키워드이다. 하지만 이해못하고 쓰면 UI가 이상한데 그려지기 일쑤이다.

객체를 생성하면서 property 초기값을 줄 때에는 color:'red'로 하지만 property 초기 값을 지정 후 호출하여 사용할 때는 color = 'red 라고 사용해야 한다.

QML은 스크립트 언어이기 때문에 컴파일 언어 처럼 정확한 신텍스 체크를 해주지는 않는다. property를 사용할 때 '=' 대신 ':' 를 사용해도 문법적 오류가 발생했다고 알려주지 않는다. 실제 동작할 때 이 부분에서 동작이 안 될 뿐이다

 << Previous

QML은 계층적 구조를 갖고 있다.

QML 구조는 크게 객체선언, 변수선언, 함수선언, 세 부분으로 나눌 수 있다.

선언된 객체 안에는 자식 객체와 이벤트를 선언 할 수 있다.

QML Object Type은 마치 클래스명 처럼 객체명으로 사용, 선언된다.

객체를 선언한 후 객체 안에 멤버 변수 처럼 property를 선언 사용할 수 있다.

QML Object 는 고유한 아이덴트 값인 id, 좌표값과 크기를 나타내는 x, y, width, height 처럼 공통적으로 갖는 property도 있고

Object 고유의 값을 갖는 property도 있다.

또 선언된 Object 안에서 property라는 키워드를 사용하여 User가 직접 정의하여 사용할 수도 있다.

Object내에 있는 property들을 선언 정의할 때는 properyt 키워드를 사용하지 않는다.

계층적 구조라는 말은 부모와 자식 관계를 갖고 상속할 수 있다는 뜻이다. 그러나 QML에서의 상속은 우리가 알고 있는 상속과는 약간 차이가 있다. 더 정확히 말하자면 상속보다는 모듈화에 가깝다.

Next >>

 << Previous

 QML에 대한 기본적인 소개를 끝내고 이제부터 가장 기본적인  QML Code에 대해 알아보자

이제 QML로 세상에서 가장 많이 만들어진 Application을 만들 것이다. 바로 'Hello World'다.

QT Creator을 실행 시킨다.( 개발환경은 VM Player에 설치한 우분투다. )

1. QT Creator에서 Project 만들기

QT Creator를 실행 시킨 후 순서대로 프로젝트를 만든다.

① 'Welcome'을 선택한다. 

② 'Project'를 선택한다. Project에서는 새로운 프로젝트( + New Project )를 생성 할 수도 있고 기존 프로젝트를 열 수도 있다.( Open Project )  

③ 'New Project'를 클릭하여 Project 생성창을 연다. 

④,⑤ 'Application'/'Qt Quick Application'을 선택한다.

⑥ 'Choose' 버튼을 클릭하여 다음으로 넘어간다.

① 프로젝트 이름을 쓴다. 

② 'Browse'버튼을 클릭하여 프로젝트가 생성될 폴더를 선택한다.

③ 'Next' 버튼을 클릭하여 다음으로 넘어간다.

① 사용할 QT 버전을 선택한다.

② ui 디자인 관련된 qml 파일을 첨부할 것인지 물어보는 체크박스로 체크를 해제한다.

③ 'Next' 버튼을 클릭하여 다음으로 넘어간다.

① 프로젝트가 성공적으로 만들어 졌을 경우 나오는 화면이다.

② 'Next' 버튼을 클릭하여 다음으로 넘어간다.

프로젝트를 만들 수 없을 때 나오는 화면이다. 내가 겪어본 이 경우는 컴파일 링크가 잘못 됐을 때주로 나왔다. 

QT를 설치하면 설치된 QT\tool 폴더 안에 Qt Creator도 같이 설치된다. 이 경우 개발에 필요한 컴파일의 링크등이 자동적으로 Qt Creator의 환경에 설정이 된다. QT와 같이 설치된 Qt Creator의 버전이 낮아 최신 버전의 QT Creator 를 다운받아 따로 설치하면 Qt Creator의 환경 설정이 안되어 있기 때문에 이런 에러가 발생한다.

생성된 프로젝트에 관한 정보를 보여준다. ① 'Finish' 버튼을 클릭하면 프로젝트 생성이 끝난다.

<main.cpp>

소스를 보면

QQmlApplicationEngine engine; 객체에 engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); QML 파일을 로드하는 것을 볼 수 있다. engine 객체는 로드한 QML 파일을 실행시킨다.

<main.qml>

Qt Creator에서 기본적으로 만들어 주는 cpp / qml 파일이다.

① Run 버튼을 클릭하면 cpp 파일을 먼저 컴파일 후 qml파일을 로드한다.

Qt Creator를 이용하여 기본적인 프로젝트 만드는 방법을 연습해 봤다. Qt Creator에서 자동적으로 만들 어준 Code는 Windows를 Item을 사용하여 만들기 때문에 윈도우 캡션바가 자동으로 생성된다. 

나는 Embedded 장비에서 작업을 하기 때문에 Code를 아래와 같이 수정한다.

<main.cpp>

이 코드에서는  QQmlApplicationEngine engine; 객체가 없다. engine 객체는 QQuickView View;의 멤버변수로 View.setSource 함수로 QML 파일을 로드하면 View 객체 내부에서 engine에 로드한다.

<main.qml>

실행화면을 보면  Window 프레임이 사라진 것을 볼 수 있다.

hello_world.tar.gz

Next >>

<< Previous

내가 QML로 몇 달간 작업을 해본 결과 순수하게 내 입장에서 QML의 장점을 말하라면 아래 몇 가지로 나열 할 수 있다. 주관적인 의견으로 QML 측과는 아무 상관이 없는 것을 밝혀 둔다.

1. 빠르다.

2. 쉽게 만들 수 있다.

3. 빠르고 쉽게 만들 수 있어 생산성이 좋다.

4. 직관적이다.

5. 애니메이션에 특화되어 있다.

정도이다.

다시 말해서 첫째도, 둘째도, 셋째도 쉽고 빠른 생산성이다. 주관적인 의견으로 QML 측과는 아무 상관이 없다.!

그럼 단점은?

느리다......멀티크로스플랫폼 위의 또 다른 engine에서 동작하기 때문에 느릴 수 밖에 없지만....

스크립트 언어가 가지고 있는 단점들을 고스란히 가지고 있어 컴파일러 랭귀지를 많이 다루던 엔지니어들에게는 다소 낮설 수 있다.

Next >>