Bem vindos a parte V de nosso Tutorial: Criando meu app step-by-step a partir do desenvolvimento em RAD Studio XE7. Até agora entendemos uma série de mecanismos que nos ajuda a desenvolver de forma mais rápida e intuitiva, criando nossas telas, capturando fotos, ligando controles a campos do banco de dados, etc.

Relembrando da seção passada, nós vimos:

1. Criação de campo do tipo imagem na tabela de Títulos;
2. Criação de método para auto-numerar ID de Títulos;
3. Binding da imagem com as listagem e detalhes do Título;
4. Inclusão, Alteração e Exclusão de Títulos;
5. Seleção de fotos da biblioteca ou câmera;

Essa seção será um pouco mais light. Entenderemos como aplicar um estilo mais profissional ao aplicativo, instalação e configuração do cliente Git para clone de nosso fonte do Bitbucket. E também criaremos uma janela de configuração para guardar preferências do usuário. Segue a lista:

• Instalação e configuração do Git no Delphi XE7;
• Como aplicar estilos mais profissionais?
• Criando uma janela de preferências;
• Criação de classe para guardar informações de preferências.

Requisitos:

• Leitura: Tutorial: Criando meu app step-by-step parte IV;

Usando um estilo mais profissional

A primeira coisa que aprenderemos nesse passo do tutorial, é adicionar um novo estilo ao nosso app. Isso é possível por conta do Firemonkey. Para quem é novato em Delphi XE, o Firemonkey é um framework poderoso criado pela Embarcadero que possui uma infinidade de recursos, e é “culpa” dele que hoje temos a possibilidade de desenvolver apps para “n” plataformas. Sem contar, é claro, com o novo compilador ARM que dá vida a tudo.

Em função disso, podemos criar, editar e adicionar novos estilos aos nossos apps tanto para plataforma Mobile quanto Desktop, tais como Mac e Windows. A Embarcadero disponibiliza um pacote de estilos prontos para usuários registrados. Basta acessar o site http://cc.embarcadero.com/item/29928 e baixar o pacote completo. Nesse caso usaremos o pacote Premium Style Pack for RAD Studio XE7.

Com o pacote aberto e descompactado nós vamos aprender a instalar o tema nas pastas do XE7. Abra o Windows Explorer em seu computador e abra a pasta referente ao pacote descompactado. Perceba que temos uma pasta para cada plataforma conforme a Figura 1.

Figura 1. Tema descompactado

Eu costumo copiar os estilos na pasta de Styles do Delphi, mas na verdade você pode colar onde você desejar. Nesse artigo veremos onde podemos instalar tais temas. Acesse a pasta C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles.  Nessa pasta você também encontra os arquivos separados por plataforma, então agora fica fácil. Basta deixar dois explorers lado a lado e copiar e colar cada tema em sua respectiva pasta.

Agora que temos os temas devidamente instalados, basta que façamos a adição no nosso projeto. Para isso abra o Delphi XE7 e em seguida nosso projeto. No form principal, frmMain, adicione um componente do tipo TStyleBook. Localize-o digitando seu nome da caixa de pesquisa na paleta de componentes.

Agora selecione a plataforma Android à sua direita no Project Manager. Isso é necessário pois você pode adicionar um estilo para cada plataforma se desejar. Selecionada a plataforma, clique duas vezes no componente StyleBook1 criado anteriormente. Você verá alguns botões na parte superior, um deles é o Load, para carregarmos o estilo que desejamos. Clique nesse botão e localize o arquivo AndroidEmeraldDark.style naquela mesma pasta onde colocamos os temas. Em seguida clique em Apply & Close. Selecione agora o formulário em si e em sua propriedade StyleBook selecione o componente de mesmo nome, isso fará com que o tema seja aplicado imediatamente, como podemos ver na Figura 2.

Figura 2. Tema aplicado

Se você desejar aprender mais sobre o esquema de estilos, basta ler ao artigo o artigo na docwiki nesse link.

Criando um arquivo de configurações

A grande maioria dos aplicativos que usamos no dia-a-dia possuem configurações de usuário, preferências. Em nosso app não será diferente. Aprenderemos agora a criar uma janela com preferências do usuário utilizando um arquivo do tipo INI (Inicialização). Isso mesmo! Da mesma forma que fazemos em Windows.

Vamos primeiro alterar nossa interface. Crie um novo item no nosso ListBox de menu. Esse item deverá se chamar lstPreferencias e terá seu Text alterado para “Preferências”, sem áspas claro.

Em seguida crie um novo formulário assim como fizemos nas aulas anteriores. Não esqueça de incluir uma ToolBar na parte superior com um SpeedButton chamado spbBack para que possamos ter um botão para abrir o menu principal quando desejarmos. Dê o nome a esse formulário de frmPreferencias e salve a a unit como UntPreferencias.pas.

Adicione um novo botão alinhado à direita com margem direita de 8px. O seu Text deverá ser “Gravar” e o name spbGravar. Esse botão será nosso botão para gravação das preferências em arquivo INI. A tela deverá se parecer com a Figura 3.

Figura 3. Sugestão de tela de configurações

Assim como nas telas de Títulos e Login, inserimos um TLayout no fundo e dentro dele inserimos o demais componentes. Nesse caso inseri um ListBox no formulário alinhado como Client. Fixei a altura das linhas em 44 usando a propriedade ItemHeight e em seguida adicionei um novo item. Para isso, clique duas vezes no ListBox. Isso fará com que se abra a janela de gerenciamento dos itens do ListBox. No ComboBox à direita selecione a opção TListBoxGroupItem como na imagem a seguir:

Adicione um Item de cabeçalho e em seguida um item comum. O primeiro deles dê o nome de lstgrpSeguranca e seu Text mude para “Segurança”. Em seguida modifique o name do segundo item para lstitDesconectar e seu Text para “Desconectar ao sair”. Adicione dentro desse item de ListBox um componente TSwitch e dê o nome a ele de swtDesconectar. Alinhe-o a direita com margem direita igual a 8px.

Codificando o arquivo INI

Muito bom até aqui. Com nossa interface pronta, vamos preparar as funções de gravação e leitura do arquivo INI. Para facilitar todo o trabalho, vamos criar uma classe para ler e escrever no arquivo INI, bem como alimentar as propriedades do menu principal. Propriedades? Sim, vamos começar a brincar um pouco com orientação a objetos.

Crie uma nova unit em File > New > Unit. Salve-a como ULib.pas. De preferência crie uma pasta no projeto chamada Lib e salve essa Unit lá dentro, assim deixamos tudo mais organizado.

Com a unit aberta, adicione uma cláusula Uses abaixo de Interface e declare as Units IniFiles e System.IOUtils, como mostrado abaixo:

interface
uses
  IniFiles, System.IOUtils

Em seguida escreva o cabeçalho das funções e propriedades que vamos codificar aqui. Veja a Listagem 1 como o código precisa ser implementado.

type
  Lib = class
    private
      FDesconectarAoSair: Boolean;
    function GetDesconectarAoSair: Boolean;
    procedure SetDesconectarAoSair(const Value: Boolean);

    public
      procedure SaveConfig;
      procedure ReadConfig;
    published
      property DesconectarAoSair: Boolean read GetDesconectarAoSair write SetDesconectarAoSair;
  end;

Listagem 1. Código do cabeçalho dos métodos

Nós criamos uma propriedade chamada DesconectarAoSair do tipo Boolean (True/False) e guardarmos a informação se o usuário deseja ou não sair totalmente do sistema ao sair do aplicativo. Em seguida criamos dois métodos:

• SaveConfig: Salvar os dados no arquivo INI;
• ReadConfig: Ler dados do arquivo INI;

Pressione Ctrl +Shift + C para que o Delphi crie para nós o escopo dos métodos. Nós faremos algo bem simples já que temos apenas uma configuração para ser guardada no arquivo INI. Digite o código da Listagem 2.

