javafx之布局layout及UI控件事件处理canvas，效果，杂乱笔记

很杂乱，不喜勿喷。

StackPane:显示在现有node的顶部overlap

FlowPane
TilePane:类似于FlowPane,但是它是以单元格cell的形式组织，每一个组件单元格大小相同。
AnchorPane固定组件到left,top.bottom.right并指定其与AnchorPane边界的距离，这种排列关系不随window resize而变化。他们仍然会保持自己的position according to anchor point


使用built-in layout panes的好处就是他们可以随着window resize而resize自己和其子组件UI Controls.但是Text与Group,Shapes对象时不能resizable的。这要注意。


如果你想更好地控制组件的size，那么你可以设置组件的preferred size
管理position，可以使用pane的alignment属性为子node设置位置。


构建大小一致地button：
1.针对每一个button使用setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE),注意千万别使用setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE);
2.使用VBox约束他们的宽，或使用HBox约束他们的高。
3.使用TilePane同时约束宽和高。
4.使用setPrefSize(50,50);之类的


每一个layout pane 都会根据minimum,preferred,maximum size调整node的大小
有时我们要防止由于stage resize导致size变化的过分，我们可以强制使用preferredsize，即使窗口变得很小或很大。
如对ListView ,Button等
listview.setMaxHeight(Control.USE_PREF_SIZE)
button.setMinWidth(Control.USE_PREF_SIZE)
当然你也你可以指定pref size
listview.setPrefWidth(150.0);


当然你也可以防止node size 随着stage size的变化而变化。
button.setMinWidth(80.0);
button.setPrefWidth(80.0);
button.setMaxWidth(80.0);


你可以管理layout pane 中nodes的alignment。这些alignment参数可以在下面这些枚举中找到
javafx.geometry包中的Pos,HPos,VPos


HBox.setHgrow(stackPane,Priority.ALWAYS)
代表的含义是当HBox的可用空间大于其PrefSize时，那么多余的地方可以让stackPane优先选择排列位置。


注意：GridPane添加子元素时无需getChildren().add而是直接add();

对于GridPane我们还可以通过ColumnConstaints对每一列的排列方式占用比进行约束。如：第一列向右对齐，第二列向左对齐

ColumnConstraints column1 = new ColumnConstraints();      column1.setHalignment(HPos.RIGHT);  // Override default      grid.getColumnConstraints().add(column1);       ColumnConstraints column2 = new ColumnConstraints();      column2.setHalignment(HPos.LEFT);  // Override default      grid.getColumnConstraints().add(column2);  For example, to create a GridPane with 5 columns 100 pixels wide:      GridPane gridpane = new GridPane();      for (int i = 0; i < 5; i++) {          ColumnConstraints column = new ColumnConstraints(100);          gridpane.getColumnConstraints().add(column);      }   Or, to create a GridPane where columns take 25%, 50%, 25% of its width:      GridPane gridpane = new GridPane();      ColumnConstraints col1 = new ColumnConstraints();      col1.setPercentWidth(25);      ColumnConstraints col2 = new ColumnConstraints();      col2.setPercentWidth(50);      ColumnConstraints col3 = new ColumnConstraints();      col3.setPercentWidth(25);      gridpane.getColumnConstraints().addAll(col1,col2,col3);

我们可以使用相关layout Pane的static method给组件增加额外约束。如：

  StackPane.setMargin(helpText, new Insets(0, 10, 0, 0));

ListView
listView.setItems(data);
       listView.setCellFactory(ComboBoxListCell.forListView(names));          
       
TableView, TableColumn TableCell
setCellValueFactory(PropertyValueFactctory<>("propertyName"));
TableColumn可以相互嵌套


TreeView 与TreeItem


TitledPane是一个可以折叠的layout组件，一般与Accordion配合使用。
Accordion包含TitledPane


快捷键
MenuItem clear = new MenuItem("Clear");
clear.setAccelerator(KeyCombination.keyCombination("Ctrl+X"));


剪切板与ContextMenu
final ContextMenu cm = new ContextMenu();
MenuItem cmItem1 = new MenuItem("Copy Image");
cmItem1.setOnAction((ActionEvent e) -> {
    Clipboard clipboard = Clipboard.getSystemClipboard();
    ClipboardContent content = new ClipboardContent();
    content.putImage(pic.getImage());
    clipboard.setContent(content);
});


Pagination Control页码切换式组件


使用Swing中的ImageIO:
ImageIO.write(SwingFXUtils.fromFXImage(pic.getImage(),
                  null), "png", file);


event.consume();


Drag-and-Drop
DragBoard, ClipBordContent
移动模式：COPY, MOVE, and LINK.
一旦开始drag那么每一个nodes都有可能为target，如果要指定接收的target那么就必须监听DragOver事件，并调用 event.acceptTransferModes(TransferMode.MOVE);
Drag_Dropped事件：完成需要： event.setDropCompleted(success)
完成之后需要处理善后工作DRAG_DONE事件。


Canvas API:
Canvas and GraphicsContext
Canvas内部封装了GraphicsContext
Canvas canvas = new Canvas(300, 250);
      GraphicsContext gc = canvas.getGraphicsContext2D();

javafx media:
Media, MediaPlayer, MediaView,MediaErrorEvent


Transformtions
支持的变换：
Translation,Rotation,Scaling,Shearing


Animation:
动画分类：Timeline与传统动画
Timeline, Transition
FadeTransition ， PathTransition, FillTransition,StrokeTransition
TranslateTransition,RotateTransition,ScaleTransition,ParallelTransition SequentialTransition


可视化效果
Blend：主要用于处理两个或多个形状交叠区域：
c.setBlendMode(BlendMode.SRC_ATOP);


Bloom发亮，变亮。
g.setCache(true);
//g.setEffect(new Bloom());
 Bloom bloom = new Bloom();
bloom.setThreshold(1.0);
g.setEffect(bloom);


Blur模糊
Blur有几种：
BoxBlur:
BoxBlur bb = new BoxBlur();
       bb.setWidth(5);
       bb.setHeight(5);
       bb.setIterations(3);


       t.setEffect(bb);
 MotionBlur
 MotionBlur mb = new MotionBlur();
       mb.setRadius(15.0f);
       mb.setAngle(45.0f);
 
       t.setEffect(mb);
GaussianBlur
t2.setEffect(new GaussianBlur());




DropShow下阴影
DropShadow ds1 = new DropShadow();
       ds1.setOffsetY(4.0f);
       ds1.setOffsetX(4.0f);
       ds1.setColor(Color.CORAL);


InnerShadow内阴影
InnerShadow is = new InnerShadow();
        is.setOffsetX(2.0f);
        is.setOffsetY(2.0f);
 
 Reflection反射，投影
 Reflection r = new Reflection();
       r.setFraction(0.9);


Lighting
Distant light = new Distant();
       light.setAzimuth(-135.0f);


       Lighting l = new Lighting();
       l.setLight(light);
       l.setSurfaceScale(5.0f);


PerspectiveTransform透视远景
PerspectiveTransform pt = new PerspectiveTransform();
       pt.setUlx(10.0f);
       pt.setUly(10.0f);
       pt.setUrx(210.0f);
       pt.setUry(40.0f);
       pt.setLrx(210.0f);
       pt.setLry(60.0f);
       pt.setLlx(10.0f);
       pt.setLly(90.0f);
效果链：通过setInput()方法实现





WebView,WebEngine
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.load("http://mySite.com");


PopupFeatures:
webEngine.setCreatePopupHandler(new Callback<PopupFeatures, WebEngine>() {
    @Override public WebEngine call(PopupFeatures config) {                
        // do something
        // return a web engine for the new browser window
    }
});
WebHistory
WebHistory history = webEngine.getHistory();.
final WebHistory history = webEngine.getHistory();
history.getEntries().addListener(new 
    ListChangeListener<WebHistory.Entry>() {
        @Override
        public void onChanged(Change<? extends Entry> c) {
            c.next();
            for (Entry e : c.getRemoved()) {
                comboBox.getItems().remove(e.getUrl());
            }
            for (Entry e : c.getAddedSubList()) {
                comboBox.getItems().add(e.getUrl());
            }
        }




支持HTML5
DOM
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
stage.setTitle(webEngine.getDocument().getDocumentURI());


Web Socket:
<script>
    socketConnection = new WebSocket('ws://example.com:8001');    
    socketConnection.onopen = function () {
        // do some stuff
    };
</script>


Web Workers:
<script>
   var worker = new Worker('myWorker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };


  javafx处理javascript脚本：
  webEngine.executeScript("<function name>");.


javascript中调用javafx:
JSObject win = (JSObject) webEngine.executeScript("window");
 win.setMember("app", new JavaApp());
 <a href="about:blank" onclick="app.exit()">