Controles Tratamento de eventos Exercícios

JavaFX - Controles, botões e eventos

Draylson Micael de Souza

Everton Silva

1o semestre de 2018

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 1

Controles Tratamento de eventos Exercícios

Roteiro

1 Controles

2 Tratamento de eventos

3 Exercícios

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 2

Controles Tratamento de eventos Exercícios

Roteiro

1 Controles

2 Tratamento de eventos

3 Exercícios

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 3

Controles Tratamento de eventos Exercícios

O que são controles?

Um controlador é um componente da interface que pode ser

manipulado por um usuário

Os controles possuem variáveis e comportamentos adicionais

que apoiam as interações comuns realizadas pelos usuários

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 4

Controles Tratamento de eventos Exercícios

Controles básicos

Dividimos os principais controles básicos apoiados pelo JavaFX

em três categorias
Textuais
Múltiplas opções
Múltiplas escolhas
Botões de ação

Tais controles são detalhados a seguir

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 5

Controles Tratamento de eventos Exercícios

Controles textuais

Permitem aos usuários a inserção de texto

TextField

TextArea

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 6

Controles Tratamento de eventos Exercícios

Controles de múltiplas opções

Permitem que o usuário escolha uma dentre várias opções
disponíveis
ComboBox

ToggleButton

RadioButton

Slider

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 7

Controles Tratamento de eventos Exercícios

Controles de múltiplas escolhas

Permitem que o usuário escolha várias opções dentre as

disponíveis
CheckBox

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 8

Controles Tratamento de eventos Exercícios

Botões de ação

Ao interagir com um botão, espera-se que a aplicação realize

algum processamento associado
Button

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 9

Controles Tratamento de eventos Exercícios

Roteiro

1 Controles

2 Tratamento de eventos

3 Exercícios

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 10

Controles Tratamento de eventos Exercícios

Tratamento de eventos

Tratar um evento é definir que lógica será executada de acordo

com as ações do usuário ao interagir com a interface

Ao interagir com um controle, como por exemplo um botão,

espera-se que a aplicação realize algum processamento
associado

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 11

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Para ilustrar o tratamento de eventos, vamos

considerar um exemplo de uma interface para uma
calculadora de gorjetas

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 12

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Inicialmente, desenhamos a interface gráfica no Scene Builder,

considerando o gerenciador de layout GridPane.

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 13

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Em seguida, associamos a classe TipCalculatorController a

nossa interface gráfica.

TipCalculator.fxml
10 <G r i d P a n e hgap=" 1 0 . 0 " vgap=" 1 0 . 0 "
x m l n s : f x=" h t t p : / / j a v a f x . com/ f x m l /1 "
x m l n s=" h t t p : / / j a v a f x . com/ j a v a f x / 2 . 2 "
11 f x : c o n t r o l l e r=" c o n t r o l l e r . T i p C a l c u l a t o r C o n t r o l l e r ">

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 14

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Definimos na classe TipCalculatorController atributos que

serão associados aos elementos da interface gráfica que a
nossa classe controladora deverá observar e/ou modificar.

TipCalculatorController.java
27 @FXML
28 p r i v a t e T e x t F i e l d amount ;
29
30 @FXML
31 private Slider tipPercentageSlider ;
32
33 @FXML
34 p r i v a t e Label tipPercentageLabel ;

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 15

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Os atributos devem possuir a anotação @FXML, para

posteriormente serem associados ao elementos definidos no
FXML.

TipCalculatorController.java
36 @FXML
37 private TextField tip ;
38

39 @FXML
40 private TextField total ;

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 16

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

No Scene Builder, conseguimos agora associar os atributos da

classe TipCalculatorController com os elementos da interface
gráfica, por meio da propriedade fx:id.

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 17

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Para definirmos o comportamento do Slider, precisamos que a

nossa classe TipCalculatorController herde a interface
Initializable

TipCalculatorController.java
25 p u b l i c c l a s s T i p C a l c u l a t o r C o n t r o l l e r implements
Initializable {

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 18

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Assim, devemos implementar o método initialize, para atribuir

o comportamento do Slider no momento em que a interface
estiver sendo inicializada

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 19

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

TipCalculatorController.java
43 p u b l i c v o i d i n i t i a l i z e (URL u r l , R e s o u r c e B u n d l e r b ) {
44 tipPercentageSlider
45 . valueProperty () . addListener (
46 new C h a n g e L i s t e n e r <Number >() {
47 @Override
48 p u b l i c v o i d changed (
49 O b s e r v a b l e V a l u e <? e x t e n d s Number>
50 observable ,
51 Number o l d V a l u e ,
52 Number newValue ) {
53 int tipPercentage =
54 newValue . i n t V a l u e ( ) ;
55 tipPercentageLabel . setText (
56 S t r i n g . v a l u e O f ( t i p P e r c e n t a g e ) + "%"
57 );

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 20

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Agora, implementamos um método para definir o

processamento a ser realizado quando o usuário clica no botão
“Calcular”.

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 21

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

TipCalculatorController.java
63 @FXML
64 publi c void c a l c u l a t e ( ActionEvent e ) {
65
66 d o u b l e amount = Double . p a r s e D o u b l e (
67 t h i s . amount . g e t T e x t ( ) ) ;
68 double tipPercentage = (
69 ( d o u b l e ) Double . p a r s e D o u b l e (
70 t h i s . tipPercentageLabel . getText ()
71 . r e p l a c e ( "%" , " " ) ) ) / 1 0 0 ;
72

73 d o u b l e t i p = amount ∗ t i p P e r c e n t a g e ;
74 d o u b l e t o t a l = amount + t i p ;
75 t h i s . t i p . setText ( String . valueOf ( t i p ) ) ;
76 t h i s . t o t a l . setText ( String . valueOf ( t o t a l ) ) ;

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 22

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Por fim, no Scene Builder, associamos o método a propriedade

"On Action"do botão.

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 23

Controles Tratamento de eventos Exercícios

Exemplo: TipCalculator

Resultado na interface

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 24

Controles Tratamento de eventos Exercícios

Roteiro

1 Controles

2 Tratamento de eventos

3 Exercícios

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 25

Controles Tratamento de eventos Exercícios

Exercício

Modifique o aplicativo TipCalculator para permitir que o

usuário insira o número de pessoas em uma festa.

Calcule e exiba o valor devido por cada pessoa se a conta

tivesse de ser dividida uniformemente entre os membros da
festa.

JavaFX - Controles, botões e eventos Draylson Micael de Souza e Everton Silva 26