Saltar al contenido

Sombra paralela en un panel sin decorar

Después de de una larga recopilación de datos hemos podido resolver esta duda que suelen tener algunos usuarios. Te ofrecemos la solución y deseamos servirte de mucha apoyo.

Solución:

El ejemplo anterior funciona para mí

El código de ejemplo proporcionado para la respuesta a ¿Cómo agregar sombra a la ventana en JavaFX? funciona bien para mí (sombra en el cuadro de diálogo visible) en Java 8b96, Windows 7. Cuando lo escribí para JavaFX 2, también funcionó en ese entorno.

No podría decir exactamente lo que se está perdiendo en su ejemplo, ya que no proporcionó el código ejecutable completo.

dialogo-transparente

Posible problema con su código

Supongo que no está insertando el contenido de fondo para que haya espacio en el cuadro de diálogo para que se muestre la sombra. Es decir, está llenando el cuadro de diálogo con contenido y no deja espacio en el cuadro de diálogo alrededor del contenido para que se muestre el efecto. El siguiente ejemplo logra la inserción con la regla css -fx-background-insets: 12;

Código de muestra actualizado

Copié una versión modificada del código de ejemplo en esta respuesta para que no solo esté contenida en un enlace esencial oscuro de otra respuesta. Las modificaciones son solo para usar llamadas API estándar, ya que los constructores utilizados en la respuesta original han quedado obsoletos desde que se creó la respuesta original.

ModalConfirmExample.java

import javafx.application.Application;
import javafx.beans.value.*;
import javafx.concurrent.Worker;
import javafx.event.*;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.effect.BoxBlur;
import javafx.scene.effect.Effect;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.web.WebView;
import javafx.stage.Modality;
import javafx.stage.*;

/**
 * Application modal dialog with the following properties:
 *   translucent background
 *   drop-shadowed border
 *   non-rectangular shape
 *   blur effect applied to parent when dialog is showing
 *   configurable message text
 *   configurable yes and no event handlers
 */
class ModalDialog extends Stage 
    private static final Effect parentEffect = new BoxBlur();

    private final String messageText;
    private final EventHandler yesEventHandler;
    private final EventHandler noEventHandler;

    public ModalDialog(
            Stage parent,
            String messageText,
            EventHandler yesEventHandler,
            EventHandler noEventHandler) 
        super(StageStyle.TRANSPARENT);

        this.messageText = messageText;
        this.yesEventHandler = yesEventHandler;
        this.noEventHandler = noEventHandler;

        // initialize the dialog
        initOwner(parent);
        initParentEffects(parent);
        initModality(Modality.APPLICATION_MODAL);
        setScene(createScene(createLayout()));
    

    private StackPane createLayout() 
        StackPane layout = new StackPane();
        layout.getChildren().setAll(
                createGlassPane(),
                createContentPane()
        );

        return layout;
    

    private Pane createGlassPane() 
        final Pane glassPane = new Pane();
        glassPane.getStyleClass().add(
                "modal-dialog-glass"
        );

        return glassPane;
    

    private Pane createContentPane() 
        final HBox contentPane = new HBox();
        contentPane.getStyleClass().add(
                "modal-dialog-content"
        );
        contentPane.getChildren().setAll(
                new Label(messageText),
                createYesButton(),
                createNoButton()
        );

        return contentPane;
    

    private Button createYesButton() 
        final Button yesButton = new Button("Yes");
        yesButton.setDefaultButton(true);
        yesButton.setOnAction(yesEventHandler);

        return yesButton;
    

    private Button createNoButton() 
        final Button noButton = new Button("No");
        noButton.setOnAction(noEventHandler);

        return noButton;
    

    private Scene createScene(StackPane layout) 
        Scene scene = new Scene(layout, Color.TRANSPARENT);
        scene.getStylesheets().add(
                getClass().getResource(
                        "modal-dialog.css"
                ).toExternalForm()
        );

        return scene;
    

    private void initParentEffects(final Stage parent) 
        this.showingProperty().addListener(new ChangeListener() 
            @Override public void changed(ObservableValue observableValue, Boolean wasShowing, Boolean isShowing) 
                parent.getScene().getRoot().setEffect(
                        isShowing ? parentEffect : null
                );
            
        );
    


/**
 * Demonstrates a modal confirm box in JavaFX.
 * Dialog is rendered upon a blurred background.
 * Dialog is translucent.
 */
public class ModalConfirmExample extends Application 
    public static void main(String[] args) 
        launch(args);
    

    @Override
    public void start(final Stage primaryStage) 
        final WebView webView = new WebView();

        final ModalDialog dialog = createWebViewPreferenceDialog(primaryStage, webView);

        // show the preference dialog each time a new page is loaded.
        webView.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener() 
            @Override
            public void changed(ObservableValue observableValue, Worker.State state, Worker.State newState) 
                if (newState.equals(Worker.State.SUCCEEDED)) 
                    dialog.show();
                    dialog.toFront();
                
            
        );
        webView.getEngine().load("http://docs.oracle.com/javafx/");

        // initialize the stage
        primaryStage.setTitle("Modal Confirm Example");
        primaryStage.setScene(new Scene(webView));
        primaryStage.show();
    

    private ModalDialog createWebViewPreferenceDialog(final Stage primaryStage, final WebView webView) 
        final EventHandler yesEventHandler =
                new EventHandler() 
                    @Override public void handle(ActionEvent actionEvent) 
                        System.out.println("Liked: " + webView.getEngine().getTitle());
                        primaryStage.getScene().getRoot().setEffect(null);
                        Stage dialogStage = getTargetStage(actionEvent);
                        dialogStage.close();
                    
                ;

        final EventHandler noEventHandler =
                new EventHandler() 
                    @Override public void handle(ActionEvent actionEvent) 
                        System.out.println("Disliked: " + webView.getEngine().getTitle());
                        primaryStage.getScene().getRoot().setEffect(null);
                        Stage dialogStage = getTargetStage(actionEvent);
                        dialogStage.close();
                    
                ;

        return new ModalDialog(primaryStage, "Will you like this Page?", yesEventHandler, noEventHandler);
    

    private Stage getTargetStage(ActionEvent actionEvent) 
        Node target = (Node) actionEvent.getTarget();
        return ((Stage) target.getScene().getWindow());
    

modal-dialog.css

.root 
  -fx-opacity: 0.9;


.modal-dialog-glass 
  -fx-effect: dropshadow(three-pass-box, derive(cadetblue, -20%), 10, 0, 4, 4); 
  -fx-background-color: derive(cadetblue, -20%); 
  -fx-background-insets: 12; 
  -fx-background-radius: 6;


.modal-dialog-content 
  -fx-padding: 20;
  -fx-spacing: 10;
  -fx-alignment: center;
  -fx-font-size: 20;
  -fx-background-color: linear-gradient(to bottom, derive(cadetblue, 20%), cadetblue);
  -fx-border-color: derive(cadetblue, -20%);
  -fx-border-width: 5;
  -fx-background-insets: 12;
  -fx-border-insets: 10;
  -fx-border-radius: 6;
  -fx-background-radius: 6;

Utilice una biblioteca en su lugar

También tenga en cuenta que para crear cuadros de diálogo, recomiendo encarecidamente utilizar el proyecto ControlsFX en lugar de crear su propio sistema de diálogo. Si ControlsFX carece de las funciones que necesita (como el soporte de sombra paralela), puede presentar una solicitud de función para eso contra el proyecto ControlsFX y vincular a esta respuesta si es necesario.

Sencillo laboral ejemplo.

Ejemplo de primer resultadoEjemplo de segundo resultado

Aquí está fxml estructura:

AnchorPane(200,200) // pane for space for shadow
    - AnchorPane(center) // appliction pane
         - Label // application content

Verdadero screen.fxml:


   
      
         
            
         
            
         
      
   

Main.java

@Override
public void start(Stage stage) throws Exception 
    FXMLLoader loader = new FXMLLoader(getClass().getResource("/sample/screen.fxml"));
    AnchorPane shadowPane = loader.load();
    AnchorPane rootPane = (AnchorPane) shadowPane.lookup("#rootPane");
    rootPane.setStyle("-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 10, 0.5, 0.0, 0.0);" +
                      "-fx-background-color: white;"); // Shadow effect

    Scene scene = new Scene(shadowPane);
    stage.setScene(scene);

    shadowPane.setBorder(new Border(new BorderStroke(Color.RED, BorderStrokeStyle.SOLID, null, null))); // Some borders for for clarity

    shadowPane.setStyle("-fx-background-color: transparent;"); // Makes shadowPane transparent
    scene.setFill(Color.TRANSPARENT); // Fill our scene with nothing
    stage.initStyle(StageStyle.TRANSPARENT); // Important one!
    stage.show();

valoraciones y comentarios

Si eres capaz, eres capaz de dejar una noticia acerca de qué le añadirías a este post.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *