2013-04-24 7 views
8

सीएसएस का उपयोग करते हुए जावाएफएक्स 2 में, क्या 2 रंगों के साथ पृष्ठभूमि बनाना संभव है? उदाहरण के बारे में सोचो 10 पीएक्स की ऊंचाई के साथ TableCell। मैं पहले 2 पीएक्स (लंबवत) लाल होने के लिए चाहता हूं, शेष 8 पीएक्स (लंबवत) डिफ़ॉल्ट पृष्ठभूमि रंग पर रहेगा। जावाफैक्स 2 में सीएसएस का उपयोग करना संभव है? कैसे?जावाएफएक्स में 2 रंगों के साथ पृष्ठभूमि?

उदाहरण:

मूल पृष्ठभूमि:

enter image description here

वांछित परिणाम:

enter image description here (ऊपरी 2 पिक्सेल लाल द्वारा प्रतिस्थापित किया गया)

किसी भी संकेत के लिए धन्यवाद इस पर!

उत्तर

0

देखो, CSSRef को समझने के लिए:

http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

पर देखो

-fx-पृष्ठभूमि छवि:

uri [, uri] *

एक श्रृंखला अल्पविराम से अलग छवि यूआरआई का।

पर देखो -fx-पृष्ठभूमि दोहराने

दोहराने शैली [, दोहराने शैली] *

जहां दोहराने शैली = दोहराने-x | दोहराना-वाई | [दोहराना | अंतरिक्ष | दौर | खिंचाव | नो-दोहराना] {1,2}

अल्पविरामों द्वारा अलग मूल्यों की एक श्रृंखला। श्रृंखला में प्रत्येक दोहराव-शैली आइटम पृष्ठभूमि-छवि श्रृंखला में संबंधित छवि पर लागू होता है।

देखो पर: -fx-पृष्ठभूमि स्थिति

