Aplicações Android com o Delphi XE5 Fernanda Dávida Vila Verde Flávia Paschoal Duarte

Transcrição

1 Aplicações Android com o Delphi XE5 Fernanda Dávida Vila Verde Flávia Paschoal Duarte Orientação: Prof. Murilo Zanini de Carvalho Organização: Prof. Roberto Scalco 2014

2 2

3 3 Sumário CAPÍTULO 1 COMO UTILIZAR O EMULADOR DO ANDROID INTRODUÇÃO AO EMULADOR INICIANDO O EMULADOR CRIANDO UM NOVO PROJETO MOBILE NO DELPHI XE COMPILANDO PARA O EMULADOR ANDROID COMPILANDO PARA UM DISPOSITIVO ANDROID COMPILANDO PARA UMA JANELA WINDOWS INSTALANDO A APLICAÇÃO EM UM DISPOSITIVO MÓVEL CAPÍTULO 2 COMPONENTES PRINCIPAIS COMPONENTES E SUAS PROPRIEDADES BUTTON EDIT LABEL SWITCH TABCONTROL TOOLBAR COMBOBOX MEMO STRINGGRID LISTBOX TRACKBAR COMPONENTES GRÁFICOS IMAGE TCHART WEBBROWSER ANIINDICATOR COMPONENTES NÃO VISUAIS TIMER LOCATIONSENSOR MOTIONSENSOR ACTIONLIST CAPÍTULO 3 EXERCÍCIOS RESOLVIDOS (PARA TODOS OS GOSTOS) COMPONENTES BÁSICOS DO DELPHI NAVEGADOR COM O COMPONENTE WEBBROWSER MOSTRANDO A LOCALIZAÇÃO DO SMARTPHONE EM UM MAPA COMPARTILHANDO FOTOS DA CÂMERA REFERÊNCIAS... 40

4 4 Capítulo 1 Como utilizar o Emulador do Android Este capítulo apresenta como criar uma máquina virtual com o sistema operacional Android no emulador para que os aplicativos que iremos desenvolver possam ser testados. Além disso, será apresentado como executar os testes diretamente no smartphone. 1. Introdução ao Emulador O Android Virtual Device (AVD) é um programa que simula a funcionalidade do aplicativo em um smartphone Android. Nele, você poderá definir as características do celular que deseja simular, bem como sua resolução, memória disponível, entre outros. Utilizando esse emulador, você poderá analisar o funcionamento do aplicativo e corrigir possíveis erros no código ou na interface do programa antes de utilizá-lo em um smartphone. Veremos como abrir o emulador AVD e configurá-lo de acordo com as necessidades do seu aplicativo e as características do celular, além da sincronização entre o emulador e o Delphi XE5 para testar o código elaborado Iniciando o Emulador Para iniciar o emulador você deverá abrir o Android AVD Manager no menu Iniciar, como indica a Figura 1. Figura 1: Executando o Android AVD Manager. A janela da Figura 2 será aberta e nela você deverá selecionar o botão New para criação de um novo dispositivo virtual.

5 5 Figura 2: Criando um nova máquina virtual. Você pode criar uma máquina virtual com as características que desejar. Para os exemplos apresentados neste material, foram utilizadas as seguintes configurações: em AVD Name, escolha um nome para o seu dispositivo. Use um nome simples, sem espaços, números ou símbolos, apenas letras; escolha o modelo do dispositivo no campo Device, selecionamos Nexus 4 (4,7,768 x 1280: xhdpi); no campo Target, escolhemos Android API Level 17; para memória recomenda-se sua alteração para RAM: 768 e VM Heap: 64; selecione a opção Use Host GPU no canto inferior direito. Figura 3: Parâmetros da nova máquina virtual.

6 6 Selecione o dispositivo virtual criado, clique em Start e em seguida em Launch. Figura 4: Iniciando o emulador. Espere carregar. Todas as janelas de configurações serão minimizadas e o emulador será exibido, como mostra o exemplo apresentado na Figura 5. Figura 5: Tela inicial do emulador do Android. 2. Criando um novo projeto mobile no Delphi XE5 Abra o Delphi XE5 no menu Iniciar e crie um novo projeto, clicando no menu File no canto superior esquerdo, depois em New e, por fim, FireMonkey Mobile Application Delphi.

7 7 Figura 6: Criando novo projeto mobile. Para desenvolver uma aplicação mobile completamente personalizada, recomenda-se o uso do tipo Blank Application, uma das opções dentre os modelos de projetos mobile disponibilizados. Figura 7: Escolha do modelo do projeto mobile. Recomenda-se salvar o projeto e todos os arquivos que o compõe em uma pasta do seu computador clicando em File e escolhendo a opção Save All. Em seguida, ajuste o modelo visual do smartphone para o mesmo tipo de dispositivo escolhido anteriormente, no caso Google Nexus 4. Figura 8: escolhendo o modelo visual do smartphone.

8 Compilando para o emulador Android Para estabelecer uma conexão entre o emulador e o Delphi, clique na janela Project Manager no canto superior direito no sinal de + ao lado de Target Plataforms, em seguida abra a aba Android Android SDK bit, clique em Target e por fim dê dois cliques no emulador criado anteriormente que já se encontra sincronizado, no exemplo apresentado pela Figura 9, o Ex1 (5554). Caso o emulador não apareça automaticamente, clique com o botão direito em Target e em Refresh. Figura 9: Escolhendo o emulador Compilando para um dispositivo Android Antes de conectar o aparelho no computador através do cabo USB, clique em Configurações do aparelho, acesse a opção Sobre o Telefone e clique diversas vezes sobre o item Número de Compilação ou Número do Sistema ou Número da Versão. Com isso, você terá ativado a opção de desenvolvedor do seu celular. Depois, volte para Configurações e em Opções de Desenvolvedor ou Programador ative a opção Depuração de USB. Figura 10: Habilitando a Depuração de USB no celular.

