Criando um aplicativo para Ubuntu Touch [QML] - [Parte 3]

Criação de um aplicativo para Ubuntu Touch

Terceira parte desta série de postagens (primeira parte, segundo) para o qual estamos construindo um aplicativo para Ubuntu Toque ou pelo mesmo Ubuntu Área de Trabalho. Vou adicionar uma parte que perdi no post anterior, que embora tenhamos aumentado as variáveis ​​das falhas, acertos e pontos, elas não foram mostradas na tela, é porque não alteramos a propriedade text dos Labels:

                Label {id: failures text: "Failures:" + nfaults color: "red"} Label {id: hits text: "Hit:" + born} Label {id: points text: "Points:" + npoints fontSize: "medium "}

Continuação da lógica do jogo

Tempo

Bem, como já sabemos, o progressBar mostra o tempo que temos para responder a uma pergunta. Para gerenciar o tempo usaremos um Timer, o timer é um elemento que se repete em um intervalo de x milissegundos, neste caso a cada intervalo o diremos para aumentar o progresso da ProgressBar; Mas antes que eu veja se chegou ou não ao fim dos tempos, se chegar ao fim, devemos subtrair uma vida.

Você pode ver uma linha de código que ainda não implementamos (PopupUtils.open (diálogo)), esta linha é para abrir o diálogo de final de jogo caso não tenhamos mais vidas (3 bugs eliminados), mais tarde neste post veremos como fazer este diálogo.

Código do temporizador (podemos colocá-lo abaixo da 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 {nfaults = nfaults + 1 if (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} else {simpletimer.stop () PopupUtils.open (diálogo)}} }}

Como podemos ver, em onTriggered colocamos o código que aumentará a barra de progresso adicionando 1 unidade a cada 100 (intervalo) milissegundos. Observe que adicionamos dois atributos à ProgressBar, minimumValue e maximumValue, que, como você pode ver, é o valor máximo e o valor mínimo.

Para iniciar e parar o cronômetro:

simpletimer.start () simpletimer.stop ()

Opções (50%, congelar e próximo)

Primeiro, vamos criar três variáveis ​​que controlam que as opções só podem ser usadas uma vez:

    porcentagem int propriedade: 0 int propriedade com: 0 int propriedade próxima: 0

50%

Botão {id: b50 text: "50%" onClicked: {if (percent == 0) {var correct = aDocument.contents.questions [num] .correcta if (correct == 1) {resp2.enabled = false resp3. ativado = falso} else if (correto == 2) {resp1.enabled = false resp4.enabled = false} else if (correto == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = falso resp1.enabled = falso} por cento = 1}}

Com enabled = false o que fazemos é colocar o botão de forma que não possa ser pressionado, de forma que obtenhamos a resposta correta com aDocument.contents.questions [num]. Correto e daqui dependendo de qual é o correto «eliminamos »Dois botões que não são.

Congelar

                Botão {id: bCon text: "Freeze" onClicked: {if (with == 0) simpletimer.stop () with = 1}}

Este é um dos mais fáceis, só temos que parar o cronômetro com simpletimer.stop (), sim, devemos ligá-lo novamente (e definir progressBar para 0) quando passarmos pela questão.

Próximo

                 Botão {id: bNext text: "Next" onClicked: {if (next == 0) {num = num + 1 Logica.nextQuestion (num) next = 1}}}

Usamos a função que já criamos para passar a questão (nextQuestion).

diálogos

Para encerrar o jogo usaremos um Diálogo, seja porque ganhamos (não há mais perguntas) ou porque perdemos (cometemos 3 erros), para utilizar os diálogos devemos importar o módulo:

importar Ubuntu.Components.Popups 0.1

Vamos criar o diálogo que nos diz que perdemos:

        Componente {id: dialog Dialog {id: dialog title: "Game Over!" text: "You lost all lives :(" Button {text: "Exit" onClicked: Qt.quit ()} Botão {text: "Start over" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion ( num) npoints = 0 nascimentos = 0 PopupUtils.close (dialog)}}}}

Temos dois botões, um para fechar o aplicativo (Qt.quit ()) e outro para reiniciar o jogo. Inicializamos as variáveis ​​para 0 e fechamos a caixa de diálogo.

Para abrir a caixa de diálogo:

PopupUtils.open (diálogo)

Para fechar:

PopupUtils.close (diálogo)

Vamos ver o diálogo no final do jogo:

Podemos criar um diálogo exatamente da mesma maneira, alterando o identificador e o texto onde diz que ganhamos.

Projetando o agregado de perguntas

Quando o projetamos em GTK, criamos uma caixa de diálogo, mas desta vez faremos em uma aba, de qualquer forma terá a mesma estrutura:

Como podemos ver, usaremos um Label, um TextArea para escrever a questão, 4 TextField e 4 Switch; finalmente, um botão para adicionar a pergunta. Vejamos apenas o código:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Questions") Página {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 espaçamento: 15 largura: parent.width height: parent.height - 50 Label {id: question text: "Adicionar uma pergunta ao banco de dados:" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large"} TextArea {width: parent.width - 20 height: units.gu (12) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 1" width: 300} Alternar {verificado: falso}} Linha {espaçamento: 15 âncoras.horizontalCenter: pai.horizontalCenter TextField {espaço reservadoText: "Resposta 2" largura: 300} Alternar {verificado: falso}} Linha {espaçamento: 15 âncoras.horizontalCenter: pai. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Switch {selected: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Switch {verificado: false}} Botão {texto: "Adicionar +" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}

Vamos ver como fica:

Se agora testarmos os Switches, veremos que podemos marcá-los todos como a pergunta correta e, naturalmente, apenas um pode ser, portanto faremos o seguinte: poderemos dar um identificador para cada switch (também para os campos de texto, pois teremos que obter o conteúdo para salvá-lo em o banco de dados) de acordo com sua resposta, e quando clicarmos nele colocaremos todos os outros no modo verificado = falso:

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

Se tentarmos agora, veremos como podemos marcar apenas um.