function Lib.GetDesconectarAoSair: Boolean;
begin
  Result := FDesconectarAoSair;
end;

procedure Lib.ReadConfig;
var
  Ini : TIniFile;
begin
  try
    Ini := TIniFile.Create(TPath.Combine(TPath.GetDocumentsPath, 'Config.ini'));
    FDesconectarAoSair := Ini.ReadBool('SEGURANCA', 'DesconectarAoSair', FDesconectarAoSair);
  finally
    Ini.DisposeOf;
  end;
end;

procedure Lib.SaveConfig;
var
  Ini : TIniFile;
begin
  try
    Ini := TIniFile.Create(TPath.Combine(TPath.GetDocumentsPath, 'Config.ini'));
    Ini.WriteBool('SEGURANCA', 'DesconectarAoSair', FDesconectarAoSair);
  finally
    Ini.DisposeOf;
  end;

end;

procedure Lib.SetDesconectarAoSair(const Value: Boolean);
begin
  FDesconectarAoSair := Value;
end;

Listagem 2. Escopo dos métodos

Em SaveConfig e ReadConfig nós declaramos uma variável do tipo TIniFile. Criamos o arquivo INI usando o método Create da classe TIniFile e então recebemos ou gravamos o valor encontrado, direto na variável FDesconectarAoSair, que é a variável referente a nossa propriedade de mesmo nome.

Antes de prosseguirmos com a codificação em frmPreferencias, necessitamos fazer algumas alterações no frmMain, ou seja, no formulário principal. Retorne a ele e logo de início faça um File > Use Unit e adicione a ULib na seção Interface do formulário principal. Aproveite e adicione também  a unit UntPreferencias.

Na seção public do formulário, adicione uma nova variável para fazermos referência ao formulário de preferências. Chame-a de FPreferencias do tipo TfrmPreferencias.

Agora crie uma variável chamada FLib do tipo TLib. Essa variável será usada para instanciarmos a classe TLib e usarmos sempre que precisarmos. Nossas declarações devem ficar como na codificação abaixo:

[...]
uses
  ULib,
  UntPreferencias;
[...]
  public
    FPreferencias : TfrmPreferencias;
    FLib      : TLib;
[...]

Acesse o evento OnCreate do form principal e faça a criação da instância de FLib, como abaixo:

  FLib := TLib.Create;
  FLib.ReadConfig;

Já no evento OnClose, precisamos dispensar a variável para evitar MemoryLeak. Faça como abaixo:

  if Assigned(FLib) then
    FLib.DisposeOf;

Agora falta apenas, nesse formulário, fazer a chamada para o form de preferências. Clique duas vezes no item de listbox referente ao menu preferências e codifique-o como na Listagem 3.

procedure TfrmMain.lstPreferenciasClick(Sender: TObject);
begin
  if not Assigned(FPreferencias) then
    FPreferencias := TfrmPreferencias.Create(Self);

  MultiView1.MasterButton := FPreferencias.spbBack;
  MultiView1.HideMaster;

  {Adiciona o Layout de Pedidos ao Layout Principal que controla tudo}
  lytMain.AddObject(FPreferencias.lytPreferencias);

  try
    DM.qryTitulos.Active := False;
    DM.qryTitulos.Active := True;
  except on E:Exception do
    ShowMessage('Click em Títulos: ' + E.Message);
  end;
  {Deixa todos os layouts invisíveis e deixa o layout alvo visível}
  ShowForm(FPreferencias.lytPreferencias);
end;

Listagem 3. Chamada para o form de preferências

Para finalizar essa parte, precisamos acessar o evento OnCreate do formulário preferências e fazer a chamada a nossa Lib para que possamos atualizar os controles em tela de acordo com o que está gravado no arquivo INI, bem como gravar as novas alterações.

Cadastro de Preferências

Como nossa janela de preferências só possui um item para ser gravado, então vai ser fácil codificarmos. Precisamos gravar o que o usuário escolheu e na abertura da tela precisamos ler o que foi gravado e atualizar a tela. Publiquei na Listagem 4 o código completo dos dois eventos, OnCreate e OnClick (spbGravar).

