web-dev-qa-db-ja.com

cssを使用してJavaFXContextMenuのスタイルをどのように設定しますか？

別のCSSファイルを使用してContextMenuアイテムのスタイルを変更しようとしています。 caspian.cssセクションを調べたところ、次の定義が見つかりました。

  • 。コンテキストメニュー
  • .context-menu .separator
  • .context-menu.scroll-arrow
  • .context-menu .scroll-arrow：hover
  • .context-menu：show-mnemonics .mnemonic-underline

それらをcssファイルに正確にコピーし、テストとして背景色の値だけを変更しました。

.context-menu {
    -fx-skin: "com.Sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: #006699;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
/*    -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em;  8 1 8 1 */
    -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
}

.context-menu .separator {
    -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
}

.context-menu .scroll-arrow {
    -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
    -fx-background-color: #006699;
}

.context-menu .scroll-arrow:hover {
    -fx-background: -fx-accent;
    -fx-background-color: #006699;
    -fx-text-fill: -fx-selection-bar-text;
}

.context-menu:show-mnemonics .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

これは明らかに機能しないか、私はここにいないでしょう。どんな値を変えても効果がないようです。

JavaFX Scene Builderを開いて確認しました（使用するのがかなり不器用であるため、これを最後の手段として使用しました）。奇妙に思えるリストCSSBridge[context-menu]であるコンテキストメニューのcssセクションのStyleablePartsの下に気づきました。 Labelのような他のものにはLabel[label]があります。

コンテキストメニューのcssファイルを無視し、caspian.cssのデフォルト値を使用しているように見えるので、ここで何が起こっているのか誰かに説明してもらえますか？

サンプルのFXMLファイル、css、およびJava実行するコードを添付します。

Sample.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import Java.lang.*?>
<?import Java.net.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

<AnchorPane fx:id="myroot" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Label text="Right click for options">
      <contextMenu>
        <ContextMenu>
          <items>
            <MenuItem text="Help" />
            <MenuItem text="Me" />
          </items>
        </ContextMenu>
      </contextMenu>
    </Label>
  </children>
  <stylesheets>
    <URL value="@contextcolor.css" />
  </stylesheets>
</AnchorPane>

contextcolor.css

.root {
  -fx-background-color: cornsilk; 
  -fx-padding: 10;
}

.context-menu {
  -fx-background-color: #006699;
  -fx-text-fill: white;
}

.menu-item .label {
  -fx-text-fill: yellow;
}

.menu-item:focused .label {
  -fx-text-fill: white;
}

Test.Java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Test extends Application {

    public static void main(String[] args) {
        Application.launch(Test.class, args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        System.out.println(com.Sun.javafx.runtime.VersionInfo.getVersion());

        Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));

        stage.setScene(new Scene(root));
        stage.show();
    }
}
stylingjavafx-2
14
Jacob Schoen

これは、cssを介してJavaFXコンテキストメニューをスタイリングする簡単な例です。

WinXPsp3、Jdk7u6b14ea、JavaFX2.2b12でテスト済み。

Javaアプリ

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.stage.Stage;

public class ContextColor extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    Label label = new Label("Right click for options");
    label.setContextMenu(new ContextMenu(new MenuItem("Help"), new MenuItem("Me")));
    Scene scene = new Scene(label);
    scene.getStylesheets().add(ContextColor.class.getResource("contextcolor.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
  }
}

cssスタイルシート

/** contextcolor.css
 *   place in same folder as ContextColor.Java
 *   ensure your build system copies this file to the ContextColor.class output directory on build
 */
.root {
  -fx-background-color: cornsilk; 
  -fx-padding: 10;
}

.context-menu {
  -fx-background-color: #006699;
  -fx-text-fill: white;
}

.menu-item .label {
  -fx-text-fill: yellow;
}

.menu-item:focused .label {
  -fx-text-fill: white;
}

私はあなたのcssスタイリングがあなたが期待するように機能しなかった正確な理由をあなたに言うことができませんでした。考えられる理由は次のとおりです。

  1. 正しくロードされていません。
  2. Cssファイルは出力パスにコピーされません。
  3. それ以外の場合、cssファイルが破損しているか、構文が正しくありません。
  4. Cssからのコンテキストメニューのスタイル設定が難しい以前のバージョンのJavaFXを使用しています。

更新

Cssファイルがfxmlを介してロードされる質問の完全なコードを見ると、コンテキストメニューのスタイルが設定されていない問題を再現できます。 fxmlでスタイルシートを設定する代わりに、コードでスタイルシートシーン上を設定した場合（テストアプリのように）、すべて正常に機能します。

Cssがfxmlを介して設定される場合の違いは、fxmlがシーンにスタイルシートを設定するのではなく、シーンの親ルートノードに設定することです。コードでシーンではなく親にスタイルシートを追加すると、コード実装からのfxmlと同じ動作になります。したがって、これは実際にはfxml自体の問題ではなく、JavaFX 2.2css処理の継承ルールの問題です。 IMO、css処理が間違っています-スタイルシートがシーンに設定されているか、シーンのルートノードに設定されているかにかかわらず、スタイルは同じである必要があります。

テストケースとこのStackOverflowの質問へのリンクを使用して、 http://javafx-jira.kenai.com でJavaFXランタイムコントロールに対してバグを報告することをお勧めします。JavaFXチームが問題を解決します。期限。

回避策として、今のところコードでシーンにスタイルシートを設定するだけです。

更新

この問題の根本的な原因は RT-19435：ポップアップコントロールのスタイルが親のスタイルシート宣言ではない のようです。

15
jewelsea
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.ContextMenu;
import javafx.scene.control.Label;
import javafx.scene.control.MenuItem;
import javafx.scene.control.TextArea;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.geometry.Insets;

/**
 *
 * @author nidhi.a.agrawal
 */
public class Context extends Application {

    @Override
    public void start(Stage stage) throws Exception {
      //  Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));

        TextArea notification = new TextArea();
        ContextMenu contextMenu = new ContextMenu();

        Node itemIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_createnew.png")));
        Node con_test_hierIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_Configure_Test _Hierachy.png")));
        Node cutIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_cut.png")));
        Node copyIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_copy.png")));
        Node pasteIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_paste.png")));
        Node insertIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_insert.png")));
        Node editIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_edit.png")));
        Node renameIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_rename.png")));
        Node deleteIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_delete.png")));
        Node tagIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_tag.png")));
        Node refreshIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_refresh.png")));


        MenuItem sap_new = new MenuItem("Create New Sap System", itemIcon);
        MenuItem con_test_hier = new MenuItem("Configure Test Hierarchy", con_test_hierIcon);
        MenuItem cut = new MenuItem("Cut", cutIcon);
        MenuItem copy = new MenuItem("Copy", copyIcon);
        MenuItem paste = new MenuItem("Paste", pasteIcon);
        MenuItem insert = new MenuItem("Insert", insertIcon);
        MenuItem edit = new MenuItem("Edit", editIcon);
        MenuItem rename = new MenuItem("Rename", renameIcon);
        MenuItem delete = new MenuItem("Delete", deleteIcon);
        MenuItem tag = new MenuItem("Tag", tagIcon);
        MenuItem refresh = new MenuItem("Refresh", refreshIcon);

         contextMenu.getItems().addAll(sap_new,con_test_hier,cut,copy,paste,insert,edit,rename,delete,tag,refresh);
notification.setContextMenu(contextMenu);
 Group root = new Group();
        root.getChildren().add(notification);
         Scene scene = new Scene(root);
          scene.getStylesheets().add(Context.class.getResource("contextcolor.css").toExternalForm());
        stage.setScene(scene);
        stage.show();

       }
public static void main(String[] args) {
        launch(args);
    }
}

これらのメニューのために、私はこのようなスタイルを設定しました：---

。

root {
  -fx-background-color: cornsilk; 
  -fx-padding: 10;
}

.context-menu {
  -fx-background-color: #C8CFD7;
  -fx-border-color: #BBC2CC;
  -fx-text-fill: white;
}


.menu-item .label {
  -fx-fill:red;
    -fx-font-family:tahoma;
    -fx-font-size: 12px;;
    -fx-stroke:#C8CFD7;
    -fx-strok-width:.25;
}

.menu-item:focused .label {
  -fx-text-fill: white;
}
.menu-item{
    -fx-border-color: #DDDEE2 transparent #B9C0C8 transparent;

    -fx-border-width:0.50px;

}
.menu-item:focused {
     -fx-background: -fx-accent;
     -fx-background-color: #7092BE;
     -fx-text-fill: -fx-selection-bar-text;
}

正常に動作しています。背景色、境界線の色、アイコンの設定などを変更できます。

2
Nidhi