9 9 Na janela Project Manager do Delphi clique no sinal de + ao lado de Target Plataforms, em seguida abra a aba Android Android SDK bit, clique em Target e por fim dê dois cliques no dispositivo conectado que já se encontra sincronizado, no exemplo apresentado pela Figura 11, o GT-I9505. Figura 11: Escolhendo o dispositivo conectado. Observação: o driver do dispositivo Android deve ser previamente instalado no computador Compilando para uma janela Windows Você perceberá que quando compilar e executar um aplicativo para o emulador ou para o dispositivo conectado na USB haverá certa demora em que o aplicativo apareça. Uma alternativa para fazer os primeiros testes, de leiaute dos componentes, entrada de dados via teclado, eventuais cálculos e exibição dos resultados, consiste em definir uma janela do Windows como Target da compilação. Mas lembre-se dos limites dessa plataforma que não contemplas os principais recursos do emulador ou do dispositivo conectado, como o acesso aos sensores, câmera, entre outros. Para criar esse ambiente para os testes preliminares do seu aplicativo, clique no sinal de + ao lado de Target Plataforms, em seguida clique com o botão direito sobre o Target Plataforms e escolha o item Add Plataform. Selecione a plataforma 32-bits Windows, como mostrado na Figura 12. Figura 12: Adicionando uma janela Windows.

10 Instalando a aplicação em um dispositivo móvel Quando executamos o programa (no botão play verde ou usando a tecla F9) é gerado um arquivo de instalação (.apk) que pode ser copiado para o dispositivo com o sistema operacional Android (via cabo ou enviado por ) e instalado. Para poder instalar o aplicativo no smartphone com Android de qualquer pessoa, é necessário acessar as Configurações e, em seguida, localize o item Segurança. Habilite a opção Fontes Desconhecidas., como mostrado na Figura 13. Figura 13: Autorizando os aplicativos em smartphones. A partir da pasta onde o projeto foi gravado, podemos acessar o arquivo de instalação que está na pasta bin, como mostra a Figura 14 com o exemplo do projeto denominado MeuAplicativo. Figura 14: O arquivo de instalação.apk. Basta enviar o arquivo MeuAplicativo.apk para o dispositivo móvel e, utilizando um gerenciador de arquivos, localizar o arquivo apk e instalá-lo.

11 11 Capítulo 2 Componentes Neste capítulo serão apresentados alguns dos componentes que podem ser utilizados nas aplicações, suas principais propriedades, além de exemplos de aplicações simples para garantir um melhor e mais completo entendimento. 1. Principais componentes e suas propriedades Quando desenvolvendo aplicativos para dispositivos que possuem uma tela muito menor do que o monitor, temos que considerar o uso de representações gráficas para a identificação das funcionalidades dos componentes. Para evitar ter que copiar as imagens dos ícones ou formatar linhas e cores dos componentes, podemos alterar a propriedade StyleLookUp, presente na maioria dos componentes visuais que utilizaremos. Essa propriedade contempla a formatação ou um conjunto de ícones associados às principais funcionalidades dos objetos que se adaptam ao padrão visual do sistema operacional. A Figura 15 mostra diferentes identidades visuais para um botão que possui o valor cameratoolbutton associado à propriedade StyleLookUp, sendo executado em um dispositivo com o sistema operacional Android ou ios. Figura 15: Identidade visual definida pela propriedade StyleLookUp. Android ios A Figura 16 mostra alguns exemplos de ícones associados à propriedade StyleLoopUp do botão. Cada componente terá características visuais distintas. Figura 16: Valores da propriedade StyleLoopUp de um botão. actiontoolbutton backtoolbutton bookmarkstoolbutton cameratoolbutton cleareditbutton composetoolbutton detailstoolbutton infotoolbutton nexttoolbutton priortoolbutton refreshtoolbutton searchtoolbutton Note que se, por exemplo, for atribuído o valor cameratoolbutton à propriedade StyleLoopUp de um botão, ele apenas terá o ícone de uma câmera, você deverá implementar o código para que a câmera seja acessada.

12 Button Aba: Standard. Botão que receberá o procedimento ou função a ser codificado com sua ação específica. Figura 17: Button. Propriedades: Text: texto que será exibido no componente. ATENÇÃO!!! Para o componente mobile a propriedade não se chama mais Caption! StyleLookUp: determina a aparência do componente Edit Aba: Standard. Caixa de edição, onde serão inseridos os dados de entrada de texto fornecidos pelo usuário. Figura 18: Edit. Propriedades: Text: texto digitado pelo usuário. Password: quando habilitado, o texto que o usuário digitar será substituído por caracteres como, por exemplo, * ou. KeyBoardType tipo do teclado que será exibido quando o usuário clicar sobre o Edit. Veja alguns dos tipos de teclado que podem ser utilizados: vktdefault: Teclado padrão do sistema; vkturl: Teclado para digitar endereços de sites. Símbolos como www. e.com possuem botão próprio para facilitar a digitação; vkt address: Teclado para digitar endereços de . Símbolos e.com possuem botão próprio para facilitar a digitação; vktphonepad: Teclado para digitar telefones; vktnumberpad: Teclado para digitar valores numéricos.