procedure TfrmPreferencias.FormCreate(Sender: TObject);
begin
  frmMain.FLib.ReadConfig;
  swtDesconectar.IsChecked := frmMain.FLib.DesconectarAoSair;
end;

procedure TfrmPreferencias.spbGravarClick(Sender: TObject);
begin
  frmMain.FLib.DesconectarAoSair := swtDesconectar.IsChecked;
  frmMain.FLib.SaveConfig;
end;

Listagem 4. Códigos do OnCreate e OnClick

Note que fazemos referência ao formulário principal, frmMain, por isso é necessário fazer um Use Unit nele. Fazemos isso porque estamos lendo as propriedades da classe TLib através da variável FLib no form principal. No evento OnCreate nós lemos as informações e atualizamos o controle swtDesconectar. Estamos igualando sua propriedade IsChecked ao valor boleano gravado no arquivo INI.

Do mesmo modo, evidentemente ao contrário, gravamos o estamos do controle swtDesconectar no arquivo INI, fazemos essas duas operações chamando os métodos ReadConfig e SaveConfig respectivamente.

Configurando e baixo um código-fonte usando Git no RAD Studio XE7

Para aqueles que não sabem ainda, o RAD Studio XE7 implementou suporte ao GIT. O Git é uma, grosseiramente falando, plataforma de gerenciamento e código-fonte. Com ele conseguimos fazer commits, controles de código-fonte, controle de diferenças, e uma série de outras funcionalidades estão disponíveis nele. Atualmente o Git é bastante utilizado assim como SVN, já existente no Delphi há tempos.

Nessa seção aprenderemos a configurar o Git no Delphi e baixar o código-fonte desse tutorial diretamente pelo Delphi.

A primeira providência é instalar o cliente do Git em seu Windows/Mac. Para isso acesse o link http://www.git-scm.com/download e baixe a versão que melhor se encaixe com seu perfil. Nesse tutorial mostrarei somente o uso com Windows.

Feito o download do arquivo (até o fechamento desse artigo) Git-1.9.4-preview20140929.exe, clique duas vezes nele e clique logo de início em Next em todas as janelas. Deixei propositalmente default em todos os passos. Aguarde a instalação e então voltemos até o Delphi.

Com o Delphi aberto, precisaremos indicar a ele onde o arquivo principal do Git está instalado. Para isso acesse Tools > Options > Version Control > Git. Em Git Executable clique no botão reticências à direita e navegue até a pasta de instalação do Git, normalmente em C:\Program Files (x86)\Git\bin\git.exe.

Feito isso estamos prontos para fazer o download de nosso código-fonte. Acesse o menu File > Open from source control e em seguida selecione Git. Na janela seguinte cole o endereço completo de nosso fonte no Bitbucket. Caso não saiba, acesse https://bitbucket.org/tdevrocks e selecione o nosso curso. À direita do site você encontrará o caminho completo para o site.

O segundo campo dessa caixa de diálogo é o local onde o código-fonte deverá ser baixado. Fica a seu critério nesse caso. Veja todos esses passos nas imagens abaixo:

Quando o download finalizar, o Delphi detectará se há algum arquivo .dpr, .dproj e etc e já fará a sugestão de abertura do arquivo. Você pode cancelar nesse momento se desejar.

O código-fonte desse exemplo encontra-se disponível aqui.

Conclusões

Nesse artigo pudemos aprender como é fácil adicionar um novo estilo as nossas aplicações Delphi para Mobile, bem como para desktop Windows e Mac. O aprendizado aqui serve não somente para aplicativos multi-device, mas caso você deseje adicionar um estilo profissional a sua aplicação, os passos também são válidos.

Também aprendemos a usar arquivos INI para ler e gravar informações nos diretórios do dispositivo móvel. Por fim, aprendemos a configurar o Git para efetuar o clone de nosso projeto no Bitbucket. Os passos vistos aqui, também são válidos para qualquer outro código-fonte disponível na nuvem ou localmente.