1

Iniciando
O melhor jeito de comear parar de falar e comear a fazer.
Walt Disney

Instalando a Plataforma JavaFX

Neste captulo voc aprender como instalar o Kit de Desenvolvimento de Software (SDK Software Development Kit) do JavaFX Script tanto em um ambiente de linha de comando quanto com um Ambiente de Desenvolvimento Integrado (IDE Integrated Development Environment). Voc tambm ir desenvolver, compilar e executar sua primeira aplicao JavaFX Script. A linguagem de programao JavaFX Script vem em um Kit de Desenvolvimento de Software (SDK), com base na Plataforma Java, Standard Edition (Java SE) 1.6. Ento voc precisar do seguinte: O ltimo Kit de Desenvolvimento Java SE (JDK Java SE Development Kit) para seu sistema operacional (Java SE 6 Update 10 ou superior; para Mac, o ltimo Java para Mac OS X 10.5). O NetBeans IDE para JavaFX 1.2, Eclipse Plugin para JavaFX, ou o Kit de Desenvolvimento de Software JavaFX 1.2 para seu ambiente. O NetBeans IDE para JavaFX 1.2 est disponvel para Microsoft Windows XP, Microsoft Vista, Apple Mac OS X Leopard, Linux e OpenSolaris x86. Opcionalmente, o kit de ferramentas grficas JavaFX Production Suite para exportar arquivos JavaFX do Adobe Illustrator CS3, Adobe Photoshop CS3 e converter Scalable Vector Graphics. Se for iniciante voc precisa ter certeza de possuir o ltimo Kit de Desenvolvimento Java SE (JDK) instalado. Se quiser tirar vantagem das novas caractersticas Applet que JavaFX facilita, precisar de Java SE 6 Update 10 ou superior. Se estiver rodando Windows, Linux ou Solaris, pode fazer download do ltimo Kit de Desenvolvimento Java a partir de http://java.sun.com/javase/downloads/index.jsp. Se usa Mac OS X, baixe o ltimo lanamento da Apple para a Plataforma Java de http://developer.apple.com/java. Conforme escrevemos este capitulo, Java para Mac OS X 10.5 Update 3 agora suporta Java 6

Captulo 1

InICIando

Update 7. Esse lanamento da Apple ainda no suporta a caracterstica de arrastar (drag) da Applet descrita no Captulo 9, Adicione JavaFX a Pginas Web com Applets. Para criar sua primeira aplicao JavaFX Script, voc tem diversas opes. Primeiro, pode fazer download de NetBeans IDE para JavaFX 1.2 com base em NetBeans IDE 6.5 de http://javafx.com. Ou, a partir do mesmo site, voc pode fazer download do SDK de JavaFX e usar seu editor favorito, compilar e executar a aplicao JavaFX a partir da linha de comando. Se escolher usar Eclipse, baixe o JavaFX Plugin para Eclipse de http://kenai.com/projects/eplugin depois de baixar o SDK do JavaFX. H tambm um conjunto de ferramentas e plugins para designers para exportar assets grficos para aplicaes JavaFX, o JavaFX Production Suite. Eles sero discutidos com mais detalhes no Captulo 2, JavaFX para o Designer Grfico, de http://www. javafx.com.

Configurando NetBeans IDE para JavaFX 1.2

Voc pode instalar o NetBeans IDE para JavaFX 1.2 diretamente de javafx.com. H instaladores para Microsoft Windows XP, Microsoft Vista, Macintosh, Linux e Solaris x86. Depois do NetBeans IDE ser instalado, execute o NetBeans IDE. Deve haver um cone de inicializao no desktop criado durante o processo de instalao. Para criar seu primeiro projeto, faa o seguinte: 1. Inicialize NetBeans IDE para JavaFX. 2. Inicie o assistente New Project selecionando File | New Project no menu principal. 3. No assistente New Project, selecione JavaFx Category e JavaFx Script Application Project Type. A Figura 1.1 mostra como NetBeans IDE se parece quando cria um novo Projeto JavaFX. 4. Na janela Name and Location, digite no Project Name, MyFirstJavaFXApplication. Altere a localizao dos arquivos de projeto, se desejar, e clique em Finish. A Figura 1.2 mostra a janela Name and Location. NetBeans IDE ento cria o diretrio do projeto na pasta de projeto especificada e d a ela o mesmo nome de seu projeto, MyFirstJavaFXApplication. Na Figura 1.3, observe o arquivo de classe Main.fx abaixo do pacote myfirstjavafxapplication no n Source Packages. Esse arquivo foi criado porque voc deixou a checkbox Create Main File selecionada quando criou o projeto. Use esse arquivo para criar sua primeira aplicao simples. A Figura 1.3 mostra a janela de edio para o arquivo fonte Main.fx.

C o n f I g u r a n d o n e t B e a n s Ide

pa r a

J ava fX 1.2

Figura 1.1

Novo Projeto JavaFX.

Figura 1.2

Novo Projeto JavaFX Name and Location.

Captulo 1

InICIando

Figura 1.3

Novo Projeto JavaFX Janela de Edio Main.fx.

O arquivo Main.fx ter um esqueleto de cdigo que exibe uma janela com algum texto. Voc precisa modificar esse cdigo. Como todo bom captulo Iniciando, vamos usar o exemplo Hello World. Abordaremos os detalhes mais tarde, mas o cdigo na Lista 1.1 mostrar uma janela no desktop, com Hello World exibido.
Lista 1.1 Aplicao Hello World Simples

package myfirstjavafxapplication; import import import import javafx.stage.Stage; javafx.scene.Scene; javafx.scene.text.Text; javafx.scene.text.Font;

Stage { title: My first JavaFX Application width: 400 height: 80 scene: Scene { continua

C o n f I g u r a n d o n e t B e a n s Ide

pa r a

J ava fX 1.2

content: Text { font : Font { size : 24 } x: 10, y: 30 content: Hello World } } }

Para visualizar a tela resultante enquanto edita o arquivo, use o modo JavaFX Preview. Para entrar no modo Preview, clique no cone Preview, esquerda do editor Main.fx (veja Figura 1.4). Isso abre uma nova janela no topo da janela de edio Main.fx e permite que voc veja como a tela se parece conforme insere suas alteraes. A Figura 1.4 mostra a janela Preview. Por exemplo, vamos alterar sua aplicao para escalonar Hello World por um fator de 4. Isso feito usando os atributos scaleX e scaleY para o elemento Text. Esses atributos faro o Text escalonar quatro vezes a partir de seu ponto central. A Figura 1.5 mostra as alteraes instantaneamente na janela Preview. Ao usar o modo Preview, voc pode rapidamente ver o impacto de suas alteraes. Ele permite testar novos efeitos sem ter que passar pelo ciclo de editar, compilar, executar um lao (em ingls, loop) para cada iterao de mudanas. Assim que inserir a alterao, a tela atualizada com a ltima visualizao. Hello World um tanto chato, ento vamos nos divertir e apiment-lo um pouco. Adicionaremos um background com efeito gradiente, tornaremos a fonte maior e adicionaremos um efeito de reflexo. Usando o exemplo original para Hello World, voc adiciona o cdigo para obter o efeito desejado. Voc aprender o que cada parte desse novo cdigo faz nos captulos futuros, mas, por enquanto, queremos mostrar o que possvel. A Figura 1.6 mostra esse exemplo muito mais interessante de Hello World.

Captulo 1

InICIando

Figura 1.4

Modo Preview do JavaFX.

Figura 1.5

Modo Preview do JavaFX com modificao.

C o n f I g u r a n d o n e t B e a n s Ide

pa r a

J ava fX 1.2

Figura 1.6

Hello World.