13 13 Figura 19: Tipos de teclado. vktdefault vkturl vkt address vktphonepad vktnumberpad 1.3. Label Aba: Standard. Componente utilizado para exibir textos na interface do aplicativo. Figura 20: Label. Propriedades: Text: propriedade que contém o texto que será exibido no Label. ATENÇÃO!!! Para o componente mobile a propriedade não se chama mais Caption! StyleLookUp: determina a aparência do componente Switch Aba: Standard. Componente utilizado para indicar se alguma opção do aplicativo está ou não ativa. Propriedades: IsChecked: é um valor booleano que indica se o componente está ligado ou não.

14 14 Figura 21: Switch TabControl Aba: CommonControls. Componente que propicia a criação de abas. Muito utilizado para organizar os demais componentes nas abas separadas por assunto. Adicione-o no formulário e depois de posicioná-lo corretamente, clique com o botão direito sobre o componente e escolha a opção Items Editor. Adicione a quantidade de TabItem que desejar clicando em Add Item. Cada TabItem é um componente distinto, associado ao TabControl. Figura 22: TabControl. Propriedades do TabControl: Align: normalmente, aplicações que usam TabControl usa toda a tela para mostrar as páginas. Para isso, troque a propriedade Align para a opção AlClient; TabPosition: usada para escolher qual posição que deseja que suas abas estejam, como na parte superior (tptop), inferior (tpbottom). Nesses casos, o texto de cada TabItem é exibido no TabControl. As páginas podem ser representadas apenas por pontos na interface (tpdots). Além disso, o TabControl pode ocultar qualquer indicação das abas (tpnone) de maneira que a aba ativa seja especificada via código, alterando a propriedade TabIndex. Isso pode dar a impressão ao usuário que o aplicativo possui diversos formulários; TabIndex: indica qual aba está ativa no momento, começando a contagem a partir do número zero; StyleLookUp: determina a aparência do componente. Eventuais alterações devem ser aplicadas a cada TabItem criado. Propriedade do TabItem: Text: altera o texto de cada TabItem, se estiverem visíveis.

15 ToolBar Aba: Standard. Serve como uma barra de ferramentas alinhada geralmente no topo ou na parte inferior da interface do aplicativo, com botões que representam atalhos ou maneiras de acessar a funcionalidade embutida em sua aplicação. Normalmente, correspondem também a itens do menu em um aplicativo e dá ao usuário acesso direto aos comandos do aplicativo. No exemplo apresentado na Figura 23, um Label e um Button foram colocados sobre um ToolBar. A propriedade StyleLookUp, foi alterada para ToolLabel e o botão teve a mesma propriedade alterada para AddToolButton. Figura 23: ToolBar. Propriedades: StyleLookUp: determina a aparência do componente. Exemplo: O ToolBar está atuando como um container para os demais objetos. Assim, se a propriedade Align do Label for alterada para AlCenter, o Label será centralizado na ToolBar ComboBox Aba: Standard. Trata-se de uma caixa de opções com uma lista pré-definida, podendo selecionar várias opções. Possui as principais propriedades do RadioGroup. Figura 24: ComboBox. Propriedades: ItemIndex: valor inteiro que representa qual dos itens foi selecionado pelo usuário. O primeiro item possui valor 0, o segundo 1 e assim por diante. Caso nenhum item esteja selecionado, a propriedade vale -1;

16 16 Items: usado para definir quais as opções que aparecerão na sua lista. Selecione as reticências no espaço em branco ao lado de Items e, na janela que abrirá, escreva em cada linha uma opção. Por fim, clique em OK. Figura 25: Preenchimento da propriedade Items Memo Aba: Standard. Usado para exibir um texto em linhas distintas, manipuladas de forma independente. As linhas podem ser manipuladas pela propriedade Lines. Essa propriedade permite acessar cada uma das linhas como um vetor de textos, cuja posição inicial é 0. Propriedade de Lines: Count: valor inteiro que representa a quantidade de linhas do Memo; Métodos de Lines: Add: possui um texto que é passado por parâmetro. Esse texto será adicionado após a última linha existente; Delete: remove a linha que foi informada via parâmetro (valor inteiro correspondente ao número da linha); Clear: elimina todas as linhas do Memo; Atenção!! Para apagar o Memo não se usa Memo1.Clear. SaveToFile: o conteúdo das linhas do Memo será salvo em um arquivo texto cujo caminho é dado pelo parâmetro desse método;

17 17 LoadFomFile: o conteúdo das linhas do Memo será preenchido com as informações de um arquivo texto cujo caminho é dado pelo parâmetro desse método. O exemplo a seguir mostra o trecho de um aplicativo que irá salvar em um arquivo o RA e a média de 40 alunos, separados pelo caracteres ;, armazenadas em dois vetores globais, preenchidos previamente. No Android a pasta raiz não é C:\, mas /sdcard/. Para acessar o cartão de memória externo, utilize /storage/extsdcard/. procedure TForm1.Button2Click(Sender: TObject); var i: Integer; Memo1.Lines.Clear; Memo1.Lines.Add('RA;Media'); for i := 1 to 40 do Memo1.Lines.Add(RA[i] + ';' + FloatToStr(media[i])); Memo1.Lines.SaveToFile('/sdcard/medias.csv'); ShowMessage('Notas exportadas em: /sdcard/medias.csv'); Note que esse arquivo possui a estrutura RA;Media, permitindo que seja aberto em uma planilha eletrônica (seja o Microsoft Excel no computador ou alguma planilha eletrônica no smartphone) para posterior análise. Embora o arquivo possua apenas dados de texto, sua extensão, normalmente, é.csv (comma-separated values). Figura 26: Dados exportados pelo aplicativo abertos no Excel StringGrid Aba: Grids.

