Neste artigo iremos criar uma aplicação simples a ser executada em Pen drive ou HD Externo usando Firemonkey HD Application – Delphi (Delphi XE2) e banco de dados em XML. A aplicação consistirá em uma agenda de compromissos. Para isso abrimos o Delphi XE2 e criamos uma nova aplicação Firemonkey. Salvamos a Unit1 como UfmkPrincipal e alteramos as seguintes propriedades:

  • Name: uFmkPrincipal;
  • Caption: Agenda de Compromissos;

Inserimos agora, um Data Módulo para fazermos a nossa conexão com nosso banco de dados XML. Você o encontra em File > New > Other > Delphi Files > Data Module.

Salvamos como uDM e alteramos sua propriedade Name para DM.

Dentro desse Data Módulo iremos inserir um ClientDataSet e iremos alterar a propriedade Name para CDSAgenda.

Em seguida clicamos com o botão direito em cima do CDSAgenda e selecionamos “Fields Editor”. Na seguinte tela, clique com o botão direito, novamente, e selecione “New Field”. Adicione os fields conforme características abaixo:

  • Name: DATA / Type: Date / Field Type: Data;
  • Name: HORA_INICIAL / Type: Time / Field Type: Data;
  • Name: HORA_FINAL / Type: Time / Field Type: Data;
  • Name: DESCRICAO / Type: String / Field Type: Data;
  • Name: STATUS / Type: Integer / Field Type: Data;

Selecione os seguintes Fields e altere a propriedade Display label:

  • HORA_INICIAL : HORA INICIAL;
  • HORA_FINAL: HORA FINAL;
  • DESCRICAO: DESCRIÇÃO.

Vamos até a propriedade FileName do ClientDataSet CDSAGENDA e colocamos: .\CDSAGENDA.xml.

Clicamos com o botão direito em cima do CDSAGENDA e selecionamos a opção Create DataSet. Compile a aplicação e vá até a pasta de criação do sistema e você verá que o arquivo XML foi criado junto com o arquivo executável.

Agora copie todo o endereço da barra de endereços e substitua a propriedade FileName do CDSAGENDA pelo endereço completo do XML.

Agora voltamos para o FmkPrincipal e alteramos suas seguintes propriedades:

  • Height : 515;
  • Width: 420;

Obs: Vale lembrar que o Firemonkey utiliza o conceito de Container, que numa linguagem clara significa que você pode colocar qualquer componente dentro de qualquer componente. Quando formos utilizar esse conceito, a descrição será no seguinte formato: Componente (Container: Componente Mestre).

Obs. Antes de dar continuidade na criação do aplicativo é recomendável a leitura do artigo: LiveBindings e Conexão com Banco de Dados - Delphi XE2 & Firemonkey

Com o objetivo de construirmos o Formulário firemonkey adicionaremos os seguintes componentes e alteramos as suas propriedades:

  • Tpanel:
    Ø Name: PnlTitulo;
    Ø Height: 50;
    Ø Align: AlTop;
  • Tlabel (Container: PnlTitulo):
    Ø Name: LblTitulo;
    Ø Text: AGENDA DE COMPROMISSOS (Em Firemonkey o label não possui a propriedade Caption da VCL e sim a propriedade Text);
    Ø TextAlign: taCenter;}
    Ø Font > Size: 13
    Ø Font > Style > FsBold (True);
  • TDataSource:
    Ø Name: DSAGENDA;
    Ø Dataset: DM.CDSAGENDA; (Declare em Uses: uDM).
  • TBindScopeDB:
    Ø Name: BSDBAGENDA;
    Ø Data Source: DSAGENDA;
  • TbindNavigator:
    Ø Name: BNAGENDA;
    Ø Align: AlTop;
    Ø BindScope: BSDBAGENDA;
  • Tlabel (Quantidade = 5):
    Ø Text: DATA, HORA INICIAL, HORA FINAL, DESCRIÇÃO, STATUS;
    Ø Font > Style > FsBold (True);
    Ø AutoSize: True;

Obs: Infelizmente, no Firemonkey ainda não funciona o Ctrl+C / Ctrl+V, ou seja, cada componente tem que ser adicionado um a um. Outra questão que ocorre é quando você vai selecionar vários componentes ao mesmo tempo, a caixa de seleção desaparece.

  • TCalendarEdit:
    Ø Name: CEAGENDA;
    Ø LiveBindings: DBLinkCalendarEdit1DATA1;
  • TEdit:
    Ø Name: EDTHORAINICIAL;
    Ø LiveBindings: Criar link para DBField HORA_INICIAL;
  • TEdit:
    Ø Name: EDTHORAINICIAL;
    Ø LiveBindings: Criar link para DBField HORA_FINAL;
  • TMemo:
    Ø Name: MmoDESCRICAO;
    Ø Word Wrap: True;
    Ø LiveBindings: Criar link para DBField DESCRICAO;
  • TCombobox:
    Ø Name: CBBSTATUS;
    Ø LiveBindings: Criar link para DBField STATUS;

Obs.: Para adicionar itens ao CBBSTATUS, deve-se realizar o seguinte procedimento:

Clique com o botão direito em cima do CBBSTATUS e seleciona Add Item.Repita este processo 4 vezes e você terá sua tela de estrutura.

Para cada ListBoxItem do CBBSTATUS forneça um valor na propriedade Text: 0 , 25, 50, 75 e 100. Esses serão os valores que o CBBSTATUS fornecerá em tempo de execução.

  • TLabel :
    Ø Text: %;
    Ø AutoSize: True;
  • TPanel:
    Ø Name: PnlEmail;
    Ø Align: alBottom;
    Ø Height: 52;
  • TLabel (Container: PnlEmail):
    Ø Name: LblEmail;
    Ø AutoSize: True;
    Ø Text: rafael.marins.ribeiro@gmail.com
  • TStringGrid: (Para aprender a configurar este componente vá até o artigo: Manipulando uma TStringGrid - Delphi Xe2 & Firemonkey)
    Ø Name: SGAGENDA;
    Ø Align: alBottom;
    Ø Height: 180;
    Ø LiveBindings > Link to DBDataSource: BSDBAGENDA;
    Ø DisableFocusEffect: False;
    Ø MouseTracking:True;
    Ø ShowSelectedCell:False;

Na versão inicial e Trial do Delphi XE2, o Object Inspector não está ainda garantindo segurança nas propriedades. Assim sendo, em muitas propriedades precisamos alterar em linhas de comando.

Por isso, criaremos a seguinte procedure com o objetivo de garantir a ordem de Tab dos componentes. Declare em Private de FmkPrincipal:

procedure Determinando_Tab_Order;

Clique na linha declarada acima e aperte em seu teclado Ctrl + Shift + C:

procedure TFmkPrincipal.Determinando_Tab_Order;
begin
  CEDATA.TabOrder         := 0;
  EDTHORAINICIAL.TabOrder := 1;
  EDTHORAFINAL.TabOrder   := 2;
  MmoDESCRICAO.TabOrder   := 3;
  CBBSTATUS.TabOrder      := 4;
end;

Na procedure OnCreate do FmkPrincipal (já criada) adicione o chamado à procedure:

Determinando_Tab_Order;

Por questão de organização, vamos determinar que os componentes de cadastro somente estejam em modo de edição, se e somente se, o ClientDataSet CDSAGENDA estiver em modo de inserção [dsInsert] ou em modo de edição [dsEdit]. Para isso criamos a seguinte procedure no Public do FmkPrincipal:

procedure Controles_Visuais;

Clique na linha declarada acima e aperte em seu teclado Ctrl + Shift + C:

procedure TFmkPrincipal.Controles_Visuais;
begin
  CEDATA.Enabled         := DM.CDSAGENDA.State IN [dsInsert, dsEdit];
  EDTHORAINICIAL.Enabled := DM.CDSAGENDA.State IN [dsInsert, dsEdit];
  EDTHORAFINAL.Enabled   := DM.CDSAGENDA.State IN [dsInsert, dsEdit];
  MmoDESCRICAO.Enabled   := DM.CDSAGENDA.State IN [dsInsert, dsEdit];
  CBBSTATUS.Enabled      := DM.CDSAGENDA.State IN [dsInsert, dsEdit];
end;

Agora, chamaremos a procedure Controles_Visuais após as principais ações exercidas no CDSAGENDA (AfterCancel / AfterDelete / AfterEdit / AfterInsert / AfterPost):

procedure TDM.CDSAGENDAAfterCancel(DataSet: TDataSet);
begin
  FmkPrincipal.Controles_Visuais;
