如何在面板内填充BrowserFrame？

我正在开发一个应用程序，它需要使用BrowserFrame在面板内显示网页，但我无法填充包含该框架的面板内的整个空间。如何在面板内填充BrowserFrame？

主视图码是这样的：

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

任何帮助，将不胜感激。

UPDATE： 我试图设置GraphViewercomponent大小为100％，但是我有结果是，如下所示：

（红色：视图的大小，绿色：帧大小）为先前图像的代码是这样的：

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

然后，如果我改变setSizeFull（）为frame.setSizeFull（），则帧显示这样的：

来源

2017-01-23 Javier Cruz

更新：原来的问题是，iframe元素（BrowserFrame）不能正确计算高度。

你可以试着用CSS解决这个问题。

添加样式名称到相框：

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

然后添加下面的CSS规则：

.embedded-frame iframe { 
    position: absolute;   
}

来源

2017-01-25 06:52:15

看不到任何东西，对不起。您最好在问题本身中包含更多信息。 –

更好：创建一个[MCVE]（https://stackoverflow.com/help/mcve）。只需删除不必要的代码并创建虚拟组件来演示您的布局代码。这将非常容易检查和调查。 –

感谢您的回答。我试图将'GraphViewer'组件大小设置为100％，但是我得到的结果如下所示： [Imgur]（http://i.imgur.com/9rwti31。保护无效初始化（）{ ExternalResource页面=新的ExternalResource（“graph.html”）; BrowserFrame frame = new BrowserFrame（“”，page）; setSizeFull（）; addComponent（frame）; } 然后，如果我改变'setSizeFull（）'为'frame.setSizeFull（）'，帧显示如下： [Imgur]（http://i.imgur.com/LpLBrBw.png） –

感谢您的回答。我试图设置GraphViewer元件尺寸为100％，但是我有结果是，如下所示：

Image1

（红色：视图的大小，绿色：帧大小）为代码先前图像是这样的：

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

然后，如果我改变setSizeFull()为frame.setSizeFull()，帧显示这样的：

Image2

来源

2017-01-30 13:02:16

您可以使用问题下的“编辑”按钮添加其他信息。 –

如何在面板内填充BrowserFrame？

回答

相关问题