APLICATIVOS MOBILE PARA ANDROID E IOS COM DELPHI XE5

Transcrição

1 APLICATIVOS MOBILE PARA ANDROID E IOS COM DELPHI XE5 Ronnei Peterson

2 DICAS DE INSTALAÇÃO Caso você ainda não possua uma licença oficial utilize por 30 dias a versão Trial para os testes. Recomendamos a compra da licença do produto, pois somente com produtos licenciados que é permitido a geração de apps oficiais e comerciais, não é permitido adicionar aplicativos desenvolvidos em versões trial na Google Play ou na AppStore. BAIXANDO A VERSÃO TRIAL Acesse o site no menu Produtos escolha a opção FREE TRIALS Na próxima página escolha a Opção Trial Download no Delphi XE5 Na página de Seleção do Produto clique em Download no Produto Delphi XE5 Architect 30 Day trial 2 de 79

3 Crie uma conta ou entre com seu login e senha registrados na embarcadero O número de série chegará no seu , e também será necessário esse login e senha no primeiro uso do produto na ativação do registro do mesmo. 3 de 79

4 DICAS REFERENTE A BANCO DE DADOS Caso você já utilize o FIREBIRD em seu computador desmarque a opção de instalar o Interbase, para evitar conflitos, caso contrário mantenha a instalação completa, pois o interbase será útil no desenvolvimento de aplicativos com banco de dados. SDK DO ANDROID Marque as opções de instalar o SDK e o NDK do Android. 4 de 79

5 Aguarde o Final da Instalação, ela poderá ser um pouco demorada porque é necessário fazer o download de todos os arquivos da instalação. Acesse o Delphi XE5 complete o passo de registro do software, usando o número de série enviado em seu e o e senha registrados na embarcadero. Conhecendo a IDE do Delphi IDE (Integrated Development Environment), um ambiente integrado para desenvolvimento de software 5 de 79

6 Barra de Ferramentas Clicando com o botão direito sobre uma das barras de ferramentas aparecerá a lista de barra de ferramentas que estão ou podem ser adicionadas. Palheta Standard 6 de 79

7 Palheta responsável por criar novas units, abrir units existentes, salvar a unit atual, salvar tudo eadicionar ou remover units externas aos nossos projetos. Palheta Desktop Esta palheta serve para configurarmos o nosso ambiente de trabalho, já existem alguns modelos prontos, porém você pode personalizar seu ambiente de trabalho, com as janelas e posições das mesmas da forma que você preferir. Palheta View Responsável por Visualizar as units,formulários e alternar entre Visual (form) e Código (unit) Palheta Debug 7 de 79

8 Palheta Responsável pela Depuração do Projeto, ou seja, compilar, compilar e executar, pausar a depuração, fazer depuração linha a linha, entre outras opções de depuração. Veremos a função de cada uma dessas opções mais adiante. Tool Palette - Palheta de Ferramentas (Ctrl + Alt + P) Nesta palheta você encontrará as ferramentas necessárias para trabalhar, quando não estamos com nenhum projeto abertoa palheta de ferramentas mostrará os possíveis projetos que podem ser criados. Project Manager Gerenciador de Projetos (Ctrl +.Alt + F11) Nesta palheta você poderá gerenciar os projetos abertos, visualizando seus arquivos, plataforma que será usada para depuração (Windows, Mac, Ios..), adicionando e removendo novos arquivos ao projeto. 8 de 79

9 Structure Palheta de Estrutura dos componentes (Shift + Alt + F11) No exemplo abaixo eu inseri dois componentes no formulário e a palheta Estrutura mostrou como eles estão organizados, ou seja o Edit1 e o Memo1 estão dentro do Formulário Form2. Object Inspector Palheta Inspetor de Objetos (F11) Esta é uma das palhetas que teremos o maior contato durante o desenvolvimento, é através dela que acessaremos as propriedades e eventos do componente selecionado, no exemplo abaixo foi selecionado um Edit (caixa de entrada) e o object inspector está listando todas as propriedades do mesmo, na segunda imagem o object inspector está listando todos os eventos do Edit selecionado. 9 de 79

10 Menu View Através deste Menu você poderá abrir janelas e visualizar os atalhos para cada uma delas. Projetos, Units e Formulários 10 de 79

11 Um projeto é uma coletânea de arquivos necessários para que um programa possa funcionar, no Delphi existem diversos tipos de projetos, como por exemplo: VCL Forms Aplicattion Aplicação baseada em formulários VCL (Visual Component Library), biblioteca de componentes visuais, a VCL herda do Windows o visual de seus componentes, podendo inclusive serem modificados caso o tema do Windows seja modificado. Firemonkey Desktop Application Aplicação que pode ser usada em múltiplas plataformas desktop (Windows, Mac Os), com componentes redesenhados e estilizados. VCL Metropolis UI Application Aplicação baseada em VCL, porém com recursos visuais do tema Metropolis (Windows 8). Firemonkey Mobile Application Aplicação para dispositivos móveis, nesta versão do Delphi é possível criar aplicações para dispositivos com sistema operacional IOS (Apple) e dispositivos com sistema operacional Android. Entre outros projetos. 11 de 79

12 Firemonkey Mobile Application Este será o projeto que utilizaremos durante o mini-curso. Um projeto é uma coletânea de units e formulários para gerar uma aplicação. Uma unit (.pas) pode existir por si só. Um formulário depende de uma Unit (.pas) e de um arquivo (.dfm), a unit contém o código funcional da aplicação e arquivo dfm contém o código dos componentes visuais do formulário. Exemplo de um projeto Exemplo de uma unit que contém um formulário 12 de 79

13 Entendendo a estrutura de uma UNIT unit Unit2; //nome da Unit interface//bloco de interface responsável pelas declarações uses//declara as units (bibliotecas) que serão usadas System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants, FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls; Type //criação de novos tipos //Criando uma classe herdada da classe TFORM 13 de 79

14 TForm2 = class(tform) private { Private declarations } Public { Public declarations } end; var //variáveis globais a esta unit Form2: TForm2; implementation//bloco de implementação {$R *.dfm} //Área onde serão implementados os métodos, procedimentos e funções end.//indica o fim da unit Exemplo do dfm deste formulário 14 de 79

15 15 de 79

16 Um pouco da Delphi Language e conversão de sintaxe Como o foco de nosso curso são alunos que já tem um certo conhecimento em C ou Java, explanaremos aqui as principais diferenças de sintaxe entre as duas linguagens. Operadores + Soma - Subtração * Multiplicação / Divisão Comentários // comentário de uma linha (* Comentário em Bloco *) { Comentário em Bloco } 16 de 79

