1. Instalando o Java 7 JavaFX e o Netbeans

Transcrição

1 1. Instalando o Java 7 JavaFX e o Netbeans Faça o download do Java 7 que inclui JavaFX no site do Oracle: /downloads/index.html. Clique no License Agreement e faça o download da versão correta: Windows x86 para 32 bit cpu ou Windows x64 para 64 bit cpus

2 Faça download do Netbeans no endereço: Selecione a linguagem, plataforma e faça download da versão Java EE

3 Instale Java 7, dê dois cliques no file que foi feito download (certifique que é Java 7: jdk-7xxx) : Aceite o default das janelas de instalação isso quer dizer clicar no botão Next :

4

5 Java 7 e JavaFX 2.1 foram instalados, prossiga e instale o Netbeans, dê dois cliques no instalador do Netbeans :

6 Selecione o Apache Tomcat e retire a opção de instalar o Glassfish, clique em Próximo : Aceite a licença e clique em Próximo

7 Cheque a opção para instalar o JUnit e clique no botão Próximo Aceite o default e clique no botão Próximo

8 Aceite o default e clique no botão Próximo

9 2. GUI : Graphical User Interface O GUI (Graphical User Interface) ou Interface Gráfica do Usuário são gráficos que permitem ao usuário interagir com um periférico, seja ele um computador, impressora, scanner etc. Utilizando gráficos como botões, áreas para entrada de texto permitem que o usuário consiga manusear o computador utilizando um mouse ao invés de comandos digitados no teclado. A primeira versão de Java incluia uma API (Application Programming Interface) para criação de interfaces gráficas chamada AWT (Abstract Window Toolkit). A API incluia entre outras coisas : Interface entre o programa Java e as APIs do sistema operacional Gerenciadores de layout Um pequeno grupo de widgets (componentes) como botões, caixas de texto, menus etc mas era uma API que utilizava as APIs do Sistema Operacional para desenhar os componentes, assim um botão no Windows era diferente de um botão no Macintosh Interface para periféricos de entrada: mouse, teclado Gerenciadores de eventos Gerenciadores de janelas E outras interfaces para lidar com comandos como copiar, colar, drag and drop etc O fato do AWT ser uma ponte entre as APIs do sistema operacional fazem com que seja muito trabalhoso criar e manter o UI de um programa Java em novos sistemas operacionais, por exemplo: componentes mais comuns usados em programas para o Windows faziam uso do MFC (Microsoft Foundation Classes) enquanto no Macintosh era utilizado o PowerPlant e que foi substituido pelas APIs do Cocoa. Em 1997, Sun Microsystems e Netscape juntaram esforços para a criação do JFC (Java Foundation Classes), uma livraria gráfica para criação de GUIs, mais tarde o JFC foi renomeado para Swing. A diferença entre Swing e AWT é que os widgets Swing são escritos em Java ao contrário do AWT que utiliza as APIs do sistema operacional. Programas que utilizam widgets Swing tem a capacidade de possuirem a mesma aparência e visual não importa o sistema operacional em que sejam executados, além de serem mais sofisticados do que widgets AWT. Embora widgets Swing fossem mais sofisticados, uma nova era em termos de GUI começou a surgir com o aparecimento do Mac OS X: sombras, transparências, gradientes, componentes vetorizados, etc levaram ao surgimento do RIA (Rich Internet Application) : componentes e widgets mais requintados, isso também levou a frustrar muitos desenvolvedores Java porque não importa o que fizessem para melhorar o visual de seus programas ainda continuavam a aparentar programas da década de 80 Alguns widgets AWT

10 Widgets Swing OS X Microsoft Silverlight

11 Adobe Flash Modernizar os widgets era algo extremamente necessário caso contrário muitos desenvolvedores poderiam abandonar a plataforma Java e utilizar outras plataformas, a resposta foi o JavaFX :

12

13 3. FXML As primeiras versões do JavaFX possuiam poucos componentes e JavaFX em si era uma linguagem de script um pouco parecida com Javascript. Embora o código compilado fosse bytecode e pudesse rodar no JVM era dificil misturar Java e JavaFX no mesmo file. Após a aquisição da Sun pelo Oracle, muitas coisas mudaram no JavaFX : A partir da versão 2, morre a linguagem de script JavaFX e nasce JavaFX programado em Java Introdução do FXML para construção do UI Interoperabilidade entre Swing e JavaFX componentes Scene Builder para construção visual do UI Capacidade de multithread Adição de componentes e mudanças em componentes antigos Novas regras de licenciamento permitem embutir o runtime em seu programa Uma das maiores mudanças foi a mudança da linguagem script JavaFX para Java e a criação do FXML para declaração do UI. O FXML é uma linguagem de marcação similar á XML que simplifica o processo de criação, declaração e definição da interface gráfica de um programa JavaFX. Abra o Netbeans, clique no icon para criar um projeto novo Selecione JavaFX em Categorias e Aplicação FXML do JavaFX em Projetos, clique no botão Próximo

14 Configure o projeto como : Nome do Projeto: FxmlDemo Localização do Projeto: C:\workspace Pasta do Projeto : C:\workspace\FxmlDemo Confira se Plataforma JavaFX = Plataforma JavaFX Default Nome do FXML: FxmlDemo Clique no botão Finalizar Selecione a aba FxmlDemo.java e clique no icon verde para rodar o programa

15 Seu primeiro programa em JavaFX: O Netbeans é muito semelhante com qualquer outro IDE (como o eclipse). Abaixo um pequeno sumário da interface gráfica (de cima para baixo, esquerda para direita): Icons para criar, abrir ou salvar projetos e files, icons para undo e redo Icons para criar os executáveis: Construir ou Limpar e Construir, Rodar, Debugar e medir a performance Área de navegação de projetos ou files do projeto, links para serviços, servers Icons para debugar o projeto Área do editor Botões do console: executar, parar o programa, configuração de construção (ANT) Área do console

16 Para parar um programa você pode clicar no botão do console enquanto o programa estiver rodando ou fechar normalmente o programa clicando no botão vermelho da janela do programa. O GUI de um programa JavaFX é baseado em uma cena gráfica (scene graph) cuja principal caracteristica é o alinhamento hierárquico dos componentes que compõem a estrutura de dados gráfica em uma cena. Um elemento simples em uma cena gráfica é chamado de node. Cada node possui um node pai na hierarquia com exceção do root node que não possui um node pai. Cada node é uma folha ou um galho em que folhas não possuem filhos e galhos possuem um ou mais filhos. Em qualquer programa JavaFX, o componente responsável por criar a janela (root node) é o Stage, no caso do programa JavaFXDemo temos a seguinte hierarquia : Stage Scene AnchorPane Button (Click Me) Label (Mensagem após clicar) Clique na aba FxmlDemo.fxml :

17 <?xml version="1.0" encoding="utf-8"?> <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <AnchorPane id="anchorpane" prefheight="200" prefwidth="320" xmlns:fx=" fx:controller="fxmldemo.fxmldemocontroller"> <children> <Button layoutx="126" layouty="90" text="click Me!" onaction="#handlebuttonaction" fx:id="button" /> <Label layoutx="126" layouty="120" minheight="16" minwidth="69" fx:id="label" /> </children> </AnchorPane> Na primeira linha temos um PI (Processing Instruction), uma declaração contida entre <? e?>, no caso declaramos o tipo de documento como sendo XML e o encoding do file como unicode (UTF-8) Nos PIs seguintes estamos usando o PI de import para podermos utilizar classes dentro do pacote java.lang, java.util, javafx.scene, javafx.scene.control e javafx.scene.layout Á partir da linha 9 começa a declaração dos componentes gráficos do programa: Pelo fato de FXML ser um documento do tipo XML, elementos que possuem filhos precisam ser declarados como <componente>... </componente>, elementos que não possuem filhos são declarados como <componente /> Declaramos um AnchorPane. Um AnchorPane é um painel onde podemos ancorar nodes no topo, na parte inferior, nos lados esquerdo, direito ou no centro do painel Várias propriedades são configuradas: id, altura (prefheight), largura (prefwidth), namespace e o controller que irá contêr a parte lógica do painel Declaramos os filhos do painel : Um Button com posicionamento fixo: layoutx, layouty, texto do botão: Click Me!, método que irá responder quando o botão for clicado: handlebuttonaction e o id do button: button Um Label com posicionamento fixo, altura minima (minheight), largura minima (minwidth) e o id do label. A única função de um label é mostrar algum texto ou gráfico