A Lista 1.2 mostra como isso foi feito. , na verdade, muito simples e conciso. Essa a beleza da Plataforma JavaFX. Lista 1.2 Interessante Aplicao Hello World
package myfirstjavafxapplication; import import import import import import import import import javafx.stage.Stage; javafx.scene.Scene; javafx.scene.text.Text; javafx.scene.text.Font; javafx.scene.shape.Rectangle; javafx.scene.paint.Color; javafx.scene.paint.LinearGradient; javafx.scene.paint.Stop; javafx.scene.effect.Reflection;

var stage:Stage = Stage { title: My first JavaFX Application visible: true width: 400 height: 200 scene: Scene { var text:Text; content: [ Rectangle { width: bind stage.width height: bind stage.height fill: LinearGradient { endY: 1, endX: 0 stops: [ Stop {offset: 0.0 color: Color.rgb(153, 153, 153); }, Stop {offset: 0.5 continua

Captulo 1

InICIando

color: Color.WHITE; }, Stop { offset: 1.0 color: Color.rgb(153, 153, 153); }, ] } }, text = Text { translateX: bind (stage.widthtext.boundsInLocal.width)/2 translateY: bind stage.height /2 content: Hello World effect: Reflection { fraction: 0.7} font: Font {name:ArialBold, size: 64} } ] } }

Distribuindo a Aplicao
Para compilar o projeto inteiro, clique no projeto MyFirstJavaFXApplication, na aba Projects esquerda da tela do NetBeans IDE. Quando o projeto estiver destacado, clique com o boto direito do mouse para trazer um menu de opes, selecione Build Project. Isso automaticamente salva todos os arquivos-fonte atualizados para o projeto, compila o JavaFX Script e qualquer arquivo-fonte Java, colocando ento os arquivos de classe em um arquivo Java Archive (JAR) abaixo do diretrio dist. Alm de gerar o arquivo JAR para executar localmente a aplicao a partir de um atalho no desktop ou da linha de comando, ele tambm gera arquivos de suporte para usar a aplicao como um Java Applet em um navegador e para us-la com o cone Web Start, seja dentro de um navegador ou a partir do desktop. Essas duas opes sero explicadas em detalhes no Captulo 9. A Figura 1.7 mostra o menu do projeto com o item Build Project selecionado.

Figura 1.7

Build Project JavaFX.

lInha

de

Comando

Depois de sua aplicao estar completa, construda e pronta para ser implantada, voc pode criar um arquivo usando todo o contedo do diretrio dist. Ferramentas comuns para isso so zip e tar. Outra opo incluir esses arquivos em uma ferramenta de instalao.

Arquivos de Distribuio
MyFirstJavaFXApplication.jar MyFirstJavaFXApplication.html MyFirstJavaFXApplication.jnlp MyFirstJavaFXApplication_browser.jnlp lib/

Para executar a aplicao, tenha certeza de que o SDK de JavaFX est instalado, ento instale a distribuio e execute o seguinte comando:
javafx -cp dist/MyFirstJavaFXApplication.jar myfirstjavafxapplication.Main

Usando esse comando, voc poder facilmente criar atalhos no desktop para executar a aplicao. Ou poder usar o Java Web Start executando o arquivo dist/MyFirstJavaFXApplication.jnlp. Aviso ao Desenvolvedor: A opo jar para executar diretamente a partir do arquivo JAR atualmente no funciona com JavaFX; porm, esse um bug conhecido e ser resolvido em um lanamento futuro.

Tambm h um meio de implantar aplicaes JavaFX por meio da World Wide Web usando Java Applets ou o protocolo Java Web Start, que discutiremos no Captulo 9. MyFirstJavaFXApplication.html, MyFirstJavaFXApplication.jnlp e MyFirstJavaFXApplication_browser.jnlp oferecem exemplos de arquivo que podem ser usados para isso.

