Android - Criando uma tela de Venda

Neste artigo montaremos uma tela simples de venda de produtos, no nosso caso utilizaremos como exemplo o The Club. A intenção desta matéria é de trabalhar com alguns componentes, mostrando suas funcionalidades na prática e algumas classes úteis ao decorrer do desenvolvimento deste artigo.

Eu considero este tipo de assunto um passo importante para quem está começando a trabalhar com o Sistema Android, para quem não sabe, programação em Android nada mais é que uma mistura do XML com o Java.

Portanto, especificamente neste artigo trabalharemos com o XML e programaremos alguma coisa em Java, a fim de possibilitar um aprendizado fácil e intuitivo.

Conceitos Básicos e Essenciais

Para isto abra seu Eclipse e clique em “File/New/Android Project” e crie um projeto em Android, recomendo a criação na versão 2.2 ou 2.3.

A primeira tela que vemos quando estamos criando um projeto em Android é a clássica telinha “Hello World”, que todo mundo já está careca de saber e montar como primeiro projeto de exemplo. Mas explicarei alguns detalhes interessantes em relação da mesma, para isto clique em seu código XML e teremos um idêntico com este abaixo:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"    /></LinearLayout>

Pergunta: O que seria a palavra "@string” na linha android:text="@string/hello" ?

Resposta: É uma referência que temos no nosso arquivo de recursos “strings.xml” encontrado no caminho /res/values. Para entendermos melhor dê um clique no mesmo e verá uma tela parecida com a Figura 01.

Figura 01: Recursos no Sistema Android.

Temos aqui uma tela de recursos para o Sistema Android, ou seja, podemos mudar nosso valor da variável “hello” ou da “app_name” que seria o título de nosso exemplo.

Em “Resources Elements” temos vários elementos que podemos trabalhar e explorar nos possibilitando a criação e manipulação de variáveis muito úteis ao decorrer de nossa necessidade. Neste mesmo artigo criaremos uma do tipo Array que iremos aprender um pouco mais adiante.

É importante também ter em mente que podemos realizar este trabalho por XML, veja abaixo o código equivalente a Figura 01.

<?xml version="1.0" encoding="utf-8"?><resources>    <string name="hello">Hello World!</string>    <string name="app_name">Vendas The Club</string></resources>

Bem, como este não é nosso primeiro projeto, esta variável “hello” não será utilizada, portanto podemos excluí-la tanto de nossa tela de recursos quanto na tela principal.

Criando uma interface gráfica

Para construirmos nossa tela, é obrigatório saber que o primeiro componente que devemos inserir na tela são os denominados “Layouts”, os quais definem a orientação da inserção dos componentes na tela. Ele pode ser encontrado na paleta com o mesmo nome. Os mais utilizados são:

LinearLayout(Vertical): Possibilita a disposição vertical dos componentes da tela.

Exemplo:

<LinearLayout    android:orientation="vertical"> <LinearLayout>

LinearLayout(Horizontal): Possibilita a disposição horizontal dos componentes da tela.

Exemplo:

<LinearLayout    android:orientation="horizontal"> <LinearLayout>

A tela de venda possuirá a seguinte estrutura:

Nome Cliente
Cidade
Estado
Produtos

o   The Club Lite (Delphi)

o   The Club Lite (C#,.NET)

o   The Club Professional

o   The Club Student

Botão “Efetuar Compra”

Para obtermos um resultado legal trabalharemos corretamente com os componentes de Layouts acima descritos. Por padrão nosso projeto é criado com um LinearLayout(Vertical).

Abaixo a descrição dos componentes utilizados e a disposição em nossa tela principal. Veja a Figura 02 para melhores detalhes.

Figura 02: Hierarquia de Componentes Utilizados.

É importante entender o funcionamento destes dois principais tipos de componentes de layouts, pois é possível manejá-los da forma que desejar, colocando um dentro do outro, entre outros tipos de configurações. Podemos conferir o código XML correspondente abaixo:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <LinearLayout android:layout_height="wrap_content"
       android:orientation="vertical"
       android:layout_width="wrap_content"
       android:id="@+id/linearLayout2">       <TextView android:layout_width="wrap_content"
       android:text="Nome Cliente:"
       android:id="@+id/textView1"
       android:layout_height="wrap_content"></TextView>       <EditText android:layout_width="316dp"
       android:id="@+id/edtCliente"
       android:layout_height="wrap_content"></EditText>    </LinearLayout>    <LinearLayout android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:id="@+id/linearLayout1"
       android:orientation="horizontal">       <LinearLayout android:layout_height="match_parent"
       android:orientation="vertical"
       android:layout_width="wrap_content"
       android:id="@+id/linearLayout4">       <TextView android:layout_width="wrap_content"
       android:id="@+id/textView3"
       android:layout_height="wrap_content"
       android:text="Cidade"></TextView>       <EditText android:id="@+id/edtCidade"
       android:layout_height="wrap_content"
       android:layout_width="206dp"></EditText>    </LinearLayout>    <LinearLayout android:layout_height="match_parent"
       android:orientation="vertical"
       android:id="@+id/linearLayout3"
       android:layout_width="match_parent">       <TextView android:layout_width="wrap_content"
       android:id="@+id/textView2"
       android:layout_height="wrap_content"
       android:text="Estado"></TextView>       <Spinner android:id="@+id/spnEstado"
       android:entries="@array/uf"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"></Spinner>    </LinearLayout>    </LinearLayout>    <TextView android:textAppearance="?android:attr/textAppearanceMedium"
       android:id="@+id/textView4"
       android:layout_height="wrap_content"
       android:text="PRODUTOS"
       android:layout_width="wrap_content"
       android:layout_gravity="center"></TextView>    <RadioGroup android:id="@+id/rgCursos"
       xmlns:android="http://schemas.android.com/apk/res/android"         android:orientation="vertical"       android:layout_width="fill_parent"
       android:layout_height="wrap_content">       <RadioButton android:id="@+id/rbLiteDelphi"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="The Club Lite (Delphi) - R$ 59,90"></RadioButton>       <RadioButton android:id="@+id/rbLiteC"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="The Club Lite (C#,.NET) - R$ 59,90"></RadioButton>       <RadioButton android:id="@+id/rbProfessional"       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="The Club Professional - R$ 88,00"></RadioButton>       <RadioButton android:id="@+id/rbStudent"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="The Club Student - R$ 25,00"></RadioButton>    </RadioGroup>
    <Button android:id="@+id/btnEfetuar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:text="Efetuar Venda"></Button>
</LinearLayout>

Devemos dar uma atenção especial no componente RadioButton em conjunto com o RadioGroup, ele nos possibilita a criação de um grupo que permite apenas selecionar um tipo de Produto, que no nosso caso específico é o que devemos fazer.

O componente Spinner é parecido com o Combobox do Delphi, ou seja, podemos armazenar uma lista de Strings nele. Neste caso armazenaremos via XML todos os estados do Brasil, para isto acesse o caminho \values\strings.xml e adicionaremos uma variável do tipo Array. Podemos fazer isto via código XML ou utilizando a interface gráfica. Veja abaixo o XML correspondente:

   <string-array name="uf">      <item >AC </item>      <item >AL </item>      <item >AM </item>      <item >BA </item>      <item >CE </item>      <item >ES </item>      <item >GO </item>      <item >MA </item>      <item >MT </item>      <item >MS </item>      <item >MG </item>      <item >PA </item>      <item >PB </item>      <item >PR </item>      <item >PE </item>      <item >PI </item>      <item >RJ </item>      <item >RN </item>      <item >RS </item>      <item >RO </item>      <item >RR </item>      <item >SC </item>      <item >SP </item>      <item >SE </item>      <item >TO </item>   </string-array>

Prontinho... Criamos agora mais um recurso no Android que poderá ser utilizado em qualquer tela que precisarmos, não é legal? Para carregarmos estes recursos utilizamos a função “entries”, veja abaixo o XML completo deste componente.

<Spinner
android:id="@+id/spnEstado"
android:entries="@array/uf" android:layout_height="wrap_content" android:layout_width="match_parent">
</Spinner>

Podemos rodar o exemplo e teremos uma tela parecida com a da Figura 03.

Figura 03: Tela de Vendas.

Criando uma classe para armazenar os registros

Para guardar nossos dados em memória deveremos criar uma classe para esta finalidade e consequentemente aprenderemos como criar uma classe no Java. Para isto clique com o botão direito no pacote “Pct.Tela_Venda_Artigo” localizado no diretório /src e escolha new/Class e deixe e escolha o Nome Registro. Ver Figura 04.

Figura 04: Criando uma classe Registro.

Adicionaremos algumas variáveis para armazenar o registro, sendo três do tipo string “cliente”, “cidade” e “estado” e uma do tipo inteiro para o curso escolhido, sendo:

1 - The Club Lite (Delphi)
2 - The Club Lite (C#,.NET)
3 - The Club Professional
4 - The Club Student

Código correspondente:

package Pct.Tela_Venda_Artigo; public class Registro
{
      String cliente, cidade, estado;
      int curso;}

Codificando o Botão “Efetuar Compra”

O primeiro passo é abrir o arquivo principal .java, localizado em /src/Pct.Tela_Venda_Artigo. Importaremos a classe Widget para criarmos nossas variáveis.

Import android.widget;

O código comentado ficou da seguinte maneira:

public class Tela_Venda_ArtigoActivity extends Activity {
      //Variáveis que serão úteis no exemplo      RadioGroup rgCursos;
      RadioButton rbLiteDelphi, rbLiteC, rbProfessional, rbStudent;
      TextView txtCliente, txtCidade, txtEstado;
      Spinner spEstado;
      Button btEfetuar;
     
    @Override    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
                
        //Fazendo o denominado “casting” dos componentes utilizados        rgCursos = (RadioGroup) findViewById(R.id.rgCursos);
        rbLiteDelphi = (RadioButton) findViewById(R.id.rbLiteDelphi);
        rbLiteC = (RadioButton) findViewById(R.id.rbLiteC);
        rbProfessional =  (RadioButton)findViewById(R.id.rbProfessional);
        rbStudent = (RadioButton) findViewById(R.id.rbStudent);
        txtCliente = (TextView) findViewById(R.id.edtCliente);
        txtCidade = (TextView) findViewById(R.id.edtCidade);
        spEstado = (Spinner) findViewById(R.id.spnEstado);
        btEfetuar = (Button) findViewById(R.id.btnEfetuar);
       
        //Acionar o evento setOnClickListener para o botão Efetuar        btEfetuar.setOnClickListener(new View.OnClickListener() {
           
            @Override            public void onClick(View arg0)
            {//Instanciar a classe Registro para atribuir os dados digitados pelo usuário                  Registro reg = new Registro();
                  reg.cliente = txtCliente.getText().toString();
                  reg.cidade = txtCidade.getText().toString();
                  reg.estado = spEstado.getSelectedItem().toString();
                  //Utilizar o Id do RadioGroup para identificar o tipo de curso                  switch (rgCursos.getCheckedRadioButtonId())
                  {
                        case R.id.rbLiteDelphi : reg.curso = 1;
                        break;
                       
                        case R.id.rbLiteC : reg.curso = 2;
                        break;
                       
                        case R.id.rbProfessional : reg.curso = 3;
                        break;

                        case R.id.rbStudent : reg.curso = 4;
                        break;
                  }
                 
//Utilização da Classe Builder para emitirmos um Alerta ao usuárioMensagemAlerta("Resultado", "Venda Efetuada com sucesso!" + "\n" +

                  "--------------------------------------" +
                  "Cliente: " + reg.cliente + "\n"+
                  "Cidade: " + reg.cidade + 
                  " / Estado: " + reg.estado + "\n" +
                  "Cód. Curso: " + reg.curso);
            }

     });    }
//Implementação de uma função genérica para utilizar no nosso projeto
public void MensagemAlerta(String titulo, String corpo)
{

AlertDialog.Builder infoResultado = new    AlertDialog.Builder(Tela_Venda_ArtigoActivity.this);
    infoResultado.setTitle(titulo);
    infoResultado.setMessage(corpo); 
    infoResultado.setNeutralButton("Ok",null);
    infoResultado.show(); }

Finalmente a Figura 05 nos mostra o projeto em Run-time.

Figura 05: Projeto em Run-time.

Conclusão

Este artigo nos demonstrou várias ideias e conceitos em relação ao Sistema Android. Como sabemos que é uma mistura de XML com o Java, primeiramente exploramos os denominados “resources” com exemplos e utilizações práticas do mesmo. Procurei trabalhar com componentes diversificados a fim de proporcionar um melhor aprendizado. Trabalhei em cima do evento “setOnClickListener” para finalmente explorar um pouco da classe “Builder” que é muito utilizada. Como se trata de um exemplo prático foi criado uma classe para armazenar os registros e futuramente consultá-los ou até mesmo gravar em uma base de dados.
Espero que vocês estejam gostando desta série de Artigos de Android, vou ficando por aqui, um forte abraço e até o mês que vem!