下面的代码设置在tabLayout的三个panel中分别加入一个iframe，通过panel的onactivate事件，改变iframe的src，详细示例可参考 bpdemos。

<layout:tabLayout id="content" tabPosition="bottom" border="false" jsvar="content">
    <layout:panel title="欢迎" jsvar="contentPanel" id="contentPanel" width="100%"
        style="height:100%" iconCls="demopanel-icon">
        <w:iframe style="width: 100%; height: 100%;" frameborder="no"
            id="contentPanelFrame" name="contentPanelFrame" onload="content.activate(contentPanel);"/>
    </layout:panel>
    <layout:panel title="示例详情" jsvar="detailPanel" id="detailPanel" width="100%"
        style="height:100%" disabled="true" iconCls="detailpanel-icon">
        <w:iframe style="width: 100%; height: 98%;" frameborder="no"
            id="detailPanelFrame"/>
    </layout:panel>
    <layout:panel title="查看代码" id="sourcePanel" width="100%" height="100%" iconCls="sourcepanel-icon">
        <w:iframe style="width: 100%; height: 100%;" frameborder="no"
            id="sourcePanelFrame" />
    </layout:panel>
</layout:tabLayout>

Managed bean：

@ManagedBean(name = "indexBean", scope = ManagedBeanScope.REQUEST)
public class IndexBean {

    ...

    @SaveState(timeOutAction = "refresh")
    private String activatePanel = "contentPanel";

    @Bind
    private UIPanel contentPanel;

    @Bind
    private UIPanel sourcePanel;

    @Bind
    private UIPanel detailPanel;

    @Bind
    private UIPanel listPanel;

    @Bind
    private UIIFrame contentPanelFrame;

    @Bind
    private UIIFrame sourcePanelFrame;

    @Bind
    private UIIFrame detailPanelFrame;

    @Bind
    private UIIFrame listPanelFrame;
    @Action
    public void contentPanel_onactivate() {
        activatePanel = "contentPanel";
        if (contentPanelFrame.getSrc() == null
                || "".equals(contentPanelFrame.getSrc())) {
            NavNode node = state.getSelectedNode();
            if (node == null || node.getUrl() == null || node.getUrl().length() == 0) {
                contentSrc = "/common/welcome.faces";
            } else {
                contentSrc = "/" + node.getUrl().replace(".", "/") + ".faces";
            }
            update.markAttributeUpdate(contentPanelFrame, "src");
        }
    }

    @Action
    public void detailPanel_onactivate() {
        activatePanel = "detailPanel";
        if (detailPanelFrame.getSrc() == null
                || "".equals(detailPanelFrame.getSrc())) {
            NavNode node = state.getSelectedNode();
            if (node != null && node.getDetail() != null && node.getDetail().length() > 0) {
                detailPanelFrame.load(node.getDetail().replace(".", "/") + ".faces");
            } else if (node != null && node.getType() == NavNode.TYPE_CASE) {
                detailPanelFrame.load("/common/defaultCaseDesc.faces");
            } else {
                detailPanelFrame.load("/common/detail-notfound.html");
            }
        }
    }

    @Action
    public void sourcePanel_onactivate() {
        activatePanel = "sourcePanel";
        if (sourcePanelFrame.getSrc() == null
                || sourcePanelFrame.getSrc().equals("")) {
            NavNode node = state.getSelectedNode();
            if (node != null && node.getType() == NavNode.TYPE_CASE) {
                sourcePanelFrame.setSrc("/common/source.faces");
            } else {
                sourcePanelFrame.setSrc("/common/source-notfound.html");
            }
            update.markAttributeUpdate(sourcePanelFrame, "src");
        }
    }
  
    ...
 
}