A barra de navegação, cujo código é mos- trado naListagem 7, terá três elementos: dois botões (próximo e anterior) e um Label. Seu construtor configura o posi- cionamento dos elementos dentro de um HorizontalPanel, e recebe uma fonte de dados. Não se preocupe com a fonte de dados por enquanto; veremos mais sobre ela ao tratar dos serviços do GWT.
A principal função da barra de navegação
é gerenciar os cliques nos botões de pró- ximo e anterior, e mostrar a mensagem “Carregando...” enquanto a tabela é popu- lada. A barra será exibida acima da lista de contatos, como já mostrado naFigura 1e seu layout é definido como a seguir: horizontalPanel.add(mensagemStatus);
horizontalPanel.setCellWidth(mensagemStatus, “100%”); horizontalPanel.add(btnAnterior);
horizontalPanel.add(btnProxima);
Para capturar os cliques de próximo ou anterior, o componente BarraNavegacao implementaClickListenere se registra como listener no momento da instanciação dos botões (passando this como segundo parâmetro):
42 Java Magazine•Edição 39
Listagem 3.Componente Fotografia – Fotografia.java import com.google.gwt.user.client.ui.*;
public class Fotografia extends Image implements LoadListener { public Fotografia(Contato contato) {
//configura o endereço da foto
setUrl(“foto s/” + Long.toString (contato.get ContatoId()) + “.jpg”);
//configurando o tamanho da imagem setWidth(“110”);
setHeight(“110”);
//configurando o estilo/css da imagem setStyleName(“fotografia”);
//configura a própria instância como o loadListener addLoadListener(this);
}
public void onError(Widge t sender) { setUrl(“fotos/foto_padrao.jpg”);
}
public void onLoad(Widget sender) {} }
Listagem 4.Contato.java
public class Contato implements IsSerializable { public long contatoId;
public String nome; public String telefone; public String celular; public String email; public String endereco; public Contato() {} //getters e setters ... }
Listagem 5.Arquivo CSS com estilos utilizados pelos componentes GWT – estilosListaContatos.css .gwt-TextBox { border-width : 0px; height: 15; width: 140; font-size: 12; } .gwt-DialogBox {
border: 2px solid #AAAAAA; background-c olor: white; }
.gwt-DialogBox .Caption {
background-image: url(‘imagens/ back_degrad. gif’); background-repeat: repeat-x; padding: 4px; padding-bott om: 8px; font-weight: bold; cursor: default; } .gwt-Button {
border: 1px solid #8E8E8E; width: 70;
}
Listagem 6.Componente personalizado para o endereço do contato – MeuDialogBox.java public class MeuDialogBox extends DialogBox {
private final static int DESLOCAMENTO _ESQUERDA = 80; private final static int DESLOCAMENTO _SUPERIOR =
(Window.getClientHeight() - 256) / 2;
private final static String TAMANHO_JAN ELA = “400px”; public MeuDialogBox(Image image, String titulo,
String conteudo) { setText(titulo); //posicao do DialogBox setPopupPosition(DESLOCAMENTO_ESQUERDA, DESLOCAMENTO_SUPERIOR); setWidth(TAMANHO_JANELA);
//Criando o botão para fechar o DialogBox, e o seu listener Button btnFechar =
new Button(“Fechar”, new ClickListener() { public void onClick(Widg et sender) {
hide();
} });
//cria um DockPanel e define o layout do DialogBox DockPanel panelBase = new DockPanel();
panelBase.a dd(imagem, DockPanel.WE ST); panelBase.add(btnFechar, DockPanel.SOUTH);
panelBase.a dd(new HTML(conteud o), DockPanel.CEN TER); //configura a distância entre os componentes deste panel panelBase.setSpacing(4);
//configura o conteudo do DialogBox como sendo o DockPanel add(panelBase);
}
public boolean onKeyDownPrev iew(char key, int modifiers) { //caso o usuário tecle ESC ou ENTER o DialogBox se fechará switch (key) {
case KeyboardListe ner.KEY_ENTE R: case KeyboardListe ner.KEY_ESCA PE: hide(); break; } return true; } } Listagem 7.BarraNavegacao.java
public class BarraNavegacao extends Composite implements ClickListener
{
public Button btnProxima = new Button(“>”, this); public Button btnAnterior = new Button(“<”, this); public Label mensagemStatu s = new Label();
//... outros atributos
public BarraNavegaca o(FonteDeDad os fdContatos) { this.fdContatos = fdContatos;
this.horizontalPanel.add(btnAnterior); this.horizontalPanel.add(btnProxima); this.btnAnterior.setEnabled(false); setWidget(horizontalPanel);
//… definição do layout da barra de navegação }
public void onClick(Widget sender) { if (sender == btnProxima) { paginaAtual++;
}
else if (sender == btnAnterior) { paginaAtual--;
}
setStatus(“ Carregando ...”); fdContatos.setPagina(paginaAtual);
}
public void setStatus(String status) {…} public void enable(boolean ultimaPagina) {…} }
Edição 39• Java Magazine 43
public class TabelaEditavel extends Composite implements TableListener
{
public TabelaEdita vel(FonteDeDa dos fonteDeDados, String[] nomesColunas,int nroRegistrosPagina) {
//... config. dos atributos com os valores dos parâmetros // configura esta instância como o Listener do Grid // para receber informações sobre o clique, linha e coluna grid.addTableListener(this);
//adiciona a barra de navegação e o Grid ao DockPanel panelBase.ad d(barraNavega cao, DockPanel.N ORTH); panelBase.add(grid, DockPanel.CENTER);
//configura o Composite com o DockPanel setWidget(panelBase);
//... métodos para layout – tamanho, cabeçalho, css, etc }
/* trata os eventos de cliques na tabela */ public void onCellClicked (SourcesTabl eEvents
sender, int row, int cell) {
//retornar se clique for no cabeçalho if (row == 0) return;
//se clicado na primeira coluna, mostra a caixa de diálogo if (cell == 0) {
mostraDialogBox(row); return;
}
//troca o conteúdo da célula por um campo editável if (cell > 1) {
editaCelula( row, cell, widget); }
//… definições de layout - destacar linha selecionada }
private void mostraDialog Box(int row) { Contato contato = getContato(ro w);
Fotografia fotografia = new Fotografia(contato); //instancia o DialogBox que criamos
MeuDialogBox dialogBox = new MeuDialogBox( fotografia, “Contato: “
+ contato.getN ome(), “<b>Endereco : </b> <br />” + contato.getEndereco());
dialogBox.show(); }
private void editaCelula( final int row, final int cell, Widget labelCelula) {
//troca o conteúdo da célula - de Label para TextBox final TextBox textBox = new TextBox();
textBox.setT ext(((Label) labelCelula) .getText()); grid.setWidget(row, cell, textBox);
//ao pressionar Enter atualiza o registro com a alteração textBox.addK eyboardListen er(new KeyboardList ener() {
public void onKeyDown(Wid get sender, char keyCode, int modifiers) {} public void onKeyPress(Widget sender,
char keyCode, int modifiers) {} public void onKeyUp(Widge t sender,
char keyCode, int modifiers) {
switch (keyCode) {
case KeyboardListener.KEY_ENTER:
atualizaRegistro(row, cell, textBox.getText()); break;
} } });
//ao perder o foco atualiza a base de dados com o novo valor textBox.addF ocusListener( new FocusListener (){…});
}
private void atualizaRegi stro(
int row, int coluna, String conteudoCelul a) {
//substitui o TextBox por um Label Label label = new Label();
TextBox textBox = (TextBox) grid.getWidg et(row, coluna); label.setText(textBox.getText());
grid.setWidget(row, coluna, label); //busca o registro alterado
Contato contato = getContato(row);
// como o GWT não possui suporte para reflection, // usamos um switch switch (coluna) { case 2: contato.setTelefone(conteudoCelula); break; case 3: contato.setCelular(conteudoCelula); break; case 4: contato.setEmail(conteudoCelula); break; }
//atualiza base de dados
fontDeDados.updateContato(contato); }
private void mostraFoto(i nt row) {…}
public void atualizaDados (List contatos) {…} private void configuraGri dLayout() {…} private Contato getContato(in t row) {…} private void marcarLinha( int row) {…} }
Listagem 8.TabelaEditavel.java
44 Java Magazine•Edição 39
Listagem 9.ListaContatos.java: componente que reúne a tabela editável e a fonte de dados public class ListaContatos extends Composite {
private TabelaEditavel tabelaEditavel; private FonteDeDados fdContatos;
public ListaContatos Widget(int nroRegistros Pagina) {
String[] nomesColuna s = new String[] { “”, “Nome”, “Telefone”, “Celular”, “E-mail” };
this.fdConta tos = new FonteDeDados( nroRegistros Pagina);
this.tabelaE ditavel = new TabelaEditave l(fdContatos , nomesColunas, nroRegistrosPagina);
setWidget(tabelaEditavel); }
}
Listagem 10.ContatosService.java: interface de serviço package br.com.jm.gwt.client.service; //… imports
public interface ContatosService extends RemoteService {
//métodos de serviços
public List getContatos( int posicaoInicia l, int nroRegistros Pagina) throws Exception;
public void updateContat o(Contato contato) throws Exception;
public static final String ENTRY_POINT = “/contatosService”; public static class Util {
public static ContatosServ iceAsync getInstance( ) {
ContatosServiceAsync instance = (ContatosServiceAsync) GWT .create(ContatosService.class);
ServiceDefTa rget target = (ServiceDefTa rget) instance; target.setServiceEntryPoint(ENTRY_POINT);
return instance; }
} }
Figura 4. Configurando o serviço remoto
public Button btnProxima = new Button(“> ”, this); public Button btnAnterior = new Button(“&l t;”, this);
Assim que um dos botões é clicado, é chamado o método onClick(). Em seqü- ência, o componente atualiza o atributo paginaAtual, muda a mensagem do Label para “Carregando...”, e chama o método setPagina()da fonte de dados.
Veja que a barra de navegação não possui referência ao componente TabelaEditavel, interagindo apenas com a fonte de dados. É a fonte de dados que é responsável por atualizar os objetos conectados a ela.