18 18 O StringGrid permite a entrada ou exibição de dados na forma de texto. Estes dados podem ser, normalmente, vetores ou matrizes na forma de uma tabela. Assim como todos os componentes que possuem mais do que um item, o primeiro possui índice 0, no caso, a primeira linha e a primeira coluna possuem o índice 0. Há uma diferença significativa entre o StringGrid para o dispositivo móvel e da aplicação para Windows. O componente se comporta com um contêiner de colunas, que devem ser adicionadas em tempo de desenvolvimento, clicando com o botão direito sobre o componente, Add Item e TStringColumn. As colunas StringColumns possuem um cabeçalho (header), destacado em cinza, que não faz parte da contagem de células. Esse cabeçalho pode ser exibido ou não. Figura 27: Adicionando colunas no StringGrid. Propriedades do StringGrid: Cells: representa uma matriz de strings cujos índices são, respectivamente, a coluna e a linha da tabela. O cabeçalho não faz parte da contagem de células; RowCount: valor inteiro que armazena o número de linhas dos StringColumns. Pode ser para saber o número de linhas ou definir essa quantidade; ColumnCount: valor inteiro que armazena o número de colunas do StringGrid. Essa propriedade não pode ser alterada pelo código, somente lida; Atenção! Não existe a propriedade ColCount. ReadOnly: valor lógico que indica se as células poderão ser editadas ou não. Essa propriedade substitui o goediting; ShowHeader: valor lógico que indica se o cabeçalho será ou não exibido. Propriedade do StringColumn: Header: texto que será exibido na primeira linha, de cor cinza, se estiver visível ListBox Aba: CommonControls. Usado para apresentar uma lista de opções. Para adicionar itens à sua lista, clique com o botão direito sobre o componente e selecione Items Editor. Na janela Items Designer, escolha a opção TListBoxItem e clique no botão Add Item quantas vezes forem necessárias.

19 19 Figura 28: ListBox. Existem situações em que seria interessante adicionar um cabeçalho e/ou um rodapé ao redor dos itens. Para tal, altere a opção TListBoxItem para TListBoxGroupHeader ou TListBoxGroupFooter e clique em Add Item. Organize a posição do cabeçalho e do rodapé para os extremos da lista, como mostra a Figura 29. Figura 29: ListBoxGruopHeader e ListBoxGruopFooter. Após fechar a janela, é possível configurar as propriedades do ListBox e de cada um dos itens (ListBoxItem, ListBoxGroupHeader e ListBoxGroupFooter) separadamente. Veja as propriedades desses objetos: Propriedades do ListBox: Sorted: quando o aplicativo for executado, os itens serão exibidos em ordem alfabética; MultiSelect: propriedade booleana que indica se mais do que um item pode ser selecionado por vez; ShowCheckBoxes: mostra caixas de seleção ao lado dos itens, permitindo com que o componente se parece com um CheckListBox; StyleLookUp: determina a aparência do componente. O ListBox pode ficar transparente se o valor transparentlistboxstyle for selecionado. Propriedades do ListBoxItem, ListBoxGroupHeader e ListBoxGroupFooter: IsChecked: é um valor booleano que indica se a caixa de seleção do componente está marcada ou não. Essa propriedade deve ser utilizada quando propriedade ShowCheckBoxes do ListBox estiver ativa; IsSelected: é um valor booleano que indica se o componente está selecionado ou não. TextAlign: alinhamento do texto principal; Text: texto que será exibido do item da lista;

20 20 ItemData: Os itens podem apresentar ícones e imagens. Para tal, devemos alterar essas propriedades. Veja o resultado na Figura 30: Acessory: ícone que será usado no item, ou seja, tipo de marcação que poderá ser visualizada quando determinado item for selecionado. Opções: acheckmark, adetail, amore e anone; Bitmap: imagem que será exibida; Detail: texto secundário do item que fica abaixo do Text; Text: texto que será exibido do item da lista. Essa propriedade é a mesma apresentada fora do ItemData. Observação: na imagem apresentada na Figura 30, cada um dos itens está utilizando um valor diferente na propriedade Accessory. Figura 30: Opções da lista com a propriedade ItemData TrackBar Aba: Standard. O TrackBar é um componente que pode ser utilizado para que o usuário informe um valor numérico real movimentando uma barra linear. Figura 31: TrackBar. Propriedades: Frequency: se estiver em 0, o cursor se move livremente. Pode-se definir outro valor para que o cursor se movimente apenas em múltiplos desse número. Para fazer uma barra de números inteiros, utilize o valor 1; Min: valor numérico quando o cursor estiver totalmente à esquerda da barra; Max: valor numérico quando o cursor estiver totalmente à direita da barra; Value: valor da posição do cursor, no intervalo [Min, Max];

21 21 2. Componentes gráficos Apresentaremos aqui alguns componentes para exibir imagens, gráficos e sites em seus aplicativos Image Aba: Shapes. Permite armazenar e exibir imagens. Figura 32: Image. Para exibir uma imagem, ainda em tempo de execução, selecione o Image, procure pela propriedade MultiResBitmape clique no botão com os três pontinhos. Na janela que apareceu clique sobre o botão Fill all from file e, em seguida, escolha uma imagem que será utilizada para preencher o Image. Figura 33: Inserir uma imagem. Propriedades: WrapMode: propriedade altera a posição ou proporção da imagem em relação ao Image. A imagem pode ficar centralizada (iwcenter), no canto superior esquerdo (iworiginal), esticada (iwstretch), ocupando todo o componente, ou desenhada repetidas vezes (iwtile); Bitmap: permite armazenar uma imagem. A propriedade Bitmap não está no Object Inspector e deve ser manipulada diretamente em seu código-fonte. Para tal, devemos associar uma imagem utilizando um dos métodos apresentados a seguir: Assign: esse método recebe como parâmetro um Bitmap que será exibido no Image. Normalmente utilizado para exibir uma imagem capturada pela câmera ou gerada por algum algoritmo;

22 22 LoadFromFile: esse método recebe como parâmetro um texto com o caminho de uma imagem salva no dispositivo. Normalmente utilizado para exibir imagens previamente existentes. No Android a pasta raiz não é C:\, mas /sdcard/. Para acessar o cartão de memória externo, utilize /storage/extsdcard/ TChart Aba: TeeChart Lite. Esse componente permite desenhar gráficos de diversos tipos, como linhas, barras, colunas, pizza etc. Figura 34: TChart. Como exemplo, vamos criar um gráfico de linhas, adicionando uma nova série ao componente. Dê um duplo clique sobre o TChart para abrir a janela Editing Chart e clique sobre o botão Add. Escolha a opção Lines, configure o estilo das cores para Android e confirme. O processo pode ser repetido para adicionar novas curvas ao TChart. Figura 35: Editing Chart. Com a série criada, podemos configurar o ambiente do gráfico. A Figura 36 mostra como editar o título do gráfico, exibir o nome dos eixos, remover a legenda e o efeito 3D.

23 23 Figura 36: Configurações do ambiente. Para inserir as informações que será exibidas graficamente, não manipularemos diretamente o TChart, mas a Series inserida. Propriedade da Series: Clear: elimina as informações armazenadas na Series, dando a impressão de limpar o gráfico; Add: método que adiciona uma informação à Series, consequentemente deve ser executado diversas vezes para que o gráfico todo seja traçado. O primeiro parâmetro é um valor real (eixo Y). O segundo parâmetro é opcional e consiste em um texto (eixo X), uma vez que a abscissa pode ser uma escala de tempo, distância, nome do dia da semana ou sigla do estado em um gráfico de vendas. Veja alguns exemplos: O eixo X será numerado sequencialmente: Series1.Add(valor); Exibe os valores nos eixos X e Y: Series1.Add(sqr(x), FloatToStr(x)); Exibir o valor do lucro em Y e o nome do estado em X: Series1.Add(lucro, SP ). Veja um exemplo de como traçar uma curva y=sin(x) quando o usuário clicar sobre o Button1.

24 24 procedure TForm1.Button1Click(Sender: TObject); var x: real; Series1.Clear; // apaga a curva x := 0; // do valor inicial while x <= 2*pi do // até o valor final Series1.Add(sin(x),FloatToStr(x)); // adiciona um ponto x := x ; Figura 37: Função y=sin(x) no TChart. // próximo valor de x 2.3. WebBrowser Aba: Internet. Com esse componente podemos abrir páginas da internet em uma área do aplicativo. Métodos: GoBack: mostra a página anterior; GoForward: mostra a página seguinte; Navigate: acessa o endereço que deve ser passado por parâmetro. Por exemplo: WebBrowser1.Navigate(' AniIndicator Aba: Additional.

25 25 Esse componente é utilizado como representação gráfica ao usuário de que o aplicativo está aguardando ou processando alguma informação. Isso dá a impressão ao usuário de que o aplicativo não está travado. Propriedades Enabled: valor booleano que indica se a animação está habilitada ou não; Visible: valor booleano que define se o objeto está visível ou não. Para um bom efeito visual, recomenda-se que essas duas propriedades possuam sempre o mesmo valor True ou False. 3. Componentes não visuais Apresentaremos aqui alguns componentes que não aparecerão no formulário quando o programa for executado, mas faremos usos de suas propriedades e métodos Timer Aba: System. O Timer é utilizado quando desejamos que uma sub-rotina seja executada de tempos em tempos. Pode ser utilizado para fazer animações, leitura dos sensores etc. Evento: OnTime: evento que dispara o procedimento Timer1Time. Nesse procedimento você deverá informar o código-fonte do que deve ser feito. Propriedades: Enabled: valor booleano que indica se o componente fará a contagem do tempo ou não; Interval: valor inteiro que representa quantos milissegundos devem se passar para que o Timer execute novamente o procedimento Timer1Time LocationSensor Aba: Sensors. Esse componente permite que nossos aplicativos acessem os dados de posicionamento geográfico do dispositivo. Essas coordenadas podem ser obtidas pelo dispositivo utilizando o sinal de GPS, torres da operadora ou rede Wi-Fi.

26 26 Evento: OnLocationChanged: quando o dispositivo se desloca é chamado o procedimento LocationSensor1LocationChanged. Esse procedimento possui os parâmetros OldLocation e NewLocation, que contém as coordenadas geográficas do ponto atual do último registrado. Essas duas propriedades possuem os campos Latitude e Longitude. Propriedades: Active: valor booleano que indica se o sensor está ou não ativo; Veja um exemplo de um aplicativo que exibe em dois Labels a localização do dispositivo. A atualização é automática, quando o usuário se movimenta: procedure TForm1.LocationSensor1LocationChanged(Sender: TObject; const OldLocation, NewLocation: TLocationCoord2D); Label1.Text := 'Latitude: ' + FloatToStr(NewLocation.Latitude); Label2.Text := 'Longitude: ' + FloatToStr(NewLocation.Longitude); Figura 38: Exibindo a localização do dispositivo MotionSensor Aba: Sensors. Esse componente permite acessar as informações do movimento do dispositivo utilizando as informações do acelerômetro. A partir dos valores da aceleração nos eixos x, y e z é possível, por meio de integrações numéricas, obter a velocidade e o deslocamento do dispositivo no espaço. Propriedades: Active: valor booleano que indica se o sensor está ou não ativo; Sensor: essa propriedade possui as informações do acelerômetro. As componentes da aceleração podem ser obtidas, em m/s², utilizando os campos AccelerationX, AccelerationY e AccelerationZ. Veja um exemplo de um aplicativo que exibe em três Labels as componentes da aceleração medida pelo sensor. A atualização deve ser feita pelo componente Timer. O componente Switch deve habilitar/desabilitar o MotionSensor e, em seguida, o Timer.

27 27 procedure TForm1.Timer1Timer(Sender: TObject); Label1.Text := 'Aceleração X: ' + FloatToStr(MotionSensor1.Sensor.AccelerationX); Label2.Text := 'Aceleração Y: ' + FloatToStr(MotionSensor1.Sensor.AccelerationY); Label3.Text := 'Aceleração Z: ' + FloatToStr(MotionSensor1.Sensor.AccelerationZ); Figura 39: Exibindo as acelerações ActionList Aba: Standard. A ActionList permite criar uma lista de sub-rotinas para que os demais objetos possam acessá-las e executá-las. Essas sub-rotinas podem ser predefinidas ou criadas pelo programador. Inicialmente a ActionList está vazio. Para adicionar um procedimento à lista, dê um duplo clique sobre o componente para abrir a janela Editing Form1.ActionList1. Embora o uso mais comum seja para acessar rotinas predefinidas que realizam troca de páginas, acesso à câmera ou galeria de fotos, também é possível escrever um algoritmo de acordo com a necessidade em uma nova ação. Para criar uma nova ação: Selecione a opção New Action no menu para adicionar uma nova ação à lista. Figura 40: Criando uma nova ação.

28 28 Evento da ação: OnExecute: utilize o método criado para escrever o código-fonte da rotina. Para inserir uma nova ação predefinida: Selecione a opção New Standard Action no menu para adicionar uma nova ação à lista. Na janela Standard Action Classes selecione uma das ações disponíveis e clique no botão OK. Figura 41: Adicionando ações predefinidas. Selecione no Object Inspector a ação predefinida que está na ActionList e verifique as particularidades das propriedades e eventos de cada uma. Associando ações aos objetos: Uma vez que a ActionList possui todas as ações (novas e predefinidas) que serão utilizadas pelos componentes do aplicativo, devemos associar a propriedade Action com os componentes que irão disparar a respectiva ação da ActionList. Figura 42: Adicionando ações predefinidas. Veja no exemplo que o componente Button1 teve a ação TakePhotoFromCameraAction1 associada à propriedade Action. Assim, quando o usuário clicar sobre o Button1, o aplicativo da câmera será aberto para que o usuário utilize-o.

29 29 Capítulo 3 Exercícios resolvidos (para todos os gostos) Agora que conhecemos alguns poucos recursos disponíveis para programação de dispositivos móveis com o Delphi XE5, podemos fazer alguns exemplos de aplicativos que resolvem simples cálculos aos mais complexos, que podem acessar recursos como a câmera ou o GPS do smartphone. 1. Componentes Básicos do Delphi 1) Elabore um aplicativo para calcular o volume de uma esfera a partir do valor do raio digitado. Em um formulário, adicione um Button, um Edit e um Label. No evento OnClick do Button1, escreva o código que faz a leitura do valor do raio, calcula e exibe o volume da esfera, como apresentado a seguir: procedure TForm1. Button1Click(Sender: TObject); var r, v: real; r := StrToFloat(Edit1.Text); v := 4 / 3 * pi * exp(3*ln(r)); Label3.Text := 'Volume: ' + FloatToStr(v); Figura 43: Volume da esfera. 2) Elabore um aplicativo de uma calculadora simples que permita ao usuário escolher qual operação (soma, subtração, multiplicação ou divisão) será executada com os valores digitados. Cada operação deve ser realizada por um botão distinto. Vamos precisar de dois Edits, quatro botões e um Label para apresentar o resultado. Após configurar a propriedade Text desses componentes, vamos escrever o código-fonte de cada um deles. Note que para os botões da soma, subtração e multiplicação os códigos são muito semelhantes. Não se esqueça de impedir o cálculo da divisão por zero, informando ao usuário sobre o problema:

30 30 procedure TForm1.Button1Click(Sender: TObject); var a, b, c: real; a := StrToFloat(Edit1.Text); b := StrToFloat(Edit2.Text); c := a + b; Label1.Text := FloatToStr(c); procedure TForm1.Button2Click(Sender: TObject); var a, b, c: real; a := StrToFloat(Edit1.Text); b := StrToFloat(Edit2.Text); c := a - b; Label1.Text := FloatToStr(c); procedure TForm1.Button3Click(Sender: TObject); var a, b, c: real; a := StrToFloat(Edit1.Text); b := StrToFloat(Edit2.Text); c := a * b; Label1.Text := FloatToStr(c); procedure TForm1.Button4Click(Sender: TObject); var a, b, c: real; a := StrToFloat(Edit1.Text); b := StrToFloat(Edit2.Text); if b <> 0 then c := a / b; Label1.Text := FloatToStr(c); end else Label1.Text := 'Divisão por zero!!'; Figura 44: Calculadora.

