Ubuntu Touch 용 앱 만들기 [QML]-[Part 3]

Ubuntu Touch용 앱 만들기

이 게시물 시리즈의 세 번째 부분(첫 부분, ) 우리가 응용 프로그램을 구축하는 곳 우분투 터치 또는 자신을 위해 Ubuntu 데스크탑. 이전 글에서 제가 놓친 부분을 추가해보려 합니다. 실패, 성공, 포인트 변수를 늘렸는데도 화면에 표시되지 않는 것은 텍스트를 변경하지 않았기 때문입니다. 레이블 속성:

                라벨 { id: 누락 텍스트: "실패: " + nmisses 색상: "빨간색" } 라벨 { id: 히트 텍스트: "히트: " + nhits } 라벨 { id: 도트 텍스트: "도트: " + ndots fontSize: "중간 " }

게임 논리의 연속

시간

이미 알고 있듯이 progressBar는 질문에 답해야 하는 시간 경과를 보여줍니다. 시간을 관리하기 위해 타이머를 사용할 것입니다. 타이머는 x밀리초 간격으로 반복되는 요소입니다. 이 경우 각 간격마다 ProgressBar의 진행률을 높이라고 지시합니다. 그러나 시간의 끝에 도달했는지 여부를 확인하기 전에 끝에 도달한 경우 수명을 빼야 합니다.

아직 구현하지 않은 코드 줄을 볼 수 있습니다(PopupUtils.open(대화 상자)), 이 줄은 더 많은 생명이 없는 경우 게임 종료 대화 상자를 여는 것입니다(버그 3개 제거). 이 게시물의 뒷부분에서 해당 대화 상자를 만드는 방법을 살펴보겠습니다.

타이머 코드(ProgressBar 아래에 놓을 수 있음):

       ProgressBar { id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300 } Timer { id: simpletimer c: 100 repeat: true running: true onTriggered: { if(time.value < time.maximumValue) time.value + = 1.0 else { nfailures = nfailures + 1 if (nfailures < 3){ num = num + 1 Logic.nextQuestion(num) time.value = time.minimumValue } else{ simpletimer.stop() PopupUtils.open(dialog) } } } }

보시다시피 onTriggered에서 1(간격) 밀리초. ProgressBar에 minimumValue와 maximumValue라는 두 가지 속성을 추가했습니다. 보시다시피 최대값과 최소값입니다.

타이머를 시작하고 중지하려면:

심플타이머.스타트() 심플타이머.스톱()

옵션(50%, 동결 및 다음)

먼저 옵션을 한 번만 사용할 수 있도록 제어하는 ​​세 가지 변수를 만듭니다.

    속성 int 퍼센트: 0 속성 int with: 0 속성 int next: 0

50%

