Question

我正在开发一个应用程序，它需要使用BrowserFrame在Panel中显示一个网页，但我不能让它填充包含框架的Panel内的整个空间。

主视图代码如下：

public class MyUI extends UI implements ViewDisplay {

private static final long serialVersionUID = -3506630583522354337L;
private Panel springViewDisplay;
@Override
protected void init(VaadinRequest request) {

     final VerticalLayout root = new VerticalLayout();
     root.setSizeFull();
     root.setMargin(true);
     root.setSpacing(true);
     setContent(root);
     final CssLayout navigationBar = new CssLayout();
     navigationBar.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
     navigationBar.addComponent(createNavigationButton("Subir fichero",
                FileUpload.VIEW_NAME));

     navigationBar.addComponent(createNavigationButton("Visor grafico", 
             GraphViewer.VIEW_NAME));

     root.addComponent(navigationBar);

      springViewDisplay = new Panel();
      springViewDisplay.setSizeFull();
      root.addComponent(springViewDisplay);
      root.setExpandRatio(springViewDisplay, 1.0f);

}

private Button createNavigationButton(String caption,
        final String viewName) {
    Button button = new Button(caption);
    button.addStyleName(ValoTheme.BUTTON_SMALL);

     button.addClickListener(
            event -> getUI().getNavigator().navigateTo(viewName));
    return button;
}


@Override
public void showView(View view) {
    springViewDisplay.setContent((Component) view);

}

}

显示html文件的视图是一个不同的java类：

@SpringView(name = GraphViewer.VIEW_NAME)
public class GraphViewer extends VerticalLayout implements View {

private static final long serialVersionUID = 3328857273907967208L;
public static final String VIEW_NAME = "viewer";
private final Logger log = LoggerFactory.getLogger(this.getClass());

@PostConstruct
protected void init(){
    ExternalResource page = new ExternalResource("graph.html");

    BrowserFrame frame = new BrowserFrame("", page);
    frame.setSizeFull();

    addComponent(frame);
}

@Override
public void enter(ViewChangeEvent event) {
}
}

任何帮助都将不胜感激。

更新我试图将GraphViewercomponent大小设置为100％，但我得到的结果如下所示：

（红色：视图大小，绿色：帧大小）上一个图像的代码如下：

protected void init(){
    ExternalResource page = new  ExternalResource("graph.html");
    BrowserFrame frame = new BrowserFrame("", page);
    setSizeFull();
    addComponent(frame);
}

然后，如果我为frame.setSizeFull（）更改setSizeFull（），框架显示如下：

Answer 1

更新：原来问题是iframe元素（BrowserFrame）无法正确计算高度。

您可以尝试使用CSS解决此问题。

为您的相框添加样式名称：

BrowserFrame frame = new BrowserFrame("", page);
frame.addStyleName("embedded-frame");
setSizeFull();

然后添加以下CSS规则：

.embedded-frame iframe {
    position: absolute;        
}

Answer 2

感谢您的回答。我试图将GraphViewer组件大小设置为100％，但我得到的结果如下所示：

Image1

（红色：视图大小，绿色：帧大小）上一张图片的代码如下：

protected void init(){
    ExternalResource page = new  ExternalResource("graph.html");
    BrowserFrame frame = new BrowserFrame("", page);
    setSizeFull();
    addComponent(frame);
}

然后，如果我更改setSizeFull()的{{1}}，则框架会显示如下：

Image2

如何在Panel中填充BrowserFrame？

2 个答案: