プロジェクト

全般

プロフィール

JavaFX SceneBuilderで画面作成

インストール

Windows

Scene Builder 8.3.0 を Windows 10 64bit版にインストール

デフォルトのインストール先は、ユーザー固有のディレクトリ(インストール実行ユーザーの%LOCALAPPDATA%SceneBuilder)です。
システムワイド(C:\Program Files\SceneBuilder等)にインストールする場合、インストーラーでインストール先を変更します。この場合、インストーラーを管理者権限で実行しておきます。

レイアウト

レイアウト部品の設定方法

GridPane

トップレベルのレイアウトをAnchorPane以外にする方法

デフォルトではScene BuilderのトップレベルのレイアウトはAnchorPaneになっています。これを、他のレイアウト部品に変更したい場合、Scene Builder上でDocumentペインのAnchorPaneを削除して新たなレイアウト部品を設定すると、AnchorPaneに配置した部品も削除されてしまい、また、コントローラの設定も消えてしまいます。

そのときは、DocumentペインでAnchorPaneを右クリックし、コンテキストメニューの[Wrap in]から任意のレイアウト部品を選択します。

wrap-in_01.png (Wrap in のメニュー)

例えば、BorderPaneを選択すると、次のような画面レイアウトとなります。

wrap-in-border_01.png (Wrap inからBorderLayoutに変更)

配置していたLabelやButtonも残っており、コントローラクラスの設定も残っています。

コントロール

Label

Labelに複数行の文字列を設定する

Labelを配置し、PropertiesのTextの右端の歯車アイコンをクリックします。ポップアップメニューから[Switch to multi-line mode]を選択します。

label_properties_text_popupmenu-1.png (LabelのTextプロパティ右端の歯車アイコンをクリック)

複数行のテキスト編集が可能となります。

label_properties_text_multitline-1.png (Labelの複数行編集)

TableView

TableView の列を増減する

TableViewを配置すると、デフォルトでは2つの列があります。
列を増やす場合はTableViewの下にTableColumnをドラッグ&ドロップします。

tableview_tablecolumn-1.png (TableViewにTableColumnを追加)

参考

過去に記載したWebページ
http://www.02.246.ne.jp/~torutk/javafx2/table/tableview-memo.html

CSS

外部CSSファイルの適用

外部CSSファイルを使用するJavaFXアプリケーションで、画面レイアウトのFXMLをScene Builderで作成する場合、外部CSSのスタイルをプレビューで適用させるには、次の操作を行います。

  • [Preview]メニュー > [Scene Style Sheets] > [Add a Style Sheets...]でファイルを開くダイアログが表示されるので、適用するCSSファイルを選択

addstylesheet-1.png (スタイルシートの適用)

CSS Analyzer

  • [view]メニューから[Show CSS Analyzer]を選択

css_analyzer-1.png (viewメニューからCSS Analyzerを表示する)

  • 選択したコントロールのCSS適用状況が表示

css_analyzer-2.png (CSS AnalyzerでTextのCSS適用状況を調べる)

wrap-in_01.png 表示 - Wrap in のメニュー (207 KB) 高橋 徹, 2017/01/13 12:24

wrap-in-border_01.png 表示 - Wrap inからBorderLayoutに変更 (164 KB) 高橋 徹, 2017/01/13 12:24

label_properties_text_popupmenu-1.png 表示 - LabelのTextプロパティ右端の歯車アイコンをクリック (34.3 KB) 高橋 徹, 2017/04/09 17:58

label_properties_text_multitline-1.png 表示 - Labelの複数行編集 (17.4 KB) 高橋 徹, 2017/04/09 18:00

tableview_tablecolumn-1.png 表示 - TableViewにTableColumnを追加 (192 KB) 高橋 徹, 2017/04/29 18:09

css_analyzer-1.png 表示 - viewメニューからCSS Analyzerを表示する (170 KB) 高橋 徹, 2017/05/03 11:25

css_analyzer-2.png 表示 - CSS AnalyzerでTextのCSS適用状況を調べる (265 KB) 高橋 徹, 2017/05/03 11:25

addstylesheet-1.png 表示 - スタイルシートの適用 (349 KB) 高橋 徹, 2017/05/03 11:34

クリップボードから画像を追加 (サイズの上限: 1 GB)