end;
procedure TDM.CDSAGENDAAfterDelete(DataSet: TDataSet);
begin
  FmkPrincipal.Controles_Visuais;
end;
procedure TDM.CDSAGENDAAfterEdit(DataSet: TDataSet);
begin
  FmkPrincipal.Controles_Visuais;
  FmkPrincipal.CEDATA.SetFocus;
end;
procedure TDM.CDSAGENDAAfterInsert(DataSet: TDataSet);
begin
  FmkPrincipal.Controles_Visuais;
  FmkPrincipal.CEDATA.SetFocus;
end;
procedure TDM.CDSAGENDAAfterPost(DataSet: TDataSet);
begin
  FmkPrincipal.Controles_Visuais;
end;

Obs1: Note que, nos eventos AfterEdit e AfterInsert foram colocados os eventos SetFocus para CEDATA. Isso faz com que o componente CEDATA assuma o foco logo após ser chamado ou o evento de Edição ou de Inserção.

Como o objetivo principal de nosso artigo é utilizar o sistema Firemonkey com XML em um Pen drive, precisaremos agora organizar nossa pasta do projeto. Vá até a pasta Win32. Dentro dessa pasta, crie uma pasta BD. Entre na pasta Debug, recorte o arquivo CDSAGENDA.xml e cole na pasta BD.

pasta de arquivos

E fazemos, então, algumas alterações em nosso código. Na Declaração Uses do Data módulo DM coloque SysUtils e Midaslib.

  • SysUtils - utilizada para pegar o diretório;
  • Midaslib – utilizada para fazer a conexão com o banco de dados em máquinas que não têm o Delphi instalado.

No evento OnCreate do data módulo DM, colocamos o seguinte código:

procedure TDM.DataModuleCreate(Sender: TObject);
var
CAMINHO : string;
begin
  CAMINHO := ExtractFileDIR(GetCurrentDir);
  CDSAGENDA.FileName := CAMINHO + '\BD\CDSAGENDA.XML';
  CDSAGENDA.Open;
end;

Esse código se torna interessante, pois ele encontra o banco de dados onde quer que a pasta com os códigos fonte estejam. Isso evita o erro de conexão com o banco de dados na hora de abrir e/ou compilar o projeto e também, ajuda na confecção da pasta de distribuição do sistema. Ou seja, uma vez confeccionada a pasta de distribuição, seu sistema poderá rodar em qualquer Pen drive, HD externo, Desktop ou Notebook.

Assim sendo, crie uma pasta no seu desktop chamada Agenda. Dentro da pasta Agenda crie outras duas pastas chamadas BD e SISTEMA, respectivamente:

Criação de pastas
  • Copie o arquivo CDSAGENDA.xml da sua pasta projeto (Agenda) e cole em BD.
  • Copie o arquivo Agenda.exe da sua pasta projeto (Agenda) e cole em SISTEMA.

Obs. Só para garantir copie a Midas.DLL para a pasta BD.

Rode sua aplicação e você terá o seguinte resultado:

Rodando a aplicação

Outra grande novidade no Delphi XE2 é a possibilidade de se criar executáveis que rodem em ambiente Windows 32 e 64 bits e também, em sistemas operacionais da Apple MAC OS X e IOS.

Dentro do seu Project Manager adicione a plataforma 64-bits, compile e dê um Build em seu projeto.

Para melhor compreender o funcionamento das plataformas 32-bits e 64-bits e também, o passo a passo para realizar a compilação em cada uma delas visite o artigo: Compilando em 32 e 64 bits - Delphi XE2 & Firemonkey. Vá até a pasta Win64 do seu projeto, altere o nome do executável para agenda (64bits).exe, copie e cole na pasta SISTEMA de seus dispositivo móvel. Agora você pode rodar seu sistema nos dois ambientes Windows: 32 bits e 64 bits.

Para finalizar nosso artigo, vamos agora aplicar um dos estilos (styles) predefinidos do Delphi XE2. Uma aplicação com um visual moderno se tirna mais atraente ao usuário. Para compreender melhor como aplicar estilos predefinidos e customizados visite o artigo: Styles: Inovação e Design – Delphi XE2 & Firemonkey.

Aplicado o style Air, assim finalizamos nossa aplicação:

aplicação finalizada