Cách thức include nhiều file xhtml trong jsf và PrimeFaces

charlietran1986

New Member
11/8/20
1
0
1
Hà Nội
Chào cả nhà! Mình đang phát triển một ứng dụng web với jsf 2.3 và PrimeFaces 8.0. Trong ứng dụng, mình sử dụng một <p:ribbon> để phân chia các <p:tab>, trong mỗi <p:tab> có chứa nhiều <p:commandButton>, khi click vào mỗi button này sẽ gọi và mở một dialog để nhập liệu. Mỗi dialog được gói trong một <ui:composition> và đặt trong một file xhtml riêng rẽ. Dưới đây là mã của file header. xhtml
Code:
<?xml version = "1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition>
            <!-- Ribbon menu -->
            <h:form id="ribbonFrm">
                <p:ribbon id="ribbon">
                    <p:tab title="Hệ thống">
                        <p:ribbonGroup style="width:110px">
                            <p:commandButton value="Ngày HT" icon="fa fa-calendar" partialSubmit="true" class="column-1" style="width: 95px;" onclick="PF('startDate').show()" disabled="#{not sessionInfoBean.dbOpened}" update="@form" />
                            <p:commandButton value="Tìm kiếm" icon="fa fa-search" type="button" class="column-1" style="width: 95px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Báo cáo" icon="fa fa-file" type="button" class="column-1" style="width: 95px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                        </p:ribbonGroup>

                        <p:ribbonGroup style="width:130px">
                            <p:commandButton value="Tạo CSDL" icon="fa fa-database" class="column-1" style="width: 115px;" type="button" onclick="PF('newDbDlg').show();" disabled="#{not facesContext.externalContext.isUserInRole('ADMIN')}" update="@form"/>
                            <p:commandButton value="Tùy chọn" icon="fa fa-gear" class="column-1" style="width: 115px;" type="button" onclick="PF('optionsDlg').show();" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton id="users" value="Người dùng" type="button" icon="fa fa-user-circle" class="column-1" style="width: 115px" disabled="#{not sessionInfoBean.dbOpened}"/>
                            <p:menu overlay="true" trigger="users" my="left top" at="left bottom">
                                <p:menuitem value="Thay đổi mật khẩu" onclick="PF('changePwdDlg').show();" icon="fa fa-key" style="width: 160px"/>
                                <p:menuitem value="Quản lý người dùng" onclick="PF('usersDlg').show();" icon="fa fa-users" style="width: 160px"/>
                                <p:menuitem value="Nhật ký truy nhập" onclick="PF('loginDiaryDlg').show();" icon="fa fa-sign-out" style="width: 160px"/>
                            </p:menu>
                        </p:ribbonGroup>

                        <p:ribbonGroup style="width:500px">
                            <p:commandButton value="Sao lưu..." icon="fa fa-download" type="button" class="column-1" style="width: 140px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Thông tin về CSDL" icon="fa fa-info-circle" type="button" class="column-1" style="width: 150px;"  disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Nhập dữ liệu" icon="fa fa-upload" type="button" class="column-1" style="width: 130px;"  disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Phục hồi..." type="button" icon="fa fa-recycle" class="column-1" style="width: 140px;"  disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Bảo trì và hợp lệ" icon="fa fa-wrench" type="button" class="column-1" style="width: 150px;"  disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Xuất dữ liệu"  type="button" class="column-1" style="width: 130px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Chuyển đổi CSDL" icon="fa fa-exchange" type="button" class="column-1" style="width: 140px;"  disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Thư mục hồ sơ" icon="fa fa-folder" type="button" class="column-1" style="width: 150px;"  disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Tùy chọn kỳ báo cáo" type="button" class="column-1" style="width: 130px;"  disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                        </p:ribbonGroup>
                        <p:ribbonGroup style="float: right; width: 150px">
                            <p:commandButton value="#{sessionInfoBean.currentUser}" icon="fa fa-user-circle" style="width: 150px"/>
                            <p:commandButton value="#{sessionInfoBean.currentDatabase}" icon="fa fa-database" style="width: 150px"/>
                            <p:commandButton value="Đăng xuất" action="#{logoutMB.doLogout}" icon="fa fa-sign-out" style="width: 150px"/>
                        </p:ribbonGroup>
                    </p:tab>
                    <p:tab title="Tìm kiếm">
                        <p:ribbonGroup style="width:110px">
                            <p:commandButton value="Ngày HT" icon="fa fa-calendar" partialSubmit="true" class="column-1" style="width: 95px;" onclick="PF('startDate').show()" disabled="#{not sessionInfoBean.dbOpened}" process="@this" />
                            <p:commandButton value="Tìm kiếm" icon="fa fa-search" type="button" class="column-1" style="width: 95px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Báo cáo" icon="fa fa-file" type="button" class="column-1" style="width: 95px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                        </p:ribbonGroup>
                        <p:ribbonGroup style="width:340px">
                            <p:commandButton value="Tìm kiếm chứng từ" icon="fa fa-search" type="button" class="column-1" style="width: 150px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Tìm kiếm hợp đồng" icon="fa fa-search" type="button" class="column-1" style="width: 160px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Tìm kiếm hồ sơ" icon="fa fa-search" type="button" class="column-1" style="width: 150px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                            <p:commandButton value="Tìm kiếm và thay thế" icon="fa fa-search" type="button"  class="column-1" style="width: 160px;" disabled="#{not sessionInfoBean.dbOpened}" update="@form"/>
                        </p:ribbonGroup>
                        <p:ribbonGroup style="float: right; width: 150px">
                            <p:commandButton value="#{sessionInfoBean.currentUser}" icon="fa fa-user-circle" style="width: 150px"/>
                            <p:commandButton value="#{sessionInfoBean.currentDatabase}" icon="fa fa-database" style="width: 150px"/>
                            <p:commandButton value="Đăng xuất" action="#{logoutMB.doLogout}" icon="fa fa-sign-out" style="width: 150px"/>
                        </p:ribbonGroup>
                    </p:tab>
                </p:ribbon>
            </h:form>
            <!-- End ribbon menu -->
        </ui:composition>

    </body>
</html>
Mình muốn hỏi cách include các file chứa các dialogs để khi click vào các button ở trên thì các dialog được mở ra. Mình đã thử dùng <ui:include > để include file vào ngay sau ribbon nêu trên nhưng toàn phát sinh lỗi sau:
Widget for var 'startDate' not available!
Uncaught TypeError: Cannot read property 'show' of undefined
Mình đoán lỗi này là do widget var chưa được khởi tạo. Vậy làm cách nào để include các file chưa dialogs và khởi tạo các widget vars trước khi click vào button.