Button { id: b50 text: "50%" onClicked: { if(percent == 0){ var correct = aDocument.contents.questions[num].correct if(correct == 1){ resp2.enabled= false resp3. 활성화= 거짓 } else if(올바른 == 2){ resp1.enabled= 거짓 resp4.enabled= 거짓 } else if(올바른 == 3){ resp1.enabled= 거짓 resp4.enabled= 거짓 } else{ resp2.enabled= 거짓 resp1.enabled= 거짓 } 퍼센트 = 1 } }

enabled = false로 우리가 하는 일은 버튼을 누를 수 없는 방식으로, aDocument.contents.preguntas[num].correcta로 올바른 답을 얻는 방식으로 그리고 여기에서 정확하지 않은 두 개의 버튼을 제거합니다».

얼다

                버튼 { id: bCon text: "정지" onClicked: { if (con == 0) simpletimer.stop() con = 1 } }

이것은 쉬운 것 중 하나입니다. simpletimer.stop()으로 타이머를 중지하기만 하면 됩니다. 예, 질문에서 질문으로 이동할 때 타이머를 다시 켜야 합니다(그리고 progressBar를 0으로 설정).

다음 보기

                 버튼 { id: bNext text: "다음" onClicked: { if (next == 0){ num = num + 1 Logic.nextQuestion(num) next = 1 } } }

이미 생성한 함수를 사용하여 질문(nextQuestion)을 전달합니다.

대화

게임을 종료하려면 우리가 이겼거나(더 이상 질문이 없음) 졌기 때문에(3번의 실수를 저질렀음) 대화를 사용하여 대화를 사용하려면 모듈을 가져와야 합니다.

Ubuntu.Components.Popups 0.1 가져오기

우리가 졌다는 것을 알려주는 대화 상자를 만들어 봅시다.

        Component { id: dialog Dialog { id: dialog title: "게임 오버!" text: "당신은 모든 생명을 잃었습니다 :(" Button { text: "종료" onClicked: Qt.quit() } Button { text: "다시 시작" color: UbuntuColors.orange onClicked: { num = 0; Logic.nextQuestion ( num) npoints = 0 출생 = 0 PopupUtils.close(dialogue) } } } }

두 개의 버튼이 있습니다. 하나는 응용 프로그램(Qt.quit())을 닫고 다른 하나는 게임을 다시 시작하는 것입니다. 변수를 0으로 초기화하고 대화 상자를 닫습니다.

대화 상자를 열려면:

PopupUtils.open(대화 상자)

닫으려면:

PopupUtils.close(대화)

게임이 끝날 때 대화를 보자:

우분투 터치

식별자와 우리가 이겼다는 텍스트를 변경하여 정확히 동일한 대화 상자를 만들 수 있습니다.

질문 집계 설계

우리가 그것을 설계했을 때 GTK, 우리는 대화 상자를 생성하지만 이번에는 탭에서 수행할 것입니다. 어쨌든 동일한 구조를 갖습니다.

보시다시피 Label, TextArea를 사용하여 질문을 작성합니다. 4개의 TextField와 4개의 Switch가 있습니다. 마지막으로 질문을 추가하는 버튼입니다. 더 이상 고민하지 않고 코드를 살펴보겠습니다.

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab { title: i18n.tr("+ Questions") Page { id: pageAdd Column { anchors.top: pageAdd.top anchors.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Label { id: 질문 텍스트: "데이터베이스에 질문 추가:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" } TextArea { 너비: parent.width - 20 높이: units.gu (12 ) contentWidth: units.gu(30) contentHeight: units.gu(60) anchors.horizontalCenter: parent.horizontalCenter } 행 { 간격: 15 anchors.horizontalCenter: parent.horizontalCenter TextField { placeholderText: "응답 1" 너비: 300 } 스위치 { 선택됨: 거짓 } } 행 { 간격: 15 anchors.horizontalCenter: parent.horizontalCenter TextField { placeholderText: "응답 2" 너비: 300 } { 선택됨: 거짓 } } 행 { 간격: 15 anchors.horizontalCenter: parent.horizontalCenter TextField { placeholderText: "Response 3" width: 300 } Switch { checked: false } } Row { spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField { placeholderText: "Response 4" width: 300 } Switch { checked: false } } 버튼 { 텍스트: "추가 +" anchors.horizontalCenter: parent.horizontalCenter 너비: parent.width - 20 } } } }
코드에 대해 의심스러운 점이 있으면 의견을 알고 있습니다.

어떻게 보이는지 봅시다:

2014-07-24 16:54:37 캡처

이제 스위치를 테스트하면 모든 질문을 올바른 질문으로 표시할 수 있으며 당연히 하나만 가능하므로 다음을 수행합니다. 각 스위치에 식별자를 제공할 수 있습니다(텍스트 필드에도 데이터베이스에 저장하려면 콘텐츠를 가져와야 하기 때문에) 귀하의 답변에 따라 클릭하면 다른 모든 항목을 checked = false 모드로 전환합니다.

             Row { spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField { id: res1 placeholderText: "Response 1" width: 300 } Switch { id: sw1 checked: false onClicked: { if(sw1.checked == true) { sw2. 확인 = 거짓 sw3.checked = 거짓 sw4.checked = 거짓 } } } }

지금 시도해 보면 어떻게 하나만 표시할 수 있는지 알게 될 것입니다.


4 코멘트, 당신의 것을 남겨주세요

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.

  1.   vr_rv

    아주 좋고 잘 설명 된 기사.
    그런데 Ubuntu용 QML에서 개발하는 방법을 배우기 위해 스페인어로 된 책, YouTube 채널 또는 블로그를 추천해 주시겠습니까?

    1.    Lolbimbo

      음, 스페인어로 된 YouTube나 이상한 블로그에는 확실히 몇 가지 자습서가 있지만 사실 자료는 거의 없습니다.

      최신 심비안이라면 nokia를 통해 연결하는 것을 볼 수 있습니다. QML로 애플리케이션을 만들 수도 있습니다. 사실 이것이 제가 배운 방법입니다. 여기 nokia 개발 웹 사이트가 있습니다. http://developer.nokia.com/ (튜토리얼, 완전한 프로젝트가 있습니다…)

  2.   네스터

    기여해 주셔서 감사합니다.

  3.   마르티

    튜토리얼 주셔서 감사합니다.
    하지만 질문과 답변이 데이터베이스에 어떻게 추가되는지 이해할 수 없습니다.
    추가 버튼으로.
    모든 주셔서 감사합니다.