This discussion is archived
3 Replies Latest reply: Dec 16, 2012 6:37 AM by 975783 RSS

Using stylesheets right

975783 Newbie
Currently Being Moderated
Hi guys,
for a GUI i wanted to use a stylesheet to save code but i have some questions in how to use it.
1. Is it possible to make elements position flexible? So if i expand the scene the element will still be at xpos = 10% of Scene size or something like that.
2. I want to change the style of a slider. It should be like a Progressbar so everything in the track which is at the left side of the thumb should be in another color than the right side.
3. How can i set a background picture for the whole scene? I use some Panes which i add to a Group, which is given to the Scene. but if i want to change the background color i have to make it in every Pane. things like .scene{...} or .group{...} do not work. I have to configure it in every Pane but then it is not seen if i expand the scene.

Thanks for your attention ;)
  • 1. Re: Using stylesheets right
    David Grieve Pro
    Currently Being Moderated
    972780 wrote:
    1. Is it possible to make elements position flexible? So if i expand the scene the element will still be at xpos = 10% of Scene size or something like that.
    You can style translateX and translateY, but giving it a value of 10% is rather meaningless. What you want to do here is bind the translateX to the scene's width property
        @Override public void start(Stage stage) {
    
            Pane root = new Pane(); 
            root.setStyle("-fx-border-color: yellow;");
            root.setPrefSize(300, 250);
    
            Scene scene = new Scene(root, 300, 250); 
    
            Rectangle rect = new Rectangle(100, 62);
            rect.setStroke(Color.RED);
            root.getChildren().add(rect);
            rect.translateXProperty().bind(DoubleBinding.doubleExpression(scene.widthProperty()).multiply(.1));
            rect.translateYProperty().bind(DoubleBinding.doubleExpression(scene.heightProperty()).multiply(.1));
    
            stage.setScene(scene);
            stage.show();
        }
    2. I want to change the style of a slider. It should be like a Progressbar so everything in the track which is at the left side of the thumb should be in another color than the right side.
    The best place to start is with caspian.css, which you can extract from jfxrt.jar. Look for the .progress-bar and .slider styles. Create your own styles and add your stylesheet to the scene.
    3. How can i set a background picture for the whole scene? I use some Panes which i add to a Group, which is given to the Scene. but if i want to change the background color i have to make it in every Pane. things like .scene{...} or .group{...} do not work. I have to configure it in every Pane but then it is not seen if i expand the scene.
    Currently, the scene can't be styled by css. The technique most people use is to create a pane the fills the scene and then set -fx-background-image on it. If you add a -fx-background-image to the inline-style in the sample code above, you'll get what you want.
  • 2. Re: Using stylesheets right
    975783 Newbie
    Currently Being Moderated
    Thanks to the replay. But not everything is working.
    The background problem is solved :)
    The slider is still unsolved. I could not find any property which can make the slider looke like a Progressbar. The property .bar, what i think should be right is not available for slider. Is there any other solution than overlay the slider with a progress bar and bind the value?
    Also the position problem is not solved but that is because i did not get how to use it right :) May i just should start with the different layout panes.
  • 3. Re: Using stylesheets right
    975783 Newbie
    Currently Being Moderated
    Hi,
    i have tried to make my layout run but i still have some problems. For auto scaling my ui i use different kinds of pane to organize the positioning. But the alligment is not correct.
    I use this code:
    set_buttonicons();
            //write bars on the spectrum pane
            for (int i=0; i<BAND_NUMBER; i++)
            {
                band_spectrum.relocate(20+(10*i), 35);
    }
    title_label.relocate(20, 10);

    Pane controll_buttons = new Pane();
    controll_buttons.getChildren().addAll(backward_button,play_button,forward_button,stop_button);
    backward_button.relocate(0, 20);
    play_button.relocate(40, 20);
    forward_button.relocate(85, 20);
    stop_button.relocate(135, 27);
    controll_buttons.setMinSize(150, 30);

    GridPane settings_buttons = new GridPane();
    settings_buttons.setAlignment(Pos.CENTER);
    settings_buttons.setHgap(20);
    settings_buttons.setVgap(20);
    settings_buttons.setPadding(new Insets(0, 10, 0, 10));
    settings_buttons.add(equalizer_button,0,0);
    settings_buttons.add(mute_button,1,0);
    settings_buttons.add(repeat_button,0,1);
    settings_buttons.add(random_button,1,1);
    //settings_buttons.setMaxWidth(150);

    FlowPane settings = new FlowPane();
    settings.setAlignment(Pos.CENTER);
    settings.getChildren().addAll(settings_buttons,volume_slider);

    spectrum.getChildren().addAll(title_label);
    spectrum.getChildren().addAll(band_spectrum);

    BorderPane header_layout = new BorderPane();
    header_layout.setLeft(controll_buttons);
    header_layout.setCenter(spectrum);
    header_layout.setRight(settings);
    BorderPane.setAlignment(controll_buttons, Pos.CENTER_LEFT);
    BorderPane.setAlignment(spectrum, Pos.CENTER);
    BorderPane.setAlignment(settings, Pos.CENTER_RIGHT);
    I you can imagine how this should work out :) On the header there are buttungs which have a special shape and have to be next to each other. That is why i relocate them manually. The next pane should be the Audiospectrum where are shown. Last spectrum is with 4 rectagular positioned buttons and a slider to the left or under the buttons. The left pane should allways be on the left border of the scene. the spectrum pane allways in the middle and the last pane should allways be at the right border of the pane.
    But the spectrum is just moving in a very small space and the right pane is not at the right side of the scene. Can someone please tell me, where my error is? I also tried a HBox with regions between the panes. nearly the same result.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points