 |
|
Para adicionar componentes à tela principal (página sumária), siga estes passos:
- Na visualização do "Screen Design", encontre o componente "StringItem" na paleta e arraste-o sobre a tela vazia.
- "stringItem1" deverá ser criado. Este será o seu título, assim clique no "label stringItem1" e uma caixa de editor aparecerá. Digite "Mileage Calculator" para alterar o "stringItem1".
- Para "<Enter Text>"
, selecione-o de modo que você consiga uma caixa de edição e então delete o conteúdo desta caixa. Se fizer esta alteração por "Properties", digite algo e em seguida apague-o. - Agora, acrescente outro "StringItem" arrastando-o dentro da tela. Note que quando arrastá-lo sobre a tela, verá uma linha tracejada vermelha aparecer, e mostrar onde aquele componente está sendo acrescentado; poderá usar a inserção entre componentes existentes, caso queira. De forma simples, serão acrescentados todos os componentes debaixo do último.
- Os campos que serão adicionandos agora serão usados programadamente, assim será uma boa idéia para renomear a instancia, bem como alterar o texto. Localize o "Instance Name" nas propriedades e altere para "totalMileage".
- A seguir faça os mesmos passos para o primeiro
componente adicionado, altere o "label stringItem2" para "Total
Mileage", e limpe o "<Enter Text>"
. - Repita adicionando componentes para:
- "Average MPG"("Instance Name" -> "avgMpg", "label" -> "Average MPG", valor 0 - limpe o "<Enter Text>")
- "Average Cost/Mile" ("Instance Name" -> "avgCostPerMile", "label" -> "Avg. Cost/Mile", valor 0- limpe o "<Enter Text>")
- Quando terminar, a tela mostrará algo como isso (redesenha abaixo de 128x128 como é o tamanho do "display" do telefone):
- Salve.
Uma vez terminada estas etapas, poderá rodar a aplicação para ver o resultado. Não fará nada, exceto mostrar a tela criada, mas coseguirá ver sua aplicação rodar pela primeira vez, e ter uma idéia de como o emulador trabalha.
Clique no botão "debug" na barra de ferramentas; depois de alguns segundos, uma janela contendo a imagem de um telefone aparecerá. Aparecerá "MileageMidlet" destacado no menu, e um " label" "Launch" sobre o "softkey" direito do telefone. Clique em "softkey Select" e verá sua tela nova aparecer.
Terminado, feche a janela (ou escolha a saída do menu). Poderá necessitar fazer duas vezes este processo, porque a primeira vez finalizará seu aplicativo, e a segunda finalizará o emulador.
Página Inicializar
Embora seja usado provavelmente somente uma vez por sua aplicação, necessitará de uma página para ajustar a milhagem inicial no veículo, quando começar a usá-lo. Esta tela mostrará um lembrete para inicializar a milhagem somente depois que o veículo foi enchido com o gás (de outra maneira, os cálculos iniciais serão jogados fora). Deve também permitir que o usuário incorpore a milhagem atual, e restaure todos os outros totais a 0.
- Na visualização "Flow Design", clique no botão direito em "Screens" no "Inspector" e adicione um novo formulário ("Form").
- Arraste-o onde quiser no "Flow Design", e altere o nome para "InitializeForm".
- Dê um duplo clique neste formulário para ir para "Screen Designer".
- Adicione um "StringItem", e atribua ao "label" para "Enter Starting Mileage".
- Para o valor de "string item", digite "Lembrete - voce deverá fazer uma única vez e depois de encher o tanque de gás!"
- Arraste um "TextField" embaixo desta observação.
- Altere o label para "Starting Mileage" e o "Instance Name" para "startingMileage".
- Clique no botão para "Constraints" no painel de propriedades.
- Selecione "Numeric" do "popup list"; isto dirá que o componente irá aceitar somente a entrada numérica (num telefone, definir chaves somente com entradas numéricas, economiza tempo para completar o ciclo através da entrada da letra T9). Clique "OK".
- Salvar.
Adicionar Páginas de Detalhe
Finalmente, necessitamos uma nova página para adicionar detalhes quando colocar o combustível no veículo. Esta página examinará a milhagem atual do veículo, junto com o número dos galões e do custo do gás:
- Outra vez, na visualização "Flow Design", adicione um novo formulário "Form".
- Altere-o para "AddDetailsForm".
- Dê um duplo clique para editar a nova tela
- Adicione um "StringItem", altere o "label" para "Add Details", e limpe o campo valor.
- Arraste um "TextField" embaixo, altere o "Instance Name" para "currentMileage", e o "label" para "Current Mileage".
- Altere o "constraints" para numérico (veja acima).
- Adicione outro "Text Field", com "Instance Name" "gallons" e "label" "Gallons."
- Adicione outro "Text Field", com "Instance Name" "cost" e "label" "Cost".
- Lembre-se de atribuir o "constraints" para os três campos serem numéricos.
- Salvar.
Agora, terá três telas na aplicação, mas nenhuma delas conseguirá existir um código para fazer algo útil.
Primeiro, a sequência de telas acima:
Estabelecendo a navegação da tela
A instalação para a navegação entre telas é realizada a partir da visualização "Flow Design".
Ações e a navegação em aplicações Java ME são realizadas criando comandos, e então unindo aqueles comandos em código e eventos de navegação. Isto fará mais sentido depois que você adicionou um comando.
O primeiro comando que adicionará à página sumária será a de novos detalhes. Esta será a ação "default", porque é a coisa mais provável que fará com sua aplicação. Existem sugestões que dará ao dispositivo sobre este ser um "default", mesmo que não possa diretamente controlar, como o dispositivo fará a opção disponível. Neste caso, terá que adicionar este comando como um "OK" , esperando que conseguirá o próprio botão (outra vez, isto estará acima do dispositivo, mas esta sugestão o ajudará).