O CONJUNTO DE COMPONENTES GESTORES

CONJUNTO DE COMPONENTES GESTURES

Silvania de Sousa Francisco^[1]∗

RESUMO

O presente artigo tem por objetivo conceituar e exemplificar a tecnologia Gestures, implementada pela Embarcadero no Delphi 2010, cujo foco é a interpretação de gestos. Para a elaboração do artigo foi realizada uma pesquisa bibliográfica.

Palavras-chave: Componentes, gestures.

ABSTRACT

This article aims to conceptualize and exemplify the Gestures technology, implemented by Embarcadero Delphi in 2010 , which focuses on the interpretation of gestures. For the preparation of the article a literature search was conducted.

Keywords: Components, gestures.

1. INTRODUÇÃO

A tecnologia Gestures permite interpretar e atribuir ações, de forma simples, para gestos dos usuários na própria tela, criando dessa forma aplicações com interface similar às dos smartphones. Representa uma revolução na interface de entrada de dados, já que permite substituir os botões por movimentos livres, possibilitando implementar múltiplos comandos em um só componente [1].

1. FUNDAMENTOS

Os gestos funcionam da mesma forma que os eventos já conhecidos. Por exemplo: Da mesma forma que são implementadas ações para o evento OnClick, são implementados códigos para quando um determinado gesto for realizado sobre um objeto.

Essa aba possui quatro componentes:

[pic 1]

Tabela 1 – Componentes da aba Gestures [1].

1. EXEMPLOS

        

Segue abaixo um exemplo da utilização dessa aba [2]. Para o desenvolvimento da aplicação foi utilizado o Delphi XE5.

• Nova aplicação Mobile em branco;
• Inserção dos seguintes componentes: 1 ToolBar, 1 Label (dentro do ToolBar), 1 TabControl, 1 Panel;
• As configurações usadas foram as seguintes:

• ToolBar

Align – alTop

• Label

Text – Gestos com Delphi XE5

TextAlign – taCenter

• TabControl1

Align –> alBottom

TabPosition –> tpBottom

• Panel1

Align – alClient

StyleLookup – calloutpanelstyle

• Inserção de 3 novos TabItem no componente TabControl1, com a seguinte configuração:

• TabItem1.Text  - Esquerda
• TabItem2.Text  - Central
• TabItem3.Text  - Direita

A tela fica da seguinte forma:

[pic 2]

 

Figura 1 – Tela da aplicação após configuração

• Inserção de um GestureManager;
• Associa a propriedade Touch.GestureManager do Panel1 ao componente inserido anteriormente;
• Habilita suas Gestures Standard: Left, right, down e up.

Agora a fase de codificação:

• Inserção do seguinte código no evento OnActivate do formulário, a fim de garantir que a aplicação seja iniciada na aba “Central”:

procedure TForm1.FormActivate(Sender: TObject);

begin

  TabControl1.TabIndex := 1;

end;

• Inserção do código no evento OnGesture do Panel1, para interpretação dos gestos:

procedure TForm1.Panel1Gesture(Sender: TObject;

  const EventInfo: TGestureEventInfo; var Handled: Boolean);

var

  Gesto : string;

begin

  if GestureToIdent(EventInfo.GestureID, Gesto) then

    begin

      case EventInfo.GestureID of

        sgiLeft : TabControl1.TabIndex := 0;

        sgiRight: TabControl1.TabIndex := 2;

        sgiDown : TabControl1.TabIndex := 1;

        sgiUp   : ShowMessage('Você utilizou o gesto para cima: ' + Gesto);

      end;

    end;

end;

Após mais essas configurações, a aparência da aplicação é a seguinte:

...