सीएसएस का उपयोग कर जावाएफएक्स कॉन्टेक्स्टमेनू के लिए शैली को आप कैसे सेट करते हैं?

Question

मैं एक अलग सीएसएस फ़ाइल का उपयोग कर ContextMenu आइटम की शैली बदलने की कोशिश कर रहा हूं। मैं caspian.css अनुभाग को देखा और निम्नलिखित परिभाषा पाया:

• .context-मेनू
• .context-मेनू .separator
• .context-मेनू .scroll-तीर
• .context- मेनू .scroll-तीर: मंडराना
• .context-मेनू: शो-स्मृति सहायकों .mnemonic-रेखांकन

मैं बिल्कुल मेरी सीएसएस फ़ाइल के लिए अधिक उम्र के लोगों की नकल की और सिर्फ पृष्ठभूमि रंग बदल परीक्षण के रूप में मूल्य:

.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 दृश्य बिल्डर को खोल दिया। मैंने संदर्भ मेनू के लिए सीएसएस अनुभाग के स्टाइल करने योग्य हिस्सों के तहत देखा है जो CSSBridge[context-menu] सूचीबद्ध है जो अजीब लगता है। लेबल जैसी अन्य चीजें Label[label] हैं।

क्या कोई मुझे बता सकता है कि यहां क्या हो रहा है, क्योंकि यह संदर्भ मेनू के लिए मेरी सीएसएस फ़ाइल को अनदेखा कर रहा है और caspian.css में डिफ़ॉल्ट मानों का उपयोग कर रहा है?

---

अटैच किया जा रहा नमूना FXML फ़ाइल, सीएसएस और जावा कोड को चलाने के लिए।

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(); 
    } 
} 

Answer 1

यहाँ एक सी है सीएसएस के माध्यम से एक जावाएफएक्स संदर्भ मेनू स्टाइल करने का एक उदाहरण।

WinXPsp3, Jdk7u6b14ea, JavaFX 2.2b12 पर परीक्षण किया गया।

जावा एप्लिकेशन

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(); 
    } 
} 

सीएसएस स्टाइलशीट

/** 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; 
} 

मैं तुम्हें सटीक कारण अपने सीएसएस स्टाइल के रूप में आप अपेक्षानुसार काम नहीं किया था नहीं बता सकता। कुछ संभावित कारण हैं:

1. आप इसे सही तरीके से लोड नहीं कर रहे हैं।
2. आपकी सीएसएस फ़ाइल आपके आउटपुट पथ पर कॉपी नहीं की गई है।
3. आपका सीएसएस फ़ाइल अन्यथा दूषित या वाक्य रचना सही नहीं है।
4. आप जो सीएसएस से कठिनाई स्टाइल संदर्भ मेनू है JavaFX के पिछले संस्करण का उपयोग कर रहे हैं।

अद्यतन

अपने प्रश्न में पूरा कोड जहां सीएसएस फ़ाइल fxml के माध्यम से भरी हुई है को देखते हुए, मैं आपकी समस्या जहां संदर्भ मेनू स्टाइल नहीं है पुन: पेश कर सकते हैं। तो इसके बजाय fxml में स्टाइलशीट स्थापित करने की, मैं स्टाइलशीट दृश्य पर कोड में सेट (अपने परीक्षण अनुप्रयोग में के रूप में), तो यह सब ठीक काम करता है।

अंतर जब सीएसएस fxml के माध्यम से सेट कर दिया जाता है कि fxml दृश्य पर स्टाइलशीट की स्थापना नहीं कर रहा है, लेकिन इसके बजाय दृश्य की मूल रूट नोड पर है। यदि कोड में मैं स्टाइलशीट को दृश्य के बजाय माता-पिता में जोड़ता हूं, तो मैं कोड कार्यान्वयन से fxml के समान व्यवहार के साथ समाप्त होता हूं। तो यह वास्तव में fxml प्रति से एक मुद्दा नहीं है, बल्कि यह जावाएफएक्स 2.2 सीएसएस प्रसंस्करण के विरासत नियमों के साथ जारी है। आईएमओ, सीएसएस प्रसंस्करण गलत है - शैली स्टाइलशीट दृश्य पर या दृश्य के रूट नोड पर सेट की गई होनी चाहिए।

मैं अपने परीक्षण मामले के साथ http://javafx-jira.kenai.com पर जावाएफएक्स रनटाइम नियंत्रणों के खिलाफ एक बग दर्ज करने और इस स्टैक ओवरफ्लो प्रश्न पर एक लिंक वापस करने की सलाह देता हूं और जावाएफएक्स टीम उचित समय में इस मुद्दे को हल करेगी।

समाधान के लिए, अभी के लिए कोड में दृश्य पर अपने स्टाइलशीट निर्धारित किया है।

---

अद्यतन इस समस्या के लिए

मूल कारण RT-19435: popup control not styled be parent's style sheet declarations प्रतीत होता है।

Answer 2

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); 
    } 
} 

इन मेनू मैं इस तरह syles निर्धारित किया है के लिए: ---

।

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; 
} 

यह ठीक चल रहा है मैं (प्रतीक आदि