Baixe Introdução à Criação de Componentes em Thinwire - JavaFX e outras Notas de estudo em PDF para Informática, somente na Docsity!
AJAX em Java sem HTML nem JavaScript usando
Thinwire
Maurício Linhares de Aragão Junior
Desenvolva aplicações web utilizando técnicas AJAX sem ter que escrever nenhuma linha de HTML ou JavaScript, utilizando a biblioteca de componentes para web Thinwire
Introdução
O Thinwire é um framework para o desenvolvimento de aplicações web utilizando técnicas AJAX baseado em componentes visuais, como as bibliotecas gráficas para desktop como Swing ou SWT. Nele, todo o seu código é escrito em Java e uma aplicação web é gerada baseada no que você programou. Diferentemente de outros frameworks para o desenvolvimento AJAX em Java, como o Google Web Toolkit, o Thinwire não utiliza de forma alguma geradores de código ou transformações, todo o código é sempre escrito em Java e executa normalmente dentro de qualquer servidor web Java. Antes de iniciar o tutorial você deve fazer o download do Thinwire na página oficial do projeto: http://www.thinwire.com/ , se já usa o Java 1.5 ou mais recente, pode baixar a versão própria para o Java 1.5 e basta apenas adicionar o JAR do “commons-fileupload” que está dentro do download do SDK do Thinwire, se você usa uma versão anterior ao Java 1.5, deve colocar todos os arquivos JAR que estão no SDK do Thinwire no seu classpath.
Se você utiliza o Maven 2 para gerenciar o seus projetos
Se você utiliza o Maven 2 para gerenciar os seus projetos, vai preceber que os arquivos do projeto existe uma pasta chamada “maven”, nela você vai encontrar uma pasta “project” com os arquivos do projeto do Maven 2 (incluindo um pom.xml) e uma pasta “repository” que contém a dependência do Thinwire configurada. A única configuração adicional que você precisa fazer é adicionar a dependência do Thinwire no seu repositório, para fazer isso, basta copiar a pasta que está dentro da pasta “repository” dos arquivos do projeto para dentro do seu repositório local do Maven 2. Se você não sabe o que é o Maven 2, pode saber mais no tutorial “Automatizando os seus projetos com o Maven 2” (http://guj.com.br/java.tutorial.artigo.185.1.guj )
Olá Mundo!
Para começar os nossos estudos, vamos para o caso clássico de “Olá mundo”. Nós vamos criar uma janela (com o component Dialog) e nessa janela nós vamos adicionar um componente Label com o nosso texto. Listagem 1 – Olá Mundo com o Thinwire public class Main { public static void main (String[] args) { Application. current ().getFrame().setTitle("Olá Mundo No Thinwire!"); Dialog dialog = new Dialog(); dialog.setTitle("Janela"); dialog.setBounds(100, 100, 400, 200); Label label = new Label(); label.setText("Olá Mundo Pelo Thinwire!"); label.setSize( 150, 50 ); dialog.getChildren().add(label);
dialog.setVisible( true ); } } O exemplo mostra um uso simples do Thinwire, na primeira linha nós acessamos a uma referência da aplicação corrente (a que está disponível para o usuário atual), depois acessamos o objeto Frame da aplicação, que é a tela (ou aba) do navegador que está mostrando a aplicação, e alteramos o título dele. Após essa alteração, criamos um objeto do tipo Dialog (uma janela), criamos um Label e adicionamos ele a janela e no fim do código nós alteramos a propriedade “visible” da janela para que ela torne-se visível. O código é extremamente simples e parecido com qualquer outro código de desenvolvimento de interfaces gráficas para desktops que você já tenha desenvolvido, a única diferença é que esse código é para o desenvolvimento de aplicações web que usam AJAX. As únicas partes diferentes que nós podemos perceber é quando em vez de usar o método “setSize()” na janela, nós usamos o método “setBounds()”, que posiciona o componente de forma absoluta em seu componente pai e não de forma relativa. Os dois primeiros parâmetros do método são as posições x e y iniciais no plano cartesiano representado pelo componente pai, que no nosso caso é o próprio Frame da janela do navegador. Se esses valores houvessem sido definidos em um componente com outro pai, esses valores teriam sido absolutos com relação ao atual pai do componente. Todos os componentes no Thinwire devem, obrigatoriamente , ter um tamanho, se você adicionar um componente sem colocar o seu tamanho ele simplesmente não vai ser desenhado na tela. Para podermos implantar essa aplicação web em um servidor web Java comum, nós precisamos configurar ela no web.xml da aplicação web, vejamos como seria essa configuração do web.xml: Listagem 2 – web.xml do primeiro exemplo
thinwire thinwire.render.web.WebServlet styleSheet DefaultStyle mainClass org.maujr.thinwire.hello.Main thinwire /* O web.xml em questão define um servlet do Thinwire que é responsável por carregar a nossa aplicação. Na configuração do servlet nós passamos as informações pelos valores dos “init-param”, o parâmetro “mainClass” diz qual é a classe que tem o método “public static void main (String[] args)”, é essa classe que define o ponto de entrada de nossa aplicação e é através dela que o Thinwire começa a inicialização do código. O segundo parâmetro, “styleSheet”, define o estilo visual que os componentes do Thinwire devem mostrar para o usuário, algo como um “skin” do seu sistema operacional. Nós definimos como estilo o “DefaultStyle” que é o estilo padrão da ferramenta. A pasta “DefaultStyle” deve estar no diretório raiz da
Dialog dialog = new Dialog(); dialog.setTitle("Exemplo de Campos de Entrada"); dialog.setModal( false ); dialog.setResizeAllowed( true ); dialog.setBounds( 50, 50, 300, 200 ); Label labelInput = new Label(); labelInput.setBounds( 10, 10, 100, 20 ); labelInput.setText("InputText"); TextField inputField = new TextField(); inputField.setBounds(60, 10, 100, 20); Label labelPassword = new Label(); labelPassword.setBounds( 10, 40, 100, 20 ); labelPassword.setText("Password"); TextField inputPassword = new TextField(); /* Colocar a propriedade inputHidden com o valor TRUE faz
- com que o componente não exiba o seu texto / inputPassword.setInputHidden( true ); inputPassword.setBounds(60, 40, 100, 20); Label labelMask = new Label(); labelMask.setBounds( 10, 70, 100, 20 ); labelMask.setText("Masked"); TextField inputMask = new TextField(); inputMask.setBounds(60, 70, 100, 20); / Para criar um editor com máscara, basta dizer
- qual o formato na propriedade editMask */ inputMask.setEditMask("##,##"); dialog.getChildren().add(labelInput); dialog.getChildren().add(inputField); dialog.getChildren().add(labelPassword); dialog.getChildren().add(inputPassword); dialog.getChildren().add(labelMask); dialog.getChildren().add(inputMask); dialog.setVisible( true ); } Como você pode perceber, o exemplo segue a mesma lógica do anterior, nós criamos os componentes, damos uma posição a eles através da chamada do método “setBounds()”, se nós não tivéssemos feito as chamadas ao método “setBouds()” dos componentes, todos eles teriam sido desenhados na posição “0,0” do seu componente pai e apareciam todos um por cima dos outros, por isso é necessário posicionar todos absolutamente dentro dos seus componentes pai. No fim do exemplo nós adicionamos os componentes na janela e alteramos a propriedade “visible” da janela para que ela fique visível. As únicas partes diferentes deste código, são o início, onde alteramos algumas propriedades da janela (o objeto Dialog), nós fazemos com que ela seja não modal e que possa ter o seu tamanho alterado pelo usuário. Após isso, criamos um TextField alterando a sua propriedade “inputHidden” para transforma-lo em um campo que esconde o que o usuário digitou e no terceiro TextField nós alteramos a propriedade “editMask” para que ela formate a entrada que o usuário digitar. Imagem 2 – Imagem com o exemplo dos componentes de texto
Vejamos como está o nosso arquivo de configuração agora: Listagem 5 – Arquivo de configuração das aplicações do Thinwire
helloworld thinwire.render.web.WebServlet mainClass org.maujr.thinwire.hello.Main styleSheet DefaultStyle helloworld /* labelDate.setText("Date"); DateBox dateBox = new DateBox(); dateBox.setBounds(60, 120, 100, 150); Label labelDateDropDown = new Label(); labelDateDropDown.setText("DropDate"); labelDateDropDown.setBounds(10, 280, 100, 20); DropDownDateBox dropDownDateBox = new DropDownDateBox(); dropDownDateBox.setBounds(60, 280, 100, 20); dialog.getChildren().add(labelArea); dialog.getChildren().add(textArea); dialog.getChildren().add(labelResult); dialog.getChildren().add(labelDate); dialog.getChildren().add(dateBox); dialog.getChildren().add(labelDateDropDown); dialog.getChildren().add(dropDownDateBox); dialog.setVisible( true ); } Neste exemplo, temos de novo os componentes que desenham calendários para que o usuário possa selecionar uma data. Além dos componentes de data, nós também criamos um “listener”, que é um objeto que responde a um evento, e registramos ele no evento de alteração da propriedade “text” do TextArea, pois assim, a cada vez que alguém digitar alguma coisa naquele componente o código vai receber o evento e vai escrever o atual valor do TextArea em um Label que está ao seu lado. Imagem 3 – Imagem do exemplo de uso de TextAreas e Dates
Lidando com botões
O Thinwire define os três tipos mais comuns de botões, o botão comum de clicar, o checkbox, que é um botão que serve como um marcador e os botões de radio, que funcionam como uma lista onde você pode selecionar um único valor. Vejamos o nosso exemplo de código: Listagem 5 – Exemplo do uso de botões public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Botões"); Dialog dialog = new Dialog(); dialog.setTitle("Exemplo de Botões"); dialog.setModal( false ); dialog.setResizeAllowed( true ); dialog.setBounds( 50, 50, 400, 400 ); Button button = new Button(); button.setText("Clique Aqui!"); button.setBounds(50, 50, 100, 30); button.addActionListener( Button. ACTION_CLICK , new ActionListener() { public void actionPerformed (ActionEvent ev) { Button button = (Button) ev.getSource(); if ( "Clique Aqui!".equals( button.getText()) ) {
Painéis com abas - TabFolders
Painéis com abas são comuns em aplicações, eles costumam representar opções de configurações, vários documentos abertos (como em navegadores que tem suporte a abas). Vejamos como criar painéis com abas no Thinwire: Listagem 6 – Exemplo do uso de TabFolders public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Painéis com Abas"); Dialog dialog = new Dialog(); dialog.setTitle("Exemplo de Painéis com Abas"); dialog.setBounds(100, 100, 400, 400); TabFolder tabFolder = new TabFolder(); tabFolder.setSize(300, 300); TabSheet firstTabSheet = new TabSheet();; firstTabSheet.setText("Aba 1"); Label label = new Label(); label.setText("Label na primeira Aba"); label.setSize(150, 30); firstTabSheet.getChildren().add(label); TabSheet secondTabSheet = new TabSheet(); secondTabSheet.setText("Aba 2"); Button button = new Button(); button.setText("Button na segunda aba"); button.setSize(150, 30); secondTabSheet.getChildren().add(button); tabFolder.getChildren().add(firstTabSheet); tabFolder.getChildren().add(secondTabSheet); dialog.getChildren().add(tabFolder); dialog.setVisible( true ); }
O componente que representa o “container” de abas é o TabFolder , cada aba é um objeto do tipo TabSheet. Para adicionar um componente em uma das abas, basta usar a referência para o TabSheet no qual você deseja adicionar novos componentes e adicioná-los a a sua lista. Você pode selecionar uma aba específica usando o método “setCurrentIndex()” da classe TabFolder , passando como parâmetro o índice da TabSheet que você deseja selecionar. Imagem 5 – Exemplo do uso de painéis com abas
Mostrando dados na forma de tabelas
Exibir informação na forma de tabelas é lugar comum na maioria das aplicações desenvolvidas, seja qual for o seu trabalho real. Tabelas bem organizadas facilitam até mesmo o entendimento do que está sendo mostrado por parte dos usuários, então um bom framework de interface não poderia deixar de ter um componente tabela para mostrar informações. O componente que representa as tabelas no Thinwire é o GridBox, que além de mostrar os dados de forma tabular, também torna possível a seleção de suas linhas, vejamos um exemplo do uso desse componente: Listagem 7 – Exemplo do uso de tabelas public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Tabela"); Dialog dialog = new Dialog(); dialog.setTitle("Exemplo de Tabela"); dialog.setModal( false ); dialog.setResizeAllowed( true ); dialog.setBounds( 100, 100, 400, 400 ); GridBox table = new GridBox(); table.setVisibleHeader( true ); Column firstColumn = new Column(); firstColumn.setName("ID"); table.getColumns().add(firstColumn); Column secondColumn = new Column();
Árvores
Mostrar informações de forma hierárquica utilizando árvores é uma necessidade comum e o Thinwire oferece suporte a esse tipo de representação através do componente Tree e dos objetos Tree.Item, vejamos um exemplo de uso de árvores para mostrar informações de forma hierárquica: Listagem 9 – Árvores no Thinwire public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Árvore"); Dialog dialog = new Dialog(); dialog.setTitle("Exemplo de Árvore"); dialog.setModal( false ); dialog.setResizeAllowed( true ); dialog.setBounds( 200, 200, 400, 400 ); Tree tree = new Tree(); tree.setSize(300,300); tree.setRootItemVisible( false ); Item firstItem = new Item(); firstItem.setText("Item 1"); tree.getRootItem().getChildren().add(firstItem); Item secondItem = new Item(); secondItem.setText("Item 2"); tree.getRootItem().getChildren().add(secondItem);
Item thirdItem = new Item(); thirdItem.setText("Item 3"); tree.getRootItem().getChildren().add(thirdItem); Item firstInternalItem = new Item(); firstInternalItem.setText("Internal 1"); firstItem.getChildren().add(firstInternalItem); Item secondInternalItem = new Item(); secondInternalItem.setText("Internal 1"); firstItem.getChildren().add(secondInternalItem); dialog.getChildren().add(tree); dialog.setVisible( true ); } Para criar uma árvore, você primeiro precisa de um objeto árvore, depois você precisa criar objetos do tipo Tree.Item para representar cada um dos itens da árvore. Se você deseja que um dos itens tenha sub-itens, basta criar os objetos Tree.Item correspondentes e adicioná-los no item que você deseja que tenha os sub-itens. Imagem 7 – Exemplo de Árvore
Barras de menu
Janelas com barras de menu são uma necessidade comum em aplicações, para que o usuário possa selecionar facilmente as ações que deseja realizar. O Thinwire define o componente Menu para que essas barras de menu possam ser criadas e apenas os componentes que implementam a interface Window podem receber barras de menu, atualmente, os dois componentes que implementam Window são o componente Frame (que é a janela do navegador) e o componente Dialog, que é a janela do Thinwire. Vejamos um exemplo do uso de menus no Thinwire: Listagem 10 – Exemplo da criação de menus public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Menu"); Dialog dialog = new Dialog(); dialog.setTitle("Exemplo de Menu"); dialog.setBounds(100, 100, 200, 200); Menu menu = new Menu(); //acessando o item raiz do menu
Um menu não é “adicionado” a um componente através da coleção de filhos (o método “getChildren()”), ele é uma propriedade do objeto no qual vai ser colocado. Menus são sempre colocados através do método “setMenu()” no objeto que você deseja que o menu apareça. Lembre-se que apenas objetos que implementam a interface Window do Thinwire podem ter barras de menu. Imagem 8 – Exemplo de Menu
Fazendo upload de arquivos
Fazer upload de arquivos em aplicações web costuma ser um trabalho complicado, com a adição de bibliotecas que não são padrão e o uso de objetos que não fazem, necessariamente, parte de uma aplicação web. No Thinwire, toda a lógica de upload de arquivos é abstraída do programador, que simplesmente cria o componente e espera que o usuário selecione o arquivo para ser enviado. Vejamos como fazer upload de arquivos com o Thinwire: Listagem 11 – Upload de arquivos com o Thinwire public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Upload de Arquivo"); Dialog dialog = new Dialog("Exemplo de Upload de Arquivo"); dialog.setBounds(0, 0, 400, 400); final FileChooser fileChooser = new FileChooser(); fileChooser.setSize(300, 30); Button uploadButton = new Button(); uploadButton.setText("Enviar Arquivo"); uploadButton.setBounds(0, 40, 100, 30); final Label label = new Label(); label.setBounds(0, 80, 300, 30); uploadButton.addActionListener( Component. ACTION_CLICK , new ActionListener() { public void actionPerformed (ActionEvent event) { FileInfo fileInfo = fileChooser.getFileInfo();
File file = new File( new File(fileInfo.getName()).getName()); System. out .printf("AbsolutePath -> %s%n", file.getAbsolutePath()); try { file.createNewFile(); } catch (IOException e) { e.printStackTrace(); throw new RuntimeException(e); } fileInfo.saveToFile( file ); label.setText("Salvo em -> " + file.getAbsolutePath()); } }); dialog.getChildren().add(fileChooser); dialog.getChildren().add(uploadButton); dialog.getChildren().add(label); dialog.setVisible( true ); } Na nossa interface, nós criamos o componente que faz o upload de arquivos, o FileChooser e criamos mais um botão, que vai ser clicado pelo usuário na hora que ele quiser que o arquivo seja enviado. O componente FileChooser é um campo de upload comum de aplicações web, mas nós não precisamos mais nos preocupar em receber requisições ou fazer qualquer outra coisa, basta esperar que o usuário selecione o arquivo e recebê-lo, vejamos como isso acontece: Listagem 12 – Tratamento do evento public void actionPerformed (ActionEvent event) { FileInfo fileInfo = fileChooser.getFileInfo(); File file = new File( new File(fileInfo.getName()).getName()); try { file.createNewFile(); } catch (IOException e) { e.printStackTrace(); throw new RuntimeException(e); } fileInfo.saveToFile( file ); label.setText("Salvo em -> " + file.getAbsolutePath()); } Nós acessamos a propriede “fileInfo” do objeto FileChooser, criamos um arquivo onde o conteúdo que está sendo enviado vai ser gravado e chamamos o método “saveToFile()” do objeto FileInfo, que vai escrever todo o conteúdo do arquivo enviado no arquivo que nós criamos. Imagem 8 – Upload de arquivos
dialog.getChildren().add(listaSelecaoSimples); dialog.getChildren().add(listaSelecaoMultipla); dialog.getChildren().add(comboBox); dialog.setVisible( true ); } Como você pôde ver pelo código, as listas de seleção única e múltipla são apenas objetos do tipo GridBox que tem apenas uma coluna e que não mostram os seus cabeçalhos (a propriedade “visibleHeaders” está como “false”). A única diferença entre a de seleção simples da de seleção múltipla é que a de seleção múltipla tem seu estado mantido por um conjunto de checkboxes e não apenas pela seleção da linha do componente. Para saber qual a linha selecionada no de seleção simples, use o método “getSelectedRow()”, para saber quais as linhas selecionadas no de seleção múltipla, você deve usar o método “getCheckedRows()”. O combo box no fim do exemplo é apenas um GridBox dentro de um componente DropDown (que é um componente que desenha o seu componente filho dentro de uma caixa “drop-down”) que funciona exatamente da mesma forma que um GridBox comum funcionaria. Imagem 9 – Exemplo de listas e combos
Componentes diversos
Vejamos agora alguns componentes diversos do Thinwire que não tem um uso freqüente, mas que podem simplificar tarefas que seriam complexas de se fazer com componentes padrão. Vejamos alguns exemplos de uso desses componentes:
Componente Image
O componente Image mostra uma imagem qualquer no lugar onde ele for adicionado. As imagens podem ser de qualquer tipo que o navegador puder aceitar. Listagem 13 – Componente Image public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Imagem"); Dialog dialog = new Dialog(); dialog.setTitle("Janela com Imagem"); dialog.setBounds(100, 100, 400, 400); Image image = new Image("images/logo-guj.gif"); image.setSize(289, 70); dialog.getChildren().add(image);
dialog.setVisible( true ); } Parar criar um componente Image, precisamos apenas passar o caminho para a imagem que vai ser mostrada no seu construtor. Os caminhos que podem ser passados são caminhos relativos ao contexto da aplicação (que é o caso desse exemplo), o caminho completo no sistema de arquivos ou o caminho dentro do classpath, caminhos dentro do classpath deve ter como prefixo a palavra “classpath”, como em “class:///thinwire.ui.layout.SplitLayout/resources/Image.png”. Imagem 9 – Exemplo do componente Image
Componente ProgressBar
Uma ProgressBar (ou barra de progresso) normalmente mede a execução de alguma tarefa longa ou o tamanho de alguma coisa que tem tendência a se alterar durante a execução da aplicação, ela normalmente vai “enchendo” conforme as ações vão acontecendo. Vejamos um exemplo: Listagem 14 – Componente ProgressBar public static void main (String[] args) { Application. current ().getFrame().setTitle("Exemplo de Barra de Progresso"); Dialog dialog = new Dialog(); dialog.setTitle("Janela com Barra de Progresso"); dialog.setBounds(100, 100, 400, 400); final ProgressBar progressBar = new ProgressBar(100, 0); progressBar.setSize(100, 30); Button fillButton = new Button(); fillButton.setText("Preencher"); fillButton.setBounds(0, 40, 50, 30); fillButton.addActionListener(Component. ACTION_CLICK , new ActionListener() { public void actionPerformed (ActionEvent event) { for ( int x = 0; x < 100; x ++ ) { progressBar.setCurrentIndex(x); try {