17 Em C Em Pascal Atribuição = := Comparação == = Estrutura condicional If (cont==3) { If (cont=3) Then Begin Estrutura condicional com else Laço de Repetição FOR } If (cont==3) { } else { } for (i=0;i<=3;i++) { } for (i=3;i>=0;i--) { } End; If (cont=3) Then Begin End else Begin End; for cont:=0 to 3 do Begin End; for cont:=3 downto 0 do Begin End; Laço de Repetição WHILE while( i <= 100 ) { While (i<=100) Do Begin End; } Módulo ou resto da Divisão If ((4 % 2) ==0) { printf("é par ); } If ((4 mod 2)=0) Then Begin Showmessage( é par ); End; Modularização: Funções e Procedimentos Procedimentos Em C 17 de 79

18 void soma() { } Em Pascal Procedure Soma; Begin End; Funções Em C Int soma() { return 30; // sai da função nesta linha e retorna 30 } Em Pascal Function soma:integer; Begin Result:=30; //armazena 30 na variável de retorno, mas não sai nesta linha 18 de 79

19 Exit; //não obrigatório, mas serve para sair da função. End; Passagem de parâmetros em procedimentos e funções Passagem por argumento Em C int soma (int a,int b) { return a+b; } Em Pascal Function soma (a,b:integer):integer; Begin result:=a+b; End; Passagem por referência Em C int soma (int& a,int& b) { 19 de 79

20 } Em Pascal Function soma (var a,b:integer):integer; Begin End; ESCOPO DE VARIÁVEIS Assim como em C, se uma variável for declarada dentro de uma função, o escopo dela é apenas a função. Para declarar uma função em Pascal existem áreas específicas para esse procedimento, diferentemente de C que uma variável pode ser declarada em qualquer parte do código. Declarando variáveis dentro de um procedimento (entre o nome da função e o Begin) Procedure Soma; Var A,b:integer; Texto:string; Begin End; Declarando uma variável Global a uma Unit (no var antes do implementation da unit, junto a variável do formulário) 20 de 79

21 var Form2: TForm2; Aglobal:integer; //aqui implementation {$R *.dfm}... Existem também variáveis declaradas dentro de classes, que podem ser declaradas na seção privada ou pública, mas que foge do escopo deste mini-curso. TIPOS DE DADOS COMUNS Inteiros Tipo Faixa Aproximada ShortInt SmallInt LongInt Integer Int64-2^63..2^63-1 Byte Word LongWord de 79

22 Cardinal UInt ^64-1 Tipos Float Tipo Faixa Aproximada Dígitos sig. Real48 2.9e e Single 1.5e e Double 5.0e e Real 5.0e e Extended 32-bit platforms 3.4e e bit platforms 5.0e e Comp Currency Tipo Booleano Boolean aceita true ou false; Tipo Data e hora TDate TTime TDateTime guarda data guarda hora guarda data e hora 22 de 79

23 Tipos de caracteres Char representação de 1 bytes (1 caracter) String vetor de caracteres Funções de String S:= texto que será enviado para a variável S ; A:= teste ; B:= de texto ; C:=A+B+ usando concatenação de strings ; Função length retorna a quantidade de caracteres de uma string Quantidadecaracteres:=Length(C); Uma string inicia em 1 e não em 0, então para percorrer uma string For cont:=1 to length(c) do Begin Stringfinal:=StringFinal + C[cont]; End; Algumas funções importantes de conversões entre tipos Na conversão o parâmetro deve conter um valor correto para o tipo destino, caso contrário gerará uma excessão. 23 de 79

24 Strtodate = Converte uma String para Data Strtodatetime= Converte uma string para um campo data/hora DateTimetostr= Converte um valor Data/Hora para String Formatdatetime= Formata um valor Data/Hora convertendo para String Strtoint= Converte uma string para um valor inteiro StrtoCurr= Converte uma string para um valor currency Strtofloat= Converte uma string para um valor de ponto flutuante InttoStr= Converte um valor inteiro para uma string CurrtoStr= Converte um valor currency para uma string FloattoStr= Converte um valor de ponto flutuante para uma string Exemplo de Uso das funções em um click de um botão procedure TForm2.Button1Click(Sender: TObject); Var ValorData:Tdate; ValorDataHora:TDatetime; ValorString:String; 24 de 79

25 ValorInteiro:integer; ValorCurrency:Currency; ValorFloat:Double; Begin ValorData:=strtodate('01/01/2000'); ValorDataHora:=strtodatetime('01/01/ :00'); ValorString:=datetostr(ValorData); ValorString:=FormatDatetime('yyyy/mm/dd', ValorDataHora); ValorInteiro:=strtoint('22'); ValorCurrency:=strtocurr('10,25'); ValorFloat:=strtofloat('10,2252'); ValorString:=inttostr(332); ValorString:=CurrtoStr(200.25); ValorString:=CurrtoStr( ); End 25 de 79

26 O QUE HÁ DE NOVO NO DELPHI XE4 Artigo de Fernando Rizzato pesquisando no dia 28/10/2013 no link Principais Mudanças na Linguagem Delphi para Mobile Sunday, May 5th, 2013 Introdução Este artigo apresenta as principais novidades da linguagem Delphi no que diz respeito a desenvolvimento para Mobile, disponibilizado recentemente através do Delphi XE4. Porém antes dos detalhes da linguagem, vamos entender o motivo e a abrangência destas alterações. Novo Compilador Para oferecer suporte aos dispositivos móveis foram criados dois novos compiladores, um para o simulador do ios e outro para o dispositivo físico (ARM), já que as arquiteturas são distintas.desta forma agora temos: Win32 compiler (DCC32) Win64 compiler (DCC64) Mac compiler (DCCOSX) ios Simulator compiler (DCCIOS32) ios ARM compiler (DCCIOSARM) A novidade está nos dois últimos, os quais seguem um desenho totalmente novo, baseados em um padrão chamado LLVM ( Podemos entender o LLVM como um conjunto de módulos e ferramentas reutilizáveis para compiladores, utilizados amplamente por diversos compiladores nativos, entre eles o próprio Xcode, nativo da Apple. Mudanças no Delphi Language Para suportar dispositivos móveis, o novo compilador (acima) impõe algumas mudanças de linguagem, as quais vou listar a seguir. Na verdade, mais do que mudanças, trata-se de uma grande evolução da linguagem Delphi. No futuro, estes e outros avanços serão portados também para os compiladores Win32, Win64 e OSX. Automatic Reference Counting (ARC) 26 de 79

27 O ARC traz o melhor dos dois mundos: gerenciamento automático de memória sem a necessidade de um garbage collection, tido como um grande vilão de performance nas linguagem que o utilizam. Em resumo o ARC gerencia o ciclo de vida de objetos sem que você tenha que se preocupar com o "Free". No exemplo acima, o objeto MyObj será removido da memória assim que sair do escopo. Importante ressaltar que a sintax tradicional (try/finally fazendo o Free manual do objeto) continua suportada, portanto as migrações de código estão garantidas. Também estão disponíveis o pattern Dispose e suporte a [Weak] References. Você pode encontrar mais sobre isso aqui: Tipo String Todos os tipos string existentes (AnsiString, UTF8String, RawByteString, WideString, AnsiChar, PAnsiChar, PWideChar, OpenString, ShortString ) agora estão simplificados em um único: String. Além disso, as strings agora são 0-based ao invés de 1-based. Isso significa que alguns códigos podem precisar de revisão, mas as funções de manipulação de strings já estão preparadas para esta mudança. Uma outra - importante - mudança é que as strings passarão a ser "imutáveis", devido ao gerenciamento de memória dos dispositivos móveis. Nesta versão do compilador tudo continua conforme anteriormente, você receberá apenas uma warning alertando que, futuramente, construções como a exibida abaixo não será mais suportada: str1[3]:= w ; Portanto é altamente recomendado que, para seus novos códigos, você faça uso de construções como TStringBuilder e TStringHelper para a manipulação de strings. Um trecho de código utilizando estas classes para ilustrar: 27 de 79

28 Outras mudanças 1. Ponteiros não são suportados no mundo mobile 2. Não há suporte para Inline assemby 3. Evite chamadas a APIs diretamente, esteja pronto para as novas plataformas que virão 4. Prefira utilizar as units cross-plataform, especialmente ao manipular arquivos (unit IOUtils) 28 de 79

29 EMULADOR DO ANDROID Para testar os projetos sem um celular é necessário um emulador do sistema operacional do celular desejado, junto ao Embarcadero Xe5 é instalado um Emulador do Android. Clique no Menu Iniciar, localize o menu do Embarcadero RAD Studio XE5 e abra o Android Tools 29 de 79

30 Menu Tools \ Manage AVDs... O Print abaixo dependerá da versão do SDK do Android instalado, caso após instalado a máquina virtual já estiver criada é necessário apenas na primeira execução do emulador adicionar o suporte a GPU, para isso clique no dispositivo virtual listado e clique em Edit. Na tela de edição clique em New para adicionar uma nova propriedade 30 de 79

31 Clique na Opção GPU emulation e clique em OK Na lista de propriedades adicionadas troque o valor do GPU emulation para YES 31 de 79

32 Clique em Edit AVD para finalizar as alterações. Caso você esteja trabalhando com outra versão do Emulador, segue abaixo um print da criação de um novo dispositivo virtual, para isso clique no botão NEW 32 de 79

33 Preencha as opções indicadas pelas setas vermelhas AVD Name: Nome do dispositivo, use um nome simples sem espaços ou caracteres especiais Device: Escolha o modelo do dispositivo, neste exemplo estamos usando um Nexus Target: Escolha o Android Memory Options RAM: Altere para 768 (máximo recomendado) Use Host GPU: Marque essa opção 33 de 79

34 Clique em OK A mensagem é o resultado da criação da máquina virtual. Iniciando o emulador Marque o dispositivo virtual e clique em START de 79

35 35 de 79

36 Note que na barra de superior é dado um nome para este dispositivo virtual, o mesmo deverá estar listado no Delphi para conseguirmos emular nosso aplicativo. FIREMONKEY MOBILE APPLICATION Para criar um novo projeto para desenvolvimento Mobile clique em Menu New \ Firemonkey Mobile Application - Delphi 36 de 79

37 Existem alguns Templates de projetos Mobile que podem ser escolhidos ao iniciar um projeto. Escolha a opção Blank Application (Aplicação em Branco) É possível escolher o modelo visual do celular que deseja desenvolver. 37 de 79

38 Exemplo Usando o Google Nexus 4 Exemplo Usando o Iphone 4 COMPONENTES OU CONTROLES Componentes ou controles são objetos (classes) prontos para o desenvolvimento dentro de uma IDE, por exemplo se você precisa de um botão, de uma caixa de texto ou de uma label na construção do seu aplicativo você não precisa construí-los, eles já estão prontos, basta arrastar para o formulário que deseja e eles serão criados. CONHECENDO ALGUNS CONTROLES (COMPONENTES) LABEL 38 de 79

39 O componente label serve para mostrar textos, ele pode ser encontrado na Palheta Standard da Tool Palette Algumas Propriedade Text = Texto da Label 39 de 79

40 StyleLookup = Estilo Visual da Label PRIMEIRA COMPILAÇÃO NO EMULADOR Adicione um componente Label em seu formulário, vá na propriedade TEXT no Object Inspector e altere o texto a mesma. Salve seu projeto e todos os arquivos que compõe o mesmo clicando em Menu File \ Save All Na janela Project Manager, escolha o emulador correto, de acordo com o dispositivo que deseja fazer o deploy 40 de 79

41 Veja que no exemplo acima foi listado o mesmo nome do emulador que já se encontra aberto. Clique em Run Without Debugging, essa opção compila o projeto e enviar para o dispositivo ou emulador o app pronto, como estamos trabalhando sem o Debug não conseguiremos debugar nosso código com paradas (breakpoint), para executar este tipo de operação use a opção RUN(f9). Aguarde todo o processo de compilação e deploy 41 de 79

42 Compilando para um dispositivo real No exemplo abaixo foi usado um aparelho SAMSUNG Galaxy S4 O driver do dispositivo já deve ter sido instalado previamente no Windows. No Aparelho acesse as configurações, opção sobre o dispositivo Pressione várias vezes sobre a opção Num de compilação, ele habilitará as opção de desenvolvedor, retorne a tela anterior e escolha a opção Opções do Desenvolvedor e marque a opção Depuração de USB. (Essas opções podem mudar de acordo com o aparelho ou o Android instalado nele, procure no Google como Habilitar Depuração de USB para desenvolvimento no modelo de seu aparelho). 42 de 79

43 Caso o Delphi não liste automaticamente o dispositivo clique com o botão direito sobre a opção Target do Android no Project Manager e escolha a opção Refresh. Caso não funcione uma das dicas é fechar e abrir Delphi novamente. 43 de 79

44 Caso tudo ocorra certo o dispositivo deverá ser listado no Delphi, para marcar ele como alvo de compilação clique duas vezes sobre a opção ou clique com o botão direito e escolha a opção Activate. Clique em Run Without Debugging Exemplo de um APP compilado direto no celular S4. 44 de 79

45 Segundo a Embarcadero ( : Crie aplicações para fones e tablets com Android com processadores ARM7, rodando Android Gingerbread ( ), Ice Cream Sandwich (4.0.3 e 4.0.4) ou Jelly Bean (4.1.x, 4.2.x e 4.3.x) Lista oficial de aparelhos indicados pela Embarcadero que foram testados ( ation_development): Results of Our Android Device Testing The device testing table below shows the results of our testing. Android Device Name Android Version Test Results (Out of 16 Samples) Percentage Passed Comments Nexus 7 HD (2013) / Nexus / Nexus 7 (2012) / de 79

46 Nexus / Nexus / Nexus / Galaxy S II (GT- I9100) / Galaxy S III / Galaxy S / Nexus / Galaxy Tab2 7 (GT- P3110) / Optimus L5 (LG- E612) / Galaxy Tab2 7 (GT- P3110) / Orange Nivo (Coolpad 7560U) / Nexus / LG Optimus L5 (LG - E610) / Galaxy S II (GT- I9100) / Bug reported about Picture Taking Fujitsu Arrows Tab (F-01D) / Bug reported about Audio Recording HTC Desire HD / Bug reported about Audio Recording HTC One X / Bug reported about Web Browser 46 de 79

47 HTC Desire SV / Bug reported about Audio Recording Kindle Fire HD (KFTT) / Bug reported about Location Demo and Audio Recording Samsung Galaxy Tab / Bug reported about Location Demo and Audio Recording HTC Flyer / Bug reported about Picture Taking and Audio Recording Sony Xperia U / Bug reported about Picture Taking, Audio Recording and Notifications Android Cloud Devices (perfectomobile.com) Motorola Droid Bionic / Huawei Ascend P / Bug reported about Audio Recording ZTE Avid 4G / ASUS Nexus / Android Cloud Devices (scirocco-cloud.com/en) Pantone / Fizemos alguns testes em outros aparelhos não indicados na lista, como por exemplo o tablet Motorola XOM e tivemos êxito, porém com alguns tablets da SAMSUNG testados tivemos problemas pois NÃO tinham suporte ao NEON, portanto nem todos os aparelhos rodando ANDROID são suportados, verifique sempre se o aparelho que deseja rodar a aplicação tenha suporte a NEON e se encontra em uma das versões do ANDROID indicadas pela Embarcadero. COMPONENTE BOTÃO Palheta Standard \ TButton Propriedade 47 de 79

48 Text = Texto do Botão Evento OnClick Evento que é ativado quando um botão recebe um click. Exemplo uma caixa de mensagem chamada através do click do botão. 48 de 79

49 STYLE LOOKUP Essa propriedade determina a aparência do componente, ela é fundamental pois é através dela que o compilador irá determinar a aparência dos controles de acordo com o Sistema Operacional do Celular (IOS ou ANDROID). 49 de 79

50 Exemplo de um Botão configurado como botão de informação no Android Mesmo botão configurado como botão de informação no Iphone Botão Delete no Android 50 de 79

51 Botão Delete no Iphone Ancoragem de Componentes A propriedade Anchors determina o sistema de ancoragem que o aplicativo usará para o componente, você pode ancorar um componente usando as posições: left (esquerda), right( direita), top (superior) e bottom (inferior). A ancoragem serve quando o tamanho da tela do aplicativo é redimensionada (troca de dispositivo por exemplo) ele indicará como o componente deverá se comportar. Componente Edit Componente caixa de texto. Palheta Standard \ TEdit Propriedades Text = texto do Edit KeyBoardType = Tipo do Teclado que será mostrado. Exemplo de um Edit configurado como vkt address 51 de 79

52 Exemplo de um Edit configurado como vktnumberpad Exemplo de um APP 52 de 79

53 Construa uma aplicação com uma Label, um Edit e um botão conforme modelo acima, configure o tipo do teclado como VktDefault, troque propriedade name do Edit para EDTNOME No click do botão mostraremos uma mensagem com o que foi digitado e alteraremos o texto do Edit via código. Exemplo de código do click do botão COMPONENTE RADIOBUTTON O rádio Button é usado para seleções de opções, em grupos de radiosbuttons somente um pode ser selecionado Palheta Standard \ TRadioButton A propriedade TEXT altera o texto do mesmo e o evento ONClick é disparado sempre que ele é selecionado. A propriedade ISCHECKED do tipo boolean (true ou false) determina se ele está selecionado ou não. Você só pode ter um radiobutton selecionado por grupo, utilize a propriedade GroupName para criar os grupos desejados. 53 de 79

54 Exemplo de um APP que você configura o tipo do teclado em tempo de execução Neste APP foram adicionados 3 radios buttons, a propriedade TEXT de cada um foi alterada de acordo com a função que ele irá executar (esse texto é livre) Em cada OnClick dos radios foi adicionado um código para alterar o tipo do teclado do Edit. Código do OnClick dos Radios Buttons O tipo de teclado foi trocado via código, o número entre parênteses é o indice do tipo escolhido, consulte o Help para esta listagem de códigos. 54 de 79

55 Componente TOOLBAR Palheta Standard \ TtoolBar 55 de 79

56 Adicione uma Label na ToolBar e configure o StyleLookup para toollabel Configure a propriedade Align para AlCenter Exemplo da ToolBar em um ambiente IOS Exemplo de botão em uma ToolBar com StykeLookup configurado para addtoolbuttonbordered no ambiente IOS 56 de 79

57 Mesmo exemplo em um ambiente Android COMPONENTES TABCONTROL O TabControl proporciona a criação de TABS (ABAS) 57 de 79

58 Para adicionar as Abas clique com o botão direito sobre o componente e escolha a opção Items Editor... Adicione a quantidade de TabItem que desejar 58 de 79

59 Propriedades TabPosition = Posição que será mostrada as tabs. Exemplo de TabPosition configurada como tptop Exemplo de TabPosition configurada como tpbottom Exemplo de TabPosition configurada como tpdots 59 de 79

60 O TabPosition em tpnone não mostra nenhuma opção visual para troca de Abas, a mesma pode ser feita através de código. Tabindex = Propriedade que indica qual Aba está ativa no momento. 60 de 79

61 Propriedades da TABITEM Text = Texto da TabItem Ao clicar sobre um TabItem a tabcontrol altera a sua TabIndex automaticamente em tempo de projeto no Delphi. Exemplo de uma App com uma label por TAB 61 de 79

62 62 de 79

63 COMPONENTE LISTBOX Palheta Standard \ TListBox Manual interessante sobre o componente: nents_to_display_a_table_view_(ios_and_android) 63 de 79

64 Configure a propriedade Align como AlClient para que o componente se ajuste a tela. Adicionando ITEMS manualmente Clique com o botão direito sobre o componente e escolha a opção Items Editor Escolha a opção TListBoxItem e clique em Add Item 64 de 79

65 Cada item pode ser configurado separadamente, para isso clique sobre o Item desejado Propridades 65 de 79

66 Text = Texto Principal do ITEM TextAlign = Alinhamento do texto principal (taleading, tacenter e tatrailing) ItemData Accessory = Acessório que será usado no item (checkmark, detail...) Bitmap = Imagem com o ícone do Item Detail = Texto secundário do item (detalhe) Text = Texto do Item, mesmo da propriedade TEXT StyleLookup = Esta propriedade indica aparencia do ITEM, determinando se terá ou não detail, a posição do detail entre outras opções. EXEMPLO PARA ADICIONAR ITENS VIA CÓDIGO O exemplo abaixo foi adicionado no evento OnCLick da Aba Palestras, adicionando 4 itens manualmente procedure TForm2.TabItem1Click(Sender: TObject); var ListBoxItem:TListBoxItem;//declarando a variável que sera usada begin 66 de 79

67 ListBoxPalestras.BeginUpdate; ListBoxPalestras.Items.Clear; //limpando a listbox //instanciando um novo ListBoxItem ListBoxItem := TListBoxItem.Create(ListBoxPalestras); //Configurando o texto principal ListBoxItem.Text :='PALESTRA A'; //configurando a aparencia para ter o texto de detalhe ListBoxItem.StyleLookup:='listboxitembottomdetail'; //configurando o texto detalhe ListBoxItem.ItemData.Detail:='Palestrante A'; //adicionando o item a listbox ListBoxPalestras.AddObject(ListBoxItem); ListBoxItem := TListBoxItem.Create(ListBoxPalestras); ListBoxItem.Text :='PALESTRA B'; ListBoxItem.StyleLookup:='listboxitembottomdetail'; ListBoxItem.ItemData.Detail:='Palestrante B'; ListBoxPalestras.AddObject(ListBoxItem); ListBoxItem := TListBoxItem.Create(ListBoxPalestras); ListBoxItem.Text :='PALESTRA C'; ListBoxItem.StyleLookup:='listboxitembottomdetail'; ListBoxItem.ItemData.Detail:='Palestrante C'; ListBoxPalestras.AddObject(ListBoxItem); ListBoxItem := TListBoxItem.Create(ListBoxPalestras); ListBoxItem.Text := 'PALESTRA D'; ListBoxItem.StyleLookup:='listboxitembottomdetail'; 67 de 79

68 ListBoxItem.ItemData.Detail:='Palestrante D'; ListBoxPalestras.AddObject(ListBoxItem); end; ListBoxPalestras.EndUpdate; ADICIONANDO UMA CAIXA DE PESQUISA NA LISTBOX Clique com botão direito sobre a listbox, escolha a opção Add Item \ TSearchBox 68 de 79

69 69 de 79

70 ADICIONANDO LISTBOXGROUPHEADER Declare uma variável do tipo TLISTBOXGROUPHEADER Exemplo de como adicionar via código ListBoxGroupheader:=TListBoxGroupHeader.Create(ListBoxPalestras); ListBoxGroupheader.Text:='TERÇA'; ListBoxPalestras.AddObject(ListBoxGroupheader); 70 de 79

71 USANDO MÚLTIPLOS FORMULÁRIOS Para que seu aplicativo tenha múltiplas telas é necessário adicionar novos formulários ao seu projeto, para isso clique no Menu File \ New \ FireMonkey Mobile Form - Delphi Escolha a opção HD FireMonkey Form e clique em OK Será criado uma nova Unit e um novo formulário no projeto 71 de 79

72 Para salvar essa Unit : Menu File \ Save Altere a propriedade NAME (NOME) do formulário para FSEGUNDO 72 de 79

73 No formulário principal adicione um botão para chamarmos o FSEGUNDO E adicione o código abaixo no evento OnClick Neste exemplo acima estamos chamando a função do Show do Formulário FSegundo que é a função que mostra o formulário na tela. Na primeira compilação obteremos um erro que o Fsegundo não foi encontrado na lista de USES, ou seja, se vamos utilizá-lo precisamos indicar sua unit na lista de Uses do nosso formulário principal, porém o delphi pode adicioná-lo automaticamente, para isso resposta YES na pergunta se deseja adicioná-lo. 73 de 79

74 Compile novamente para testar. Para fechar o formulário aberto precisamos adicionar um código, no exemplo abaixo adicionei um botão em uma toolbar e configurei o stylelookup dele para backtoolbutton No onclick desse botão apenas adicionei o código abaixo: 74 de 79

75 TMEMO Componente utilizado para trabalhar com múltiplas linhas de inserção de texto. Palheta Standard \ Tmemo Principais propriedades Lines: Linhas do texto, tipo TSTRINGS (estudar a classe TStrings) Text: Texto de todas as linhas, incluindo as quebras de linhas (#13 e #10) WordWrap: Indica se o texto quebrará linha automaticamente ou não. TextAlign: Alinhamento do Texto ReadOnly: Indica somente Leitura Enabled: Indica se está ativado ou não CharCase: Indica se usará tudo maiúscula, tudo minúscula ou normal. Exemplo de como inserir informações na propriedades Lines Via Código MemoiNFO.Lines.clear; //limpa o texto da lines MemoiNFO.Lines.Add('texto que deseja inserir ); //insere uma linha com texto MemoiNFO.Lines.Add('texto em outra linha'); //insere uma linha com texto ACESSANDO COMPONENTES DE OUTROS FORMULÁRIOS Digite o nome do Formulário. Nome do Componente. Nome da Propriedade Exemplo Finfo.memoinfo.lines.clear; Finfo.memoinfo.lines.add( teste ); 75 de 79

76 TIMAGEVIEWER Palheta Additional \ TImageViewer Componente usado para mostrar imagens. Propriedades BITMAP: Escolha a opção Edit Clique no botão LOAD da janela Bitmap Editor e escolha a imagem que deseja. GESTURES Palheta Gestures \ TGestureManager 76 de 79