如何在面板內填充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？

回答

相關問題