'소프트웨어/JavaFX'에 해당되는 글 8건

2008년 7월 저는 그래픽 디자이너(Mark Dingman of Malden Labs)와 공동 작업으로 상상 속의 Sound Beans 애플리케이션을 만드는 연속 게시물이 포함된 JFX 사용자 지정 노드 카테고리를 시작했습니다.  이 애플리케이션을 작성하는 목표는 JavaFX 사용자 지정 노드를 만드는 방법을 보여주고, 그래픽 디자이너와 애플리케이션 개발자가 공동으로 JavaFX 애플리케이션을 효과적으로 개발할 수 있는 방법에 관한 사례 연구를 제공하기 위한 것입니다. 

이 연속 게시물의 첫 게시물인 자신만의 JavaFX "사용자 지정 노드" 만들기: 그래픽 메뉴의 예는 JavaFX에서 자신만의 UI를 만드는 방법을 보여줍니다. 해당 게시물에서는 마우스를 갖다댈 경우 밝아지고 확장되는 버튼으로 구성된 메뉴를 쉽게 만들 수 있도록 MenuNode 및 ButtonNode 사용자 지정 노드를 정의했습니다.  이어지는 다음 게시물에서는 다음 내용을 다룹니다.

• Node 인스턴스 집합을 저장하고 이러한 노드 중 하나를 한 번에 하나씩 표시하는 DeckNode 정의
• 작업 진행 과정을 보여주는 데 사용할 수 있는 ProgressNode 컨트롤 정의. 이 게시물에서도 Sound Beans 애플리케이션에 진작에 소개했어야 할 모델 클래스를 채용했습니다.

오늘의 게시물에서는 테이블의 행을 보고 선택할 수 있는 확장 가능한 테이블을 제공할 수 있도록 TableNode라는 이름의 사용자 지정 노드를 작성해보겠습니다. 테이블의 각 셀에는 Node의 하위 클래스를 포함할 수 있으므로 JavaFX SDK 1.0에서 사용할 노드 중심 방식으로 줄에 놓여질 수 있습니다. 또한, JavaFX SDK 1.0에 일종의 테이블 UI 컨트롤을 포함하려고 생각하고 있습니다. 다음은 상상 속의 Sound Beans 프로그램에서 사용하는 TableNode의 스크린샷입니다.

이것은 Mark Dingman이 제공한 재생 목록 comp(웹 사이트에 대한 종합 이미지, 모형)를 기초로 만든 것입니다(Getting Decked: Another JavaFX Custom Node post 참조). 그 다음에는 Mark에게 모양을 그려(이미지를 사용하는 것과는 다름) 구현할 수 있는 스크롤바 comp를 부탁했습니다. Mark의 comp에는 위에서 보듯이 수평 스크롤바 트랙과 함께 둥근 사각형 모양의 진행률 스크롤바 썸이 있습니다.

상상 속의 Sound Beans 프로그램에 대한 이번 반복에서는 테이블에서 다른 행을 클릭하면 UI의 왼쪽 위 모서리의 숫자가 변경되어 TableNode의 selectedIndex 속성을 바인딩할 수 있음을 나타냅니다. 다음의 반복에서는 앨범 그래픽, 제목 등이 바뀌게 하고 왼쪽 위 모서리에 해당 번호가 나타나도록 할 것입니다. 이 Java Web Start 링크를 클릭하여 이 코드를 사용해보십시오. JRE 6 이상이 필요합니다. 또한 자바 SE 6 업데이트 10을 설치하면 배포 시간이 단축됩니다.

다음은 TableNode.fx 파일에 있는 TableNode 사용자 지정 노드의 코드입니다.

/*
*  TableNode.fx - 
*  A custom node that contains rows and columns, each cell
*  containing a node.
*
*  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
*  to demonstrate how to create custom nodes in JavaFX
*/

package com.javafxpert.custom_node;

import javafx.input.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import java.lang.System;

/*
* A custom node that contains rows and columns, each cell
* containing a node.  Column widths may be set individually,
* and the height of the rows can be set.  In addition, several
* other attributes such as width and color of the scrollbar
* may be set.  The scrollbar will show only when necessary,
* and overlays the right side of each row, so the rightmost
* column should be given plenty of room to display data and
* a scrollbar. 
*/
public class TableNode extends CustomNode { 

  /*
   * Contains the height of the table in pixels.
   */
  public attribute height:Integer = 200;
    
  /*
   * Contains the height of each row in pixels.
   */
  public attribute rowHeight:Integer;
    
  /*
   * A sequence containing the column widths in pixels.  The
   * number of elements in the sequence determines the number of 
   * columns in the table.
   */
  public attribute columnWidths:Integer[];
    
  /*
   * A sequence containing the nodes in the cells.  The nodes are
   * placed from left to right, continuing to the next row when
   * the current row is filled.
   */
  public attribute content:Node[];
    
  /*
   * The selected row number (zero-based)
   */
  public attribute selectedIndex:Integer;
    
  /*
   * The height (in pixels) of the space between rows of the table.
   * This space will be filled with the tableFill color.
   */
  public attribute rowSpacing:Integer = 1;
    
  /*
   * The background color of the table
   */
  public attribute tableFill:Paint;
    
  /*
   * The background color of an unselected row
   */
  public attribute rowFill:Paint;
    
  /*
   * The background color of a selected row
   */
  public attribute selectedRowFill:Paint;
    
  /*
   * The color or gradient of the vertical scrollbar.
   */
  public attribute vertScrollbarFill:Paint = Color.BLACK;
    
  /*
   * The color or gradient of the vertical scrollbar thumb.
   */
  public attribute vertScrollbarThumbFill:Paint = Color.WHITE;
    
  /*
   * The width (in pixels) of the vertical scrollbar.
   */
  public attribute vertScrollbarWidth:Integer = 20;
    
  /*
   * The number of pixels from the left of a cell to place the node
   */
  private attribute cellHorizMargin:Integer = 10;
    
  /*
   * Contains the width of the table in pixels.  This is currently a 
   * calculated value based upon the specified column widths 
   */
  private attribute width:Integer = bind
    computePosition(columnWidths, sizeof columnWidths);
    
  private function computePosition(sizes:Integer[], element:Integer) {
    var position = 0;
    if (sizeof sizes > 1) {
      for (i in [0..element - 1]) {
        position += sizes[i];
      }
    }
    return position;
  }
  
  /**
   * The onSelectionChange function attribute that is executed when the
   * a row is selected
   */
  public attribute onSelectionChange:function(row:Integer):Void;
   
  /**
   * Create the Node
   */
  public function create():Node {
    var numRows = sizeof content / sizeof columnWidths;
    var tableContentsNode:Group;
    var needScrollbar:Boolean = bind (rowHeight + rowSpacing) * numRows  > height; 
    Group {
      var thumbStartY = 0.0;
      var thumbEndY = 0.0;
      var thumb:Rectangle;
      var track:Rectangle;
      var rowRef:Group;
      content: [
        for (row in [0..numRows - 1], colWidth in columnWidths) {
          Group {
            transform: bind
              Translate.translate(computePosition(columnWidths, indexof colWidth) + 
                                  cellHorizMargin,
                                  ((rowHeight + rowSpacing) * row) + (-1.0 * thumbEndY * 
                                  ((rowHeight + rowSpacing) * numRows) / height))
            content: bind [
              Rectangle {
                width: colWidth
                height: rowHeight
                fill: if (indexof row == selectedIndex) 
                        selectedRowFill
                      else
                        rowFill
              },
              Line {
                startX: 0
                startY: 0
                endX: colWidth
                endY: 0
                strokeWidth: rowSpacing
                stroke: tableFill
              },
              rowRef = Group {
                var node = 
                  content[indexof row * (sizeof columnWidths) + indexof colWidth];
                transform: bind Translate.translate(0, rowHeight / 2 - 
                                                       node.getHeight() / 2)
                content: node
              }
            ]
            onMouseClicked:
              function (me:MouseEvent) {
                selectedIndex = row;
                onSelectionChange(row);
              }
          }
        },
        // Scrollbar
        if (needScrollbar)
          Group {
            transform: bind Translate.translate(width - vertScrollbarWidth, 0)
            content: [
              track = Rectangle {
                x: 0
                y: 0
                width: vertScrollbarWidth
                height: bind height
                fill: vertScrollbarFill
              },
              //Scrollbar thumb
              thumb = Rectangle {
                x: 0
                y: bind thumbEndY
                width: vertScrollbarWidth
                height: bind 1.0 * height / ((rowHeight + rowSpacing) * numRows) * height
                fill: vertScrollbarThumbFill
                arcHeight: 10
                arcWidth: 10
                onMousePressed: function(e:MouseEvent):Void {  
                  thumbStartY = e.getDragY() - thumbEndY;  
                }  
                onMouseDragged: function(e:MouseEvent):Void {
                  var tempY = e.getDragY() - thumbStartY;
                  // Keep the scroll thumb within the bounds of the scrollbar
                  if (tempY >=0 and tempY + thumb.getHeight() <= track.getHeight()) {
                    thumbEndY = tempY;  
                  }
                  else if (tempY < 0) {
                    thumbEndY = 0;
                  }
                  else {
                    thumbEndY = track.getHeight() - thumb.getHeight();
                  }
                }
                onMouseDragged: function(e:MouseEvent):Void {
                  var tempY = e.getDragY() - thumbStartY;
                  // Keep the scroll thumb within the bounds of the scrollbar
                  if (tempY >=0 and tempY + thumb.getHeight() <= track.getHeight()) {
                    thumbEndY = tempY;  
                  }
                  else if (tempY < 0) {
                    thumbEndY = 0;
                  }
                  else {
                    thumbEndY = track.getHeight() - thumb.getHeight();
                  }
                }
              }
            ]
          }  
        else 
          null
      ]
      clip:
        Rectangle {
          width: bind width
          height: bind height
        }
      onMouseWheelMoved: function(e:MouseEvent):Void {
        var tempY = thumbEndY + e.getWheelRotation() * 4;
        // Keep the scroll thumb within the bounds of the scrollbar
        if (tempY >=0 and tempY + thumb.getHeight() <= track.getHeight()) {
          thumbEndY = tempY;  
        }
        else if (tempY < 0) {
          thumbEndY = 0;
        }
        else {
          thumbEndY = track.getHeight() - thumb.getHeight();
        }
      }
    }    
  }
}

public 속성에서 볼 수 있듯이, 테이블 높이, 행 높이, 각 열의 폭, 다양한 UI 요소의 색 또는 그라데이션 등 개발자가 구성할 수 있는 여러 가지 TableNode 속성이 있습니다. 목록 끝의 코드는 마우스 휠 지원을 제공합니다. 이제 The "Play" page로 주석 처리한 섹션을 중심으로 기본 프로그램을 살펴보겠습니다. 이 섹션이 TableNodeExampleMain.fx 파일에 TableNode 인스턴스가 만들어지는 부분입니다.

/*
 *  TableNodeExampleMain.fx - 
 *  An example of using the TableNode custom node.  It also demonstrates
 *  the ProgressNode, DeckNode, MenuNode and ButtonNode custom nodes
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to demonstrate how to create custom nodes in JavaFX
 */
package com.javafxpert.table_node_example.ui;

import javafx.application.*;
import javafx.ext.swing.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.transform.*;
import java.lang.Object;
import java.lang.System;
import com.javafxpert.custom_node.*;
import com.javafxpert.table_node_example.model.*;

var deckRef:DeckNode;

Frame {
  var model = TableNodeExampleModel.getInstance();
  var stageRef:Stage;
  var menuRef:MenuNode;
  title: "TableNode Example"
  width: 500
  height: 400
  visible: true
  stage:
    stageRef = Stage {
      fill: Color.BLACK
      content: [
        deckRef = DeckNode {
          fadeInDur: 700ms
          content: [
            // The "Splash" page
            Group {
              var vboxRef:VBox;
              var splashFont =
                Font {
                  name: "Sans serif"
                  style: FontStyle.BOLD
                  size: 12
                };
              id: "Splash"
              content: [
                ImageView {
                  image: 
                    Image {
                      url: "{__DIR__}images/splashpage.png"
                    } 
                },
                vboxRef = VBox {
                  translateX: bind stageRef.width - vboxRef.getWidth() - 10 
                  translateY: 215
                  spacing: 1
                  content: [
                    Text {
                      content: "A Fictitious Audio Application that Demonstrates"
                      fill: Color.WHITE
                      font: splashFont
                    },
                    Text {
                      content: "Creating JavaFX Custom Nodes"
                      fill: Color.WHITE
                      font: splashFont
                    },
                    Text {
                      content: "Application Developer: Jim Weaver"
                      fill: Color.WHITE
                      font: splashFont
                    },
                    Text {
                      content: "Graphics Designer: Mark Dingman"
                      fill: Color.WHITE
                      font: splashFont
                    },
                  ]
                }
              ]
            },
            // The "Play" page
            VBox {
              var tableNode:TableNode
              id: "Play"
              spacing: 4
              content: [
                Group {
                  content: [
                    ImageView {
                      image: 
                        Image {
                          url: "{__DIR__}images/playing_currently.png"
                        }
                    },
                    Text {
                      textOrigin: TextOrigin.TOP
                      content: bind "{tableNode.selectedIndex}"
                      font: Font {
                        size: 24
                      }
                    }
                  ] 
                },
                tableNode = TableNode {
                  height: 135
                  rowHeight: 25
                  rowSpacing: 2
                  columnWidths: [150, 247, 25, 70]
                  tableFill: Color.BLACK 
                  rowFill: Color.rgb(28, 28, 28)
                  selectedRowFill: Color.rgb(45, 45, 45)
                  selectedIndex: -1
                  vertScrollbarWidth: 20
                  vertScrollbarFill: LinearGradient {
                    startX: 0.0
                    startY: 0.0
                    endX: 1.0
                    endY: 0.0
                    stops: [
                      Stop {
                        offset: 0.0
                        color: Color.rgb(11, 11, 11)
                      },
                      Stop {
                        offset: 1.0
                        color: Color.rgb(52, 52, 52)
                      }
                    ]
                  }
                  vertScrollbarThumbFill: Color.rgb(239, 239, 239)
                  content: bind 
                    for (obj in model.playlistObjects) {
                      if (obj instanceof String)
                        Text {
                          textOrigin: TextOrigin.TOP
                          fill: Color.rgb(183, 183, 183)
                          content: obj as String
                          font:
                            Font {
                              size: 11
                            }
                        }
                      else if (obj instanceof Image)
                        ImageView {
                          image: obj as Image
                        }
                      else
                        null
                    }
                  onSelectionChange:
                    function(row:Integer):Void {
                      System.out.println("Table row #{row} selected");
                    }
                }
              ]
            },
            // The "Burn" page
            Group {
              var vboxRef:VBox;
              id: "Burn"
              content: [
                vboxRef = VBox {
                  translateX: bind stageRef.width / 2 - vboxRef.getWidth() / 2
                  translateY: bind stageRef.height / 2 - vboxRef.getHeight() / 2
                  spacing: 15
                  content: [
                    Text {
                      textOrigin: TextOrigin.TOP
                      content: "Burning custom playlist to CD..."
                      font:
                        Font {
                          name: "Sans serif"
                          style: FontStyle.PLAIN
                          size: 22
                        }
                      fill: Color.rgb(211, 211, 211)
                    },
                    ProgressNode {
                      width: 430
                      height: 15
                      progressPercentColor: Color.rgb(191, 223, 239)
                      progressTextColor: Color.rgb(12, 21, 21)
                      progressText: bind "{model.remainingBurnTime} Remaining"
                      progressFill:
                        LinearGradient {
                          startX: 0.0
                          startY: 0.0
                          endX: 0.0
                          endY: 1.0
                          stops: [
                            Stop {
                              offset: 0.0
                              color: Color.rgb(0, 192, 255)
                            },
                            Stop {
                              offset: 0.20
                              color: Color.rgb(0, 172, 234)
                            },
                            Stop {
                              offset: 1.0
                              color: Color.rgb(0, 112, 174)
                            },
                          ]
                        }
                      barFill:
                        LinearGradient {
                          startX: 0.0
                          startY: 0.0
                          endX: 0.0
                          endY: 1.0
                          stops: [
                            Stop {
                              offset: 0.0
                              color: Color.rgb(112, 112, 112)
                            },
                            Stop {
                              offset: 1.0
                              color: Color.rgb(88, 88, 88)
                            },
                          ]
                        }
                      progress: bind model.burnProgressPercent / 100.0
                    },
                    ComponentView {
                      component:
                        FlowPanel {
                          background: Color.BLACK
                          content: [
                            Label {
                              text: "Slide to simulate burn progress:"
                              foreground: Color.rgb(211, 211, 211)
                            },
                            Slider {
                              orientation: Orientation.HORIZONTAL
                              minimum: 0
                              maximum: 100
                              value: bind model.burnProgressPercent with inverse
                              preferredSize: [200, 20]
                            }
                          ]
                        }
                    } 
                  ]
                }
              ]
            },
            // The "Config" page
            Group {
              id: "Config"
              content: [
                ImageView {
                  image: 
                    Image {
                      url: "{__DIR__}images/config.png"
                    } 
                }
              ]
            },
            // The "Help" page
            Group {
              id: "Help"
              content: [
                ImageView {
                  image: 
                    Image {
                      url: "{__DIR__}images/help.png"
                    } 
                }
              ]
            }
          ]
        },
        menuRef = MenuNode {
          translateX: bind stageRef.width / 2 - menuRef.getWidth() / 2
          translateY: bind stageRef.height - menuRef.getHeight()
          buttons: [
            ButtonNode {
              title: "Play"
              imageURL: "{__DIR__}icons/play.png"
              action:
                function():Void {
                  deckRef.visibleNodeId = "Play";
                }
            },
            ButtonNode {
              title: "Burn"
              imageURL: "{__DIR__}icons/burn.png"
              action:
                function():Void {
                  deckRef.visibleNodeId = "Burn";
                }
            },
            ButtonNode {
              title: "Config"
              imageURL: "{__DIR__}icons/config.png"
              action:
                function():Void {
                  deckRef.visibleNodeId = "Config";
                }
            },
            ButtonNode {
              title: "Help"
              imageURL: "{__DIR__}icons/help.png"
              action:
                function():Void {
                  deckRef.visibleNodeId = "Help";
                }
            },
          ]
        }
      ]
    }
}

deckRef.visibleNodeId = "Splash";

The Model Behind the UI

"JavaFX 방식"은 UI 속성을 모델에 바인딩하는 것이므로 위에서 보는 바와 같이 TableNode의 콘텐츠 속성이 모델에 바인딩됩니다. 아래는 현재까지 TableNodeExampleModel.fx 파일에 만들어진 Sound Beans 프로그램의 모델입니다. playlistObjects 시퀀스에는 어떠한 종류의 개체도 포함할 수 있으며, Node 인스턴스를 모델에 포함하지만 않으면 됩니다(이러한 인스턴스는 UI에 속하므로). 그러므로 TableNode,를 채우려면 모델에 앨범 제목 및 이미지 URL 같은 문자열을 포함하는 방식을 사용합니다. 위에 표시된 TableModel의 콘텐츠 속성에 바인딩하는 동안 Node 하위 클래스(예: Text 및 ImageView)가 만들어집니다.

/*
 *  TableNodeExampleModel.fx - 
 *  The model behind the TableNode example
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 */
package com.javafxpert.table_node_example.model;

import java.lang.Object;
import javafx.scene.*;
import javafx.scene.image.*;
import javafx.scene.text.*;

/**
 * The model behind the TableNode example
 */
public class TableNodeExampleModel {
  
  /**
   * The total estimated number of seconds for the burn.
   * For this example program, we'll set it to 10 minutes
   */ 
  public attribute estimatedBurnTime:Integer = 600;

  /**
   * The percent progress of the CD burn, represented by a number
   * between 0 and 100 inclusive.
   */ 
  public attribute burnProgressPercent:Integer on replace {
      var remainingSeconds = estimatedBurnTime * (burnProgressPercent / 100.0) as Integer;
      remainingBurnTime = "{remainingSeconds / 60}:{%02d (remainingSeconds mod 60)}";
  };

  /**
   * The time remaining on the CD burn, expressed as a String in mm:ss
   */ 
  public attribute remainingBurnTime:String;

  /**
   * An image of a play button to be displayed in each row of the table
   */
  private attribute playBtnImage = Image {url: "{__DIR__}images/play-btn.png"};
   