Linha de Comando
Se voc quiser desenvolver sem o NetBeans IDE para o Kit de Desenvolvimento JavaFX 1.2, faa download do SDK do JavaFX a partir de www.javafx.com. H instaladores para Microsoft Windows XP com Service Pack 2 e Vista, Apple Mac OS X 10.5.2, Linux e OpenSolaris.

10

Captulo 1

InICIando

Tabela 1.1

Instalao do SDK do JavaFX Diretrio de Instalao Padro

C:\Program Files\JavaFX\ javafx-sdk1.2

Sistema Operacional
Windows

Comando de Compilao
javafxc.exe

Comando de Execuo
javafx.exe

Estilo JavaDoc
javafxdoc.exe

Mac OS

/System/Libra- javafxc ry/Frameworks/ JavaFX.framework/Versions/1.2

javafx

javafxdoc

Linux/Solaris

Current directory

javafxc

javafx

javafxdoc

Instale os pacotes, e existiro programas executveis para compilar o arquivo fonte JavaFX Script, executar a aplicao JavaFX Script e gerar a documentao no estilo JavaDoc (vide Tabela 1.1). Para executar sua primeira aplicao, existem os passos bsicos: 1. Use seu editor favorito e salve o fonte para seu programa em um arquivo. 2. Execute o compilador JavaFX, javafxc, usando esse arquivo fonte para criar arquivos de classe Java. 3. Execute a aplicao usando o comando javafx. 4. Opcionalmente, crie uma documentao de estilo JavaDoc para seu programa. Duplicando o exemplo de Hello World discutido em NetBeans IDE para seo JavaFX 1.2, crie um arquivo usando seu editor favorito com o seguinte contedo, como exibido na Lista 1.3.
Lista 1.3 Aplicao Hello World Verso do Editor

import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.text.Text; var stage:Stage; stage = Stage { title: My first JavaFX Application visible: true width: 400 height: 100 scene: Scene { content: Text { continua

lInha

de

Comando

11

x: 10 y: 20 content: Hello World } } }

Salve isso em MyFirstApp.fx, ento compile usando o comando javafxc. (Tenha certeza de que o diretrio bin do SDK est no seu path de comando.)
$ javafxc MyFirstApp.fx $

Isso produz um ou mais arquivos de classe no diretrio atual. A seguir, execute o primeiro programa usando o comando javafx:
$ javafx MyFirstApp

Se tudo correr bem, voc deve ver algo similar Figura 1.8. L voc tem sua primeira aplicao JavaFX Script. Voc agora est pronto para seguir para um contedo mais interessante. O comando de compilao javafxc muito similar ao comando de compilao javac. De acordo, o comando javafx usa o mesmo formato e as mesmas opes que o comando de compilao Java. O formato bsico do comando javafxc :
$ javafxc <options> <source files>

O comando de tempo de execuo javafx , na verdade, um wrapper que chama o comando Java padro que inclui os arquivos JAR JavaFX Script. Como o compilador JavaFX produz arquivos de classe Java padro, voc pode incluir esses arquivos de classe, junto com qualquer arquivo de classe Java ou JavaFX, em um arquivo Java (JAR). Para incluir esses arquivos JAR ao executar sua aplicao JavaFX, voc apenas adiciona essas localizaes de arquivo JAR em seu classpath ao chamar o comando javafx.
$ javafx -cp directory/MyJarFile.jar MyFirstApp

Figura 1.8

Hello World do SDK JavaFX.

12

Captulo 1

InICIando

Agora voc tem os fundamentos para implementar sua aplicao JavaFX Script a partir da linha de comando. Isso ser o suficiente para aplicaes pequenas, mas conforme sua aplicao cresce em tamanho e complexidade, rapidamente voc descobrir que usar a opo de linha de comando se torna mais difcil e complexo. Quando seu projeto fica muito grande, voc pode querer considerar o NetBeans IDE para JavaFX 1.2, Eclipse IDE com o JavaFX Plugin ou uma ferramenta de construo como Apache Ant.

