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

Introdução

Aqui virá uma série de postagens (como os que eu fiz com Vala), mas desta vez com um aplicativo para Ubuntu Toque, o aplicativo é inicialmente o "mesmo" que no postagens de Vala, ou seja, uma espécie de jogo onde temos uma pergunta e 4 respostas em forma de teste, então temos três botões, um para eliminar duas das respostas possíveis (50%), outro para congelar o tempo e o último para ir de questão.

Para ver como começar a criar um projeto, você pode visitar este postar (documentação, criar projeto ...), pois começaremos com o projeto já criado.

Conhecimento básico

Para criar o aplicativo, usaremos os componentes de UbuntuEmbora possamos criar nossos próprios componentes, não o faremos neste caso.

Componentes do Ubuntu são componentes que usaremos em nosso aplicativo:

Para usá-los da mesma forma, temos que importar o módulo:

importar Ubuntu.Components 0.1

Podemos encontrar diferentes elementos nos componentes, como botões, barras de progresso, etc. Podemos baixar um projeto onde eles nos mostram a maioria destes componentes:

ramo bzr lp: ubuntu-ui-toolkit 

Projetando o aplicativo

Partimos da imagem onde temos a aplicação feita com GTK, neste caso, usaremos QML, na verdade, vamos criar todo o aplicativo com qt-rápido (QML + JavaScript).

O aplicativo, assim como a imagem, consistirá em uma pergunta, tempo, respostas, opções e pontos. A única diferença (além do "estilo"), será que teremos Guias no topo.

Para isso, usaremos os elementos button, label e progressBar. Para a estrutura usaremos o Elemento Coluna y Linha.

Projetando o layout da tela principal:

Começamos com uma MainView, onde serão encontradas diferentes Abas, neste caso vamos trabalhar no layout da tela inicial de nosso aplicativo.

MainView {objectName: "mainView" // ...}

Dimensões (para UbuntuTouch):

largura: unidades.gu (50) altura: unidades.gu (75)

Definimos o comprimento e a largura da nossa aplicação, onde a largura será 50 (unidades) e o comprimento 75, agora vamos colorir:

headerColor: "# 57365E" backgroundColor: "# A55263" footerColor: "# D75669"

Temos a cor do cabeçalho, do corpo e do rodapé:

Como mencionei antes, o aplicativo será estruturado por guias:

    Tabs {id: tabs Set {objectName: "jocTab"} / * Adicionar {objectName: "addQuestions"} * /}

Como vemos, temos duas Abas, uma comentada (ainda não a criamos) e outra para jogar (que agora criaremos). Para criar a referida Aba, iremos criar um novo arquivo qml (Adicionar novo -> Qt -> Arquivo QML ->…), o nome do referido arquivo será Game.qml.

Bem, vamos modificar Game.qml de forma que o transformemos em um Tab, que tem uma página dentro (Page):

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("Game") Página {}}

Na página começaremos a estruturar os elementos que mencionamos no design. Uma coluna que incluirá todos os elementos dentro (os colocará na vertical), então colocaremos os elementos em ordem: Label, ProgressBar, os 4 botões; e para colocar as opções, usaremos o elemento Row para colocá-las horizontalmente.

Coluna {anchors.top: Gamepage.top anchors.topMargin: 50 espaçamento: 15 largura: parent.width height: parent.height - 50 Label {id: question anchors.topMargin: 500 text: "Question?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Botão {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Botão {id: resp2 text: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Botão {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Botão {id: resp4 text: "Response 4" âncoras .horizontalCenter: parent.horizontalCenter} Linha {espaçamento: 15 anchors.horizontalCenter: parent.horizontalCenter Botão {id: b50 text: "50%"} Botão {id: bCon text: "Freeze"} Botão {id: bNext text: " Próximo "}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter Label {id: failures text:" Failures: 0 "color:" red "} Label {id: hits text:" Hit: 0 "} Label {id : points text: "Points: 0" fontSize: "medium"}}

Vejamos como dentro de cada elemento que é delimitado por seu {} temos diferentes propriedades, no caso do rótulo e dos botões podemos ver que a propriedade "text" é o texto que ele mostra, uma propriedade não visual importante é o identificador "id », O que nos ajudará na implementação da lógica da aplicação.

No final podemos ver o resultado: