Aplicações Android como 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 Aplicações Android com o Delphi XE5 3 Sumário CAPÍTULO 1 – COMO UTILIZAR O EMULADOR DO ANDROID ............................................................................ 4 1. 1.1. 2. 2.1. 2.2. 2.3. 2.4. INTRODUÇÃO AO EMULADOR ........................................................................................................................... 4 INICIANDO O EMULADOR ................................................................................................................................. 4 CRIANDO UM NOVO PROJETO MOBILE NO DELPHI XE5 .......................................................................................... 6 COMPILANDO PARA O EMULADOR ANDROID........................................................................................................ 8 COMPILANDO PARA UM DISPOSITIVO ANDROID .................................................................................................... 8 COMPILANDO PARA UMA JANELA WINDOWS ....................................................................................................... 9 INSTALANDO A APLICAÇÃO EM UM DISPOSITIVO MÓVEL ....................................................................................... 10 CAPÍTULO 2 – COMPONENTES ........................................................................................................................ 11 1. 1.1. 1.2. 1.3. 1.4. 1.5. 1.6. 1.7. 1.8. 1.9. 1.10. 1.11. 2. 2.1. 2.2. 2.3. 2.4. 3. 3.1. 3.2. 3.3. 3.4. PRINCIPAIS COMPONENTES E SUAS PROPRIEDADES .............................................................................................. 11 BUTTON ..................................................................................................................................................... 12 EDIT .......................................................................................................................................................... 12 LABEL ........................................................................................................................................................ 13 SWITCH...................................................................................................................................................... 13 TABCONTROL .............................................................................................................................................. 14 TOOLBAR ................................................................................................................................................... 15 COMBOBOX ................................................................................................................................................ 15 MEMO....................................................................................................................................................... 16 STRINGGRID ............................................................................................................................................... 17 LISTBOX ..................................................................................................................................................... 18 TRACKBAR .................................................................................................................................................. 20 COMPONENTES GRÁFICOS .............................................................................................................................. 21 IMAGE ....................................................................................................................................................... 21 TCHART ..................................................................................................................................................... 22 WEBBROWSER ............................................................................................................................................ 24 ANIINDICATOR ............................................................................................................................................ 24 COMPONENTES NÃO VISUAIS .......................................................................................................................... 25 TIMER........................................................................................................................................................ 25 LOCATIONSENSOR ........................................................................................................................................ 25 MOTIONSENSOR.......................................................................................................................................... 26 ACTIONLIST ................................................................................................................................................ 27 CAPÍTULO 3 – EXERCÍCIOS RESOLVIDOS (PARA TODOS OS GOSTOS) .............................................................. 29 1. 2. 3. 4. COMPONENTES BÁSICOS DO DELPHI ................................................................................................................ 29 NAVEGADOR COM O COMPONENTE WEBBROWSER ............................................................................................ 32 MOSTRANDO A LOCALIZAÇÃO DO SMARTPHONE EM UM MAPA.............................................................................. 34 COMPARTILHANDO FOTOS DA CÂMERA............................................................................................................. 36 REFERÊNCIAS.................................................................................................................................................. 40 Aplicações Android com o Delphi XE5 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. 1.1. 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. Aplicações Android com o Delphi XE5 Para os exemplos apresentados neste material. escolha o modelo do dispositivo no campo Device. Aplicações Android com o Delphi XE5 .2 – API Level 17. no campo Target.768 x 1280: xhdpi). selecione a opção Use Host GPU no canto inferior direito. selecionamos Nexus 4 (4. foram utilizadas as seguintes configurações: em AVD Name. Use um nome simples. escolhemos Android 4. números ou símbolos. Você pode criar uma máquina virtual com as características que desejar.2. escolha um nome para o seu dispositivo. sem espaços.5 Figura 2: Criando um nova máquina virtual. apenas letras. Figura 3: Parâmetros da nova máquina virtual.7’’. para memória recomenda-se sua alteração para RAM: 768 e VM Heap: 64. Figura 4: Iniciando o emulador. como mostra o exemplo apresentado na Figura 5. Aplicações Android com o Delphi XE5 . FireMonkey Mobile Application – Delphi. Figura 5: Tela inicial do emulador do Android. Espere carregar. por fim. Criando um novo projeto mobile no Delphi XE5 Abra o Delphi XE5 no menu Iniciar e crie um novo projeto. clique em Start e em seguida em Launch. Todas as janelas de configurações serão minimizadas e o emulador será exibido. depois em New e. 2.6 Selecione o dispositivo virtual criado. clicando no menu File no canto superior esquerdo. recomenda-se o uso do tipo Blank Application. Figura 7: Escolha do modelo do projeto mobile. uma das opções dentre os modelos de projetos mobile disponibilizados. Aplicações Android com o Delphi XE5 . no caso Google Nexus 4. ajuste o modelo visual do smartphone para o mesmo tipo de dispositivo escolhido anteriormente. Em seguida. 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.7 Figura 6: Criando novo projeto mobile. Figura 8: escolhendo o modelo visual do smartphone. Para desenvolver uma aplicação mobile completamente personalizada. Compilando para um dispositivo Android Antes de conectar o aparelho no computador através do cabo USB.1 32 bit. clique em Target e por fim dê dois cliques no emulador criado anteriormente que já se encontra sincronizado. Caso o emulador não apareça automaticamente. Com isso. no exemplo apresentado pela Figura 9.8 2. em seguida abra a aba Android – Android SDK 22. Depois. Figura 10: Habilitando a Depuração de USB no celular. Figura 9: Escolhendo o emulador.1.0. 2. 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.2. clique com o botão direito em Target e em Refresh. você terá ativado a opção de desenvolvedor do seu celular. clique na janela Project Manager no canto superior direito no sinal de “+” ao lado de Target Plataforms. Compilando para o emulador Android Para estabelecer uma conexão entre o emulador e o Delphi. o “Ex1 (5554)”. clique em Configurações do aparelho. Aplicações Android com o Delphi XE5 . volte para Configurações e em Opções de Desenvolvedor ou Programador ative a opção Depuração de USB. como mostrado na Figura 12. como o acesso aos sensores. em seguida clique com o botão direito sobre o Target Plataforms e escolha o item Add Plataform. em seguida abra a aba Android – Android SDK 22. entrada de dados via teclado. Uma alternativa para fazer os primeiros testes.1 32 bit. Mas lembre-se dos limites dessa plataforma que não contemplas os principais recursos do emulador ou do dispositivo conectado. o “GT-I9505”. clique em Target e por fim dê dois cliques no dispositivo conectado que já se encontra sincronizado. consiste em definir uma janela do Windows como Target da compilação. entre outros. Selecione a plataforma 32-bits Windows.0. câmera. de leiaute dos componentes.3. eventuais cálculos e exibição dos resultados. Figura 11: Escolhendo o dispositivo conectado. 2. 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. Para criar esse ambiente para os testes preliminares do seu aplicativo. Figura 12: Adicionando uma janela Windows. Observação: o driver do dispositivo Android deve ser previamente instalado no computador. clique no sinal de “+” ao lado de Target Plataforms. Aplicações Android com o Delphi XE5 . no exemplo apresentado pela Figura 11.9 Na janela Project Manager do Delphi clique no sinal de “+” ao lado de Target Plataforms. Basta enviar o arquivo MeuAplicativo.apk para o dispositivo móvel e. utilizando um gerenciador de arquivos. podemos acessar o arquivo de instalação que está na pasta bin. Para poder instalar o aplicativo no smartphone com Android de qualquer pessoa.10 2. 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 (. localize o item Segurança.. como mostrado na Figura 13. como mostra a Figura 14 com o exemplo do projeto denominado MeuAplicativo. em seguida. Figura 14: O arquivo de instalação . Figura 13: Autorizando os aplicativos em smartphones. Aplicações Android com o Delphi XE5 . é necessário acessar as Configurações e.apk) que pode ser copiado para o dispositivo com o sistema operacional Android (via cabo ou enviado por e-mail) e instalado. localizar o arquivo apk e instalá-lo.apk. Habilite a opção Fontes Desconhecidas. A partir da pasta onde o projeto foi gravado.4. ele apenas terá o ícone de uma câmera. for atribuído o valor cameratoolbutton à propriedade StyleLoopUp de um botão. 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. Para evitar ter que copiar as imagens dos ícones ou formatar linhas e cores dos componentes. Figura 16: Valores da propriedade StyleLoopUp de um botão. sendo executado em um dispositivo com o sistema operacional Android ou iOS. podemos alterar a propriedade StyleLookUp. 1. Aplicações Android com o Delphi XE5 .11 Capítulo 2 – Componentes Neste capítulo serão apresentados alguns dos componentes que podem ser utilizados nas aplicações. além de exemplos de aplicações simples para garantir um melhor e mais completo entendimento. 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. presente na maioria dos componentes visuais que utilizaremos. iOS Android A Figura 16 mostra alguns exemplos de ícones associados à propriedade StyleLoopUp do botão. suas principais propriedades. você deverá implementar o código para que a câmera seja acessada. A Figura 15 mostra diferentes identidades visuais para um botão que possui o valor cameratoolbutton associado à propriedade StyleLookUp. actiontoolbutton backtoolbutton bookmarkstoolbutton cameratoolbutton cleareditbutton composetoolbutton detailstoolbutton infotoolbutton nexttoolbutton priortoolbutton refreshtoolbutton searchtoolbutton Note que se. por exemplo. Cada componente terá características visuais distintas. Figura 15: Identidade visual definida pela propriedade StyleLookUp. vktNumberPad: Teclado para digitar valores numéricos.com” possuem botão próprio para facilitar a digitação. por exemplo. ATENÇÃO!!! Para o componente mobile a propriedade não se chama mais “Caption”! StyleLookUp: determina a aparência do componente. Propriedades: Text: texto que será exibido no componente. Caixa de edição. vktEmailAddress: Teclado para digitar endereços de e-mail.12 1. Edit Aba: Standard.” e “. o texto que o usuário digitar será substituído por caracteres como.2. Figura 17: Button. Figura 18: Edit. Aplicações Android com o Delphi XE5 . vktURL: Teclado para digitar endereços de sites.1.com” possuem botão próprio para facilitar a digitação. Símbolos como “www. “*” ou “”. Símbolos como “@” e “. onde serão inseridos os dados de entrada de texto fornecidos pelo usuário. Password: quando habilitado. KeyBoardType – tipo do teclado que será exibido quando o usuário clicar sobre o Edit. vktPhonePad: Teclado para digitar telefones. Button Aba: Standard. Botão que receberá o procedimento ou função a ser codificado com sua ação específica. Propriedades: Text: texto digitado pelo usuário. Veja alguns dos tipos de teclado que podem ser utilizados: vktDefault: Teclado padrão do sistema. 1. vktDefault vktEmailAddress vktURL vktNumberPad vktPhonePad 1. Switch Aba: Standard. Figura 20: Label. Componente utilizado para exibir textos na interface do aplicativo. ATENÇÃO!!! Para o componente mobile a propriedade não se chama mais “Caption”! StyleLookUp: determina a aparência do componente. Aplicações Android com o Delphi XE5 . Label Aba: Standard. Componente utilizado para indicar se alguma opção do aplicativo está ou não ativa. Propriedades: Text: propriedade que contém o texto que será exibido no Label. Propriedades: IsChecked: é um valor booleano que indica se o componente está ligado ou não.3. 1.13 Figura 19: Tipos de teclado.4. 5. Aplicações Android com o Delphi XE5 . se estiverem visíveis. Cada TabItem é um componente distinto. inferior (tpBottom). TabControl Aba: CommonControls. 1. troque a propriedade Align para a opção AlClient. aplicações que usam TabControl usa toda a tela para mostrar as páginas. Para isso. TabIndex: indica qual aba está ativa no momento. o texto de cada TabItem é exibido no TabControl. o TabControl pode ocultar qualquer indicação das abas (tpNone) de maneira que a aba ativa seja especificada via código. As páginas podem ser representadas apenas por pontos na interface (tpDots). clique com o botão direito sobre o componente e escolha a opção Items Editor. Eventuais alterações devem ser aplicadas a cada TabItem criado. alterando a propriedade TabIndex. Adicione a quantidade de TabItem que desejar clicando em Add Item. Adicione-o no formulário e depois de posicioná-lo corretamente.14 Figura 21: Switch. Nesses casos. Além disso. Propriedade do TabItem: Text: altera o texto de cada TabItem. começando a contagem a partir do número zero. TabPosition: usada para escolher qual posição que deseja que suas abas estejam. StyleLookUp: determina a aparência do componente. como na parte superior (tpTop). Propriedades do TabControl: Align: normalmente. Muito utilizado para organizar os demais componentes nas abas separadas por assunto. associado ao TabControl. Componente que propicia a criação de abas. Figura 22: TabControl. Isso pode dar a impressão ao usuário que o aplicativo possui diversos formulários. Propriedades: StyleLookUp: determina a aparência do componente. Figura 24: ComboBox. podendo selecionar várias opções. Caso nenhum item esteja selecionado. Serve como uma barra de ferramentas alinhada geralmente no topo ou na parte inferior da interface do aplicativo.6. um Label e um Button foram colocados sobre um ToolBar. ToolBar Aba: Standard. a propriedade vale -1. 1. Propriedades: ItemIndex: valor inteiro que representa qual dos itens foi selecionado pelo usuário. Assim. A propriedade StyleLookUp. com botões que representam atalhos ou maneiras de acessar a funcionalidade embutida em sua aplicação. o segundo 1 e assim por diante. ComboBox Aba: Standard. Trata-se de uma caixa de opções com uma lista pré-definida. correspondem também a itens do menu em um aplicativo e dá ao usuário acesso direto aos comandos do aplicativo. Aplicações Android com o Delphi XE5 . foi alterada para ToolLabel e o botão teve a mesma propriedade alterada para AddToolButton. Possui as principais propriedades do RadioGroup. O primeiro item possui valor 0. No exemplo apresentado na Figura 23. Exemplo: O ToolBar está atuando como um container para os demais objetos. Figura 23: ToolBar. se a propriedade Align do Label for alterada para AlCenter. Normalmente. o Label será centralizado na ToolBar.7.15 1. Figura 25: Preenchimento da propriedade Items. Selecione as reticências no espaço em branco ao lado de Items e. Atenção!! Para apagar o Memo não se usa Memo1. Propriedade de Lines: Count: valor inteiro que representa a quantidade de linhas do Memo. Esse texto será adicionado após a última linha existente. Métodos de Lines: Add: possui um texto que é passado por parâmetro.Clear. Clear: elimina todas as linhas do Memo. As linhas podem ser manipuladas pela propriedade Lines. na janela que abrirá. cuja posição inicial é 0.8. Delete: remove a linha que foi informada via parâmetro (valor inteiro correspondente ao número da linha).16 Items: usado para definir quais as opções que aparecerão na sua lista. Usado para exibir um texto em linhas distintas. manipuladas de forma independente. Memo Aba: Standard. SaveToFile: o conteúdo das linhas do Memo será salvo em um arquivo texto cujo caminho é dado pelo parâmetro desse método. 1. escreva em cada linha uma opção. clique em OK. Essa propriedade permite acessar cada uma das linhas como um vetor de textos. Por fim. Aplicações Android com o Delphi XE5 . é . begin Memo1. Memo1.Lines.Media'). 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. Memo1.”.csv (comma-separated values). Figura 26: Dados exportados pelo aplicativo abertos no Excel. Aplicações Android com o Delphi XE5 .Media”.' + FloatToStr(media[i])). procedure TForm1. armazenadas em dois vetores globais. 1. Embora o arquivo possua apenas dados de texto. normalmente. No Android a pasta raiz não é C:\. separados pelo caracteres “. StringGrid Aba: Grids.Lines.csv'). 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.Add('RA.Lines. utilize /storage/extSdCard/.Button2Click(Sender: TObject).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.Lines. Para acessar o cartão de memória externo. Note que esse arquivo possui a estrutura “RA. for i := 1 to 40 do Memo1.Clear.9.Add(RA[i] + '. preenchidos previamente.SaveToFile('/sdcard/medias.csv'). mas /sdcard/. var i: Integer. end. ShowMessage('Notas exportadas em: /sdcard/medias. sua extensão. clicando com o botão direito sobre o componente. Estes dados podem ser.18 O StringGrid permite a entrada ou exibição de dados na forma de texto. no caso. Na janela Items Designer. Atenção! Não existe a propriedade ColCount. destacado em cinza. Para adicionar itens à sua lista. As colunas StringColumns possuem um cabeçalho (header). que não faz parte da contagem de células. que devem ser adicionadas em tempo de desenvolvimento. vetores ou matrizes na forma de uma tabela. O componente se comporta com um contêiner de colunas. 1. Há uma diferença significativa entre o StringGrid para o dispositivo móvel e da aplicação para Windows. ListBox Aba: CommonControls. Pode ser para saber o número de linhas ou definir essa quantidade. de cor cinza. somente lida. Essa propriedade não pode ser alterada pelo código. RowCount: valor inteiro que armazena o número de linhas dos StringColumns. Add Item e TStringColumn. Esse cabeçalho pode ser exibido ou não. o primeiro possui índice 0. ShowHeader: valor lógico que indica se o cabeçalho será ou não exibido. Essa propriedade substitui o goEditing.10. a coluna e a linha da tabela. escolha a opção TListBoxItem e clique no botão Add Item quantas vezes forem necessárias. Aplicações Android com o Delphi XE5 . Usado para apresentar uma lista de opções. O cabeçalho não faz parte da contagem de células. clique com o botão direito sobre o componente e selecione Items Editor. respectivamente. Propriedades do StringGrid: Cells: representa uma matriz de strings cujos índices são. Assim como todos os componentes que possuem mais do que um item. ColumnCount: valor inteiro que armazena o número de colunas do StringGrid. Propriedade do StringColumn: Header: texto que será exibido na primeira linha. se estiver visível. Figura 27: Adicionando colunas no StringGrid. a primeira linha e a primeira coluna possuem o índice 0. ReadOnly: valor lógico que indica se as células poderão ser editadas ou não. normalmente. IsSelected: é um valor booleano que indica se o componente está selecionado ou não. O ListBox pode ficar transparente se o valor transparentlistboxstyle for selecionado. ListBoxGroupHeader e ListBoxGroupFooter: IsChecked: é um valor booleano que indica se a caixa de seleção do componente está marcada ou não. Propriedades do ListBoxItem. os itens serão exibidos em ordem alfabética. Organize a posição do cabeçalho e do rodapé para os extremos da lista. Para tal. ListBoxGroupHeader e ListBoxGroupFooter) separadamente. MultiSelect: propriedade booleana que indica se mais do que um item pode ser selecionado por vez. altere a opção TListBoxItem para TListBoxGroupHeader ou TListBoxGroupFooter e clique em Add Item. Figura 29: ListBoxGruopHeader e ListBoxGruopFooter. como mostra a Figura 29. ShowCheckBoxes: mostra caixas de seleção ao lado dos itens. Veja as propriedades desses objetos: Propriedades do ListBox: Sorted: quando o aplicativo for executado. Essa propriedade deve ser utilizada quando propriedade ShowCheckBoxes do ListBox estiver ativa. Após fechar a janela. Existem situações em que seria interessante adicionar um cabeçalho e/ou um rodapé ao redor dos itens. TextAlign: alinhamento do texto principal. Text: texto que será exibido do item da lista. é possível configurar as propriedades do ListBox e de cada um dos itens (ListBoxItem. StyleLookUp: determina a aparência do componente. Aplicações Android com o Delphi XE5 .19 Figura 28: ListBox. permitindo com que o componente se parece com um CheckListBox. Figura 31: TrackBar.11. no intervalo [Min. O TrackBar é um componente que pode ser utilizado para que o usuário informe um valor numérico real movimentando uma barra linear. ou seja. Para fazer uma barra de números inteiros. TrackBar Aba: Standard. Propriedades: Frequency: se estiver em 0. devemos alterar essas propriedades. Para tal. Text: texto que será exibido do item da lista. Detail: texto secundário do item que fica abaixo do Text. 1. aMore e aNone. Aplicações Android com o Delphi XE5 . cada um dos itens está utilizando um valor diferente na propriedade Accessory. aDetail. Observação: na imagem apresentada na Figura 30. Opções: aCheckmark. Essa propriedade é a mesma apresentada fora do ItemData. tipo de marcação que poderá ser visualizada quando determinado item for selecionado. Max]. Bitmap: imagem que será exibida. Value: valor da posição do cursor. Max: valor numérico quando o cursor estiver totalmente à direita da barra. Veja o resultado na Figura 30: Acessory: ícone que será usado no item. Min: valor numérico quando o cursor estiver totalmente à esquerda da barra. o cursor se move livremente. Pode-se definir outro valor para que o cursor se movimente apenas em múltiplos desse número. Figura 30: Opções da lista com a propriedade ItemData. utilize o valor 1.20 ItemData: Os itens podem apresentar ícones e imagens. 1. procure pela propriedade MultiResBitmape clique no botão com os três pontinhos. gráficos e sites em seus aplicativos. 2. selecione o Image. escolha uma imagem que será utilizada para preencher o Image. esticada (iwStretch). A propriedade Bitmap não está no Object Inspector e deve ser manipulada diretamente em seu código-fonte. Permite armazenar e exibir imagens. ainda em tempo de execução. Normalmente utilizado para exibir uma imagem capturada pela câmera ou gerada por algum algoritmo. Aplicações Android com o Delphi XE5 . no canto superior esquerdo (iwOriginal). 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. ocupando todo o componente. A imagem pode ficar centralizada (iwCenter). Componentes gráficos Apresentaremos aqui alguns componentes para exibir imagens. Para exibir uma imagem. Figura 32: Image. Para tal. ou desenhada repetidas vezes (iwTile). Image Aba: Shapes. Na janela que apareceu clique sobre o botão Fill all from file e. Bitmap: permite armazenar uma imagem.21 2. Figura 33: Inserir uma imagem. em seguida. Propriedades: WrapMode: propriedade altera a posição ou proporção da imagem em relação ao Image. Normalmente utilizado para exibir imagens previamente existentes. vamos criar um gráfico de linhas. como linhas. Aplicações Android com o Delphi XE5 . mas /sdcard/. pizza etc. exibir o nome dos eixos.22 LoadFromFile: esse método recebe como parâmetro um texto com o caminho de uma imagem salva no dispositivo. remover a legenda e o efeito 3D. Para acessar o cartão de memória externo. utilize /storage/extSdCard/. O processo pode ser repetido para adicionar novas curvas ao TChart. No Android a pasta raiz não é C:\. Figura 34: TChart. Dê um duplo clique sobre o TChart para abrir a janela Editing Chart e clique sobre o botão Add. colunas. A Figura 36 mostra como editar o título do gráfico.2. Com a série criada. Escolha a opção Lines. Figura 35: Editing Chart. configure o estilo das cores para Android e confirme. 2. TChart Aba: TeeChart Lite. adicionando uma nova série ao componente. podemos configurar o ambiente do gráfico. Como exemplo. Esse componente permite desenhar gráficos de diversos tipos. barras. Exibe os valores nos eixos X e Y: Series1. nome do dia da semana ou sigla do estado em um gráfico de vendas. distância. Veja um exemplo de como traçar uma curva y=sin(x) quando o usuário clicar sobre o Button1. dando a impressão de limpar o gráfico.Add(valor). O primeiro parâmetro é um valor real (eixo Y). FloatToStr(x)). Veja alguns exemplos: O eixo X será numerado sequencialmente: Series1. não manipularemos diretamente o TChart.Add(lucro. O segundo parâmetro é opcional e consiste em um texto (eixo X). mas a Series inserida. consequentemente deve ser executado diversas vezes para que o gráfico todo seja traçado.Add(sqr(x). uma vez que a abscissa pode ser uma escala de tempo. Aplicações Android com o Delphi XE5 . Para inserir as informações que será exibidas graficamente.23 Figura 36: Configurações do ambiente. Add: método que adiciona uma informação à Series. Exibir o valor do lucro em Y e o nome do estado em X: Series1. Propriedade da Series: Clear: elimina as informações armazenadas na Series. ‘SP’). Navigate('www. Métodos: GoBack: mostra a página anterior. // adiciona um ponto x := x + 0.Add(sin(x).Button1Click(Sender: TObject). 2. Com esse componente podemos abrir páginas da internet em uma área do aplicativo. GoForward: mostra a página seguinte.FloatToStr(x)).br').3. // apaga a curva x := 0. Aplicações Android com o Delphi XE5 . Por exemplo: WebBrowser1.24 procedure TForm1. var x: real.Clear. Navigate: acessa o endereço que deve ser passado por parâmetro. begin Series1. // próximo valor de x end.maua.4. end. // do valor inicial while x <= 2*pi do // até o valor final begin Series1.01. AniIndicator Aba: Additional. WebBrowser Aba: Internet. Figura 37: Função y=sin(x) no TChart. 2. Esse componente permite que nossos aplicativos acessem os dados de posicionamento geográfico do dispositivo. Aplicações Android com o Delphi XE5 . O Timer é utilizado quando desejamos que uma sub-rotina seja executada de tempos em tempos. Evento: OnTime: evento que dispara o procedimento Timer1Time. LocationSensor Aba: Sensors. Propriedades Enabled: valor booleano que indica se a animação está habilitada ou não. Componentes não visuais Apresentaremos aqui alguns componentes que não aparecerão no formulário quando o programa for executado. Propriedades: Enabled: valor booleano que indica se o componente fará a contagem do tempo ou não. recomenda-se que essas duas propriedades possuam sempre o mesmo valor True ou False.1. leitura dos sensores etc. 3.25 Esse componente é utilizado como representação gráfica ao usuário de que o aplicativo está aguardando ou processando alguma informação. torres da operadora ou rede Wi-Fi. Pode ser utilizado para fazer animações. Timer Aba: System. Isso dá a impressão ao usuário de que o aplicativo não está travado.2. Para um bom efeito visual. 3. Nesse procedimento você deverá informar o código-fonte do que deve ser feito. 3. Essas coordenadas podem ser obtidas pelo dispositivo utilizando o sinal de GPS. Interval: valor inteiro que representa quantos milissegundos devem se passar para que o Timer execute novamente o procedimento Timer1Time. mas faremos usos de suas propriedades e métodos. Visible: valor booleano que define se o objeto está visível ou não. Text := 'Longitude: ' + FloatToStr(NewLocation. 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. Propriedades: Active: valor booleano que indica se o sensor está ou não ativo. const OldLocation. As componentes da aceleração podem ser obtidas. Label2. o Timer. Veja um exemplo de um aplicativo que exibe em dois Labels a localização do dispositivo.Text := 'Latitude: ' + FloatToStr(NewLocation. NewLocation: TLocationCoord2D).26 Evento: OnLocationChanged: quando o dispositivo se desloca é chamado o procedimento LocationSensor1LocationChanged.3. utilizando os campos AccelerationX. em seguida. MotionSensor Aba: Sensors. y e z é possível.Longitude).LocationSensor1LocationChanged(Sender: TObject. 3. em m/s². AccelerationY e AccelerationZ. obter a velocidade e o deslocamento do dispositivo no espaço. A atualização é automática. A atualização deve ser feita pelo componente Timer.Latitude). que contém as coordenadas geográficas do ponto atual do último registrado. O componente Switch deve habilitar/desabilitar o MotionSensor e. Figura 38: Exibindo a localização do dispositivo. quando o usuário se movimenta: procedure TForm1. begin Label1. Propriedades: Active: valor booleano que indica se o sensor está ou não ativo. Sensor: essa propriedade possui as informações do acelerômetro. Veja um exemplo de um aplicativo que exibe em três Labels as componentes da aceleração medida pelo sensor. Esse procedimento possui os parâmetros OldLocation e NewLocation. Essas duas propriedades possuem os campos Latitude e Longitude. por meio de integrações numéricas. Aplicações Android com o Delphi XE5 . end. AccelerationZ). acesso à câmera ou galeria de fotos.27 procedure TForm1.Text := 'Aceleração Z: ' + FloatToStr(MotionSensor1. dê um duplo clique sobre o componente para abrir a janela Editing Form1. 3. Essas sub-rotinas podem ser predefinidas ou criadas pelo programador.Sensor.Sensor. Inicialmente a ActionList está vazio.AccelerationY). Label3. Figura 40: Criando uma nova ação.4. end.Sensor. ActionList Aba: Standard. Aplicações Android com o Delphi XE5 . Figura 39: Exibindo as acelerações. Label2. Embora o uso mais comum seja para acessar rotinas predefinidas que realizam troca de páginas.Text := 'Aceleração Y: ' + FloatToStr(MotionSensor1. Para criar uma nova ação: Selecione a opção New Action no menu para adicionar uma nova ação à lista. begin Label1.Text := 'Aceleração X: ' + FloatToStr(MotionSensor1. A ActionList permite criar uma lista de sub-rotinas para que os demais objetos possam acessá-las e executá-las.AccelerationX).Timer1Timer(Sender: TObject). também é possível escrever um algoritmo de acordo com a necessidade em uma nova ação. Para adicionar um procedimento à lista.ActionList1. Na janela Standard Action Classes selecione uma das ações disponíveis e clique no botão OK. Assim. Figura 42: Adicionando ações predefinidas. devemos associar a propriedade Action com os componentes que irão disparar a respectiva ação da ActionList. Aplicações Android com o Delphi XE5 . Figura 41: Adicionando ações predefinidas.28 Evento da ação: OnExecute: utilize o método criado para escrever o código-fonte da rotina. 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. quando o usuário clicar sobre o Button1. Para inserir uma nova ação predefinida: Selecione a opção New Standard Action no menu para adicionar uma nova ação à lista. Veja no exemplo que o componente Button1 teve a ação TakePhotoFromCameraAction1 associada à propriedade Action. o aplicativo da câmera será aberto para que o usuário utilize-o. 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. adicione um Button.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. multiplicação ou divisão) será executada com os valores digitados. Vamos precisar de dois Edits. escreva o código que faz a leitura do valor do raio. quatro botões e um Label para apresentar o resultado.Text). v := 4 / 3 * pi * exp(3*ln(r)). Após configurar a propriedade Text desses componentes. podemos fazer alguns exemplos de aplicativos que resolvem simples cálculos aos mais complexos. end. vamos escrever o código-fonte de cada um deles. Figura 43: Volume da esfera. 2) Elabore um aplicativo de uma calculadora simples que permita ao usuário escolher qual operação (soma. Label3. v: real. Button1Click(Sender: TObject). calcula e exibe o volume da esfera. begin r := StrToFloat(Edit1. No evento OnClick do Button1. que podem acessar recursos como a câmera ou o GPS do smartphone. 1. como apresentado a seguir: procedure TForm1. Cada operação deve ser realizada por um botão distinto. Componentes Básicos do Delphi 1) Elabore um aplicativo para calcular o volume de uma esfera a partir do valor do raio digitado. informando ao usuário sobre o problema: Aplicações Android com o Delphi XE5 .Text := 'Volume: ' + FloatToStr(v). subtração. um Edit e um Label. var r. Em um formulário. procedure TForm1. c := a * b. b.Button2Click(Sender: TObject). Label1.Text). b := StrToFloat(Edit2.Text). procedure TForm1. var a. b := StrToFloat(Edit2. end. end.Button3Click(Sender: TObject). procedure TForm1.Text). c := a + b. Label1. c := a .Button1Click(Sender: TObject). c: real. begin a := StrToFloat(Edit1.Text). begin a := StrToFloat(Edit1.Text). b.Text). b := StrToFloat(Edit2. end.Text). var a. if b <> 0 then begin c := a / b. Label1. b. Label1. Aplicações Android com o Delphi XE5 . begin a := StrToFloat(Edit1. var a.Text := FloatToStr(c). Figura 44: Calculadora. c: real. var a.b. end else Label1. begin a := StrToFloat(Edit1.Text := FloatToStr(c).30 procedure TForm1. b.Text := FloatToStr(c).Text). end. c: real.Button4Click(Sender: TObject).Text := 'Divisão por zero!!'. c: real. b := StrToFloat(Edit2.Text := FloatToStr(c). // °C -> K end.ItemIndex.15. opPara := ComboBox2. opDe. // °C -> °C (desnecessário) 1: tempC := (valor–32)*5/9. Aplicações Android com o Delphi XE5 . // °F -> °C 2: tempC := valor – 273.Button1Click(Sender: TObject). procedure TForm1. °F ou K para °C. // °C -> °F 2: resp := tempC + 273.Text := FloatToStr(resp) + ' ' + ComboBox2.31 3) Elabore um aplicativo que converte um valor de temperatura digitado em °C. case opDE of 0: tempC := valor. opPara: integer. Figura 45: Conversão de temperatura. // para exibir a unidade end. // fim do case Label1. // K -> °C end.ItemIndex. var valor. // °C -> °C (desnecessário) 1: resp := tempC * 9/5 + 32. A resposta será exibida em um Label. tempC. um Edit para digitar o valor. °F ou K. Vamos utilizar um Button.Items[ComboBox2.Text). // fim do case case opPara of 0: resp := tempC.15. dessa maneira utilizaremos a estrutura Caso para tratar das opções selecionadas. resp: real.ItemIndex]. °C e em seguida converter esse valor de °C para a unidade desejada. dois ComboBox para que o usuário escolha a unidade referente ao valor digitado e a unidade desejada. Lembre-se que o ComboBox possui as mesmas funcionalidades de um RadioGroup. por exemplo. begin valor := StrToFloat(Edit1. opDe := ComboBox1. 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. begin WebBrowser1. clique com o botão direito sobre o Edit1 e. begin WebBrowser1. end. begin WebBrowser1. Figura 46: Interface do navegador.SearchEditButton1Click(Sender: TObject). procedure TForm2. procedure TForm1. Navegador com o componente WebBrowser Vamos fazer um navegador para internet. Além disso.Button2Click(Sender: TObject). Para facilitar a digitação do endereço do site. Para implementar os botões voltar e avançar do navegador utilize os métodos GoBack e GoForward do WebBrowser: procedure TForm1. altere o tipo do teclado do Edit1 indicando o valor vktURL na propriedade KeybordType.Button1Click(Sender: TObject). Seu formulário deverá se parecer com o da Figura 46.GoBack. em Add Item.GoForward. adicione dois componentes do tipo Button (ambos com alLeft) e um Edit (com alHorizontal). informando que o WebBrowser dever navegar para o endereço digitado no Edit. end. Sobre o ToolBar.Text). A interface deve conter um ToolBar (com Align em alTop) e um WebBrowser (com Align em alClient para ocupar o restante da tela). Para abrir a página informada pelo usuário. end. Aplicações Android com o Delphi XE5 .Navigate(Edit1.32 2. Configure a propriedade StyleLookUp do Button1 como PriorToolButton e a do Button2 como NextToolButton. escolha a opção TSearchEditButton. vamos escrever o código do botão SerarchEditButton1. Navigate(Edit1. mas está esperando os dados da página. Vamos fazer a animação aparecer antes da requisição da página (alterando o código do SerarchEditButton1Click).Enabled := true. seria interessante informar ao usuário que o programa não travou. Nas situações em que a conexão estiver lenta.Visible := false.WebBrowser1DidFinishLoad(ASender: TObject).Visible := false. WebBrowser1. adicione um componente AniIndicator com alinhamento alCenter e atribua o valor False na propriedade Visible.SearchEditButton1Click(Sender: TObject).Text). end. begin AniIndicator1. procedure TForm2.33 Figura 47: Acessando um site. AniIndicator1. WebBrowser1. procedure TForm2. WebBrowser1. Para isso..Visible := true. Figura 48: Esperando carregar o moodle.Enabled := false. Aplicações Android com o Delphi XE5 . begin AniIndicator1. O componente deverá ficar invisível quando o WebBrowser terminar de carregar a página (esse código dever ser escrito no evento OnDidFinishLoad). AniIndicator1.Visible := true.. end. o aplicativo abrirá a página da Mauá. Para tal. Para exibir o mapa gerado pelo Google Maps devemos utilizar a url de busca www. No nosso exemplo.maps. Quando o sensor estiver desativado. end. como no Brasil. Figura 49: Interface do aplicativo. deve-se codificar o evento OnSwitch: procedure TForm1.Switch1Switch(Sender: TObject). separadas por uma vírgula. O botão Switch será responsável por ligar e desligar o sensor de localização. acrescente um WebBrowser que deve preencher o restante da área. foto do satélite ou hibrido.Active := Switch1. com alClient. Para configurar isso. Devemos tomar cuidado com a configuração de região definida no dispositivo móvel.IsChecked then WebBrowser1. Em alguns países.34 3. o tipo de mapa (t): terreno. é a vírgula. o separador decimal utilizado é o caractere ponto e em outros. Entretanto.com/maps? e acrescentar a esse endereço alguns parâmetros. Assim. o nível de zoom (z): valor inteiro entre 1 e 21. em São Caetano do Sul. begin LocationSensor1. uma vez que não é um componente visível. vamos acrescentar como parâmetros: o que desejamos encontrar (q): informando as coordenadas geográficas latitude e longitude. Sobre o formulário. considerando que o dispositivo móvel está no Campus da Mauá.br'). Caso o GPS não esteja ligado. if not Switch1.google.maua. devemos informar os valores numéricos utilizando o ponto como separador decimal.Navigate('www.IsChecked. Adicione ainda um LocationSensor que pode ficar em qualquer local. devemos alterar a propriedade FormatSettings. o aplicativo deverá exibir a página principal da Mauá. ao enviar as coordenadas latitude e longitude para o Google Maps. teremos o seguinte conteúdo da url que será apresentada no mapa: Aplicações Android com o Delphi XE5 . separados pelo caractere &. 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. Vamos utilizar um componente ToolBar que deverá servir de container para um Label e um Switch (ambos com alinhamento alLeft).DecimalSeparator antes e depois de utilizar instruções como o StrToFloat ou FloatToStr. Aplicações Android com o Delphi XE5 . WebBrowser1. end.google. NewLocation: TLocationCoord2D).Navigate(url).maps. begin if LocationSensor1.573378&t=h&z=15' Para garantir que o mapa seja atualizado quando o usuário se movimentar. Figura 50: Exibindo a localização no mapa. FormatSettings. const OldLocation. vamos escrever o código-fonte no evento OnChangeLocation do LocationSensor.google.DecimalSeparator := '.35 'www.maps.com/maps?q=' + FloatToStr(NewLocation.' + FloatToStr(NewLocation.Active then begin FormatSettings. var url: string. url := 'www.-46.com/maps?q=-23.Longitude) + '&t=h' + '&z=15'.Latitude) + '.LocationSensor1LocationChanged(Sender: TObject.'.648283. end.DecimalSeparator := '. procedure TForm1.'. transporte público: 'dirflg=r'. não utilize o parâmetro de busca q.com/maps?saddr=instituto mauá de tecnologia&daddr=park shopping são caetano&dirflg=w' Veja outros parâmetros que podem enriquecer sua aplicação em: goo.648283.36 A partir desse exemplo. coordenadas etc. 4. a pé: 'dirflg=w'. Neste caso. O parâmetro do tipo do mapa h: mapa: 't=m'. satélite: 't=k'. respectivamente. bicicleta: 'dirflg=b' (em alguns locais ainda não disponível).) dos parâmetros saddr (start address) e daddr (destination address). CEP: 'q=09580-900'.-46. se quisermos almoçar no Shopping a pé. O parâmetro de zoom z deve ser um valor inteiro entre 0 e 21.google. Além disso. copie o arquivo de instalação apk para o dispositivo móvel para poder testar. podemos explorar um pouco mais o uso do Google Maps. mas defina a localização (endereço.São Caetano do Sul'. terreno: 't=p'. Por exemplo. 1 .gl/QEVVWv. os dois valores utilizam o ponto como separador decimal e a vírgula para separar as coordenadas.573378'. Compartilhando fotos da câmera Observação: esta aplicação será executada corretamente no Emulador. evitar pedágios: 'dirflg=t'. Aplicações Android com o Delphi XE5 . usamos a seguinte url: 'www. Coordenadas latitude e longitude: 'q=-23. Valores positivos representam Norte e Leste. evitar rodovias: 'dirflg=h'. se compilar para o emulador. Podemos ainda definir o tipo de locomoção no parâmetro dirflg: carro: 'dirflg=d'. enquanto que negativos são Sul e Oeste para a latitude e longitude.maps. Para tal. Veja como os parâmetros podem ser utilizados: O parâmetro de busca q: endereço: 'q=Praça Mauá. CEP. podemos traçar rotas de um ponto a outro. Compile diretamente no dispositivo móvel ou. estabelecimento: 'q=Instituto Mauá de Tecnologia'. híbrido: 't=h'. 37 A interface deverá conter um ToolBar com três botões. faremos a criação diretamente nos objetos. abra a aba Events. de modo a obter a seguinte interface: Figura 51: Interface do aplicativo.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap).Bitmap. respectivamente. selecione então New Standard Action → Media Library → TTakePhotoFromLibraryAction.Assign(Image). searchtoolbutton e actiontoolbutton. end. alHorizCenter e alRight. begin Image1. Selecione o Button1 e clique sobre a seta da propriedade Action. 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. um ActionList e um Image (alinhamento alClient e esticando a foto com WrapMode com o valor iwStretch). Defina a identidade visual deles alterando a propriedade StyleLookUp para cameratoolbutton. Figura 52: Adicionando ação de disparo da câmera no Button1. Aplicações Android com o Delphi XE5 . 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. procedure TForm1. Segunda Parte: Botão Arquivo (Galeria) Selecione o Button2 e clique sobre a seta da propriedade Action. Os botões devem estar alinhados com alLeft. selecione então New Standard Action → Media Library → TTakePhotoFromCameraAction. Ainda com o Button1 selecionado. expanda a opção Action e acesse o código-fonte de onDidFinishTaking com um duplo clique. 38 Figura 53: Adicionando ação abrir galeria de imagens no Button2.Assign(Image).Bitmap).Bitmap. Facebook. Terceira Parte: Botão Compartilhar Selecione o Button3 e clique sobre a seta da propriedade Action. Preencha o código do evento onBeforeExecute do ShowShareSheetAction. como e-mail. procedure TForm1. Whatsapp etc. begin Image1. end.Assign(Image1. begin ShowShareSheetAction1. então New Standard Action → Media Library → TShowShareSheetAction.Bitmap. Aplicações Android com o Delphi XE5 . 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). end.ShowShareSheetAction1BeforeExecute(Sender: TObject). Para a ação ShowShareSheetAction vamos enviar a foto que está no Image1 para o destinatário de uma aplicação qualquer de compartilhamento. selecione Figura 54: Adicionando ação abrir galeria de imagens no Button2. 39 Figura 55: Compartilhando foto. Aplicações Android com o Delphi XE5 . J.gl/YmwWuK>. R. Aplicativos mobile para Android e iOS com Delphi XE5. Acesso em: 03.2014. 2. Aplicações Android com o Delphi XE5 . São Caetano do Sul: EEM.2014.40 Referências EMBARCADERO TECHNOLOGIES.06. Disponível em: <goo.gl/ockDRv>. In: II JTI-MS: JORNADA DE TECNOLOGIAS DA INFORMAÇÃO DE MATO GROSSO DO SUL. L. PETERSON.06. C. R.2014 GOMES.. A. 2011. RAD Studio: Mobile Tutorials Version XE6. Minicurso. Sensor de localização de dispositivos móveis com Delphi XE5. GOMES. Dourados. Acesso em: 30. Apostila. 05. 2013. Disponível em: <goo.. Disponível em: <goo. KAWAMURA.gl/B0jYBC>.. Delphi XE – Guia de Componentes. 2014. D. SCALCO.06.