31 31 3) Elabore um aplicativo que converte um valor de temperatura digitado em C, F ou K para C, F ou K. Vamos utilizar um Button, um Edit para digitar o valor, dois ComboBox para que o usuário escolha a unidade referente ao valor digitado e a unidade desejada. A resposta será exibida em um Label. Preencha igualmente a propriedade Items dos dois ComboBox com as três unidades de temperatura. O algoritmo consiste em converter a unidade do valor digitado para um padrão, por exemplo, C e em seguida converter esse valor de C para a unidade desejada. Lembre-se que o ComboBox possui as mesmas funcionalidades de um RadioGroup, dessa maneira utilizaremos a estrutura Caso para tratar das opções selecionadas. procedure TForm1.Button1Click(Sender: TObject); var valor, tempc, resp: real; opde, oppara: integer; valor := StrToFloat(Edit1.Text); opde := ComboBox1.ItemIndex; oppara := ComboBox2.ItemIndex; case opde of 0: tempc := valor; // C -> C (desnecessário) 1: tempc := (valor 32)*5/9; // F -> C 2: tempc := valor ; // K -> C // fim do case case oppara of 0: resp := tempc; // C -> C (desnecessário) 1: resp := tempc * 9/5 + 32; // C -> F 2: resp := tempc ; // C -> K // fim do case Label1.Text := FloatToStr(resp) + ' ' + ComboBox2.Items[ComboBox2.ItemIndex]; // para exibir a unidade Figura 45: Conversão de temperatura.

32 32 2. Navegador com o componente WebBrowser Vamos fazer um navegador para internet. A interface deve conter um ToolBar (com Align em altop) e um WebBrowser (com Align em alclient para ocupar o restante da tela). Sobre o ToolBar, adicione dois componentes do tipo Button (ambos com alleft) e um Edit (com alhorizontal). Configure a propriedade StyleLookUp do Button1 como PriorToolButton e a do Button2 como NextToolButton. Além disso, clique com o botão direito sobre o Edit1 e, em Add Item, escolha a opção TSearchEditButton. Seu formulário deverá se parecer com o da Figura 46. Figura 46: Interface do navegador. Para facilitar a digitação do endereço do site, altere o tipo do teclado do Edit1 indicando o valor vkturl na propriedade KeybordType. Para implementar os botões voltar e avançar do navegador utilize os métodos GoBack e GoForward do WebBrowser: procedure TForm1.Button1Click(Sender: TObject); WebBrowser1.GoBack; procedure TForm1.Button2Click(Sender: TObject); WebBrowser1.GoForward; Para abrir a página informada pelo usuário, vamos escrever o código do botão SerarchEditButton1, informando que o WebBrowser dever navegar para o endereço digitado no Edit. procedure TForm2.SearchEditButton1Click(Sender: TObject); WebBrowser1.Navigate(Edit1.Text);

33 33 Figura 47: Acessando um site. Nas situações em que a conexão estiver lenta, seria interessante informar ao usuário que o programa não travou, mas está esperando os dados da página. Para isso, adicione um componente AniIndicator com alinhamento alcenter e atribua o valor False na propriedade Visible. Vamos fazer a animação aparecer antes da requisição da página (alterando o código do SerarchEditButton1Click). O componente deverá ficar invisível quando o WebBrowser terminar de carregar a página (esse código dever ser escrito no evento OnDidFinishLoad). procedure TForm2.SearchEditButton1Click(Sender: TObject); AniIndicator1.Enabled := true; AniIndicator1.Visible := true; WebBrowser1.Visible := false; WebBrowser1.Navigate(Edit1.Text); procedure TForm2.WebBrowser1DidFinishLoad(ASender: TObject); AniIndicator1.Enabled := false; AniIndicator1.Visible := false; WebBrowser1.Visible := true; Figura 48: Esperando carregar o moodle...