A Task Ant JavaFXC

Apache Ant uma ferramenta de construo baseada em Java, escrita com a importante vantagem de ser multiplataforma e independente de Sistema Operacional. Ant torna fcil desenvolver em uma plataforma e implantar em outra; como resultado, tornou-se uma das mais populares ferramentas de construo atualmente. Voc pode fazer download dos ltimos binrios ant em http://ant.apache.org/. Se voc estiver usando o NetBeans IDE para JavaFX 1.2, Ant j est includo no pacote NetBeans IDE. O Kit de Desenvolvimento de Software de JavaFX oferece uma task Ant para compilar arquivos fontes JavaFX Script. Para declarar isso em um arquivo Ant build.xml, use a task Ant taskdef. Para uma primeira aplicao simples, o arquivo build.xml na Lista 1.4 compila qualquer arquivo .fx no diretrio atual. Ant esperto o suficiente para saber quando os arquivos precisam ser compilados, ento, depois de um arquivo JavaFX Script ser compilado, ele no ser compilado novamente at que o arquivo fonte JavaFX Script seja atualizado.

Lista 1.4

Exemplo de Arquivo Ant Build.xml

<?xml version=1.0 encoding=UTF-8?> <project name=My First JavaFX Application default=compile basedir=. > <property name=javafx.dir value=${user.home}/javafx-sdk /> <property name=javafx.lib value=${javafx.dir}/lib /> <property name=javafx.bin value=${javafx.dir}/bin /> <taskdef name=javafxc classname=com.sun.tools.javafx.ant.JavaFxAntTask classpath=${javafx.lib}/javafxc.jar /> continua

eClIpse

13

<target name=compile > <javafxc srcdir=. destdir=. includes=*.fx classpath=. executable=${javafx.bin}/javafxc/> </target> </project>

Para criar a primeira aplicao, altere o diretrio para o diretrio onde voc salvou o arquivo MyFirstApp.fx, copie ou salve o arquivo build.xml nese diretrio, e ento execute o comando ant:
bash-3.2$ ant Buildfile: build.xml compile: [javafxc] Compiling 1 source file to /export/home/jclarke/ Documents/Book/FX/code/Chapter1 BUILD SUCCESSFUL Total time: 1 second bash-3.2$

Eclipse
Se voc preferir usar o Eclipse IDE, primeiro precisa baixar e instalar o SDK de JavaFX para seu ambiente de http://javafx.com. A seguir, voc precisa do Eclipse 3.4 ou superior; Eclipse IDE for Java EE Developers recomendado. Finalmente, voc precisa fazer download e instalar o plugin de Eclipse para JavaFX de http:// kenai.com/projects/eplugin. Para instalar o plugin de Eclipse para JavaFX, apenas descompacte-o no diretrio onde Eclipse est instalado. Por exemplo, se Eclipse estiver instalado em C:\Program Files\eclipse, descompacte o plugin Eclipse para JavaFX do diretrio, C:\Program Files. Para criar seu primeiro projeto JavaFX, execute Eclipse. Na rea de trabalho abaixo do Project Explorer, clique com o boto direito e selecione New | Project. A Figura 1.9 mostra a seleo do menu New Project. A seguir, crie um Java Project selecionando Java | Java Project no wizard New Project. A Figura 1.10 mostra essa janela com as selees. Nomeie o projeto por exemplo, MyFirstJavaFXProject. A Figura 1.11 mostra a janela Create a Java Project com o nome do projeto inserido.

14

Captulo 1

InICIando

Figura 1.9 Novo Projeto Eclipse.

Figura 1.10

Assistente de Novo Projeto (New Project).

eClIpse

15

Figura 1.11

Janela Create a Java Project.

Isso cria um projeto com uma Perspectiva Java; a seguir, temos que adicionar o JavaFX Nature. Para fazer isso, clique com o boto direito do mouse em MyFirstJavaFXProject e selecione JavaFX | Add JavaFX Nature. A Figura 1.12 mostra o menu para adicionar JavaFX Nature ao projeto.

Figura 1.12

Adicionar JavaFX Nature.

16

Captulo 1

InICIando

A primeira vez que voc adicionar JavaFX Nature a um projeto, pode ser solicitado que confirme ou configure as diversas questes de configurao. E, o mais importante, se voc no instalou o SDK de JavaFX na localizao padro, precisa inserir a localizao atual onde est instalado em seu sistema. Tambm, precisa ter certeza de que o ambiente Java est apontando para o uso de Java 6 Update 10 ou superior. Para criar o JavaFX Script Hello World, primeiro crie um pacote selecionando New | Package. Nesse exemplo, ns nomeamos o pacote de myfirstjavafxapplication. A Figura 1.13 mostra a seleo do menu para adicionar um novo pacote ao projeto.

Figura 1.13

Adicionar Package (pacote).

O prximo passo criar um JavaFX Script vazio. Faa isso clicando com o boto direito no nome do pacote e selecionando New | Empty Script. A Figura 1.14 exibe a seleo de menu para adicionar um novo arquivo de script ao projeto.

Figura 1.14 Criar Empty JavaFX Script.

eClIpse

17

A Figura 1.15 mostra o wizard New Script para o novo arquivo de script com o nome de script Main inserido.

Figura 1.15

Criar Dilogo JavaFX Script.

D um nome ao script, Main, e clique em Finish. Isso cria um arquivo de script vazio chamado de Main.fx. Edite o script de arquivo com o exemplo de Hello World e salve-o. Para execut-lo, selecione o cone Run e a janela da aplicao deve aparecer. A Figura 1.16 aponta o cone Run da barra de ferramentas, exibindo a aplicao executada. Uma diferena principal entre NetBeans IDE para JavaFX 1.2 e o plugin JavaFX para Eclipse que no h modo Preview para JavaFX no Eclipse. Porm, fcil executar a aplicao para ver a aparncia da tela no momento do desenvolvimento. Esta seo conclui os fundamentos para iniciar em Eclipse. Para informaes mais detalhadas e opes de configurao, cheque a documentao que est disponvel com o plugin Eclipse para JavaFX. Os documentos contm instrues detalhadas para instalar o plugin JavaFX e configurar Eclipse para reconhecer pela primeira vez arquivos JavaFX. Depois do Eclipse ser configurado para JavaFX, o desenvolvimento similar ao NetBeans IDE para JavaFX 1.2.

18

Captulo 1

InICIando

Figura 1.16

Executando um Script.

Resumo do Captulo
Este captulo mostrou como comear a escrever sua primeira aplicao JavaFX. Detalhou como fazer download e instalar o NetBeans IDE para JavaFX 1.2, o plugin Eclipse para JavaFX e o SDK de JavaFX, como escrever e compilar um simples programa JavaFX, ambos a partir da linha de comando e usando o NetBeans IDE para JavaFX 1.2, e como distribuir esse programa para um usurio final. Ofereceu tambm um pequeno esclarecimento do que possvel com a Plataforma JavaFX. A partir daqui, iremos explorar a Plataforma JavaFX com mais detalhes e descrever as capacidades principais que voc poder implantar em suas aplicaes. Ao longo dos prximos captulos, abordaremos conceitos exigidos para criar uma animao direta, um eclipse solar total. Isso nos permite explorar animao, grficos e efeitos especiais. Ns iremos explorar uma aplicao Sudoku escrita em JavaFX Script. Essa aplicao demonstra algumas das caractersticas-chave do JavaFX Script incluindo vnculo de dados (em ingls, data binding) e gatilhos (em ingls, triggers). O prximo captulo nos leva a olhar o JavaFX com a viso de um designer grfico.