0
Raphael Marques

Mestrando em Informática da UFPB
jose.raphael.marques@gmail.com
raphaelmarques.wordpress.com
   JavaFX é a melhor forma para criar conteúdo
    rico expressivo. Baseado na Plataforma Java,
    JavaFX oferece uma at...
4
5
   Uma família de tecnologias
     JavaFX Runtime
     JavaFX Script
     JavaFX Tools

   Para quem?
     Designers...
7
8
9
10
JavaScript   HTML 5


                      11
13
14
15
16
17
18
   Uma única plataforma RIA para todas as telas
   Mercado de amplo alcance
   Fluxo de trabalho designer-desenvolvedor...
   Tipos de dados básicos (não podem ser null)
       Integer
       Number
       Boolean
       Duration

   Strin...
var string1 = "raphael";
var string2 : String = "raphael";
var integer1 = 3;
var integer2 : Integer = 3;
var number1 = 3.0...
TIPAGEM ESTÁTICA
       VS
TIPAGEM DINÂMICA
                   24
println("raphael marques");
//raphael marques

println('raphael marques');
//raphael marques

println("raphael 'marques'")...
var s1 = "raphael";
var s2 = "marques";
println("{s1} {s2}");
//raphael marques

"o valor de x eh: {x}"
"o valor de x eh: ...
var x = 3;        var x : Integer = 3;
var y = 3.0;      var y : Number = 3.0;
var z: Integer;   var z: Integer = 0;
var w...
   Integer e Number:      Boolean:
    +                       and
    -                       or
    *            ...
var   t1 : Duration = 1ms;
var   t2 = 1s;
var   t3 = 1m;
var   t4 = 1h;
println("{t1} {t2} {t3} {t4}");
//1ms 500ms 60000m...
30
def PI = 3.1416;
function calcArea(raio: Number): Number{
  return PI * raio * raio;
}
var raio = 5;
var area = calcArea(r...
def PI = 3.1416;
function calcArea(raio: Number) {
  return PI * raio * raio;
}
var raio = 5;
var area = calcArea(raio);

...
def PI = 3.1416;
function calcArea(raio: Number) {
  PI * raio * raio;
}
var raio = 5;
var area = calcArea(raio);




    ...
def PI = 3.1416;
var calcArea = function (raio: Number){
   PI * raio * raio;
};
var calcPerimetro = function(raio: Number...
def PI = 3.1416;
var calcArea = function (raio: Number){
   PI * raio * raio;
};
var calcPerimetro = function(raio: Number...
class A{
   var x = 0;
   function getx(){
       x;
   }
}
var a = A{x:1};
var b = A{x:2};
var f = a.getx;
var g = b.getx...
   JavaFX
     http://javafx.com/

   JavaFX Developer Home
     http://java.sun.com/javafx/

   JavaFX Programing (w...
   Windows, Linux, Mac OS X e Solaris x86

   JavaFX 1.2 SDK

   Netbeans IDE 6.5.1 para JavaFX 1.2
   JavaFX 1.2 Prod...
40
41
var x = 1;
var y = bind x;
var z = bind y * 2;
println("{x} {y} {z}");   //1 1 2
x = 2;
println("{x} {y} {z}");   //2 2 4
...
var a = 1;
var b = bind a with inverse;

println("{a} {b}");   //1 1

a = 2;
println("{a} {b}");   //2 2

b = 3;
println("...
var x = 10;
var y = 20;
var rect1 = Rectangle{
   x: bind x;
   y: bind y;
};
var rect2 = bind Rectangle{
   x: x;
   y: y...
var x = 10;
var y = 20;
var lado = 100;                 lado
                        y
var rect = Rectangle{
  x: bind x
 ...
var x = 10;                 lado/2

var y = 20;
var lado = 100;
                        y
                                ...
var x = 10;
var y = 20;                 lado/2
var lado = 50;
                        y
                                  ...
def PI = 3.1416;
var raio = 5;
bound function calcArea(){
  PI * raio * raio;
}
var area = bind calcArea();
println(area);...
var a = 1 on replace old{
 println("changing");
 println("old: {old}");
 println("new: {a}");
};
a = 3;
//changing
//old: ...
public class HelloWorldSwing{
  public static void main(String[] args){
     JFrame frame =
            new JFrame("HelloW...
Stage {
  title: "Hello World em JavaFX"
  width: 250 height: 80
  scene: Scene {
      content: Text {
        content: "...
Stage {
  title: "Hello World em JavaFX"
  width: 250 height: 80
  scene: Scene {
      content: Text {
        content: "...
Stage {
  title: "Hello World em JavaFX"
  width: 250 height: 80
  scene: Scene {
      content: Text {
        content: "...
Stage {
  title: "Hello World em JavaFX"
  width: 250 height: 80
  scene: Scene {
      content: Text {
        content: "...
Stage {
  title: "Hello World em JavaFX"
  width: 250 height: 80
  scene: Scene {
      content: Text {
        content: "...
Stage{
  title: "Declarar eh facil!"
  width: 250
  height: 250
}




                                57
Stage{
  title: "Declarar eh facil!"
  scene: Scene{
      width: 250
      height: 250
  }
}




                        ...
Stage{
  ...
  scene: Scene{
      ...
      content: [
          Rectangle{
            x: 45 y: 45
            width: 16...
Stage{
  ...
  scene: Scene{
      ...
      content: [
          Rectangle{
            x: 45 y: 45
            width: 16...
Stage{
  ...
  scene: Scene{
      ...
      content: [
          Rectangle{
            x: 45 y: 45
            width: 16...
Stage{
  ...
  scene: Scene{
      ...
      content: [
          Rectangle{
            x: 45 y: 45
            width: 16...
...
content: [
    Rectangle{
      ...
    }
    Circle{
      centerX: 125 centerY: 125
      radius: 90
      fill: Col...
...
content: [
    Rectangle{
      ...
    }
    Circle{
      centerX: 125 centerY: 125
      radius: 90
      fill: Col...
...
content: [
    Circle{
      ...
    }
    Rectangle{
      ...
    }
]
...
                 65
...
content: [
    Circle{
      ...
    }
    Rectangle{
      ...
      opacity: 0.6
    }
]
...
                     66
...
Rectangle{
    ...
    transforms: Rotate{
        pivotX: 125 pivotY: 125
        angle: 15
    }
}
...


           ...
...
Rectangle{
     ...
    rotate: 15
}
...




                 68
...
Rectangle{
    ...
    effect: Lighting{
        surfaceScale: 5
    }
}
...



                          69
ImageView{
  image: Image{
     url: "{__DIR__}imagem.png"
  }
  rotate: 15
  scaleX: 2
}


                              ...
71
...
Group{
    translateX: 15           Group
    translateY: 15
    content: [
       Text{
               ...
       }  ...
73
var x: Number;             var px: Number;
var y: Number;             var py: Number;
...
Rectangle{
    x: bind x
    y: ...
var x: Number;             var px: Number;
var y: Number;             var py: Number;
...
Rectangle{
    x: bind x
    y: ...
var x: Number;             var px: Number;
var y: Number;             var py: Number;
...
Rectangle{
    x: bind x
    y: ...
var x: Number;             var px: Number;
var y: Number;             var py: Number;
...
Rectangle{
    x: bind x
    y: ...
var x: Number;             var px: Number;
var y: Number;             var py: Number;
...
Rectangle{
    x: bind x
    y: ...
79
80
Mini-curso JavaFX Aula1
Mini-curso JavaFX Aula1
Mini-curso JavaFX Aula1
Mini-curso JavaFX Aula1
Mini-curso JavaFX Aula1
Mini-curso JavaFX Aula1
Upcoming SlideShare
Loading in...5
×

Mini-curso JavaFX Aula1

7,497

Published on

Slides da 1a aula do mini-curso de JavaFX minsitrado na UFPB

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,497
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
412
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Mini-curso JavaFX Aula1"

  1. 1. Raphael Marques Mestrando em Informática da UFPB jose.raphael.marques@gmail.com raphaelmarques.wordpress.com
  2. 2.  JavaFX é a melhor forma para criar conteúdo rico expressivo. Baseado na Plataforma Java, JavaFX oferece uma atraente combinação de onipresença, capacidade, expressividade e performance. 3
  3. 3. 4
  4. 4. 5
  5. 5.  Uma família de tecnologias  JavaFX Runtime  JavaFX Script  JavaFX Tools  Para quem?  Designers  Desenvolvedores 6
  6. 6. 7
  7. 7. 8
  8. 8. 9
  9. 9. 10
  10. 10. JavaScript HTML 5 11
  11. 11. 13
  12. 12. 14
  13. 13. 15
  14. 14. 16
  15. 15. 17
  16. 16. 18
  17. 17.  Uma única plataforma RIA para todas as telas  Mercado de amplo alcance  Fluxo de trabalho designer-desenvolvedor  Runtime poderoso  Liberdade do browser  Compatibilidade com tecnologias Java 20
  18. 18.  Tipos de dados básicos (não podem ser null)  Integer  Number  Boolean  Duration  String  Sequence  Function 22
  19. 19. var string1 = "raphael"; var string2 : String = "raphael"; var integer1 = 3; var integer2 : Integer = 3; var number1 = 3.0; var number2 : Number = 3; var number3 = 3 as Number; var number4 = integer1 + number1; 23
  20. 20. TIPAGEM ESTÁTICA VS TIPAGEM DINÂMICA 24
  21. 21. println("raphael marques"); //raphael marques println('raphael marques'); //raphael marques println("raphael 'marques'"); //raphael 'marques' println('raphael "marques"'); //raphael "marques" 25
  22. 22. var s1 = "raphael"; var s2 = "marques"; println("{s1} {s2}"); //raphael marques "o valor de x eh: {x}" "o valor de x eh: {objeto.getX()}" 26
  23. 23. var x = 3; var x : Integer = 3; var y = 3.0; var y : Number = 3.0; var z: Integer; var z: Integer = 0; var w = x + y; var w: Number = x + y; var a = false; var a : Boolean = false; var b = x < y; var b : Boolean = x < y; 27
  24. 24.  Integer e Number:  Boolean: +  and -  or *  not /  mod 28
  25. 25. var t1 : Duration = 1ms; var t2 = 1s; var t3 = 1m; var t4 = 1h; println("{t1} {t2} {t3} {t4}"); //1ms 500ms 60000ms 3600000ms println(1s + 500ms); //1500.0ms println(1s / 500ms); //2.0 println(1s*2); //2000.0ms println(1s/2); //500.0ms 29
  26. 26. 30
  27. 27. def PI = 3.1416; function calcArea(raio: Number): Number{ return PI * raio * raio; } var raio = 5; var area = calcArea(raio); 31
  28. 28. def PI = 3.1416; function calcArea(raio: Number) { return PI * raio * raio; } var raio = 5; var area = calcArea(raio); 32
  29. 29. def PI = 3.1416; function calcArea(raio: Number) { PI * raio * raio; } var raio = 5; var area = calcArea(raio); 33
  30. 30. def PI = 3.1416; var calcArea = function (raio: Number){ PI * raio * raio; }; var calcPerimetro = function(raio: Number){ 2 * PI * raio; }; var calc = calcArea; println(calc(5)); calc = calcPerimetro; println(calc(5)); 34
  31. 31. def PI = 3.1416; var calcArea = function (raio: Number){ PI * raio * raio; }; var calcPerimetro = function(raio: Number){ 2 * PI * raio; }; var calc: function (Number): Number = calcArea; println(calc(5)); calc = calcPerimetro; println(calc(5)); 35
  32. 32. class A{ var x = 0; function getx(){ x; } } var a = A{x:1}; var b = A{x:2}; var f = a.getx; var g = b.getx; println(f()); //1 println(g()); //2 36
  33. 33.  JavaFX  http://javafx.com/  JavaFX Developer Home  http://java.sun.com/javafx/  JavaFX Programing (with Passion!)  http://www.javapassion.com/javafx/ 38
  34. 34.  Windows, Linux, Mac OS X e Solaris x86  JavaFX 1.2 SDK  Netbeans IDE 6.5.1 para JavaFX 1.2  JavaFX 1.2 Production Suite  Plugin para Adobe Illustrator e Adobe Photoshop  Media Factory ▪ JavaFX Graphics Viewer e SVG Converter 39
  35. 35. 40
  36. 36. 41
  37. 37. var x = 1; var y = bind x; var z = bind y * 2; println("{x} {y} {z}"); //1 1 2 x = 2; println("{x} {y} {z}"); //2 2 4 42
  38. 38. var a = 1; var b = bind a with inverse; println("{a} {b}"); //1 1 a = 2; println("{a} {b}"); //2 2 b = 3; println("{a} {b}"); //3 3 43
  39. 39. var x = 10; var y = 20; var rect1 = Rectangle{ x: bind x; y: bind y; }; var rect2 = bind Rectangle{ x: x; y: y; }; 44
  40. 40. var x = 10; var y = 20; var lado = 100; lado y var rect = Rectangle{ x: bind x lado y: bind y width: bind lado height: bind lado } x 45
  41. 41. var x = 10; lado/2 var y = 20; var lado = 100; y lado var rect = Rectangle{ x: bind x – lado/2 y: bind y – lado/2 width: bind lado height: bind lado } x 46
  42. 42. var x = 10; var y = 20; lado/2 var lado = 50; y lado var rect = Rectangle{ x: bind x – lado/2 y: bind y – lado/2 width: bind lado height: bind lado } x 47
  43. 43. def PI = 3.1416; var raio = 5; bound function calcArea(){ PI * raio * raio; } var area = bind calcArea(); println(area); // 78.53999 raio = 10; println(area); // 314.15997 48
  44. 44. var a = 1 on replace old{ println("changing"); println("old: {old}"); println("new: {a}"); }; a = 3; //changing //old: 0 //new: 1 //changing //old: 1 //new: 3 49
  45. 45. public class HelloWorldSwing{ public static void main(String[] args){ JFrame frame = new JFrame("HelloWorld Swing"); JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } } 51
  46. 46. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 52
  47. 47. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 53
  48. 48. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 54
  49. 49. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 55
  50. 50. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 56
  51. 51. Stage{ title: "Declarar eh facil!" width: 250 height: 250 } 57
  52. 52. Stage{ title: "Declarar eh facil!" scene: Scene{ width: 250 height: 250 } } 58
  53. 53. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 59
  54. 54. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 60
  55. 55. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 61
  56. 56. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 62
  57. 57. ... content: [ Rectangle{ ... } Circle{ centerX: 125 centerY: 125 radius: 90 fill: Color.WHITE stroke: Color.RED } ] ... 63
  58. 58. ... content: [ Rectangle{ ... } Circle{ centerX: 125 centerY: 125 radius: 90 fill: Color.WHITE stroke: Color.RED } ] ... 64
  59. 59. ... content: [ Circle{ ... } Rectangle{ ... } ] ... 65
  60. 60. ... content: [ Circle{ ... } Rectangle{ ... opacity: 0.6 } ] ... 66
  61. 61. ... Rectangle{ ... transforms: Rotate{ pivotX: 125 pivotY: 125 angle: 15 } } ... 67
  62. 62. ... Rectangle{ ... rotate: 15 } ... 68
  63. 63. ... Rectangle{ ... effect: Lighting{ surfaceScale: 5 } } ... 69
  64. 64. ImageView{ image: Image{ url: "{__DIR__}imagem.png" } rotate: 15 scaleX: 2 } 70
  65. 65. 71
  66. 66. ... Group{ translateX: 15 Group translateY: 15 content: [ Text{ ... } Translate Circle{ ... } ] } ... Text Circle 72
  67. 67. 73
  68. 68. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 74
  69. 69. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 75
  70. 70. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 76
  71. 71. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 77
  72. 72. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 78
  73. 73. 79
  74. 74. 80
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×