Toques de requinte para aplicações Desktop com JavaFX

javafx_ Toques de requinte para aplicações Desktop com JavaFX Conhecendo o funcionamento desta plataforma que promete estilizar aplicações Desktop, mesmo sem grandes conhecimentos de CSS. No dia a dia dos desenvolvedores de software, nos deparamos com incógnitas definidas pelo cliente final, as quais demandam tempo e recursos para constatar a melhor forma de satisfazê-lo. Afinal, nem sempre aquilo que imaginamos ser o melhor para o sistema, é aquilo que o cliente espera do produto. Apesar de muitas vezes pormos em prática aquele velho conceito de que devemos nos preocupar em entregar o sistema rodando, com layout nos preocupamos mais tarde, se for viável, começamos a repensar sobre este pensamento, que limita o sistema e esquece de torná-lo agradável aos olhos dos usuários. Para a entrega final, vemos cada dia mais a importância de um sistema visualmente interessante, semelhante a um jogo de videogame no qual os jogadores muitas vezes se animam com o jogo só pelo trailer, antes mesmo de seu lançamento oficial. Porém, também sabemos o quão difícil é dar uma aparência agradável a aplicações Desktop com as APis gráficas disponíveis. Por este motivo os desenvolvedores preferem desenvolver aplicações Web, pela variedade de frameworks disponíveis, como o Primefaces e RichFaces, por exemplo. O JavaFX oferece uma solução eficaz para este problema. Com a plataforma JavaFX, pode-se dar diversos toques de requinte para aplicações Desktop, como o uso de CSS para dar estilo aos componentes gerais, e efeitos gráficos interessantes, como o Reflection, que dá o efeito de espelho d água em um componente, dando um visual inimaginável para este fim, além de Transitions e Timelines, que são efeitos de tempo, como a translação de um painel para um determinado local na tela. Estes diversos efeitos podem se unir, formando um gráfico agradável aos olhos dos usuários. Os componentes desta plataforma se diferem dos componentes de aplicações Swing, melhorando certos itens, como o JTable, que se mostra complexo para muitos desenvolvedores Java, dando lugar para os TableViews e TableColumns, que possuem conceitos semelhantes aos Observers (Observer Pattern), que facilitam na edição dos dados exibidos. Além de outros componentes adicionados, como o Accordion, um painel sanfonado interessante para quem utilizava diversos JPanels para dar um efeito dinâmico, e também possui uma variedade de componentes Charts (gráficos) que soluciona o problema de muitas aplicações nas quais há necessidade de conjunto de informações numéricas. Ao final do artigo, encontram-se referências para exemplos práticos que ensinam o funcionamento de vários códigos que serão mostrados a seguir. Desenvolvendo uma tela de cadastro Para começarmos a desenvolver com JavaFX, criaremos uma tela simples, para cadastro de um cliente com alguns campos: nome, idade e sexo. inicialmente, não serão constatadas grandes mudanças em relação ao antigo Swing, mas já veremos uma estrutura diferente. Criação da tela Começaremos entendendo que precisamos de uma cena para acontecer nossa tela, e a tela propriamente dita é o nosso estágio, que seria equivalente ao JFrame, no Swing. Faremos uso, também, de / 42

Bruno Henrique de Oliveira bruno.vky@live.com cursando Análise e Desenvolvimento de Sistemas na FATEC São José dos Campos, programa com Java desde 2010, focado em desenvolvimento Android e JavaFX, possui conhecimento em desenvolvimento de jogos em Android com a framework AndEngine. Este artigo apresenta a plataforma JavaFX, com foco no desenvolvimento de aplicações Desktop com uso de CSS e efeitos gráficos visuais de forma simples. Ao final deste artigo, o leitor aprenderá como construir formulários e utilizar recursos como Effects, Transitions e Timelines para tornar a aplicação cada vez mais interessante aos olhos do cliente final. um AnchorPane, que seria equivalente ao JPanel do Swing, para adicionar os componentes. Os componentes são adicionados ao painel, que é adicionado à cena, que por sua vez é adicionada ao estágio. Listagem 1. Criação de uma tela simples. package application; import javafx.application.application; import javafx.scene.scene; import javafx.scene.layout.anchorpane; import javafx.stage.stage; public class CadastroApp extends Application { // Método principal para execução da Application public static void main(string[] args) { launch(args); // Método implementado da Application, para iniciar a tela public void start(stage stage) throws Exception { AnchorPane pane = new AnchorPane(); pane.setprefsize(150, 200); Scene scene = new Scene(pane); stage.setscene(scene); stage.settitle( Cadastro de Clientes ); stage.show(); O método main é necessário para executar o nosso formulário. O método launch é estático, da classe Application, e passa como parâmetro o args que vem do método main, caso haja alguma variável que venha junto da execução da classe. O método start é implementado também da classe Application, e é nele que colocamos a lógica para inicialização do formulário. inicialmente criamos um painel que conterá os componentes da tela, o AnchorPane, e damos sua largura e altura com o método setprefsize(double width, double height), no exemplo, damos 150x200. Então, criamos uma nova Scene, correspondente à tela, passando o componente de visualização principal da tela, no caso o nosso pane. indicaremos o valor da variável stage, que é do tipo Stage, que seria nossa tela propriamente dita, passando para ela qual cena acontecerá com o método setscene(scene scene). Demos também um título para a tela com o método settitle(string value), e por fim abrimos a tela com o método show(), da Stage. Criando os componentes Nossa tela terá poucos e básicos itens, como campos de texto e botões. Criaremos um método para inicializar os componentes e adicioná-los à cena. Listagem 2. Método para inicialização de componentes. private void initcomponents(anchorpane pane) { TextField txnome = new TextField(); txnome.setprompttext( Digite seu nome ); TextField txidade = new TextField(); 43 \

txidade.setprompttext( Digite sua idade ); txidade.setlayouty(30); RadioButton rbmasc = new RadioButton( Masculino ); rbmasc.setlayouty(60); RadioButton rbfem = new RadioButton( Feminino ); rbfem.setlayouty(90); ToggleGroup groupsexo = new ToggleGroup(); groupsexo.gettoggles().addall(rbmasc, rbfem); Button btcadastrar = new Button( Cadastrar ); btcadastrar.setlayouty(120); Button btsair = new Button( Sair ); btsair.setlayouty(150); pane.getchildren().addall(txnome, txidade, rbmasc, rbfem, btcadastrar, btsair); Neste método, instanciamos os componentes da tela, que são os seguintes:» TextField: campos de texto, indicamos para nome e idade;» RadioButton: botões de opção, indicamos para o sexo (masculino ou feminino);» ToggleGroup: grupo de opções, indicamos os RadioButtons, para que se possa escolher apenas uma opção, para isto usa-se o método get- Toggles().addAll(Toggle... toggles) passando os RadioButtons como parâmetros;» Button: botões, indicamos para os itens Cadastrar e Sair. Indicamos a coordenada de cada componente na tela, através do método setlayouty(double value), que indica a coordenada Y do eixo cartesiano. Pode- -se usar setlayoutx(double value) para indicar a coordenada X. Adicionamos todos os componentes ao painel principal, usando o método getchildren(), que retorna a lista de componentes deste painel, e adicionamos itens a esta lista, com o método addall(node... nodes), passando todos os itens de uma só vez, pois todos são Node. indicamos também um texto padrão de visualização nos campos de texto, com o método setprompttext(string value), este texto será visualizado enquanto seu foco estiver fora do componente, facilitando, por exemplo, para evitar o uso de Labels excessivas. Um código simples que pode ser melhorado, criando atributos privados para torná-los visíveis a outros métodos, como um método para iniciar as ações dos botões, por exemplo. Para criarmos sua ação, usamos um código semelhante ao listener do JButton. btsair.setonaction(new EventHandler<ActionEvent>() { public void handle(actionevent arg0) { stage.close(); ); O método setonaction(eventhandler handler) é o que indica a ação do botão, criamos um novo EventHandler para indicar o evento de ação, este método deve ser implementado, com o método handle(actionevent arg0). Para a função de cadastrar, apenas exibiremos uma caixa de mensagem dizendo que o cliente foi cadastrado com sucesso. btcadastrar.setonaction(new EventHandler<ActionEvent>() { public void handle(actionevent event) { JOptionPane.showMessageDialog(null, Cliente cadastrado com sucesso! ); ); Primeiro toque de requinte - CSS No JavaFX, podemos fazer uso de CSS para estilizar a aplicação. Porém, seus códigos são um pouco diferentes do padrão CSS. Podemos utilizar de dois modos: criando um novo arquivo CSS e indicando seus ids conforme seus componentes, ou também diretamente em código de cada componente, utilizando o método setstyle(string value), passando em uma String o mesmo estilo CSS que seria utilizado no arquivo. Modificaremos o fundo do painel principal da nossa tela de cadastro dos dois modos. Primeiro, utilizaremos o arquivo CSS, para isto, criaremos ele com o nome cadastro.css. Listagem 3. Arquivo CSS para personalização da tela..pane { -fx-background-color: blue; E identificamos este CSS em duas partes em código. Primeiro, indicamos o arquivo utilizado dentro da cena. scene.getstylesheets().add(cadastroapp.class. getresource( cadastro.css ).toexternalform()); E depois identificamos os componentes conforme o id indicado. pane.getstyleclass().add( pane ); A figura 1 apresenta nossa tela inicial com o uso do estilo CSS indicado. Mas que tal mudarmos esta cor de fundo para um tom gradiente, com duas cores distintas, por exemplo, um cinza e um azul? isto é completamente possível com o JavaFX, utilizando a propriedade linear-gradient. Vamos utilizar no próprio arquivo CSS. Aproveitaremos, também, para modificar a cor / 44

Figura 1. Formulário de cadastro de clientes. Figura 2. Tela de cadastro com efeito gradiente do texto dos RadioButtons para branco, para melhor visualização. Listagem 4. Modificação no arquivo CSS..pane { -fx-background-color: linear-gradient(from 0% 0% to 100% 100%, blue 0%, gray 100%);.rb { -fx-text-fill: white; E apenas precisamos indicar nos RadioButtons, o nosso id deste arquivo. rbmasc.getstyleclass().add( rb ); rbfem.getstyleclass().add( rb ); Veja o toque de requinte dado à aplicação, depois dessas modificações. O efeito gradiente para painéis faz uma diferença gráfica perceptível para qualquer leigo. A figura 2 mostrará o resultado da modificação de estilo CSS na tela. A partir daqui, veremos diversos estilos de CSS para produzirmos efeitos visuais para a aplicação. Podemos também indicar o CSS direto no código. Veremos o exemplo do efeito gradiente: pane.setstyle( -fx-background-color: linear-gradient( from 0% 0% to 100% 100%, blue 0%, gray 100%); ); E dará o mesmo efeito do exemplo com o arquivo CSS. Segundo toque de requinte Effects Com o JavaFX, podemos usufruir de efeitos gráficos visuais surpreendentes, como, por exemplo, um espelho d água em um componente, ou uma sombra no mesmo. São diversas opções de Effects, a própria Oracle disponibiliza exemplos práticos de uso. Neste artigo, mostraremos dois exemplos, com Reflection e Drop Shadow. Primeiro, usaremos o Reflection para dar um efeito de reflexão aos dois botões da tela. Seu uso em código é muito simples. btcadastrar.seteffect(new Reflection()); btsair.seteffect(new Reflection()); O método seteffect(effect effect) indica o tipo de efeito utilizado no componente. instanciando um novo Reflection, já vemos seu efeito prático. A figura 3 apresenta este efeito. Podemos alterar certas propriedades do Reflection, como a opacidade da reflexão. Para isto, basta instanciar uma variável do tipo Reflection e usar seus métodos para configurá-lo da sua maneira. Este mesmo efeito poderia ser facilmente utilizado nos RadioButtons ou nos TextFields, com o mesmo método, presente em qualquer componente, pois todos derivam da classe Node, envolvendo o conceito do Composite Pattern. 45 \

Figura 3. Efeito Reflection. Figura 4. Efeito Drop Shadow. Agora vamos colocar um efeito de sombra nos dois TextFields. Com o mesmo método seteffect(effect effect), podemos indicar o Drop Shadow. DropShadow dropshadow = new DropShadow(); dropshadow.setspread(0.5); Usamos o método setspread(double value) apenas para aumentar o espaço de sombreamento do componente. Agora, basta passar o efeito para cada componente. txnome.seteffect(dropshadow); txidade.seteffect(dropshadow); No nosso exemplo, este efeito não será muito perceptível, porém, mudando a cor da tela para o branco, o sombreamento será mais visível. A figura 4 apresenta o efeito DropShadow nos TextFields. Terceiro toque de requinte Transitions e Timelines O uso de Transitions e Timelines pode ser interessante em aplicações que exigem recursos visuais avançados. Com eles podemos, por exemplo, mudar um componente de lugar, como em um efeito de translação, e também utilizar um efeito alpha, que tira a visibilidade aos poucos de um componente e o torna visível, em seguida. Primeiro, mostraremos o uso de Transitions, entre os vários tipos, usaremos a classe FadeTransition, manipulando um efeito Fade in/fade Out. Listagem 5. FadeTransition no botão btcadastrar. // Ação no botão, ao passar ao mouse sobre o componente btcadastrar.setonmouseentered(new EventHandler<MouseEvent>() { public void handle(mouseevent event) { FadeTransition transition = new FadeTransition( Duration.millis(2000), btcadastrar); transition.setfromvalue(0.0); transition.settovalue(1.0); transition.play(); ); Com o método setonmouseentered (EventHandler handler), indicamos uma ação ao passar o mouse sobre o componente. Em sua implementação, criamos um novo FadeTransition(Duration duration, Node node), passando a duração da transição, utilizando a classe Duration do JavaFX, no nosso exemplo, passamos 2000 milissegundos, ou seja, 2 segundos de transição, e também passamos qual o Node que acontecerá o efeito. Os métodos setfromvalue(double value) e settovalue(double value) indicam a variação do Fade, começando em 0.0 e terminando em 1.0, respectivamente, em seus métodos. E, por fim, executamos a transição com o método play(). Há diversos tipos de Transitions, como já comentado, inclusive pode-se utilizar vários Transitions em sequência ou paralelamente. Mostraremos agora o uso de Timelines para mo- / 46

ver um componente de um ponto ao outro, daremos este efeito para o botão sair. Listagem 6. Timeline no botão btsair. //Listagem 6. Timeline no botão btsair. btsair.setonmouseentered(new EventHandler<MouseEvent>() { public void handle(mouseevent arg0) { Timeline timeline = new Timeline(); KeyValue kv = new Keyvalue(btSair. layoutxproperty(), btsair.getlayoutx() + 20); KeyFrame kf = new KeyFrame( Duration.millis(2000), kv); timeline.getkeyframes().add(kf); timeline.play(); ); Criamos uma nova Timeline, que será responsável pelo efeito. A criação da KeyValue indica qual a transição de valores ocorrerá, no nosso caso, a coordenada X do btsair será incrementada em 20. A KeyFrame indica o tempo de execução do efeito, necessita passar em sua construção qual a duração (Duration) e qual a KeyValue, pode-se passar diversas KeyValues ao mesmo tempo. Adicionamos a KeyFrame para a Timeline, com o método getkeyframes().add(keyframe kf), e, por fim, executamos, com o método play(). Ao passar o mouse sobre o botão, veremos o mesmo movendo-se para o lado direito. Este efeito já se mostra bastante avançado. Podemos também aumentar a largura e altura de um componente, voltando ao normal quando tira o mouse dele. Listagem 7. Efeito Scale no botão btsair. btsair.setonmouseentered(new EventHandler<MouseEvent>() { public void handle(mouseevent arg0) { Timeline timeline = new Timeline(); KeyValue kv = new Keyvalue(btSair.scalexProperty(), 1.2); KeyValue kv2 = new Keyvalue( btsair.scaleyproperty(), 1.2); KeyFrame kf = new KeyFrame(Duration.millis(1000), kv, kv2); timeline.getkeyframes().add(kf); timeline.play(); ); btsair.setonmouseexited(new EventHandler <MouseEvent>() { public void handle(mouseevent arg0) { Timeline timeline = new Timeline(); ); KeyValue kv = new Keyvalue(btSair.scalexProperty(), 1.0); KeyValue kv2 = new Keyvalue( btsair.scaleyproperty(), 1.0); KeyFrame kf = new KeyFrame(Duration.millis(1000), kv, kv2); timeline.getkeyframes().add(kf); timeline.play(); A novidade aqui é a indicação de duas KeyValues ao mesmo tempo, para aumentar a escala do botão em coordenada X e Y. Na construção da KeyFrame, indicamos todas as KeyValues necessárias, logo após a duração. Utilizamos também o método setonmouseexited(eventhandler handler) para indicar uma ação ao tirar o mouse do componente, ele irá fazer o botão voltar ao normal, conforme outra Timeline criada. Considerações finais Vimos um pouco do que o JavaFX oferece para os desenvolvedores Java. Seus efeitos gráficos visuais mostram-se incríveis para aplicações Desktop, dando-nos poder para pensar em um layout adequado e belo, mesmo sem conhecer efeitos avançados de CSS e JavaScript, por exemplo. Com esta plataforma, torna-se simples programar extensos formulários e dimensioná-los na tela de forma limpa. Pode-se tornar ainda mais organizado utilizando o programa da Oracle, o JavaFX Scene Builder, que é um ambiente para desenvolver layouts do JavaFX com um sistema drag-and-drop. Ele gera um arquivo FXML, que é facilmente identificado em código. /referências > JavaFX 2.0: Introduction by Example, de Carl Dea, ed. Apress. Livro para introduzir JavaFX, com códigos práticos e ensino fácil, porém em inglês. > http://docs.oracle.com/javafx/2/visual_effects/jfxpubvisual_effects.htm Documentação sobre Effects > http://docs.oracle.com/javafx/2/animations/jfxpubanimations.htm Documentação sobre Transitions e Timelines > http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/ cssref.html Documentação sobre CSS JavaFX 47 \