bg-स्थिति [, bg-स्थिति] * जहां = [ [[आकार | बाएं | केंद्र | सही] [आकार | शीर्ष | केंद्र | तल ]? ] | [[केंद्र | [बाएं | सही आकार? ] || [केंद्र | [शीर्ष | नीचे का आकार? ] ]

अल्पविरामों द्वारा अलग मूल्यों की एक श्रृंखला। श्रृंखला में प्रत्येक बीजी-स्थिति आइटम पृष्ठभूमि-छवि श्रृंखला में संबंधित छवि पर लागू होता है।

तो, आप क्या देख सकते हैं: आपको 2 छवियों का वर्णन करना चाहिए, (प्रत्येक 2x2 पिक्सेल प्रत्येक - एक लाल और एक ग्रे) दो बीजी पदों, और उनमें से प्रत्येक के लिए दो दोहराव शैलियों।

कैसे?

उदाहरण:

{ 
-fx-backdround-image : "path_to_red", "path_to_grey"; 
-fx-background-repeat : repeat-x, stretch; 
-fx-background-position : 0px 0px, 0px 2px; 
} 

मैं कोड की workness पर एक गारंटी नहीं देते, लेकिन यह विचार सही लगता है।

शायद इनसेट्स का उपयोग करते समय छवियों के बजाय रंगों के साथ संभव हो। मूल JavaFX सीएसएस से उदाहरण:

.table-row-cell:odd { 
    -fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%); 
    -fx-background-insets: 0, 0 0 1 0; 
} 

[6 अक्षर ...]

+0

आह, मुझे लगता है कि पता नहीं था कोई भी एकाधिक छवियों को सीधे निर्दिष्ट कर सकता है, हालांकि यदि मैं गलत नहीं हूं, तो छवियों की भी आवश्यकता नहीं है :-) संकेतों के लिए धन्यवाद! अभी तक इसका परीक्षण नहीं किया गया है, क्योंकि यह कुछ और झुकाव है (.table-row-cell में वास्तव में कोई सीमा नहीं है लेकिन सीमाओं को अनुकरण करने के लिए पृष्ठभूमि के साथ चाल करता है - चीजों को थोड़ा और जटिल बनाता है), लेकिन मैं यह भी मानता हूं कि यह काम करता है। अद्यतन का पालन करेंगे। –

+0

यदि आपको लगता है कि छवियों के बजाय आप पृष्ठभूमि रंग का उपयोग कर सकते हैं, लेकिन लगता है, आप गलत हैं, क्योंकि रंग का कोई आकार नहीं है, यह सिर्फ एक रंग है, लेकिन छवि का आकार है, इसलिए इसे दोहराया जा सकता है, आदि ...अन्यथा, आपको रंगीन smth का आकार निर्दिष्ट करना होगा .. –

+0

अलेक्जेंडर, यह अभी भी इन्सेट का उपयोग कर संभव है, अपनी पोस्ट/उत्तर देखें (मैंने इसे संपादित किया)। आप इस बारे में क्या सोचते हैं? –

12

मैं पृष्ठभूमि रंग का एक सरल परत इस्तेमाल किया एक लाल प्रकाश डाला (स्टीफन 'सुझाव दिया समाधान के समान) के उत्पादन के लिए।

/** 
* file: table.css 
* Place in same directory as TableViewPropertyEditorWithCSS.java. 
* Have your build system copy this file to your build output directory. 
**/ 

.highlighted-cell { 
    -fx-text-fill: -fx-text-inner-color; 
    -fx-background-color: firebrick, gainsboro; 
    -fx-background-insets: 0, 2 0 0 0; 
} 

एक stackpane की तरह एक मानक क्षेत्र के लिए, सभी तुम सच में क्या करने की जरूरत ऊपर सीएसएस (कम -fx-text-fill) लागू वांछित परिणाम प्राप्त करने के लिए है।


यहाँ एक ढाल का उपयोग कर रंग को परिभाषित करने के लिए एक और मुश्किल रास्ता है:

-fx-background-color: 
    linear-gradient(
    from 0px 0px to 0px 2px, 
     firebrick, firebrick 99%, 
    gainsboro 
); 

नीचे स्क्रीनशॉट में, वह मान कोशिकाओं highlighted-cell सीएसएस वर्ग उन्हें करने के लिए लागू होने से हाइलाइट किया जाता है () यदि मूल्य false है।

highlightedcells

हाइलाइट सेल शैली वर्ग स्विच तर्क:

public void updateItem(Object item, boolean empty) { 
    super.updateItem(item, empty); 
    if (empty) { 
    .... 
    getStyleClass().remove("highlighted-cell"); 
    } else { 
    if (getItem() instanceof Boolean && (Boolean.FALSE.equals((Boolean) getItem()))) { 
     getStyleClass().add("highlighted-cell"); 
    } else { 
     getStyleClass().remove("highlighted-cell"); 
    } 
    ... 
    } 
} 

यह अच्छा लग रहा है जब highlighted-cell शैली वर्ग (एक कस्टम सेल के लिए एक updateItem कॉल के दौरान) एक मानक तालिका सेल के लिए आवेदन किया लेकिन इसमें कुछ कमियां हैं। टेबल रंग योजना बहुत सूक्ष्म और जटिल है। इसमें अजीब/यहां तक ​​कि मूल्यों के लिए हाइलाइट्स, चयनित पंक्तियों के लिए हाइलाइट्स, चयनित छिद्रित पंक्तियों के लिए हाइलाइट्स, केंद्रित पंक्तियों और कोशिकाओं के लिए हाइलाइट आदि हैं। इसके अलावा इसमें उपरोक्त सभी के विभिन्न संयोजन हैं। हाइलाइट-सेल क्लास में सीधे पृष्ठभूमि-रंग को सेट करना आप जो चाहते हैं उसे हासिल करने के लिए एक प्रकार का क्रूर बल तरीका है क्योंकि यह इन सभी अन्य सूक्ष्मताओं को ध्यान में नहीं लेता है और केवल उन्हें ओवरराइड करता है, इसलिए एक सेल जिसे इसका उपयोग करके हाइलाइट किया गया है शैली हमेशा वही दिखती है चाहे कोई अस्थायी सीएसएस psuedo-class राज्य लागू नहीं किया गया हो।

यह वास्तव में ठीक है, लेकिन एक अच्छा समाधान हाइडेड सेल को psuedo-class राज्यों के आधार पर अलग-अलग रंग देगा। हालांकि यह करने के लिए काफी मुश्किल बात है और आप अच्छी तरह से बदलते हाइलाइट को प्राप्त करने के लिए विभिन्न राज्यों और सीएसएस चयनकर्ता संयोजनों के साथ खेलने में काफी समय बर्बाद कर सकते हैं। कुल मिलाकर, इस उदाहरण के लिए यह मेरे लिए अतिरिक्त प्रयास के लायक नहीं था, हालांकि यह आपके लिए हो सकता है।


टेस्ट कार्यक्रम (लंबाई और इस की जटिलता के लिए क्षमा याचना, यह सिर्फ आसान था मुझे एक मौजूदा कार्यक्रम में शैली तर्क पर प्रकाश डाला एकीकृत करने के लिए के लिए):

import java.lang.reflect.*; 
import java.util.logging.*; 
import javafx.application.Application; 
import javafx.beans.property.*; 
import javafx.beans.value.*; 
import javafx.collections.*; 
import javafx.event.EventHandler; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.control.TableColumn.CellEditEvent; 
import javafx.scene.control.cell.PropertyValueFactory; 
import javafx.scene.layout.*; 
import javafx.stage.Stage; 
import javafx.util.Callback; 
// click in the value column (a couple of times) to edit the value in the column. 
// property editors are defined only for String and Boolean properties. 
// change focus to something else to commit the edit. 
public class TableViewPropertyEditorWithCSS extends Application { 

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

    @Override 
    public void start(Stage stage) { 
    final Person aPerson = new Person("Fred", false, false, "Much Ado About Nothing"); 
    final Label currentObjectValue = new Label(aPerson.toString()); 
    TableView<NamedProperty> table = new TableView(); 
    table.setEditable(true); 
    table.setItems(createNamedProperties(aPerson)); 
    TableColumn<NamedProperty, String> nameCol = new TableColumn("Name"); 
    nameCol.setCellValueFactory(new PropertyValueFactory<NamedProperty, String>("name")); 
    TableColumn<NamedProperty, Object> valueCol = new TableColumn("Value"); 
    valueCol.setCellValueFactory(new PropertyValueFactory<NamedProperty, Object>("value")); 
    valueCol.setCellFactory(new Callback<TableColumn<NamedProperty, Object>, TableCell<NamedProperty, Object>>() { 
     @Override 
     public TableCell<NamedProperty, Object> call(TableColumn<NamedProperty, Object> param) { 
     return new EditingCell(); 
     } 
    }); 
    valueCol.setOnEditCommit(
      new EventHandler<CellEditEvent<NamedProperty, Object>>() { 
     @Override 
     public void handle(CellEditEvent<NamedProperty, Object> t) { 
     int row = t.getTablePosition().getRow(); 
     NamedProperty property = (NamedProperty) t.getTableView().getItems().get(row); 
     property.setValue(t.getNewValue()); 
     currentObjectValue.setText(aPerson.toString()); 
     } 
    }); 
    table.getColumns().setAll(nameCol, valueCol); 
    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY); 
    VBox layout = new VBox(10); 
    layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;"); 
    layout.getChildren().setAll(
      currentObjectValue, 
      table); 
    VBox.setVgrow(table, Priority.ALWAYS); 

    Scene scene = new Scene(layout, 650, 600); 
    scene.getStylesheets().add(getClass().getResource("table.css").toExternalForm()); 
    stage.setScene(scene); 
    stage.show(); 
    } 

    private ObservableList<NamedProperty> createNamedProperties(Object object) { 
    ObservableList<NamedProperty> properties = FXCollections.observableArrayList(); 
    for (Method method : object.getClass().getMethods()) { 
     String name = method.getName(); 
     Class type = method.getReturnType(); 
     if (type.getName().endsWith("Property")) { 
     try { 
      properties.add(new NamedProperty(name, (Property) method.invoke(object))); 
     } catch (IllegalAccessException | IllegalArgumentException | InvocationTargetException ex) { 
      Logger.getLogger(TableViewPropertyEditorWithCSS.class.getName()).log(Level.SEVERE, null, ex); 
     } 
     } 
    } 
    return properties; 
    } 

    public class NamedProperty { 

    public NamedProperty(String name, Property value) { 
     nameProperty.set(name); 
     valueProperty = value; 
    } 
    private StringProperty nameProperty = new SimpleStringProperty(); 

    public StringProperty nameProperty() { 
     return nameProperty; 
    } 

    public StringProperty getName() { 
     return nameProperty; 
    } 

    public void setName(String name) { 
     nameProperty.set(name); 
    } 
    private Property valueProperty; 

    public Property valueProperty() { 
     return valueProperty; 
    } 

    public Object getValue() { 
     return valueProperty.getValue(); 
    } 

    public void setValue(Object value) { 
     valueProperty.setValue(value); 
    } 
    } 

    public class Person { 

    private final SimpleStringProperty firstName; 
    private final SimpleBooleanProperty married; 
    private final SimpleBooleanProperty hasChildren; 
    private final SimpleStringProperty favoriteMovie; 

    private Person(String firstName, Boolean isMarried, Boolean hasChildren, String favoriteMovie) { 
     this.firstName = new SimpleStringProperty(firstName); 
     this.married = new SimpleBooleanProperty(isMarried); 
     this.hasChildren = new SimpleBooleanProperty(hasChildren); 
     this.favoriteMovie = new SimpleStringProperty(favoriteMovie); 
    } 

    public SimpleStringProperty firstNameProperty() { 
     return firstName; 
    } 

    public SimpleBooleanProperty marriedProperty() { 
     return married; 
    } 

    public SimpleBooleanProperty hasChildrenProperty() { 
     return hasChildren; 
    } 

    public SimpleStringProperty favoriteMovieProperty() { 
     return favoriteMovie; 
    } 

    public String getFirstName() { 
     return firstName.get(); 
    } 

    public void setFirstName(String fName) { 
     firstName.set(fName); 
    } 

    public Boolean getMarried() { 
     return married.get(); 
    } 

    public void setMarried(Boolean isMarried) { 
     married.set(isMarried); 
    } 

    public Boolean getHasChildren() { 
     return hasChildren.get(); 
    } 

    public void setHasChildren(Boolean hasChildren) { 
     this.hasChildren.set(hasChildren); 
    } 

    public String getFavoriteMovie() { 
     return favoriteMovie.get(); 
    } 

    public void setFavoriteMovie(String movie) { 
     favoriteMovie.set(movie); 
    } 

    @Override 
    public String toString() { 
     return firstName.getValue() + ", isMarried? " + married.getValue() + ", hasChildren? " + hasChildren.getValue() + ", favoriteMovie: " + favoriteMovie.get(); 
    } 
    } 

    class EditingCell extends TableCell<NamedProperty, Object> { 

    private TextField textField; 
    private CheckBox checkBox; 

    public EditingCell() { 
    } 

    @Override 
    public void startEdit() { 
     if (!isEmpty()) { 
     super.startEdit(); 
     if (getItem() instanceof Boolean) { 
      createCheckBox(); 
      setText(null); 
      setGraphic(checkBox); 
     } else { 
      createTextField(); 
      setText(null); 
      setGraphic(textField); 
      textField.selectAll(); 
     } 
     } 
    } 

    @Override 
    public void cancelEdit() { 
     super.cancelEdit(); 
     if (getItem() instanceof Boolean) { 
     setText(getItem().toString()); 
     } else { 
     setText((String) getItem()); 
     } 
     setGraphic(null); 
    } 

    @Override 
    public void updateItem(Object item, boolean empty) { 
     super.updateItem(item, empty); 
     if (empty) { 
     setText(null); 
     setGraphic(null); 
     getStyleClass().remove("highlighted-cell"); 
     } else { 
     if (getItem() instanceof Boolean && (Boolean.FALSE.equals((Boolean) getItem()))) { 
      getStyleClass().add("highlighted-cell"); 
     } else { 
      getStyleClass().remove("highlighted-cell"); 
     } 
     if (isEditing()) { 
      if (getItem() instanceof Boolean) { 
      if (checkBox != null) { 
       checkBox.setSelected(getBoolean()); 
      } 
      setText(null); 
      setGraphic(checkBox); 
      } else { 
      if (textField != null) { 
       textField.setText(getString()); 
      } 
      setText(null); 
      setGraphic(textField); 
      } 
     } else { 
      setText(getString()); 
      setGraphic(null); 
     } 
     } 
    } 

    private void createTextField() { 
     textField = new TextField(getString()); 
     textField.setMinWidth(this.getWidth() - this.getGraphicTextGap() * 2); 
     textField.focusedProperty().addListener(new ChangeListener<Boolean>() { 
     @Override 
     public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) { 
      if (!newValue) { 
      commitEdit(textField.getText()); 
      } 
     } 
     }); 
    } 

    private void createCheckBox() { 
     checkBox = new CheckBox(); 
     checkBox.setSelected(getBoolean()); 
     checkBox.setMinWidth(this.getWidth() - this.getGraphicTextGap() * 2); 
     checkBox.focusedProperty().addListener(new ChangeListener<Boolean>() { 
     @Override 
     public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) { 
      if (!newValue) { 
      commitEdit(checkBox.isSelected()); 
      } 
     } 
     }); 
    } 

    private String getString() { 
     return getItem() == null ? "" : getItem().toString(); 
    } 

    private Boolean getBoolean() { 
     return getItem() == null ? false : (Boolean) getItem(); 
    } 
    } 
} 
+1

वाह, आपने यहां निवेश किए गए इतने सारे काम के लिए धन्यवाद! –

+0

बहुत अच्छा। धन्यवाद। – jkaufmann

संबंधित मुद्दे