alterar código
drekker
site: http://javafree.uol.com.br/artigo/873523/Mini-Exemplo-Gui-com-JavaFX.html
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.stage.Alert;
import javafx.scene.layout.VBox;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.effect.Reflection;
/*
Aprenda JavaFX!!!
Um pequeno desmonstrativo de poder do JavaFX
*/
/*
Muitos criticam JavaFX por ser uma linguagem declarativa
Mas abaixo mostramos que podemos fazer declaração de variáveis
normalmente
*/
var btn:Button;
/*
Aqui estamos instanciando o nosso botão
Podemos colocar todos os atributos
*/
btn = Button{
layoutX: 150;
layoutY: 10;
text: "Aqui!";
action: function (){
Alert.confirm("E ae","E ae?");
}
/*
Efeito! Esse atributo é herdado da classe node
Podemos utilizar muitos dos efeitos presentes aqui
*/
effect: Reflection { fraction: 0.7 }
}
/*
O Stage é o container da aplicação! Podemos fazer uma analogia com
JFrame
*/
Stage{
height: 100;
width: 350;
title: "Teste de GUI com JavaFX";
/*
scene é um atributo que recebe um objeto do tipo da classe Scene,
que é onde as coisas acontecem
Perceba que estamos usando a característica de JavaFX como
linguagem declarativa neste ponto
*/
scene: Scene{
/*
Content recebe um sequence(Uma estrutura de dados de JavaFX
semelhante a um vetor), onde temos todos os componentes que estarão
presentes nessa Scene
*/
content: [
/*
Declaramos um Label aqui!
*/
Label{
text: "Clique no botão:"
layoutX: 40;
layoutY: 10;
},
/*
Esse é nosso botão declarado e instanciado lá em cima!
*/
btn
]
}
}
A saída esta nas figuras anexas,
O que eu quero fazer, a fim de aprender esta linguagem, eu gostaria de
colocar dois botões na mesma “scene” que fazem a mesma coisa. Aonde eu
altero isso no código para conseguir isso?
Obrigado.
William
Os botões tem um atributo que recebe uma função. Esse atributo é o
"action", você pode declarar uma função uma vez e atribuir a essa
atributo dos botões:
acao function (){
Alert.confirm("E ae","E ae?");
}
var btn1:Button = Button{ text:"teste"; action: acao};
var btn2:Button = Button{ text:"teste2"; action: acao};
Daí você pode adicionar a uma Scene, mas com um detalhe. Se adicionar
sem cuidar do layout, posições e tals, eles se sobrescrevem.Para
ajeitar isso você pode usar Painéis, VBox e/ou HBox, Groups etc.
On Jan 26, 7:14 pm, drekker <drekker...@gmail.com> wrote:
> Muito bem, estou tentando modificar um código de javafx que retirei do
> site:http://javafree.uol.com.br/artigo/873523/Mini-Exemplo-Gui-com-JavaFX....
drekker
NetBeans 6.8
package javafxapplication9;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.stage.Alert;
import javafx.scene.layout.VBox;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.effect.Reflection;
#! var acao1 = acao;
#! var btn1 = Button;
#! var btn2 = Button;
#!acao1 = acao function (){
Alert.confirm("E ae","E ae?");
}
#!btn1 = Button{ text:"teste"; action: acao};
#!btn2 = Button{ text:"teste2"; action: acao};
Stage{
height: 100;
width: 350;
title: "Teste de GUI com JavaFX";
scene: Scene{
content: [
Label{
text: "Clique no botão:"
layoutX: 40;
layoutY: 10;
},
/*
Esse é nosso botão declarado e instanciado lá em cima!
*/
#! btn1
btn2
]
}
}
Obrigado.
=============================================================
William
/*
Imports
*/
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
/*
Declaramos nossos botões
*/
var btn1: Button;
var btn2: Button;
/*
uma caxinha para guardamos os botões, mas poderíamos configurar as
posições deles na mão(x e y)
*/
var caixa:HBox;
/*
A função que tratara as ações no botões
*/
function acao():Void{
Alert.confirm("E ae","E ae?");
}
/*
Agora vamos instanciar os botões e já configurar o que queremos
*/
btn1 = Button{
text: "Botão 1"; action: acao;
}
btn2 = Button{
text: "Botão 2"; action: acao;
}
/*
Instanciando nossa caixa
*/
caixa = HBox{ spacing: 10; content: [btn1, btn2]}
/*
Agora sim criamos nossa tela e colocamos as caixas
*/
Stage{
title: "Teste1"; width: 400;
scene:Scene{
content: caixa;
}
}
É claro que poderíamos "empelotar" tudo isso ae:
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
function acao():Void{
Alert.confirm("E ae","E ae?");
}
Stage{
title: "Teste1"; width: 400;
scene:Scene{
content: HBox{
spacing: 10;
content: [
Button{ text: "Botão 1"; action: acao;},
Button{ text: "Botão 2"; action: acao;}
]
};
}
}
É isso :D
drekker
duas horas como funciona esse pequeno código. Com a sua ajuda eu fucei
e consegui fazer os botões ficarem mais ou menos lado a lado e mais ou
menos centralizado usando Label.
Claro que seu código está muito mais elegante. Fica aí registrado o
que eu entendi. Vamos ver se consigo passar e ficou algumas dúvidas:
1)Você omitiu o a importação de "javafx.scene.control.Button;" e ele
nem deu sinal de erro, porque funcionou assim mesmo?
2)Você usou HBox e não Label, qual a diferenca? porque?
/*
* Main.fx
*
* Created on 26/01/2010, 21:17:06
*/
package javafxapplication10;
/*
Imports
*/
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.scene.effect.Reflection;
/*
William:Declaramos nossos botões
drekker: Beleza entendi como fazer.
*/
var btn1: Button;
var btn2: Button;
/*
William:uma caxinha para guardamos os botões, mas poderíamos
configurar as
posições deles na mão(x e y)
drekker: então, eu para testar fiz com as coordenadas x e y
*/
var caixa:HBox;
/*
William: A função que tratara as ações no botões
drekker: show, "acao" é o endereço que "action" deve procurar no
código, ou seja o que fazer, entendi. Daí eu fiz graça e coloquei duas
acoes diferentes. Tô ficando metido!!
*/
function acao():Void{
Alert.confirm("E ae","botão 1");
}
function acao2():Void{
Alert.confirm("E ae","botão 2");
}
/*
William: Agora vamos instanciar os botões e já configurar o que
queremos
drekker: coloque X e Y, e o effect Reflection, quando lanco da paleta
do netbeans aparece mais parametros e nao tem a palavra "effect", o
que cofundiria se nao a tivesse conhecido.
*/
btn1 = Button{
layoutX: 120.0;
layoutY: 114.0;
text: "Botão 1";
action: acao;
effect: Reflection {fraction: 0.7}
}
btn2 = Button{
layoutX: 254.0;
layoutY: 114.0;
text: "Botão 2";
action: acao2;
effect: Reflection {fraction: 0.75}
}
/*
William: Instanciando nossa caixa
drekker: Eu tirei a caixa só para fazer graça.
*/
/*
William: Agora sim criamos nossa tela e colocamos as caixas
drekker: eu use Label e coloquei para aparecer o resultado das
variáveis lá no fim, olha foi na tentativa e erro que eu coloquei a
vírgula para separar as variáveis, ou seja, apanhei. Ah, consegui ver
que as coodenadas X e Y dos botoes não eram efeites e serviam para
alguma coisa (risos), se eu as deixasse diferentes eles não ficariam
sobrepostos (mais risos).
*/
Stage{
title: "Teste1";
height: 200;
width: 350;
scene:Scene{
content:[
Label{
text: "clique em um dos botões:"
layoutX: 50;
layoutY: 10;
}
btn1, btn2
]
William
Você mandou bem! Em breve estará fera!
Vou respondendo ali embaixo, beleza?
> Caramba William valeu, graças ao seu exemplo eu consegui entender em
> duas horas como funciona esse pequeno código. Com a sua ajuda eu fucei
> e consegui fazer os botões ficarem mais ou menos lado a lado e mais ou
> menos centralizado usando Label.
Isso ae, sempre mexendo sem parar!
> Claro que seu código está muito mais elegante. Fica aí registrado o
> que eu entendi. Vamos ver se consigo passar e ficou algumas dúvidas:
> 1)Você omitiu o a importação de "javafx.scene.control.Button;" e ele
> nem deu sinal de erro, porque funcionou assim mesmo?
A classe Button está dentro do pacote javafx.scene.control. Se eu uso:
javafx.scene.control.*;
Estou dizendo que quero todas as classes do pacote
javafx.scene.control, como, por exemplo: Button, Label, TextBox, e
assim vai!
> 2)Você usou HBox e não Label, qual a diferenca? porque?
O Label é só texto estático, usado para informar usuário de algo. HBox
é uma caixa onde podemos colocar componentes dentro, e ela arruma eles
horizontalmente.Esse componentes você coloca dentro da variável
(atributo) content, que recebe um conjunto de componentes. Esses
componente têm que herdar de nó(uma classe pai de todos os componentes
como: botões, textos, labels...), herdando de nó,você pode adicionar
dentro da caixinha. A caixinha ainda tem outras propriedades, como
spacing, que é de quantos em quantos pixels(creio que seja em pixels)
quero separar um componente do outro. Então:
HBox{
spacing: 10;
content:[ btn1, btn2];
}
Quer dizer que estou colocando os dois botões numa caixa horizontal e
separando cada um por 10.:
BTN1 BTN2
A HBox está, assim como o Button está na javafx.scene.control, no
pacote javafx.scene.layout, então temos que importar, para facilitar
importei tudo também, usando o "*".
> William:Declaramos nossos botões
> drekker: Beleza entendi como fazer.
> */
> var btn1: Button;
> var btn2: Button;
A declaração de variáveis em JavaFX é sempre assim:
var nome:tipo;
onde var é palavra que indica a declaração de uma variável, nome é o
nome que você está dando a sua variável e tipo é o tipo dela, como
número, botão, scene e assim vai.
> William:uma caxinha para guardamos os botões, mas poderíamos
> configurar as
> posições deles na mão(x e y)
> drekker: então, eu para testar fiz com as coordenadas x e y
> */
> var caixa:HBox;
> /*
Boa!!
> William: A função que tratara as ações no botões
> drekker: show, "acao" é o endereço que "action" deve procurar no
> código, ou seja o que fazer, entendi. Daí eu fiz graça e coloquei duas
> acoes diferentes. Tô ficando metido!!
> */
> function acao():Void{
> Alert.confirm("E ae","botão 1");}
>
> function acao2():Void{
> Alert.confirm("E ae","botão 2");
> }
> /*
Mandou bem, mostra que entendeu as ações :)
> William: Agora vamos instanciar os botões e já configurar o que
> queremos
> drekker: coloque X e Y, e o effect Reflection, quando lanco da paleta
> do netbeans aparece mais parametros e nao tem a palavra "effect", o
> que cofundiria se nao a tivesse conhecido.
> */
>
> btn1 = Button{
> layoutX: 120.0;
> layoutY: 114.0;
> text: "Botão 1";
> action: acao;
> effect: Reflection {fraction: 0.7}
>
> }
>
> btn2 = Button{
> layoutX: 254.0;
> layoutY: 114.0;
> text: "Botão 2";
> action: acao2;
> effect: Reflection {fraction: 0.75}
>
> }
você também pode arrastar um efeito da paleta pro código, se quiser.
>
> /*
> William: Instanciando nossa caixa
> drekker: Eu tirei a caixa só para fazer graça.
> */
Na verdade, se não me engano, com o HBox não seria possível modificar
as posições, porque o HBOX(ou o VBox que é a mesma coisa, mas coloca
os componentes na vertical) gerencia o layout dos componentes
erich oliveira
Corrigi o seu código aqui... basicamente o erro estava na declaração de variáveis, quando se usa '=' estamos fazendo uma atribuição, o que queremos ali é na verdade indicar o tipo da variável, para isso utilizamos ':' e lá embaixo faltou uma vírgula para separar o btn1 do btn2
Não tenho nenhuma IDE aqui, estou corrigindo direto do e-mail, imagino que esteja certo, mas algum erro pode ter passado despercebido.
|
package javafxapplication9; import javafx.scene.Scene; import javafx.stage.Stage; import javafx.stage.Alert; import javafx.scene.layout.VBox; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.effect.Reflection; |
/*Aqui indicamos o tipo da variável, onde acao1 é uma função sem parâmetros, btn1 e btn2 são do tipo Button */ var acao1 : function(); |
var btn1 : Button; var btn2 : Button; |
|
/*aqui estamos atribuindo um valor a variável acao1, no caso este valor é uma função (em javaFX variáveis podem armazenar funções)*/ acao1 = function (){ |
Alert.confirm("E ae","E ae?"); } |
btn1 = Button{ text:"teste"; action: acao}; |
btn2 = Button{ text:"teste2"; action: acao}; Stage{ height: 100; width: 350; title: "Teste de GUI com JavaFX"; scene: Scene{ content: [ Label{ text: "Clique no botão:" layoutX: 40; layoutY: 10; }, /* Esse é nosso botão declarado e instanciado lá em cima! */ |
|
/*Aqui temos uma Sequence (semelhante ao vetor do java) cada elemento da Sequence deve estar separado por vírgula, faltava uma vírgula separando o btn1 do btn2*/ btn1, btn2 ] } } --- Em ter, 26/1/10, drekker <drekk...@gmail.com> escreveu: |
Veja quais são os assuntos do momento no Yahoo! + Buscados: Top 10 - Celebridades - Música - Esportes