  /**
   * The song information in the playlist
   */ 
  public attribute playlistObjects:Object[] = 
    ["Who'll Stop the Rain", "Three Sides Now", playBtnImage, "2:43",
     "Jackie Blue", "Ozark Mountain Devils", playBtnImage, "2:15",
     "Come and Get Your Love", "Redbone", playBtnImage, "3:22",
     "Love Machine", "Miracles", playBtnImage, "2:56",
     "25 or 6 to 4", "Chicago", playBtnImage, "3:02",
     "Free Bird", "Lynard Skynard", playBtnImage, "5:00",
     "Riding the Storm Out", "REO Speedwagon", playBtnImage, "3:00",
     "Lay it on the Line", "Triumph", playBtnImage, "2:00",
     "Secret World", "Peter Gabriel", playBtnImage, "4:00"];
  
  
  
  //-----------------Use Singleton pattern to get model instance -----------------------
  private static attribute instance:TableNodeExampleModel;

  public static function getInstance():TableNodeExampleModel {
    if (instance == null) {
      instance = TableNodeExampleModel {};
    }
    else {
      instance;
    }
  }
}

언제나처럼 질문이나 의견이 있으면 남겨 주십시오. 그리고 이 기사의 이미지를 다운로드한 후 이 그래픽으로 이 예에서 소개한 대로 작성하고 실행할 수 있습니다. 이 이미지는 프로젝트의 클래스 경로에서 확장할 수 있는 zip 파일입니다. 이 JFX 사용자 지정 노드 연속 게시물 중 이전 게시물에 소개했던 ButtonNode, MenuNode, DeckNode, ProgressNode 코드가 필요합니다.

감사합니다.
Jim Weaver
JavaFXpert.com

이 글의 영문 원본은
Creating a Custom Scrollable Table with JavaFX
에서 보실 수 있습니다.

이제 애플리케이션의 JavaFX 스크립트 버전을 완료하고 사용자가 Flickr 웹 사이트에서 이미지를 검색, 나열 및 표시할 수 있도록 하겠습니다. 완성된 JavaFX 스크립트 애플리케이션을 위해 NetBeans 프로젝트 다운로드를 받을 수 있습니다.

구 현할 첫 번째 동작은 이미지 검색입니다. 사용자가 UI의 검색 필드에 검색어를 입력하면 애플리케이션은 Flickr 웹 사이트에서 이미지 검색을 시작합니다. 검색어와 매칭되는 이미지가 있으면 애플리케이션은 최대 100개의 매칭되는 축소판 이미지의 목록을 로드하여 UI의 Matched Images 영역에 선택 가능한 목록으로 표시합니다. 또한 진행 표시줄이 이미지 검색을 추적합니다.

기 존 이미지 검색 애플리케이션은 Matched Images 영역에 반환된 축소판 이미지의 목록을 제목과 함께 표시합니다. 우리는 JavaFX 스크립트 애플리케이션 목록에서 매칭되는 이미지의 반환된 제목만 보여주도록 단순화하겠습니다. JavaFX 스크립트의 ListItem 구성요소는 현재 icon 속성을 갖지 않습니다. 따라서 현재 List 및 ListItem 구성요소가 생성하는 목록은 이미지를 포함할 수 없습니다.

이미지 검색을 위해 ImageSearcher 및 Photo의 두 가지 JavaFX 스크립트 클래스를 생성했습니다. 또한 진행 표시줄을 위한 별도의 클래스도 생성했습니다. JavaFX 스크립트 패키지에 ProgressBar 구성요소는 아직 없습니다. 임시 해결책으로 학습 곡선 일지 시리즈에서 구축한 이미지 검색 UI에 Swing JProgressBar 구성요소로부터 JavaFX 스크립트 진행 표시줄을 생성하는 createProgressBar 함수를 포함했습니다. 우리는 이 함수를 자체 파일의 자체 클래스로 이동하기로 결정했습니다. 이는 애플리케이션의 주요 부분을 깔끔하게 만드는 이점이 있습니다. 따라서 애플리케이션에는 이제 4개의 파일이 있습니다.

• Main.fx: 애플리케이션의 주요 부분을 제공합니다. UI를 표시하고 이미지 검색 및 가져오기를 호출합니다.
• ImageSearcher.fx: 이미지 검색을 수행합니다.
• Photo.fx: Flickr 사진을 나타냅니다.
• TempProgressBar.fx: 진행 표시줄을 생성합니다.

다음은 이미지 검색을 호출하는 Main.fx의 코드입니다.

  var searcher = ImageSearcher {
      callback: function(photos:Photo[]):Void {
          thumbnailList.items = for(photo in photos) {
              ListItem {
                  text: photo.title
                  value: photo
              }
          };

          matchedImagePB.indeterminate= false;
      }
  };

  var search = function():Void {
      System.out.println("searching... {searchTextField.text}");
      matchedImagePB.indeterminate = true;
      searcher.search(searchTextField.text);
  };

  searchTextField.action=search;

사용자가 UI의 검색 필드에 검색어를 입력하면 ImageSearcher 클래스 내의 search 함수를 호출하는 작업을 트리거하고 검색어를 search 함수로 전달합니다.

변수에 함수가 지정된 것에 유의하십시오.

  var search = function():Void {...}
 

또한 함수는 matchedImagePB의 indeterminate 등록 정보를 true로 설정합니다.

  var matchedImagePB = TempProgressBar { };

        matchedImagePB.indeterminate = true;
 

TempProgressBar 클래스는 matchedImagePB 변수에 지정됩니다. 따라서 matchedImagePB의 indeterminate 등록 정보를 설정하는 것은 실질적으로 TempProgressBar 개체의 indeterminate 등록 정보를 설정하는 것입니다. 그 영향을 이해하기 위해 TempProgressBar 클래스를 살펴보겠습니다.

다음은 TempProgressBar 클래스입니다.

  package javafxscriptimgsearch2;

  import javafx.ext.swing.*;

  public class TempProgressBar extends Component {
      protected function createJComponent():javax.swing.JComponent {
          return new javax.swing.JProgressBar();
      }
      public attribute indeterminate:Boolean = false on replace {
          var prog = this.getJComponent() as javax.swing.JProgressBar;
          prog.setIndeterminate(indeterminate);
      }
}
 

클래스에는 createJComponent 함수와 indeterminate 속성이 있습니다.
replace 트리거가 indeterminate 속성에 연결되어 있습니다.

      public attribute indeterminate:Boolean = false on replace {
          var prog = this.getJComponent() as javax.swing.JProgressBar;
          prog.setIndeterminate(indeterminate);
      }
 

애플리케이션의 주요 부분이 속성을 true로 설정하는 것과 같이 속성 값이 변경되면 트리거는 진행 표시줄을 생성합니다. 특히 트리거는 getJComponent() 함수를 사용하여 JavaFX 스크립트 구성요소로 캡슐화된 Swing JProgressBar 구성요소를 생성합니다. 트리거는 또한 JProgressBar 구성요소의 indeterminate 등록 정보를 true로 설정하여 검색 진행 중에 진행 표시줄이 계속 움직이도록 합니다.