34 34 3. Mostrando a localização do smartphone em um mapa Elabore um aplicativo que apresente em um mapa a localização geográfica do usuário. Caso o GPS não esteja ligado, o aplicativo deverá exibir a página principal da Mauá. Vamos utilizar um componente ToolBar que deverá servir de container para um Label e um Switch (ambos com alinhamento alleft). Sobre o formulário, acrescente um WebBrowser que deve preencher o restante da área, com alclient. Adicione ainda um LocationSensor que pode ficar em qualquer local, uma vez que não é um componente visível. Figura 49: Interface do aplicativo. O botão Switch será responsável por ligar e desligar o sensor de localização. Quando o sensor estiver desativado, o aplicativo abrirá a página da Mauá. Para configurar isso, deve-se codificar o evento OnSwitch: procedure TForm1.Switch1Switch(Sender: TObject); LocationSensor1.Active := Switch1.IsChecked; if not Switch1.IsChecked then WebBrowser1.Navigate(' Para exibir o mapa gerado pelo Google Maps devemos utilizar a url de busca e acrescentar a esse endereço alguns parâmetros, separados pelo caractere &. No nosso exemplo, vamos acrescentar como parâmetros: o que desejamos encontrar (q): informando as coordenadas geográficas latitude e longitude, separadas por uma vírgula; o tipo de mapa (t): terreno, foto do satélite ou hibrido; o nível de zoom (z): valor inteiro entre 1 e 21. Devemos tomar cuidado com a configuração de região definida no dispositivo móvel. Em alguns países, o separador decimal utilizado é o caractere ponto e em outros, como no Brasil, é a vírgula. Entretanto, ao enviar as coordenadas latitude e longitude para o Google Maps, devemos informar os valores numéricos utilizando o ponto como separador decimal. Para tal, devemos alterar a propriedade FormatSettings.DecimalSeparator antes e depois de utilizar instruções como o StrToFloat ou FloatToStr. Assim, considerando que o dispositivo móvel está no Campus da Mauá, em São Caetano do Sul, teremos o seguinte conteúdo da url que será apresentada no mapa:

35 35 ' Para garantir que o mapa seja atualizado quando o usuário se movimentar, vamos escrever o código-fonte no evento OnChangeLocation do LocationSensor. procedure TForm1.LocationSensor1LocationChanged(Sender: TObject; const OldLocation, NewLocation: TLocationCoord2D); var url: string; if LocationSensor1.Active then FormatSettings.DecimalSeparator := '.'; url := ' + FloatToStr(NewLocation.Latitude) + ',' + FloatToStr(NewLocation.Longitude) + '&t=h' + '&z=15'; WebBrowser1.Navigate(url); FormatSettings.DecimalSeparator := ','; Figura 50: Exibindo a localização no mapa.

36 36 A partir desse exemplo, podemos explorar um pouco mais o uso do Google Maps. Veja como os parâmetros podem ser utilizados: O parâmetro de busca q: endereço: 'q=praça Mauá, 1 - São Caetano do Sul'; CEP: 'q= '; Coordenadas latitude e longitude: 'q= , '; Neste caso, os dois valores utilizam o ponto como separador decimal e a vírgula para separar as coordenadas. Valores positivos representam Norte e Leste, enquanto que negativos são Sul e Oeste para a latitude e longitude, respectivamente. estabelecimento: 'q=instituto Mauá de Tecnologia'. O parâmetro do tipo do mapa h: mapa: 't=m'; satélite: 't=k'; híbrido: 't=h'; terreno: 't=p'. O parâmetro de zoom z deve ser um valor inteiro entre 0 e 21. Além disso, podemos traçar rotas de um ponto a outro. Para tal, não utilize o parâmetro de busca q, mas defina a localização (endereço, CEP, coordenadas etc.) dos parâmetros saddr (start address) e daddr (destination address). Podemos ainda definir o tipo de locomoção no parâmetro dirflg: carro: 'dirflg=d'; transporte público: 'dirflg=r'; a pé: 'dirflg=w'; bicicleta: 'dirflg=b' (em alguns locais ainda não disponível); evitar rodovias: 'dirflg=h'; evitar pedágios: 'dirflg=t'. Por exemplo, se quisermos almoçar no Shopping a pé, usamos a seguinte url: ' mauá de tecnologia&daddr=park shopping são caetano&dirflg=w' Veja outros parâmetros que podem enriquecer sua aplicação em: goo.gl/qevvwv. 4. Compartilhando fotos da câmera Observação: esta aplicação será executada corretamente no Emulador. Compile diretamente no dispositivo móvel ou, se compilar para o emulador, copie o arquivo de instalação apk para o dispositivo móvel para poder testar.

37 37 A interface deverá conter um ToolBar com três botões, um ActionList e um Image (alinhamento alclient e esticando a foto com WrapMode com o valor iwstretch). Os botões devem estar alinhados com alleft, alhorizcenter e alright. Defina a identidade visual deles alterando a propriedade StyleLookUp para cameratoolbutton, searchtoolbutton e actiontoolbutton, respectivamente, de modo a obter a seguinte interface: Figura 51: Interface do aplicativo. Primeira Parte: Botão Câmera Ao invés de criar todas as ações no ActionList e depois atribuir aos objetos que as executarão, faremos a criação diretamente nos objetos. Selecione o Button1 e clique sobre a seta da propriedade Action, selecione então New Standard Action Media Library TTakePhotoFromCameraAction. Figura 52: Adicionando ação de disparo da câmera no Button1. Ainda com o Button1 selecionado, abra a aba Events, expanda a opção Action e acesse o código-fonte de ondidfinishtaking com um duplo clique. O procedimento desse método é executado após o usuário finalizar a captura da foto, fazendo com que a foto obtida (e armazenada no parâmetro Image) seja exibida no componente Image1. procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap); Image1.Bitmap.Assign(Image); Segunda Parte: Botão Arquivo (Galeria) Selecione o Button2 e clique sobre a seta da propriedade Action, selecione então New Standard Action Media Library TTakePhotoFromLibraryAction.

38 38 Figura 53: Adicionando ação abrir galeria de imagens no Button2. Repita o processo para digitar o código do evento ondidfinishtaking dessa ação que irá apresentar no Image1 a foto escolhida da galeria que está no parâmetro Image: procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image:TBitmap); Image1.Bitmap.Assign(Image); Terceira Parte: Botão Compartilhar Selecione o Button3 e clique sobre a seta da propriedade Action, selecione então New Standard Action Media Library TShowShareSheetAction. Figura 54: Adicionando ação abrir galeria de imagens no Button2. Para a ação ShowShareSheetAction vamos enviar a foto que está no Image1 para o destinatário de uma aplicação qualquer de compartilhamento, como , Facebook, Whatsapp etc. Preencha o código do evento onbeforeexecute do ShowShareSheetAction. procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject); ShowShareSheetAction1.Bitmap.Assign(Image1.Bitmap);

39 39 Figura 55: Compartilhando foto.

40 40 Referências EMBARCADERO TECHNOLOGIES. RAD Studio: Mobile Tutorials Version XE Disponível em: <goo.gl/b0jybc> GOMES, D. C. A., KAWAMURA, J., SCALCO, R. Delphi XE Guia de Componentes. Apostila. São Caetano do Sul: EEM, GOMES, L. Sensor de localização de dispositivos móveis com Delphi XE5. Disponível em: <goo.gl/ockdrv>. Acesso em: PETERSON, R. Aplicativos mobile para Android e ios com Delphi XE5. In: II JTI-MS: JORNADA DE TECNOLOGIAS DA INFORMAÇÃO DE MATO GROSSO DO SUL, 2., 2013, Dourados. Minicurso. Disponível em: <goo.gl/ymwwuk>. Acesso em: