Abrindo e renderizando páginas WEB em uma aplicação JavaFX

Nessa postagem vamos falar sobre como carregar páginas WEB dentro de sua aplicação JavaFX. Mais uma vez: essa é uma tarefa muito fácil em JavaFX!

Um conto de duas classes: WebView e WebEngine

Vamos à parte teórica primeiramente e relembrar que tudo que é visual em uma aplicação JavaFX herda da classe  Node, que abordamos anteriomente. O WebView é a classe que  você vai usar para mostrar o conteúdo de uma página e ele herda de Node, ou seja, é passível de efeitos, animações, CSS, transformações, entre outros.
Já a classe WebEngine é onde manipulamos a DOM da página, executamos javascript, entre outros. É simplesmente o browser em sí, baseado no WebKit, o mesmo motor de navegadores famosos, como o Chrome.
A relação entre essas classes é simples: O WebView usa uma instância de WebEngine e cria a representação visual de um conteúdo HTML na sua aplicação JavaFX. Mas como usar os mesmo?

Usando WebView

O uso de WEBView consiste em três passos:

• Instanciar a classe javafx.scene.web.WebView;
• Acessar a WebEngine usando o método getEngine e usar o método load para carregar a página WEB;
• Adicionar o WebView ao Scenegraph da sua aplicação.

Em código, isso fica assim:



O que resulta em:

Exatamente, meus caros amigos. Foram 3 linhas de código e uma página WEB na sua app JavaFX.

Uma aplicação um pouco mais elaborada

Agora vamos fazer uma aplicação que mostra alguns componentes JavaFX interagindo com a WEB Engine. Vamos fazer o básico, pois, como quase todos os componentes JavaFX, isso levaria algumas postagens.

Nessa aplicação temos uma lista de URLs no lado esquerdo e quando o usuário seleciona uma, temos a mesma carregada no lado direito no nosso WEB View , vejam:

O funcionamento é simples: a ListView e o WebView ficam em um gerenciador de layout do tipo HBox. Quando o usuário seleciona um elemento na lista, pegamos a URL selecionada e carregamos na WebEngine usando o WebView. Quando a WebEngine está carregando a página, nós desabilitamos a lista.
Fácil, não? Vejam o código inteiro:

Conclusão

Introduzimos o componente WebView e mostramos o uso básico do mesmo. Claro que as possibilidades são muitas, mas nos limitamos ao básico do básico, pois cadê ao leitor usar a documentação do JavaFX para ir mais a fundo!