트 리거는 JavaFX 스크립트의 강력한 기능 중 하나입니다. 트리거는 특정 조건 충족 시 코드 블록을 실행하도록 합니다. 또한 기존 Swing 구성요소의 재사용이 얼마나 쉬운지에도 유의하십시오. Swing 구성요소를 사용하려면 JavaFX 스크립트로 간단한 래퍼(wrapper)를 작성하기만 하면 됩니다.

다음은 ImageSearcher 클래스입니다.

    package javafxscriptimgsearch2;

   import javax.xml.parsers.*;
   import org.xml.sax.helpers.DefaultHandler;
   import java.lang.System;
   import java.lang.Thread;
   import java.lang.Runnable;
   import javax.swing.SwingUtilities;

   public class ImageSearcher {
       public attribute callback: function(photos:Photo[]):Void;

       public function search(search:String) {
           var thread = new Thread(Runnable {
               public function run():Void {
                   var photos:Photo[];

                   var handler = DefaultHandler {
                       public function startDocument() { }
                       public function startElement(uri:String, localName:String, qName:String , attributes:org.xml.sax.Attributes ) {
                           if(qName == "photo") {
                               var photo = Photo {
                                   id: attributes.getValue("id")
                                   server: attributes.getValue("server")
                                   farm: attributes.getValue("farm")
                                   title: attributes.getValue("title")
                                   secret: attributes.getValue("secret")
                               };
                               insert photo into photos;
                           }
                       }
                       public function endElement(uri:String , localName:String , qName:String ) {  }
                       public function endDocument() { }

                   };

                   var SEARCH_URL = "http://api.flickr.com/services/rest/?" +
                           "method=flickr.photos.search";
                   var key = "339db1433e5f6f11f3ad54135e6c07a9";
                   var MAX_IMAGES = 100;
                   var searchUrl = "{SEARCH_URL}&api_key={key}&per_page={MAX_IMAGES}&text={search}";
                   var url = new java.net.URL(searchUrl);
                   var is = url.openStream();
                   var factory = SAXParserFactory.newInstance();
                   var saxParser = factory.newSAXParser();
                   saxParser.parse(is, handler);

                   SwingUtilities.invokeLater(Runnable {
                           public function run():Void {

                               if(callback != null) {
                                   callback(photos);
                               }
                           }
                   });
               }
           });
           thread.start();
       }
   }

ImageSearcher 클래스는 애플리케이션에서 이미지 검색을 수행하는 search 함수의 래퍼(wrapper)입니다.

새 스레드를 시작하여 search 함수가 시작됩니다. 스레드 내에서 함수는 검색어와 매칭되는 이미지(Flickr에서는 사진)를 가져오기 위해 Flickr 사진 검색 웹 서비스를 호출합니다. 다음은 Flickr 서비스를 호출하는 코드입니다.

   var SEARCH_URL = "http://api.flickr.com/services/rest/?" +
           "method=flickr.photos.search";
   var key = "339db1433e5f6f11f3ad54135e6c07a9";
   var MAX_IMAGES = 100;
   var searchUrl = "{SEARCH_URL}&api_key={key}&per_page={MAX_IMAGES}&text={search}";
   var url = new java.net.URL(searchUrl);
   var is = url.openStream();
 

호출은 Flickr API의 REST(Representational State Transfer) 버전을 사용합니다(Flickr는 XML-RPC 및 SOAP 버전도 제공합니다). API에 전달되는 인수에는 API 키, 반환되는 이미지의 최대 갯수, 사용자가 지정한 검색어가 포함됩니다. 애플리케이션에서 최대 100개의 매칭되는 이미지 목록을 다운로드하고 싶으므로 이미지 최대 갯수를 100으로 설정했습니다.

사진 검색 서비스는 사진을 XML 문서로 반환하므로 문서를 분석하는 기법이 필요합니다. 이 애플리케이션에서는 분석 수행을 위해 SAX DefaultHandler를 사용했습니다.

   var handler = DefaultHandler {
       public function startDocument() { }
       public function startElement(uri:String, localName:String, qName:String , attributes:org.xml.sax.Attributes ) {
           if(qName == "photo") {
               var photo = Photo {
                   id: attributes.getValue("id")
                   server: attributes.getValue("server")
                   farm: attributes.getValue("farm")
                   title: attributes.getValue("title")
                   secret: attributes.getValue("secret")
               };
               insert photo into photos;
           }
       }
       public function endElement(uri:String , localName:String , qName:String ) {  }
       public function endDocument() { }

   };

각 Flickr 사진에 대해 DefaultHandler는 사진 개체를 인스턴스화하고 속성 값을 Flicker 사진의 해당 속성 값으로 설정합니다. DefaultHandler는 그 다음 각 Photo 개체를 photos라는 시퀀스에 추가합니다. 학습 곡선 일지 3편: JavaFX 스크립트 함수에서 시퀀스는 동일한 유형을 갖는 개체의 순서별 목록을 나타냈습니다.

search 함수는 그 다음 callback을 호출하는 다른 스레드를 시작합니다.

   SwingUtilities.invokeLater(Runnable {
          public function run():Void {

              if(callback != null) {
                  callback(photos);
              }
          }
  }
 

SwingUtilities.invokeLater 메소드는 스레드의 Runnable 작업을 이벤트 디스패치 스레드에 놓습니다.

ImageSearcher 클래스는 속성 유형이 함수인 callback이라는 속성을 갖습니다. 함수는 photos 시퀀스를 매개 변수로 받고 아무 것도 반환하지 않습니다.

    public attribute callback: function(photos:Photo[]):Void;
 

  var searcher = ImageSearcher {
       callback: function(photos:Photo[]):Void {
           thumbnailList.items = for(photo in photos) {
               ListItem {
                   text: photo.title
                   value: photo
               }
           };

           matchedImagePB.Indeterminate= false;
       }
   };
 

매칭되는 사진 목록을 구축한 후 callback 함수는 Matched Images 진행 표시줄의 indeterminate 등록 정보를 기본값인 false로 다시 설정합니다.

이미지 검색을 다루는 코드를 검토했으니 이제 작업을 살펴봅시다. 그림 2는 사용자가 검색어를 입력한 후 Search 필드와 Matched Images 진행 표시줄의 상태를 보여줍니다.

그림 2. 검색어 입력

애플리케이션이 매칭되는 이미지를 검색하는 동안 검색어를 기반으로 검색 중임을 나타내는 메시지가 나타납니다. 이 예제에서는 "searching... polar bear" 메시지가 나타납니다.

그림 3은 매칭되는 이미지의 반환된 제목 목록 일부를 보여줍니다.

그림 3. 이미지 검색 결과

검색 함수가 올바르게 작동합니다!

이미지 표시

구현할 다음 동작은 이미지 표시입니다. 사용자가 반환된 이미지 제목 목록에서 제목을 선택하면 애플리케이션은 해당 이미지를 Flickr 사이트에서 가져와 UI의 Selected Image 영역에 표시해야 합니다.

표시를 위해 이미지를 가져오도록 onChange 위임을 추가하는 List 클래스의 사용자 정의 하위 클래스인 PhotoList라는 클래스를 추가했습니다. 다음은 Main.fx 파일에서 PhotoList 가 인스턴스화되는 방법을 보여줍니다.

   class PhotoList extends List {
       public attribute onChange:function(photo:Photo);
       public attribute selectedPhoto:ListItem = bind selectedItem on replace {
           var photo = selectedPhoto.value as Photo;
           if(onChange != null) {
               onChange(photo);
           }
       }
   }
 
   var thumbnailList = PhotoList {
       preferredSize:[300, 230]
       hmax: Layout.UNLIMITED_SIZE
       vmax: Layout.UNLIMITED_SIZE
   };

사용자가 목록에서 항목을 선택하면 애플리케이션은 PhotoList 개체의 selectedPhoto 속성을 선택된 항목으로 설정합니다. 이는 PhotoList 개체의 selectedPhoto 속성이 다음 표현식의 결과에 바인딩되었기 때문입니다.

   
      selectedItem on replace {
      var photo = selectedPhoto.value as Photo;
  }
 

바인딩은 표현식의 결과를 변수와 연관시키는 것을 의미합니다. 표현식이 변경되면(이 경우 selectedItem가 변경됨) 변수 값은 변경됩니다(이 경우 PhotoList의 selectedPhoto 속성이 자동으로 업데이트됨). 바인딩은 JavaFX 스크립트의 또 다른 강력한 기능입니다. 바인딩을 사용하여 애플리케이션의 부분을 직접적이고 우아하게 동기화할 수 있습니다.

또한 사용자가 목록에서 항목을 선택하면 애플리케이션은 PhotoList 개체의 onChange 속성과 연관된 이미지 로더 함수를 호출합니다. 이 함수는 선택된 진행 표시줄의 indeterminate 등록 정보를 true로 설정하여 이미지를 가져오는 동안 계속 진행되도록 합니다. 그 다음 선택된 Photo 개체에서 해당 이미지를 가져오기 위해 loadFullImage 함수를 호출합니다.

 class PhotoList extends List {
      public attribute onChange:function(photo:Photo);
      ...
          if(onChange != null) {
              onChange(photo);
       }

  // configure the image loader
  var imageLoader = function(photo:Photo):Void {
      if(photo != null) {
          selectedImagePB.indeterminate = true;
          photo.loadFullImage(function():Void{
              selectedImageDisplay.icon = Icon { image: photo.fullImage };
              selectedImagePB.indeterminate = false;
          });
      }
  };

thumbnailList.onChange = imageLoader;
 

이미지 로더는 Selected Image 영역에 표시하기 위해 이미지를 설정하고 이미지를 가져온 후 선택된 진행 표시줄의 indeterminate 등록 정보를 다시 false로 설정합니다.

  selectedImageDisplay.icon = Icon { image: photo.fullImage };
  selectedImagePB.indeterminate = false;
 


Photo 클래스

Photo 클래스를 살펴봅시다.

    package javafxscriptimgsearch2;

   import javafx.scene.image.*;
   import java.lang.*;
   import javax.swing.SwingUtilities;
   import javax.imageio.ImageIO;

   public class Photo {
       public attribute id:String;
       public attribute server:String;
       public attribute farm:String;
       public attribute title:String;
       public attribute secret:String;

       private attribute image:Image = null;

       public attribute fullImage:Image = null;

       public attribute fullImageURL = bind "http://static.flickr.com/{server}/{id}_{secret}.jpg";

       public function loadFullImage(
               callback:function():Void
               ):Void {

           if(image == null) {
               var thread = new Thread(Runnable {
                   public function run():Void {
                       var strImageUrl = "http://static.flickr.com/{server}/{id}_{secret}.jpg";
                       System.out.println("loading: {strImageUrl}");
                       var buffImg = ImageIO.read(new java.net.URL(strImageUrl));

                       SwingUtilities.invokeLater(Runnable {
                           public function run():Void {
                               image = Image.fromBufferedImage(buffImg);
                               fullImage = image;
                               if(callback != null) {
                                   callback();
                               }
                           }
                       });

               }});
               thread.start();
           } else {
               callback();
           }

       }
   }

Photo 클래스는 Flickr에 저장된 사진과 연관시키는 XML 속성에 해당하는 몇 가지 속성을 갖습니다. 예를 들어 Photo 클래스의 id 속성은 Flickr에 저장된 사진의 id 속성에 해당합니다. 또한 클래스는 Flickr에서 사진을 가져오는 loadFullImage 함수도 제공합니다.

   var strImageUrl = "http://static.flickr.com/{server}/{id}_{secret}.jpg"

   var buffImg = ImageIO.read(new java.net.URL(strImageUrl));
 

함수는 JavaFX 스크립트 Image 클래스의 fromBufferedImage 메소드를 사용하여 가져온 사진을 Photo 개체의 image 속성에 지정합니다. 그런 다음 호출자(이 경우 애플리케이션의 주요 부분에 있는 이미지 로더)에게의 callback을 호출하는 다른 스레드를 시작합니다.

   SwingUtilities.invokeLater(Runnable {
       public function run():Void {
           image = Image.fromBufferedImage(buffImg);
           fullImage = image;
           if(callback != null) {
               callback();
           }
       }
   });
 

애플리케이션의 이미지 표시 부분을 테스트해봅시다. 그림 4는 Matched Images 영역에서 이미지를 선택한 후 Selected Image 진행 표시줄의 상태를 보여줍니다.

그림 4. 표시할 이미지 선택

애플리케이션이 이미지를 가져오면 이미지의 사진 소스 URL을 식별하는 메시지를 표시합니다. 이 예제에서는 "loading: http://static.flickr.com/3234/2595583764_a2e6661d3a.jpg" 메시지가 나타납니다. 이미지 가져오기가 끝나면 애플리케이션은 "loaded" 메시지를 표시합니다.

그림 5는 UI의 Selected Image에 선택한 이미지가 표시된 완전한 UI를 보여줍니다.

그림 5. 표시된 이미지

애플리케이션의 이미지 가져오기 부분이 작동합니다. 애플리케이션도 의도대로 작동합니다.

완성된 JavaFX 스크립트 애플리케이션을 위해 NetBeans 프로젝트 다운로드를 받을 수 있습니다.

요약

이 학습 곡선 일지 시리즈에서는 JavaFX 스크립트 프로그래밍 언어(이 시리즈에서는 JavaFX 스크립트라고 줄여서 부름)의 사용을 시작하는데 도움이 되는 몇 가지 기본 개념 및 기법을 소개했습니다.

시리즈의 1편에서는 간단한 JavaFX 애플리케이션을 만드는 방법을 소개했습니다.

2편에서는 풍부한 UI 생성을 위해 사용 가능한 JavaFX 라이브러리 내의 일부 클래스와 언어의 선택적 구문을 설명했습니다. UI 구축에는 계층 구조적인 Swing 기반 접근 방법을 따랐습니다. 이 시리즈의 1편에서 언급한 것처럼 앞으로 JavaFX 개발자는 노드 기반 접근 방법을 사용할 것입니다. 노드 기반 접근 방법에서는 UI 구축을 위해 다른 JavaFX 라이브러리를 사용할 것입니다.

3편에서는 뷰와 데이터 모델 등의 애플리케이션 부분을 동기화하기 위해 사용 가능한 JavaFX 스크립트의 바인딩 기능과 JavaFX 스크립트 함수를 다뤘습니다.

4편(본 기사)에서는 웹 서비스 액세스를 위한 JavaFX 스크립트 사용 방법을 보여주었습니다. 그 과정 중에 FX 스크립트에서 Swing 클래스와 같은 자바 기술 슬래스의 액세스가 얼마나 쉬운지도 보여주었습니다.

또한 이 시리즈를 통해 코드 완성과 같은 기능이 어떻게 NetBeans IDE 6.1에서 JavaFX 애플리케이션의 빌드 및 실행을 단순화하는지도 볼 수 있었습니다. JavaFX Preview SDK를 사용하여 명령줄에서 JavaFX 애플리케이션을 빌드 및 실행할 수도 있습니다.

JavaFX 포함 NetBeans IDE 6.1을 다운로드하여 설치하거나 JavaFX Preview SDK를 다운로드하여 JavaFX 스크립트를 시작하십시오.

자세한 정보

• JavaFX 기술 허브
• JavaFX 홈
• Project OpenJFX
• NetBeans IDE
• 학습 곡선 일지 1편: JavaFX 스크립트 탐구
• 학습 곡선 일지 2편: 선언적 사용자 인터페이스
• 학습 곡선 일지 3편: JavaFX 스크립트 함수

이 글의 영문 원본은
Learning Curve Journal, Part 4: Accessing a Web Service
에서 보실 수 있습니다.

지난 학습 곡선 기사에서는 간단한 사용자 인터페이스(UI)를 구현하고 UI 시험이 성공적이었음을 확인했습니다. 결과 JavaFX 스크립트는 Flickr에서 이미지를 검색하는 이미지 검색 애플리케이션 구축을 위한 원래 자바 프로그래밍 언어 UI와 비슷하게 보였습니다. 그림 1은 결과적인 기본 프레임을 보여줍니다.

  function z(a,b) {
      var x = a + b;
      var y = a - b;
      return sq(x) / sq (y);
  }

  function sq(n) {return n * n; }

  function main() {
      return z(5, 10);
  }

  function min(x1 : Number, x2 : Number ): Number {
      if (x1 < x2) {
        return x1;
      }
      else {
        return x2;
  }
 

function z(a: Number, b: Number): Number {
   var x: Number = a + b;
   var y: Number = a - b;
   return sq(x) / sq (y);
}
 

return 키워드는 선택 사항입니다.

   function sq(n) {n*n;}

위 함수는 다음과 같습니다.

   function sq(n) {return n*n;}

함수는 function 키워드로 시작합니다. 그 뒤에는 함수 이름과 매개 변수 목록이 나옵니다. JavaFX 스크립트에서는 유형이 변수나 함수 이름 다음에 나옵니다. 예를 들면 b: Number 매개변수는 b 라는 인수의 유형이 Number라는 의미입니다. 마지막으로 함수는 Number를 반환하므로 이를 매개 변수 목록 뒤에 선언할 수 있습니다. 함수의 본문 앞뒤에는 자바 언어에서 메소드 본문을 둘러싸는 것과 같이 괄호가 있습니다.

함수는 매개 변수나 기타 참조 변수가 변경될 때마다 반환 값을 재평가합니다. 이 기능은 개체를 자주 변경될 수 있는 특정 값에 바인드하려는 경우 유용합니다. 바인딩에 대해서는 나중에 자세히 설명하겠습니다.

클래스에 대해 함수가 정의될 수도 있습니다. 다음은 Friends 클래스에 대해 정의된 함수의 예입니다.

   import java.lang.System;
   import javafx.lang.Sequences;

   class Friends {
       attribute knownNames: String[];
       function sayHello(name: String): String {
           var index = Sequences.indexOf(knownNames,name);
           if (index >= 0) {
               return "Hello, {name}!";
               } else {
               return "Sorry, I can't talk to strangers.";
               }
       }
   }

   var buddies = Friends {
       knownNames: ["John", "Robyn", "Jack", "Nick", "Matthew",
       "Tressa", "Ruby"]
   };

   var greeting = buddies.sayHello("John");
   System.out.println(greeting);
 

이 작은 프로그램은 sayHello 메소드에 아는 이름을 입력하면 "Hello"라고 응답합니다. 그렇지 않은 경우엔 "can't talk to strangers"라고 합니다. Friends 클래스에는 한 가지 속성과 속성을 사용하여 메시지를 반환하는 함수가 포함되어 있습니다. Sequences 클래스를 사용하는 것에 유의합니다. 이 클래스는 시퀀스 조작을 위한 다양한 함수를 포함합니다. 시퀀스는 이 예제에서 아는 이름의 목록과 같이 개체의 순서별 목록을 나타냅니다. Sequences의 indexOf 함수는 지정된 시퀀스에서 같은 값을 갖는 개체를 검색합니다. 여기에서 indexOf는 아는 이름 시퀀스에서 지정된 이름(이 예제에서는 "John")과 매칭되는 개체를 검색합니다.

UI 요소(JavaFX 스크립트 라이브러리에서는 노드)는 키 입력이나 마우스 클릭과 같은 사용자 상호작용에 응답할 수 있습니다. 위젯은 action, onMouseClicked, onKeyTyped 및 기타 이벤트 기반 속성을 갖습니다. 이들 속성과 함수를 연관시킬 수 있습니다. 예를 들어 함수를 TextField의 action 속성과 연관시키면 해당 함수는 필드 내에서 Enter를 누를 때 실행됩니다. Button 위젯의 동일한 action 속성은 사용자가 클릭할 때마다 활성화됩니다.

JavaFX 이미지 검색 애플리케이션과 관련된 함수가 필요하므로 UI 요소에 대한 이벤트 핸들러를 작성하기로 했습니다. 다음 애플리케이션은 두 개의 버튼과 하나의 레이블을 생성합니다. Bigger 버튼을 누르면 레이블의 글꼴 크기가 증가하고 텍스트가 변경됩니다. Smaller 버튼을 누르면 레이블의 글꼴 크기가 감소하고 텍스트가 변경됩니다.

이 애플리케이션에서는 계층 구조적인 Swing 기반 접근 방법을 따릅니다. 이 시리즈의 1편에서 언급한 것처럼 앞으로는 JavaFX 스크립트 개발자가 노드 기반 접근 방법을 사용하도록 할 것입니다.

   import javafx.ext.swing.SwingFrame;
   import javafx.ext.swing.BorderPanel;
   import javafx.ext.swing.FlowPanel;
   import javafx.ext.swing.Button;
   import javafx.scene.Font;
   import javafx.scene.HorizontalAlignment;
   import javafx.ext.swing.Label;

   var font = Font { size: 18 };

   class FontDataModel {
       attribute text: String;

       function increaseFontSize() {
          font = Font { size: font.size + 1 };
          text= "Font Test ({font.size})";
          }
       function decreaseFontSize() {
          font = Font { size: font.size - 1 };
          text= "Font Test ({font.size})";
       }
   }

   SwingFrame {
        var myFont = FontDataModel {
            text: "Font Test (18)"

        }

       content:
       BorderPanel {
           top: FlowPanel {
               alignment: HorizontalAlignment.LEADING
               content: [
                   Button { text:"Bigger"
                       action :
                       function() {
                            myFont.increaseFontSize();
                       }
               },

               Button { text:"Smaller"
                   action : function() {
                       myFont.decreaseFontSize();
                   }
               }

               ]
           }
           center:
               Label {
                   width: 200
                   font: bind font
                   text: bind myFont.text

           }

        }
        visible: true
   }
 

이 코드를 잘라내어 JavaFX 애플리케이션에 바로 붙여넣을 수 있습니다. Preview 버튼을 사용하면 그림 2의 결과가 보입니다.

그림 2. 미리보기 기능을 사용하여 JavaFX 스크립트 언어를 대화형으로 시험

이 Bigger-Smaller 글꼴 애플리케이션은 텍스트 문자열 속성을 갖는 FontDataModel을 생성합니다. 애플리케이션은 FontDataModel 인스턴스를 생성하고 text 속성을 초기화합니다. FontDataModel에도 increaseFontSize 및 decreaseFontSize라는 두 가지 함수가 있습니다. 이들 함수는 텍스트 속성을 변경하고 Font 클래스의 인스턴스를 생성하며 인스턴스의 글꼴 크기를 업데이트합니다.

왜 글꼴을 FontDataModel의 속성으로 지정하고 텍스트 속성과 같은 방법으로 함수에서 업데이트하지 않는지 궁금할 지도 모릅니다. 이러한 접근 방법은 Font가 변경할 수 없는 개체, 즉 원래 개체의 속성을 변경할 수 없기 때문에 사용할 수 없습니다. 개체의 인스턴스에서만 속성을 변경할 수 있습니다.

각 버튼은 연관된 함수를 포함하는 action 속성을 갖습니다. 예를 들어 Bigger 레이블이 있는 버튼은 myFont 변수의 increaseFontSize 함수를 호출합니다.

           Button { text:"Bigger"
       action :
       function() {
            myFont.increaseFontSize();
       }
   }
 

버튼을 누를 때마다 글꼴 크기와 텍스트가 변경되는 것을 볼 수 있습니다. 그림 3은 Bigger 버튼을 두 번 눌렀을 때의 결과를 보여줍니다.

그림 3. 버튼을 클릭하면 텍스트와 글꼴 크기 변경

분명히 increaseFontSize 메소드는 글꼴과 텍스트를 변경합니다. 이를 위해 바인딩이라는 JavaFX 스크립트 기능을 사용했습니다.

뷰와 모델 바인딩

JavaFX 스크립트에는 하나의 속성이 다른 속성의 변경을 추적하도록 하는 bind 연산자가 있습니다. 하나의 속성을 다른 속성에 바인딩한다는 것은 바인딩된 속성이 대상 속성의 변경 사항을 항상 인지한다는 것을 의미합니다. 이 Bigger-Smaller 글꼴 애플리케이션에서는 Label이 글꼴과 텍스트의 변경 사항을 추적하도록 하려고 합니다. 이를 위해 Label의 font 속성을 Font 변수에 바인드하도록 bind 연산자를 사용했습니다. 또한 Label의 text 속성을 FontDataModel의 text 속성에 바인드하도록 bind 연산자를 사용했습니다.

다음은 Label 선언입니다.

  Label {
      width: 200
      font: bind font
      text: bind myFont.text

  }
 

bind 연산자는 함수에도 사용할 수 있습니다. 함수는 인수나 참조 변수가 변경될 때마다 결과를 업데이트하므로 함수에의 바인딩은 단일 속성에의 바인딩과 마찬가지로 작용합니다. 사실 함수는 실제로 바인딩과 함께 사용하도록 설계되었습니다. 본문 내의 매개 변수 및 참조 변수를 모두 포함하는 모든 종속성을 자동으로 추적하는 재사용 가능한 하위 루틴으로의 바인딩을 리팩터링하기 위해 이들을 사용할 수 있습니다.

표 1에서 코드의 일부를 참조하십시오.

표1. 함수와 함께/함수 없이 바인드 사용

함수 없이 바인드	함수와 함께 바인드
import java.lang.System; class Data { attribute foo: Number; attribute baz: Number; } var data = Data { foo: 4 baz: 7 }; var zoo = bind data.foo + data.baz + 10; System.out.println(zoo); data.baz = 12; System.out.println(zoo);	import java.lang.System; class Data { attribute foo: Number; attribute baz: Number; function add(x, y, z): Number { return x+y+z; } } var data = Data { foo: 4 baz: 7 }; var zoo = bind data.add(data.foo, data.baz, 10); System.out.println(zoo); data.baz = 12; System.out.println(zoo);
출력: 21.0 26.0	출력: 21.0 26.0

JavaFX 애플리케이션에 동작을 추가하기 위해 함수를 사용합니다. UI 구성요소의 속성은 함수에 매핑됩니다. action, onMouseClicked 및 onKeyTyped와 같은 UI 이벤트 처리를 위해 이들 함수를 정의할 수 있습니다. 함수에는 함수 본문 내에서 매개 변수 및 참조 변수를 재평가하는 추가적인 등록 정보가 있습니다.

bind 연산자를 사용하여 하나의 속성을 다른 속성에 연결할 수 있습니다. 이는 UI 위젯이 모델 속성을 추적하도록 할 때 특히 유용합니다. 뷰 속성을 모델 속성에 바인딩한다는 것은 모델과 뷰가 동일한 데이터로 항상 동기화됨을 의미합니다.

JavaFX 이미지 검색 애플리케이션의 UI에 아직 기능을 추가하지 않았지만 함수가 필요하다는 것을 알게 되었습니다. 검색 텍스트를 가져오기 위해서는 거의 확실히 함수를 사용해야 합니다. 같은 함수가 이미지를 가져오기 위해 Flickr 사이트에도 액세스할 것입니다. 또한 뷰를 기본 모델에 연결하기 위해 bind 연산자도 사용해야 할 것입니다.

이제 UI를 일부 기본 작업 및 함수에 연결하는 방법을 알게 되었습니다. 또한 UI를 기본 모델에 연결하기 위해 bind 연산자도 사용할 수 있습니다.